[6.0] Refactor default frontend menu to fix submenu support and improve accessiblity (joomla#45922)

* [6.0] Fix and refactor frontend menu

- improve accessibility with aria attributes for submenus
- add keyboard navigation support for enhanced usability and accessibility

* Fix visibility of elements with aria-hidden attribute in header navigation (cassiopeia)

* Refactor submenu toggle logic and improve focus handling for keyboard navigation

* Refactor ID assignment logic for menu tag

* Move submenu toggle creation to template file to make override possible

* Remove console log statements from keydown event handling in navigation

* Improve keyboard navigation by focusing the last tabbable element in the menu on 'End' key press

* CS + lint

* Fix aria-controls attribute to support multiple values for submenu toggle buttons

* Replace span with button for submenu toggle to improve accessibility

@todo css

* Remove tabindex from submenu toggle buttons for improved accessibility

* Add aria-label for submenu toggle button to enhance accessibility

* Close all opened submenus before opening a new one in toggleSubMenu

* Restrict submenu toggle button rendering to first-level items with subitems only

* Add asset management for mod_menu and define CSS for submenu visibility

* Refactor mod-menu CSS for improved submenu styling and toggle behavior

Co-authored-by: Viviana Menzel <[email protected]>

* Refactor mod-menu CSS

* Remove paddig top for icons in  menu item link rendering

* Enhance constructor to support custom settings

* Add navigation menu description to the code comments

* Update copyright year

* clean up

* lint css

* clean up

* Fix refine toggle button logic for deeper menu items for heading and separator

* Remove unused CSS comments and clean up mod-menu styles

* Remove copyright change

Author: LadySolveig

build/media_source/mod_menu/css/mod-menu.css

@@ -0,0 +1,22 @@
+:where(.mod-menu__toggle-sub) {
+  display: inline-flex;
+  align-items: center;
+  padding: 0;
+  color: currentColor;
+  background-color: transparent;
+  border: none;
+  &[aria-expanded="true"] .icon-chevron-down {
+    transform: rotate(180deg);
+  }
+}
+:where(.mod-menu [class*="icon-"]) {
+  margin-inline-start: .5rem;
+  transition: all .2s, background-color .2s;
+}
+
+:where(.mod-menu__sub[aria-hidden="true"]) {
+  display: none;
+}
+:where(.mod-menu__sub[aria-hidden="false"]) {
+  display: block;
+}

build/media_source/mod_menu/joomla.asset.json

@@ -0,0 +1,44 @@
+{
+  "$schema": "https://developer.joomla.org/schemas/json-schema/web_assets.json",
+  "name": "mod_menu",
+  "version": "6.0.0",
+  "description": "Joomla CMS",
+  "license": "GPL-2.0-or-later",
+  "assets": [
+    {
+      "name": "mod_menu.admin-menu",
+      "type": "script",
+      "uri": "mod_menu/admin-menu.min.js",
+      "dependencies": [
+        "core"
+      ],
+      "attributes": {
+        "type": "module"
+      }
+    },
+    {
+      "name": "mod_menu.menu",
+      "type": "script",
+      "uri": "mod_menu/menu.min.js",
+      "dependencies": [
+        "core"
+      ],
+      "attributes": {
+        "type": "module"
+      }
+    },
+    {
+      "name": "mod_menu.menu",
+      "type": "style",
+      "uri": "mod_menu/mod-menu.min.css"
+    },
+    {
+      "name": "mod_menu.menu",
+      "type": "preset",
+      "dependencies": [
+        "mod_menu.menu#style",
+        "mod_menu.menu#script"
+      ]
+    }
+  ]
+}