localgov icon indicating copy to clipboard operation
localgov copied to clipboard

Content menu does not use standard controls

Open keelanfh opened this issue 1 year ago • 1 comments

Steps to replicate

  • Logged in and viewing a page (not editing)
  • tab to toolbar “Content”

Expected Results

Toolbar is declared to screen reader users and Toolbar is programmed to be usable for keyboard only users including screen reader users, using keys for Toolbars that will work for all users.

Following Accessible Rich Internet Application (ARIA) authoring practice guide.

Observed results

On landing on the first element of the toolbar instead of being able to navigate out of the toolbar with the tab key, tab takes you to each element in the toolbar including the submenus.

There is no way to close the toolbar other than to tab through all the elements, including the sub menus.

Having to visit all the elements in the tool bar is going to cause fatigue for keyboard only users and screen reader users.

When you leave the toolbar at the end, the menu doesn't close and is obscuring the next button to receive focus.

image

WCAG reference

WCAG 4.1.2 : https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html: Screen Reader - Use standard controls, or ensure that non-standard controls are properly marked up using WAI-ARIA.

https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/examples/toolbar/#kbd_label_1

keelanfh avatar Jun 29 '23 14:06 keelanfh

On this one, I seem to recall there was a Drupal core issue for it somewhere with some information about why this would be difficult to implement, but I'm struggling to track it down. If anyone else finds it, please link to it here.

keelanfh avatar Jun 29 '23 14:06 keelanfh