[#47267] - [6.2] Admin menu sidebar improvements - accessibility and modernization
- Pending
- Medium
- Build: 6.1-dev
- Draft PR
- # 47267
- Diff
- LadySolveig:6.2/admin-menu-remove-metismenu
User tests: Successful: Unsuccessful:
Further improvements from #47268 / #47269.
- I read the Generative AI policy and my contribution is either not created with the help of AI or is compatible with the policy and GNU/GPL 2 or later.
Summary of Changes
- Improved accessibility (WCAG) - collapsible menu items that have no URL now render as
buttoninstead ofa
Items that do carry a URL keep the element as a fallback. - SSR - active path detection - fixes issue with flickering icons on page load.
- Improved ARIA support -
aria-expanded,aria-controls,aria-current="page - Replaced MetisMenu with a native Joomla web component
metismenujsis replaced by a newjoomla-admin-menuweb component, built on a reusablejoomla-menu-basebase component that provides can be reused across other menu contexts in the future.
joomla-admin-menu
- Extends
joomla-menu-base- inherits all keyboard navigation, ARIA wiring, and submenu
toggle logic, only adds admin-sidebar-specific behaviour on top - CSS height transitions on open/close - overrides
openSubmenu()/closeSubmenu()for animation and a 400 ms safety fallback in case the event never fires (e.g.prefers-reduced-motionordisplay:none) - Sidebar collapse toggle - wires up the
#menu-collapsebutton and dispatches ajoomla:menu-togglecustom event - Hover popout for collapsed sidebar - fly-out submenu
- Client-side active detection fallback - fallback for SSR
- Backwards-compatibility shim - on connect, migrates old
mm-collapse/mm-showclass
names (from MetisMenu) tosubmenu-collapse/submenu-show, so existing template overrides
using the old class names continue to work with the new component
joomla-menu-base (Reusable base class)
- Reusable base class, intended to be extended by concrete components (e.g. joomla-admin-menu)
- Configurable via
menu-selectorattribute - ARIA wiring on connect, sets aria-controls / aria-expanded automatically - SSR values are respected and not overwritten
- Submenu toggle with open/close hooks — openSubmenu() and closeSubmenu() are overridable so
subclasses can add transitions or animations without reimplementing the toggle logic - Keyboard navigation — full arrow-key, Home/End, Enter, Space and Escape support (see table below)
- RTL-aware - ArrowLeft/ArrowRight swap direction when dir="rtl" is set on
<html> - Lifecycle hooks - onConnected() and onDisconnected() are empty methods subclasses, override without needing to call super
Key bindings
Key: ArrowDown
Action: Move focus to next visible item
────────────────────────────────────────
Key: ArrowUp
Action: Move focus to previous visible item
────────────────────────────────────────
Key: ArrowRight
Action: Move focus to next (previous in RTL)
────────────────────────────────────────
Key: ArrowLeft
Action: Move focus to previous (next in RTL)
────────────────────────────────────────
Key: Enter
Context: .has-arrow, <a>.has-arrow
Action: Toggle submenu (<a> -> browser fires click, navigation blocked)
────────────────────────────────────────
Key: Space
Context: .has-arrow item
Action: Toggle submenu, prevent page scroll
────────────────────────────────────────
Key: Escape
Context: Item with open submenu
Action: Close own submenu, keep focus on trigger
────────────────────────────────────────
Key: Escape
Context: Item inside a submenu
Action: Close parent submenu, move focus to parent trigger
────────────────────────────────────────
Key: Home
Action: Focus first item in the current <ul>
────────────────────────────────────────
Key: End
Action: Focus last item in the current <ul>
Testing Instructions
[!IMPORTANT]
For this to test an update of the media asset is required, please use the prebuilt packages or run npm install.
Actual result BEFORE applying this Pull Request
TBD
Expected result AFTER applying this Pull Request
TBD
Link to documentations
Please select:
-
Documentation link for guide.joomla.org:
-
No documentation changes for guide.joomla.org needed
-
Pull Request link for manual.joomla.org:
-
No documentation changes for manual.joomla.org needed
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | Modules Administration JavaScript Repository NPM Change |
| Title |
|
||||||
| Title |
|
||||||
| Title |
|
||||||
Thank you for the list 👍🏼
Some of them could already be resolved, I will go through the list and try to mark and also resolve as mutch as possible on the go.
Thank you very much for your input.
yes i thought they might be
![avatar github-actions[bot]](/images/avatars/github-actions[bot].png)
This pull request has conflicts, please resolve those before we can evaluate the pull request.
I tested this PR and did not find any problems using the Atum menu. The pending PR #46355 ([6.2] New backend Joomla! Help page) does not work because it relies on the existing Metismenu. Tricky for me to figure out what to do! Any tips?
This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/47267.
@ceford this one is work in progress. That's why it still has draft status at the moment. As soon as I'm done here, I can send you a PR on your branch to implement it, or a new PR if yours has already been merged by then. Until then, just stick with the Metismenu implementation. It doesn't make sense to build your PR here on top of a PR that hasn't been merged yet. Always one thing at a time. :)
@ceford If I've done my job well in the end, the adjustment in your code will be very small. ;)
Changing this script:
and enclose your menu as progressive enhancement with the web component.
Any further changes will need to be examined in detail. However, there should not be many. Replacing some classes, etc. But probably not even that, because it should be b/c safe.
This pull request has been automatically rebased to 6.2-dev.
As this is a significant reworking of the admin menu it would be great if some of the existing bugs with the admin menu are fixed with this.
#34067
#38142
#32273
#45490
#44785
There may be more