mi6 / ic-ui-kit

Intelligence Community UI Kit (based on StencilJS)
MIT License
27 stars 29 forks source link

Popover Menu: Toggle variant menu items cause accessibility error #2722

Open GCHQ-Developer-299 opened 3 weeks ago

GCHQ-Developer-299 commented 3 weeks ago

Summary

While working on #1897 I found that we get a failing on our Popover story examples with 'toggle' variant menu items.

Screenshot 2024-11-06 at 15 35 03

Accessibility Insights reports this button's existence as a failure, because interactive items should not be nested.

Screenshot 2024-11-06 at 15 30 28

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:

💰 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/

GCHQ-Developer-299 commented 4 days ago

This might require removing the ic-button from inside menu item, making sure that functionality/styling is maintained. Do before #2285