Screen readers don't announce when a button has changed to its loading state
- Dominant language
- TypeScript
- Stars
- 53
- Forks
- 63
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 15
Description
### Summary of the bug
When a button is changed to its loading state, the screen reader doesn't announce this so there is no feedback to the user to tell them that the button is loading.
### 🪜 How to reproduce
1. Go to this [StackBlitz](https://stackblitz.com/edit/yc3cc9rz-gpeerozh?file=src%2Fapp.tsx&hideExplorer=1).
2. While using a screen reader, tab to the button and press Enter / Space to click it.
3. See that the button is in its loading state visually but the screen reader doesn't announce this.
### 🧐 Expected behaviour
The screen reader should announce that the button is in its loading state, so that the user is aware that content is loading.
At the moment, a loading button has an aria-label of "Loading", so users will only know that its loading when they tab to after it is already in its loading state. And not when it changes whilst already focussed.
### 🚨 Urgency (low, medium or high)
Medium urgency. This is an accessibility issue, but there is a workaround - adding a [separate aria-live region](https://stackblitz.com/edit/yc3cc9rz-55xsgtmm?file=src%2Fapp.tsx&hideExplorer=1).
### Additional info
I think adding an aria-live region would work. It would be just like the StackBlitz linked above, except the aria-live region is built into the ``.
Contributor guide
Research direction
Start with the implementation and reproduce the focused loading-state case using the linked StackBlitz and a screen reader. Investigate how the component exposes its loading state, then verify that changing to loading is announced while focus remains on the button, including the proposed built-in live-region behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- 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