[ic-popover-menu]: Toggle variant menu items don't read as 'checked' to screenreaders
- 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
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