mi6
Popover Menu: Toggle variant menu items cause accessibility error
Summary
While working on #1897 I found that we get a failing on our Popover story examples with 'toggle' variant menu items.
Accessibility Insights reports this button's existence as a failure, because interactive items should not be nested.
We need to modify our toggle variant menu items so that they don't cause issues for Accessibility Insights/Cypress (and still read okay to screenreaders like NVDA and VoiceOver)
Things that will need changing:
- [ ] Adjust ic-menu-item and/or ic-popover-menu so that the Toggle variant menu items don't break any rules.
- [ ] Popover cypress tests - once this issue is fixed we can re-enable A11y tests
💰 Use value
To meet WCAG 4.1.2
Additional info
Example of role=menuitemcheckbox working: https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-editor/
Guidance on the menuitemcheckbox role: https://www.digitala11y.com/menuitemcheckbox-role/
This might require removing the ic-button from inside menu item, making sure that functionality/styling is maintained. Do before #2285
On hold while a11y review on the component is completed. A11y failure - nested interactive (screen readers may not be able access nested content)
Need to check if this is a real error as our components are a11y crafted and are tested for this information, may be able to change the ic-menu-item to pass the Cypress a11y checks when this work may not be needed and may even open up a can of a11y worms if we remove the li or lose the ic-button features.
Tested with voiceover - the toggle option in the Default popover storybook does not read as 'unticked', but does read as 'ticked' when it's checked. This partially correct behaviour does suggest we need to make some code changes.
(NVDA does read the checked state correctly though)