A11y: Improved menu tagging

lang/en/entities.php

@@ -63,6 +63,10 @@
     'import_delete_desc' => 'This will delete the uploaded import ZIP file, and cannot be undone.',
     'import_errors' => 'Import Errors',
     'import_errors_desc' => 'The follow errors occurred during the import attempt:',
+    'breadcrumb_siblings_for_page' => 'Navigate siblings for page',
+    'breadcrumb_siblings_for_chapter' => 'Navigate siblings for chapter',
+    'breadcrumb_siblings_for_book' => 'Navigate siblings for book',
+    'breadcrumb_siblings_for_bookshelf' => 'Navigate siblings for shelf',
 
     // Permissions and restrictions
     'permissions' => 'Permissions',

resources/sass/_components.scss

@@ -904,8 +904,11 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   border-radius: 4px;
   line-height: normal;
   padding: vars.$xs;
+  opacity: 0.6;
+  cursor: pointer;
   &:hover {
-    border-color: #DDD;
+    opacity: 1;
+    @include mixins.lightDark(border-color, #DDD, #444);
   }
   .svg-icon {
     margin-inline-end: 0;

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;

resources/sass/styles.scss

@@ -232,13 +232,15 @@ $loadingSize: 10px;
   .list-sort-label {
     font-weight: bold;
     display: inline-block;
+  }
+  .list-sort-label, .list-sort-toggle {
     @include mixins.lightDark(color, #555, #888);
   }
   .list-sort-type {
     text-align: start;
   }
-  .list-sort-type, .list-sort-dir {
-    padding: vars.$xs vars.$s;
+  .list-sort-toggle, .list-sort-dir {
+    padding: (vars.$xs + 2) vars.$s;
     cursor: pointer;
   }
   .list-sort-dir {
@@ -252,6 +254,11 @@ $loadingSize: 10px;
       transform: rotate(180deg);
     }
   }
+  .list-sort-toggle {
+    display: block;
+    width: 100%;
+    text-align: start;
+  }
 }
 
 .import-item {

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>

resources/views/common/sort.blade.php

@@ -29,10 +29,14 @@
 
         <div class="list-sort">
             <div component="dropdown" class="list-sort-type dropdown-container">
-                <div refs="dropdown@toggle" aria-haspopup="true" aria-expanded="false" aria-label="{{ trans('common.sort_options') }}" tabindex="0">{{ $options[$selectedSort] }}</div>
-                <ul refs="dropdown@menu list-sort-control@menu" class="dropdown-menu">
+                <button refs="dropdown@toggle"
+                        aria-haspopup="true"
+                        aria-expanded="false"
+                        aria-label="{{ trans('common.sort_options') }}"
+                        class="list-sort-toggle">{{ $options[$selectedSort] }}</button>
+                <ul refs="dropdown@menu list-sort-control@menu" class="dropdown-menu" role="menu">
                     @foreach($options as $key => $label)
-                        <li @if($key === $selectedSort) class="active" @endif><a href="#" data-sort-value="{{$key}}" class="text-item">{{ $label }}</a></li>
+                        <li @if($key === $selectedSort) class="active" @endif><a href="#" data-sort-value="{{$key}}" role="menuitem" class="text-item">{{ $label }}</a></li>
                     @endforeach
                 </ul>
             </div>

resources/views/entities/breadcrumb-listing.blade.php

@@ -2,11 +2,14 @@
      option:dropdown-search:url="/search/entity/siblings?entity_type={{$entity->getType()}}&entity_id={{ $entity->id }}"
      option:dropdown-search:local-search-selector=".entity-list-item"
      class="dropdown-search">
-    <div class="dropdown-search-toggle-breadcrumb" refs="dropdown@toggle"
-         aria-haspopup="true" aria-expanded="false" tabindex="0">
-        <div class="separator">@icon('chevron-right')</div>
-    </div>
-    <div refs="dropdown@menu" class="dropdown-search-dropdown card" role="menu">
+    <button class="dropdown-search-toggle-breadcrumb"
+            refs="dropdown@toggle"
+            aria-haspopup="true"
+            aria-expanded="false"
+            title="{{ trans('entities.breadcrumb_siblings_for_' . $entity->getType()) }}">
+        <div role="presentation" class="separator">@icon('chevron-right')</div>
+    </button>
+    <div refs="dropdown@menu" class="dropdown-search-dropdown card">
         <div class="dropdown-search-search">
             @icon('search')
             <input refs="dropdown-search@searchInput"
@@ -18,6 +21,6 @@ class="dropdown-search">
         <div refs="dropdown-search@loading">
             @include('common.loading-icon')
         </div>
-        <div refs="dropdown-search@listContainer" class="dropdown-search-list px-m" tabindex="-1"></div>
+        <div refs="dropdown-search@listContainer" class="dropdown-search-list px-m" tabindex="-1" role="list"></div>
     </div>
 </div>

resources/views/entities/export-menu.blade.php

@@ -2,23 +2,22 @@
      class="dropdown-container"
      id="export-menu">
 
-    <div refs="dropdown@toggle"
-         class="icon-list-item"
+    <button refs="dropdown@toggle"
+         class="icon-list-item text-link"
          aria-haspopup="true"
          aria-expanded="false"
          aria-label="{{ trans('entities.export') }}"
-         data-shortcut="export"
-         tabindex="0">
+         data-shortcut="export">
         <span>@icon('export')</span>
         <span>{{ trans('entities.export') }}</span>
-    </div>
+    </button>
 
     <ul refs="dropdown@menu" class="wide dropdown-menu" role="menu">
-        <li><a href="{{ $entity->getUrl('/export/html') }}" target="_blank" class="label-item"><span>{{ trans('entities.export_html') }}</span><span>.html</span></a></li>
-        <li><a href="{{ $entity->getUrl('/export/pdf') }}" target="_blank" class="label-item"><span>{{ trans('entities.export_pdf') }}</span><span>.pdf</span></a></li>
-        <li><a href="{{ $entity->getUrl('/export/plaintext') }}" target="_blank" class="label-item"><span>{{ trans('entities.export_text') }}</span><span>.txt</span></a></li>
-        <li><a href="{{ $entity->getUrl('/export/markdown') }}" target="_blank" class="label-item"><span>{{ trans('entities.export_md') }}</span><span>.md</span></a></li>
-        <li><a href="{{ $entity->getUrl('/export/zip') }}" target="_blank" class="label-item"><span>{{ trans('entities.export_zip') }}</span><span>.zip</span></a></li>
+        <li><a href="{{ $entity->getUrl('/export/html') }}" target="_blank" role="menuitem" class="label-item"><span>{{ trans('entities.export_html') }}</span><span>.html</span></a></li>
+        <li><a href="{{ $entity->getUrl('/export/pdf') }}" target="_blank" role="menuitem" class="label-item"><span>{{ trans('entities.export_pdf') }}</span><span>.pdf</span></a></li>
+        <li><a href="{{ $entity->getUrl('/export/plaintext') }}" target="_blank" role="menuitem" class="label-item"><span>{{ trans('entities.export_text') }}</span><span>.txt</span></a></li>
+        <li><a href="{{ $entity->getUrl('/export/markdown') }}" target="_blank" role="menuitem" class="label-item"><span>{{ trans('entities.export_md') }}</span><span>.md</span></a></li>
+        <li><a href="{{ $entity->getUrl('/export/zip') }}" target="_blank" role="menuitem" class="label-item"><span>{{ trans('entities.export_zip') }}</span><span>.zip</span></a></li>
     </ul>
 
 </div>

resources/views/entities/list-item-basic.blade.php

@@ -1,5 +1,8 @@
 <?php $type = $entity->getType(); ?>
-<a href="{{ $entity->getUrl() }}" class="{{$type}} {{$type === 'page' && $entity->draft ? 'draft' : ''}} {{$classes ?? ''}} entity-list-item" data-entity-type="{{$type}}" data-entity-id="{{$entity->id}}">
+<a href="{{ $entity->getUrl() }}"
+   class="{{$type}} {{$type === 'page' && $entity->draft ? 'draft' : ''}} {{$classes ?? ''}} entity-list-item"
+   data-entity-type="{{$type}}"
+   data-entity-id="{{$entity->id}}">
     <span role="presentation" class="icon text-{{$type}}">@icon($type)</span>
     <div class="content">
             <h4 class="entity-list-item-name break-text">{{ $entity->preview_name ?? $entity->name }}</h4>

resources/views/entities/watch-controls.blade.php

@@ -1,6 +1,11 @@
 <div component="dropdown"
      class="dropdown-container block my-xxs">
-    <a refs="dropdown@toggle" href="#" class="entity-meta-item my-none">
+    <a refs="dropdown@toggle"
+       aria-haspopup="menu"
+       aria-expanded="false"
+       role="button"
+       href="#"
+       class="entity-meta-item my-none">
         @icon(($ignoring ? 'watch-ignore' : 'watch'))
         <span>{{ $label }}</span>
     </a>
@@ -10,10 +15,10 @@ class="dropdown-container block my-xxs">
         <input type="hidden" name="type" value="{{ $entity->getMorphClass() }}">
         <input type="hidden" name="id" value="{{ $entity->id }}">
 
-        <ul refs="dropdown@menu" class="dropdown-menu xl-limited anchor-left pb-none">
+        <ul refs="dropdown@menu" class="dropdown-menu xl-limited anchor-left pb-none" role="menu">
             @foreach(\BookStack\Activity\WatchLevels::allSuitedFor($entity) as $option => $value)
                 <li>
-                    <button name="level" value="{{ $option }}" class="icon-item">
+                    <button name="level" value="{{ $option }}" class="icon-item" role="menuitem">
                         @if($watchLevel === $option)
                             <span class="text-pos pt-m"
                                   title="{{ trans('common.status_active') }}">@icon('check-circle')</span>
@@ -32,12 +37,13 @@ class="dropdown-container block my-xxs">
                         </div>
                     </button>
                 </li>
-                <li>
+                <li role="presentation">
                     <hr class="my-none">
                 </li>
             @endforeach
             <li>
                 <a href="{{ url('/my-account/notifications') }}"
+                   role="menuitem"
                    target="_blank"
                    class="text-item text-muted text-small break-text">{{ trans('entities.watch_change_default') }}</a>
             </li>

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>

resources/views/pages/parts/code-editor.blade.php

@@ -13,7 +13,7 @@ class="popup-background code-editor">
                     </button>
                     <ul refs="dropdown@menu code-editor@historyList" class="dropdown-menu"></ul>
                 </div>
-                <button class="popup-header-close" refs="popup@hide">@icon('close')</button>
+                <button class="popup-header-close" refs="popup@hide" title="{{ trans('common.close') }}">@icon('close')</button>
             </div>
 
             <div class="code-editor-body-wrap flex-container-row flex-fill">
@@ -34,8 +34,8 @@ class="popup-background code-editor">
                         @foreach($languages as $language)
                             <div class="relative">
                                 <button type="button" refs="code-editor@language-button" data-favourite="false" data-lang="{{ strtolower($language) }}">{{ $language }}</button>
-                                <button class="lang-option-favorite-toggle action-favourite" data-title="{{ trans('common.favourite') }}">@icon('star-outline')</button>
-                                <button class="lang-option-favorite-toggle action-unfavourite" data-title="{{ trans('common.unfavourite') }}">@icon('star')</button>
+                                <button class="lang-option-favorite-toggle action-favourite" title="{{ trans('common.favourite') }}">@icon('star-outline')</button>
+                                <button class="lang-option-favorite-toggle action-unfavourite" title="{{ trans('common.unfavourite') }}">@icon('star')</button>
                             </div>
                         @endforeach
                     </div>