From: Dan Brown <redacted>
Date: Thu, 7 Aug 2025 13:32:20 +0000 (+0100)
Subject: A11y: Improved tagging of profile menu
X-Git-Tag: v25.07.1~1^2~7^2^2~1
X-Git-Url: http://source.bookstackapp.com/bookstack/commitdiff_plain/c66f3b2a3754db0543e996e533554772b6a8b50a

A11y: Improved tagging of profile menu

- Swapped toggle out to actual button.
- Ensured menu items have proper menu item role.
- Added extra roles/labels where is makes sense.
---

diff --git a/resources/sass/_header.scss b/resources/sass/_header.scss
index 3ec7275a4..a23f92d3f 100644
--- a/resources/sass/_header.scss
+++ b/resources/sass/_header.scss
@@ -65,6 +65,7 @@ header {
     margin: 0 (-(vars.$s));
     border-radius: 3px;
     gap: vars.$xs;
+    color: #FFF;
     > span {
       padding-inline-start: vars.$xs;
       display: inline-block;
diff --git a/resources/views/common/dark-mode-toggle.blade.php b/resources/views/common/dark-mode-toggle.blade.php
index 531755109..384932519 100644
--- a/resources/views/common/dark-mode-toggle.blade.php
+++ b/resources/views/common/dark-mode-toggle.blade.php
@@ -3,8 +3,8 @@
     {{ method_field('patch') }}
     <input type="hidden" name="_return" value="{{ url()->current() }}">
     @if(setting()->getForCurrentUser('dark-mode-enabled'))
-        <button class="{{ $classes ?? '' }}"><span>@icon('light-mode')</span><span>{{ trans('common.light_mode') }}</span></button>
+        <button class="{{ $classes ?? '' }}" role="{{ $butonRole ?? '' }}"><span>@icon('light-mode')</span><span>{{ trans('common.light_mode') }}</span></button>
     @else
-        <button class="{{ $classes ?? '' }}"><span>@icon('dark-mode')</span><span>{{ trans('common.dark_mode') }}</span></button>
+        <button class="{{ $classes ?? '' }}" role="{{ $butonRole ?? '' }}"><span>@icon('dark-mode')</span><span>{{ trans('common.dark_mode') }}</span></button>
     @endif
 </form>
\ No newline at end of file
diff --git a/resources/views/layouts/parts/header-user-menu.blade.php b/resources/views/layouts/parts/header-user-menu.blade.php
index db4820a4d..c252deb82 100644
--- a/resources/views/layouts/parts/header-user-menu.blade.php
+++ b/resources/views/layouts/parts/header-user-menu.blade.php
@@ -1,33 +1,43 @@
 <div class="dropdown-container" component="dropdown" option:dropdown:bubble-escapes="true">
-    <span class="user-name py-s hide-under-l" refs="dropdown@toggle"
-          aria-haspopup="true" aria-expanded="false" aria-label="{{ trans('common.profile_menu') }}" tabindex="0">
+    <button class="user-name py-s hide-under-l" refs="dropdown@toggle"
+          aria-haspopup="menu"
+          aria-expanded="false"
+          aria-label="{{ trans('common.profile_menu') }}">
         <img class="avatar" src="{{$user->getAvatar(30)}}" alt="{{ $user->name }}">
         <span class="name">{{ $user->getShortName(9) }}</span> @icon('caret-down')
-    </span>
-    <ul refs="dropdown@menu" class="dropdown-menu" role="menu">
+    </button>
+    <ul refs="dropdown@menu" class="dropdown-menu" role="menu" aria-label="{{ trans('common.profile_menu') }}">
         <li>
-            <a href="{{ url('/favourites') }}" data-shortcut="favourites_view" class="icon-item">
+            <a href="{{ url('/favourites') }}"
+               role="menuitem"
+               data-shortcut="favourites_view"
+               class="icon-item">
                 @icon('star')
                 <div>{{ trans('entities.my_favourites') }}</div>
             </a>
         </li>
         <li>
-            <a href="{{ $user->getProfileUrl() }}" data-shortcut="profile_view" class="icon-item">
+            <a href="{{ $user->getProfileUrl() }}"
+               role="menuitem"
+               data-shortcut="profile_view"
+               class="icon-item">
                 @icon('user')
                 <div>{{ trans('common.view_profile') }}</div>
             </a>
         </li>
         <li>
-            <a href="{{ url('/my-account') }}" class="icon-item">
+            <a href="{{ url('/my-account') }}"
+               role="menuitem"
+               class="icon-item">
                 @icon('user-preferences')
                 <div>{{ trans('preferences.my_account') }}</div>
             </a>
         </li>
-        <li><hr></li>
+        <li role="presentation"><hr></li>
         <li>
-            @include('common.dark-mode-toggle', ['classes' => 'icon-item'])
+            @include('common.dark-mode-toggle', ['classes' => 'icon-item', 'buttonRole' => 'menuitem'])
         </li>
-        <li><hr></li>
+        <li role="presentation"><hr></li>
         <li>
             @php
                 $logoutPath = match (config('auth.method')) {
@@ -38,7 +48,7 @@
             @endphp
             <form action="{{ url($logoutPath) }}" method="post">
                 {{ csrf_field() }}
-                <button class="icon-item" data-shortcut="logout">
+                <button class="icon-item" role="menuitem" data-shortcut="logout">
                     @icon('logout')
                     <div>{{ trans('auth.logout') }}</div>
                 </button>