diff --git a/assets/css/app.css b/assets/css/app.css
index f709b98..7e6699d 100644
--- a/assets/css/app.css
+++ b/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.menu-group > .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):hover,
+.sidebar .menu > li.expanded-menu-group > div:not(a):active,
+.sidebar .menu > li.expanded-menu-group > div:not(a):focus {
background-color: transparent !important;
box-shadow: none !important;
cursor: default !important;
diff --git a/lib/mv_web/components/layouts/sidebar.ex b/lib/mv_web/components/layouts/sidebar.ex
index 40c8bb6..962e720 100644
--- a/lib/mv_web/components/layouts/sidebar.ex
+++ b/lib/mv_web/components/layouts/sidebar.ex
@@ -84,14 +84,13 @@ defmodule MvWeb.Layouts.Sidebar do
<.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"/admin/roles"} icon="hero-shield-check" label={gettext("Roles")} />
+ <.menu_subitem href={~p"/users"} label={gettext("Users")} />
+ <.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")} />
"""
@@ -124,8 +123,12 @@ defmodule MvWeb.Layouts.Sidebar do
defp menu_group(assigns) do
~H"""
-
-
+
+
<.icon name={@icon} class="size-5 shrink-0" aria-hidden="true" />
@@ -147,7 +150,6 @@ defmodule MvWeb.Layouts.Sidebar do
<.icon name={@icon} class="size-5 shrink-0" aria-hidden="true" />
diff --git a/test/mv_web/components/layouts/sidebar_test.exs b/test/mv_web/components/layouts/sidebar_test.exs
index 460d85a..75727e3 100644
--- a/test/mv_web/components/layouts/sidebar_test.exs
+++ b/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 =~ ")
+ 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 =~ ")
+ assert html =~ ~s(role="group")
+ assert html =~ ~s(aria-label="Administration")
assert has_class?(html, "expanded-menu-group")
# Check that nested menu has subitems
@@ -208,7 +210,7 @@ defmodule MvWeb.Layouts.SidebarTest do
# There should be more menuitems than data-tips (nested items don't have data-tip)
assert menuitem_count > data_tip_count,
- "Should have nested menu items (menuitems without data-tip)"
+ "Should have nested menu items (menuitems without data-tip)"
end
test "T3.3: renders nested menu with dropdown for collapsed state" do
@@ -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
- assert html =~ ~s(aria-haspopup="true")
+ # Expanded mode should have role="group" with aria-label
+ 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 =~ ")
+ 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
- assert html =~ ")
+ assert html =~ ~s(role="group")
+ assert html =~ ~s(aria-label="Administration")
assert has_class?(html, "expanded-menu-group")
end
@@ -654,7 +659,7 @@ defmodule MvWeb.Layouts.SidebarTest do
# There should be more menuitems than data-tips (nested items don't have data-tip)
assert menuitem_count > data_tip_count,
- "Should have nested menu items (menuitems without data-tip)"
+ "Should have nested menu items (menuitems without data-tip)"
# Verify nested menu structure exists
assert html =~ ~s(role="menu")
@@ -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
- # (CSS handles this, but we verify structure)
- assert html =~ ")
+ assert html =~ ~s(role="group")
end
test "tooltips only visible when collapsed" do