assets/css/app.css

@@ -186,14 +186,14 @@
    ============================================ */
 
 /* Disable all interactive effects on expanded-menu-group header (no href, not clickable) */
-.sidebar .menu > li.menu-group > .expanded-menu-group > div:not(a) {
+.sidebar .menu > li.expanded-menu-group > div:not(a) {
   pointer-events: none;
   cursor: default;
 }
 
-.sidebar .menu > li.menu-group > .expanded-menu-group > div:not(a):hover,
+.sidebar .menu > li.expanded-menu-group > div:not(a):hover,
-.sidebar .menu > li.menu-group > .expanded-menu-group > div:not(a):active,
+.sidebar .menu > li.expanded-menu-group > div:not(a):active,
-.sidebar .menu > li.menu-group > .expanded-menu-group > div:not(a):focus {
+.sidebar .menu > li.expanded-menu-group > div:not(a):focus {
   background-color: transparent !important;
   box-shadow: none !important;
   cursor: default !important;

lib/mv_web/components/layouts/sidebar.ex

@@ -84,14 +84,13 @@ defmodule MvWeb.Layouts.Sidebar do
       
     <!-- Nested Admin Menu -->
       <.menu_group icon="hero-cog-6-tooth" label={gettext("Administration")}>
-        <.menu_subitem href={~p"/users"} icon="hero-user-circle" label={gettext("Users")} />
+        <.menu_subitem href={~p"/users"} label={gettext("Users")} />
-        <.menu_subitem href={~p"/admin/roles"} icon="hero-shield-check" label={gettext("Roles")} />
+        <.menu_subitem href={~p"/admin/roles"} label={gettext("Roles")} />
         <.menu_subitem
           href={~p"/membership_fee_settings"}
-          icon="hero-currency-euro"
           label={gettext("Fee Settings")}
         />
-        <.menu_subitem href={~p"/settings"} icon="hero-cog-6-tooth" label={gettext("Settings")} />
+        <.menu_subitem href={~p"/settings"} label={gettext("Settings")} />
       </.menu_group>
     </ul>
     """
@@ -124,8 +123,12 @@ defmodule MvWeb.Layouts.Sidebar do
   defp menu_group(assigns) do
     ~H"""
     <!-- Expanded Mode: Always open div structure -->
-    <li class="expanded-menu-group">
+    <li role="none" class="expanded-menu-group">
-      <div class="flex items-center gap-3">
+      <div
+        class="flex items-center gap-3"
+        role="group"
+        aria-label={@label}
+      >
         <.icon name={@icon} class="size-5 shrink-0" aria-hidden="true" />
         <span class="menu-label">{@label}</span>
       </div>
@@ -147,7 +150,6 @@ defmodule MvWeb.Layouts.Sidebar do
         <.icon name={@icon} class="size-5 shrink-0" aria-hidden="true" />
       </.link>
       <ul
-        tabindex="0"
         class="dropdown-content menu bg-base-100 rounded-box shadow-lg z-50 min-w-48 p-2 focus:outline-none"
         role="menu"
       >

test/mv_web/components/layouts/sidebar_test.exs

@@ -144,7 +144,8 @@ defmodule MvWeb.Layouts.SidebarTest do
       assert menu_item_count > 0, "Should have at least one top-level menu item"
 
       # Check that nested menu groups exist
-      assert html =~ "<details"
+      assert html =~ ~s(<li role="none" class="expanded-menu-group">)
+      assert html =~ ~s(role="group")
       assert has_class?(html, "expanded-menu-group")
 
       # Check that nested menu items exist
@@ -192,8 +193,9 @@ defmodule MvWeb.Layouts.SidebarTest do
       html = render_sidebar(authenticated_assigns())
 
       # Check for nested menu structure
-      assert html =~ "<details"
+      assert html =~ ~s(<li role="none" class="expanded-menu-group">)
-      assert html =~ "<summary"
+      assert html =~ ~s(role="group")
+      assert html =~ ~s(aria-label="Administration")
       assert has_class?(html, "expanded-menu-group")
 
       # Check that nested menu has subitems
@@ -351,8 +353,9 @@ defmodule MvWeb.Layouts.SidebarTest do
     test "T5.4: nested menu has correct ARIA attributes" do
       html = render_sidebar(authenticated_assigns())
 
-      # Details summary should have haspopup
+      # Expanded mode should have role="group" with aria-label
-      assert html =~ ~s(aria-haspopup="true")
+      assert html =~ ~s(role="group")
+      assert html =~ ~s(aria-label="Administration")
 
       # Dropdown button should have haspopup
       assert html =~ ~s(aria-haspopup="menu")
@@ -518,7 +521,8 @@ defmodule MvWeb.Layouts.SidebarTest do
       assert html =~ ~s(role="menuitem")
 
       # Check that nested menus exist
-      assert html =~ "<details"
+      assert html =~ ~s(<li role="none" class="expanded-menu-group">)
+      assert html =~ ~s(role="group")
 
       # Footer section
       assert html =~ "theme-controller"
@@ -624,9 +628,10 @@ defmodule MvWeb.Layouts.SidebarTest do
     test "renders expanded menu group" do
       html = render_sidebar(authenticated_assigns())
 
-      # details/summary present
+      # expanded-menu-group structure present
-      assert html =~ "<details"
+      assert html =~ ~s(<li role="none" class="expanded-menu-group">)
-      assert html =~ "<summary"
+      assert html =~ ~s(role="group")
+      assert html =~ ~s(aria-label="Administration")
       assert has_class?(html, "expanded-menu-group")
     end
 
@@ -836,9 +841,10 @@ defmodule MvWeb.Layouts.SidebarTest do
       assert has_class?(html, "expanded-menu-group")
       assert has_class?(html, "collapsed-menu-group")
 
-      # Details element should not have duplicate hover classes
+      # Expanded menu group should have correct structure
-      # (CSS handles this, but we verify structure)
+      # (CSS handles hover effects, but we verify structure)
-      assert html =~ "<details"
+      assert html =~ ~s(<li role="none" class="expanded-menu-group">)
+      assert html =~ ~s(role="group")
     end
 
     test "tooltips only visible when collapsed" do