Problem/Motivation

Currently the toolbar and admin toolbar aren't the greatest when it comes to WCAG compliance. Makes it difficult to use the toolbar in scenarios where that's a requirement.

Steps to reproduce

Try to use the toolbar with keyboard nav and with a screen reader.

Proposed resolution

Introduce the https://accessible-menu.dev/ library to manage the menu structure and keyboard nav.

Remaining tasks

  • Evaluate accessible menu as a solution
  • Refactor code to use the library

User interface changes

No visual changes but the keyboard nav would now follow the WAI-ARIA recommendations

API changes

Probably? But unclear at the time of writing.

Data model changes

Probably? But unclear at the time of writing.

Issue fork admin_toolbar-3526087

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

minoroffense created an issue. See original summary.

minoroffense’s picture

minoroffense commented

There's also a Drupal module for that library https://www.drupal.org/project/accessible_menu

minoroffense’s picture

minoroffense commented

If there's any interest in leveraging that library I can get an MR started to integrate the library.

dydave’s picture

dydave commented
Version: 3.6.0 » 3.x-dev
Related issues: +#3286466: Tabbing order does not satisfy 508 accessibility requirements

This is great stuff Mathew (@minoroffense)! 😍

Thanks a lot for sharing this! 🙏

Recently, I have been searching around, looking for a good Vanilla JS alternative to the current custom scripts based on the hoverIntent JQuery plugin.... But up until now, I couldn't find anything that could look like an exploitable solution.

Additionally, I have been looking at #3286466: Tabbing order does not satisfy 508 accessibility requirements, which seems to basically implement with custom code exactly what the accessible_menu library does 👍

So essentially, if I understand this right: we "could" replace entirely (almost) all the JS and CSS that is currently used by the module to:

 
On paper, this looks like an amazing idea and exactly for what I had been looking for the past two months 😅
 
Now, I would have to give the Accessible Menu module and libraries a bit of testing to see how (and if) this could potentially work.
 
But, would you have any recommendations on how this could work?
Is my understanding correct or could I be missing something?
 
Would you like to take an initial stab at the implementation of this feature and create an initial merge request?
 
Any suggestions, advice or recommendations would be greatly appreciated.
 
Feel free to let us know if you have any questions or concerns on this comment or the module in general, we would certainly be glad to help.
Thanks in advance! 🙂

minoroffense’s picture

minoroffense commented

Yeah the idea with the library is that it takes your existing menu markup and reworks it to match the reference implementation as defined by https://www.w3.org/WAI/ARIA/apg/ depending on the type of menu (e.g. dropdown, disclosure, tree, etc.). It would do all of the work for showing/hiding menus, keyboard nav, etc. So there'd presumably be very little JS left in the admin toolbar module. But obviously we'd only remove what's redundent.

Excellent. We'll take a crack at integrating the library. We'll let you know once we have something to show.

minoroffense’s picture

minoroffense commented
Related issues: +#3526105: Leverage the Accessible Menu library to make Drupal menus accessible by default

We're also swinging for the fences to try and get the library into core itself.