mi6 / mi6/ic-ui-kit

[ic-select] Loading and error state accessibility issues

Open
#4,392 0 comments 0 reactions 0 assignees View on GitHub
a11y select component
Dominant language
TypeScript
Stars
53
Forks
63
Avg merge
2d 4h
Merged PRs (30d)
15

Description

### Summary of the bug
On an ic-select, the loading state and loading error message aren't read out by a screen reader

### 🪜 How to reproduce
Tell us the steps to reproduce the problem:
1. Go to page: [Error/loading storybook](https://mi6.github.io/ic-ui-kit/branches/develop/react/iframe.html?globals=&args=&id=select-single--loading-with-error&viewMode=story)
2. Turn on screen reader
3. Click on: The select dropdown
4. The screen reader does not read out anything related to the loading state, or the error message

### 🖥 📱 Device
- Type: [e.g. Desktop, mobile]
- Device: [e.g. iPhone, MacBook, ThinkPad]
- OS version: [e.g. macOS13, iOS16, Android 13]
- Browser version: [e.g. Chrome 115, Safari 16]

### 🧐 Expected behaviour
The screen reader should give some information regarding the loading state
The screen reader should read out the error message

### 📝 Acceptance Criteria
If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.

*Given* An ic-select is in an error or loading state
*When* A screen reader user navigates onto the ic-select
*Then* The screen reader announces the error message, or the state of loading

### 🚨 Urgency (low, medium or high)

Contributor guide

Open the contributing guide

Research direction

Start with the ic-select Error/loading Storybook story linked in the issue and reproduce the behavior with a screen reader. Trace how the loading and error states are exposed to assistive technology; done means navigating to the select announces the loading state or error message.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.