[ic-select] Loading and error state accessibility issues
- 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
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