webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2026-01-03 23:42:28 +03:00
Code Activity

A11y: Improved tagging of profile menu

Browse Source 
- Swapped toggle out to actual button.
- Ensured menu items have proper menu item role.
- Added extra roles/labels where is makes sense.
This commit is contained in:
Dan Brown
2025-08-07 14:32:20 +01:00
parent 7bc0d54af1
commit c66f3b2a37
3 changed files with 24 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
resources/sass/_header.scss
View File

@@ -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;

4
resources/views/common/dark-mode-toggle.blade.php
View File

@@ -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>

32
resources/views/layouts/parts/header-user-menu.blade.php
View File

@@ -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>