mi6 / mi6/ic-ui-kit

Screen readers don't announce when a button has changed to its loading state

Open
#3,899 0 comments 0 reactions 0 assignees View on GitHub
a11y component: ic-button
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.