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 3ec7275a480aa100e198a6eda466595ca7fed19c..a23f92d3fafbf0f3e40f21ddd2bb7383f6345d57 100644 (file)
--- 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 531755109add18a1fa80d58e220fe4a29dc9a4fa..38493251902be03f86343cee346795aaeefbcd86 100644 (file)
--- 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 db4820a4d8a864827f4d7250f58721a043a8df4f..c252deb821835e5794647e1b256d6aa387366f22 100644 (file)
--- 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>