mi6 / mi6/ic-ui-kit

[ic-button] Icon variant reads label twice to Voiceover screenreader

Open
#4,249 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

a11y
Dominant language
TypeScript
Stars
53
Forks
63
Avg merge
2d 4h
Merged PRs (30d)
15

Description

### Summary of the bug
Using Voiceover, icon button variants read their label out twice.
This occurs in Icon Buttons, and the close button in Dialog and the incoming Drawer (because they're both icon buttons).

This issue doesn't seem to occur on NVDA. Somehow VO is reading the tooltip text (if disableTooltip is true, the label only reads once) and NVDA isn't.

### 🪜 How to reproduce
Tell us the steps to reproduce the problem:
1. Go to [Button - Icon only](https://mi6.github.io/ic-ui-kit/branches/develop/react/?path=/story/button--icon-only) story
2. Turn on Voiceover and tab through the buttons
3. Notice that the label of the button is read twice.

### 📸 Screenshots or code
Image

### 🖥 📱 Device
- Type: Desktop
- Device: Macbook
- Browser version: Chrome

### 🧐 Expected behaviour
Would expect it only to read the button label once.

Whatever the solution is, it mustn't negatively impact behaviour in NVDA.

### 🚨 Urgency (low, medium or high)
If applicable, tell us how urgent it is that this issue gets resolved, based on the impact it has on your team's work or project timeline.

Low

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Use the linked Button - Icon only story as the reproduction entry point. Trace the icon-button tooltip and label behavior, including the Dialog close button and incoming Drawer cases, while comparing VoiceOver with NVDA. Done means VoiceOver reads the label once and NVDA behavior remains unchanged.

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
Clearly specified
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.