-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Known accessibility false positives
This page tracks the known accessibility false positives that occur within React Spectrum.
Error Message:
Ensures elements with an ARIA role that require child roles contain them
Ensures elements with an ARIA role that require parent roles are contained by them
Root Cause:
WAI-ARIA 1.1 does not support groups with listbox, but WAI-ARIA 1.2 adds support for groups of options within listbox.
Related Links:
Issue raised with axe-core: https://github.com/dequelabs/axe-core/issues/3152 PR merged: https://github.com/dequelabs/axe-core/pull/3195
Resolution
Still broken, awaiting release of the merged fix.
Error Message:
ARIA attribute is not allowed: aria-orientation="vertical"
Root Cause:
axe-core version 3.5.1 doesn't allows aria-orientation="vertical" on radiogroups but the WAI-ARIA 1.2 spec lists it as a supported property.
Related Links
Issue raised with axe-core: https://github.com/dequelabs/axe-core/issues/2145
Resolution:
Fixed
Error Message:
Ensures aria-hidden elements do not contain focusable elements
Root Cause:
There is a HiddenSelect (a div with "aria-hidden") in our Picker used to facilitate browser form autocomplete. The hidden element will automatically shift focus to the Picker on focus but aXe has no way of knowing this and thus throws the error.
Related Links
HiddenSelect: https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/select/src/HiddenSelect.tsx
Resolution:
No workaround as of yet. The problematic element is automatically labeled with the following data attribute referencing the equivalent AXE rule: data-a11y-ignore="aria-hidden-focus". Please use this data attribute to exclude the element from your automated accessibility testing tools.
Error Message:
Ensures aria-hidden elements do not contain focusable elements
Root Cause:
When an overlay is open, we apply "aria-hidden" to elements outside of the overlay (including the Provider div) to hide them from assistive technology. This triggers an aXe error since those elements may contain focusable elements
Related Links
Resolution:
No workaround as of yet.
Error Message:
Certain ARIA roles must contain particular children.
Root Cause:
The TableView body div has a tabIndex={-1} applied to it to prevent it from being tabbable in FireFox. This however causes the axe dev tools plugin to list that node as an issue, presumably since a (programatically) focusable + presentational element is exposed with implicit native semantics and thus said body div is expected to have one of the grid supported child roles (row/rowgroup).
Related Links
https://github.com/adobe/react-spectrum/pull/3520
Resolution:
No workaround as of yet.