mi6
[ic-popover-menu] Accessibility failures
Summary of the bug
When running the ic-popover-menu through Accessibility Insight's FastPass, it highlights two errors when the popover menu is open. These errors are:
==== Title: WCAG 1.3.1: Ensures elements with an ARIA role that require child roles contain them (.open,ul[aria-label="popover"][role="menu"])
Issue: Ensures elements with an ARIA role that require child roles contain them (aria-required-children - https://accessibilityinsights.io/info-examples/web/aria-required-children)
Element path: .open,ul[aria-label="popover"][role="menu"]
Snippet: <ul class="button" aria-label="popover" role="menu"><slot></slot></ul>
How to fix: Fix any of the following: Element has children which are not allowed: ic-menu-group[aria-label] Element uses aria-busy="true" while showing a loader
====
Title: WCAG 4.1.2: Ensures all ARIA attributes have valid values (ic-menu-item[label="Actions"],ic-button[aria-owns="ic-popover-submenu-abc"])
Issue: Ensures all ARIA attributes have valid values (aria-valid-attr-value - https://accessibilityinsights.io/info-examples/web/aria-valid-attr-value)
Element path: ic-menu-item[label="Actions"],ic-button[aria-owns="ic-popover-submenu-abc"]
Snippet: <ic-button exportparts="button" class="button-variant-tertiary button-size-default full-width hydrated" aria-owns="ic-popover-submenu-abc" aria-controls="ic-popover-submenu-abc">
How to fix: Fix all of the following: Invalid ARIA attribute values: aria-owns="ic-popover-submenu-abc", aria-controls="ic-popover-submenu-abc"
====
🪜 How to reproduce
- Go to the ic-popover-menu storybook
- Open up any of the popover menus
- Open the popover menu so it is visible
- Run the FastPass
🧐 Expected behaviour
These errors should not be present. They need to be solved.
Additional info
For the second error in particular, this is caused by the ic-button being a shadow component, which means that aria attributes that work via an ID no longer work as the IDs are locally scoped (https://nolanlawson.com/2022/11/28/shadow-dom-and-accessibility-the-trouble-with-aria/). This has been seen before and fixed on ic-card, by replacing the button with a native one and styling it appropriately (https://github.com/mi6/ic-ui-kit/pull/1644). However this may be more difficult as in that scenario it was a tiny feature in comparison to the whole component, wheras the buttons in ic-popover-menu are the key functionality.
From the back of this, would be worth adding accessibility checks after the popover has been opened in the cypress tests. There currently aren't any and it would have caught this issue sooner
I've fixed the two initial issues spotted in the ticket on my branch - but there are still issues at deeper levels
