A11y Docs Audit: Resolve Critical Axe Violations

[jenny-s51]

Describe the problem

The Patternfly React docs workspace could use a sweeping accessibility audit to find and resolve axe violations across all PF components.

There are several PF components for which AXE is throwing critical a11y errors.

In RHOAI, critical AXE violations have been noted specifically in Menu/Application Launcher, and Tabs

How do you reproduce the problem?

Run axe tests for the components below: https://www.patternfly.org/components/menus/custom-menus/react-demos/application-launcher-menu/ https://www.patternfly.org/components/tabs/#with-help-action-popover

Expected behavior A clear and concise description of the expected behavior. No violations

[thatblindgeye]

Some additional comments regarding this issue:

• There are other instances where similar axe violations will be flagged. Menus with actions, Menu with favorites. Basically a lot of menu/menu-like components, or anywhere there's a list of items with a role attribute, that also has some sort of other "action" button/menu toggle.
• A couple of solutions could include
  • Apply the role="menuitem" to those action buttons/toggles as well as the main menu item button; this would rely on the assumption that users would know that, within a menu/menu-like list, that they can navigate left/right as well as up/down, which may not be a viable assumption. This also wouldn't be viable for our Tabs component, since the help popover isn't a "tab"
  • Moving the role="whateverRole" from the button to the li element in the list of whateverItems. This may require updating keyboard functionality and moving some attributes around, and would rely on the assumption that a user would know that there's other content inside the menu item. With VoiceOver at least when making this sort of update, the menu item gets announce as "...menu item, group...", so the "group' verbiage might be enough of a context clue that a user can/should navigate into the menu item for more content.

[thatblindgeye]

Followup from a11y failures in https://github.com/patternfly/patternfly-react/pull/10487, where a an axe-core rule was added to the ignore array to pass CI for now (aria-required-children). We should look into resolving this issue to go towards being able to remove that rule from the ignore array since it is a critical rule. The failures that were being flagged by that rule were:

• Drag and drop demos, both current and next (or current and deprecated), where a Dual List Selector is being used (buttons being used inside of a listbox role that is expecting only option roles as children)
• Menu with favorites, due to the favorites button being wrapped in a div with a tabIndex (a previous temp fix was applied in https://github.com/patternfly/patternfly-react/pull/10089#discussion_r1492915080 that added role menuitem to the MenuItemAction, which should also be revisited). The div may likely getting tabindex from the KeyboardHandler
• Tabs examples where an action is rendered inside a Tab, e.g. help popover or close button.