[6.0] Refactor default frontend menu to fix submenu support and improve accessiblity

[LadySolveig]

Pull Request for Issue # .

Summary of Changes

At the moment, the default frontend layout in the menu module is broken an does not show submenu entries at all.
This PR removes opening on hover completely (broken at all) and adds keyboard support as a accessiblity improvement.
Submenu-Items should again be reachable in frontend with the default menu module layout again.

In order to be as accessible as possible, buttons for opening the submenus have been added, and CSS is now included here to minimise the impact on existing pages.
The CSS has been set to specificity 0 with :where(), making it very easy for the user to overwrite.

Keyboard Support

The source as a reference to the keyboard functionality that was implemented here:
https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation-hybrid/#kbd_label

Example Main Navbar

menu.mp4

Example Menu in sidebar

menu2.mp4

Testing Instructions

1. Install Blog Sample Data on your test site
2. Go to Content --> Site Modules and open the settings for the Main Menu Blog Module
3. Go to tab Advanced change the settings to ---From Module--- -> `Default

Only testable with patched version - should respekt the End Level setting 4. Change the End Level Setting from Allto25. Change the End Level Setting to1`
6. Test the keyboard support like described above (image, video, link) for the main menu and a sidebar or footer menu.

7. Try out different combinations of the Menu Item. Try different menu item type like alias, separator, etc and combinations of icons and image.

Icos and images can be set in the tab `Link Type for the menu item

Actual result BEFORE applying this Pull Request

The submenu items are not reachable and the js for expanding on hover is broken.

Expected result AFTER applying this Pull Request

Submenus can be expanded and operated with keyboard support.

Result for step 4

Result for step 5

Link to documentations

Please select:

• Documentation link for docs.joomla.org:

• No documentation changes for docs.joomla.org needed

• Pull Request link for manual.joomla.org:

• No documentation changes for manual.joomla.org needed

[bembelimen]

I have tested this item ✅ successfully on d09b8b4

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45922.}

[exlemor]

I have tested this item ✅ successfully on d09b8b4

I have tested this successfully. Thanks @LadySolveig

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45922.}

[brianteeman]

Is it intended that the focus style is different when its a button compared to a link

As you can hopefully see the first and last items in this screenshot are links and they have a solid black outline with suitable space between the outline and the text

Whereas the button in the middle has no specific css and is just using the browser default for ::focus-visible which at least in chrome has rounded corners and a border and outline and the text is right against the olutline

This lack of css on the button also gives off center styling for the arrows when they have focus

[brianteeman]

Before this PR the option to show/hide submenu items was broken and they were always shown
With this PR its also broken but now they are always hidden

[brianteeman]

the keyboard navigation part seems to work correctly from an a11y perspective

[brianteeman]

Is this menu shift intended behaviour when you open a submenu

[LadySolveig]

About the layout shift. Ultimately, it was more a question of whether this should really be done via the module's default layout. I think it depends very much on the template, and the layout in terms of CSS should not come directly from the module.

Here you see something I removed again, as I think it is hardly possible to do the right without knowing the template style.
9783f6b

If something like this is put into the user.cssor the template it works without layout shift.

:where(.mod-menu__sub:not(.mod-menu__sub *)) { 
  background-color: #fff;
  display: block;
  margin: 0;
  min-width: 12rem;
  padding: 0;
  position: absolute;
  top: 100%;
}

works in the header for example and you would not have a layout shift. But as the default layout can used in sidebar and/or footer. We can't do this globally I think.

[softforge]

Thank you @LadySolveig and all the testers, this is an improvement on what was there and a good exploration of what could be done to improve

[LadySolveig]

Before this PR the option to show/hide submenu items was broken and they were always shown
With this PR its also broken but now they are always hidden

Either I'm misunderstanding it or I can't reproduce it.

menu3.mp4

If there is anything I can fix here, please try rephrasing it again. Thank you.

[brianteeman]

sorry I both phrased it badly and included the wrong screenshot - so not surprised you didnt understand it

I am talking about the vertical menu as shown with the special menu

My expectation was that show/hide really meant expanded/collapsed

So when submenu items are set to show the full expanded menu is displayed
and when submenu items are set to hide then the menu is displayed collapsed with dropdown arrows

But what we have is
when submenu items are set to show the dropdown arrow is displayed
when submenu is set to hide then the entire submenu is not displayed - not even any arrows

Maybe my expectation is wrong

My expectation

Submenu hide

Submenu show

What we have

Submenu hide

Submenu show

Just spotted this

While making these screenshots I just spotted this behaviour with submenu set to hide if you click on the menu item so that menu item is active then the submenu dropdown suddenly appear for that menu

chrome_2cxoRserTQ.mp4

[sthopd]

Hello,
The deviation of the Default Layout of a menu [opening mode has changed from expanded (in J5) to collapsible (in J6)] seems to be caused by the function called MetisMenu:
new MetisMenu('#yourmenu', {
toggle: true
});
true is the default behaviour, so may be left out, meaning that only one level is open at a time.
false means that any number of levels may be open at the same time.

This happens for my menus with more levels of (sub)menu-items embedded in the menu-structure:
There is no Joomla-option to force the multilevel hamburger menu to start and remain (after page-load) in unfolded state instead of collapsed.

Do you recognise this?
What can be done to retain the previous functionality before J6?

Friendly regards,
sthopd
PS: this is a problem on large screens (computers, laptops) and can be ignored om mobile devices (smartphones).

---

See: [In J6.0.0: The Default appearance of Menus has changed to Collapsible Default Menu!] :
https://issues.joomla.org/tracker/joomla-cms/46364
For screenshots see:
https://forum.joomla.org/viewtopic.php?f=860&t=1020942