The 2026 Drupal Business Survey is open. Your response will help shape the future of the Drupal business ecosystem.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.
| Comment | File | Size | Author |
|---|---|---|---|
| #10 | 3526087 result.mov | 2.84 MB | csakiistvan |
Issue fork admin_toolbar-3526087
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:
changes
Comments
Comment #2
minoroffense commentedThere's also a Drupal module for that library https://www.drupal.org/project/accessible_menu
Comment #3
minoroffense commentedIf there's any interest in leveraging that library I can get an MR started to integrate the library.
Comment #4
dydave commentedThis 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! 🙂
Comment #5
minoroffense commentedYeah 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.
Comment #6
minoroffense commentedWe're also swinging for the fences to try and get the library into core itself.
Comment #8
dydave commentedThis is my initial take at the feature mostly using AI.
Basically, the changes in merge request !216 should add a 3rd option for the hover behavior in the Admin Toolbar settings form at
/admin/config/user-interface/admin-toolbar:Toolbar hover behavior
Option 3: Accessible menu.
Watchout: when testing make sure the composer dependency library is installed correctly, see:
https://git.drupalcode.org/project/admin_toolbar/-/merge_requests/216/di...
In particular:
The feature needs the following file to work:
/libraries/accessible-menu/dist/accessible-menu.iife.jsI've tested the keyboard navigation and it worked pretty well.
I have not tested everything though, this is probably more of a POC than a stable version.
Among some of the most "simple" implementation choices:
The module currently only implements
Accessible Menu Treeviewand notAccessible Disclosure MenuorAccessible Menubars.https://accessible-menu.dev/disclosure-menus.html
https://accessible-menu.dev/menubars.html
But since all the tests and jobs passed 🟢, moving this issue to Needs review as an attempt to get more functional testing feedback and reviews.
In a future round of development, maybe we could add support for Disclosure Menu as well and compare which type would be more appropriate for this feature.
Feel free to let us know if you have any questions or encounter any issues while testing, we would certainly be glad to help.
Thanks in advance!
Comment #9
csakiistvanComment #10
csakiistvan@dydave Gave MR !216 the functional round you asked for.
✅ Tested and works — checked out MR !216, placed the library at
libraries/accessible-menu/dist/accessible-menu.iife.js, randrush updb(8006) and set "Toolbar hover behavior" to Accessible menu: in Chrome the tray is reachable by Tab and navigates correctly with the arrow keys, Enter/Space and Esc, and mouse hover still opens the flyouts. The Treeview integration behaves as described.