mi6 / mi6/ic-ui-kit

[ic-popover-menu]: Toggle variant menu items don't read as 'checked' to screenreaders

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

Description

### Summary of the bug

Using Voiceover, when navigating a popover menu with toggleable items, I found that I could not identify whether a `variant='toggle'` item was checked or not, and therefore couldn't tell that it could be toggled.

### 🪜 How to reproduce

1. Activate your screenreader
2. Go to [default popover storybook](https://mi6.github.io/ic-ui-kit/branches/develop/react/?path=/story/popover-menu--default)
3. navigate the menu (Actions > Find > Show Found Results)
4. Notice that Show Found Results doesn't tell you that it's toggleable - it doesn't say 'unchecked'
5. Activate the menu item and then re-navigate the menu, notice it doesn't say it's 'checked' now either.

### 📸 Screenshots or code

_No response_

### 🖥 📱 Device

MacOS, Chrome, Voiceover

### 🧐 Expected behaviour

Expect togglable menu options to read like Checkboxes and toggle variant Buttons, declaring their (un)checked status

### 📝 Acceptance Criteria

_No response_

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

High

### Additional info

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the default popover Storybook story linked in the report and reproduce the behavior using VoiceOver on macOS and Chrome. Trace the toggle menu item implementation from that story and verify that navigating before and after activation announces its unchecked or checked state.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.