Skip to content

Commit fca4a05

Browse files
ssddanbrownssddanbrown
authored
Merge pull request #5753 from BookStackApp/a11y_menu_updates
A11y: Improved menu tagging
2 parents 7bc0d54 + 0bc9ddd commit fca4a05

16 files changed

+104
-57
lines changed

‎lang/en/entities.php

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,10 @@
6363
'import_delete_desc' => 'This will delete the uploaded import ZIP file, and cannot be undone.',
6464
'import_errors' => 'Import Errors',
6565
'import_errors_desc' => 'The follow errors occurred during the import attempt:',
66+
'breadcrumb_siblings_for_page' => 'Navigate siblings for page',
67+
'breadcrumb_siblings_for_chapter' => 'Navigate siblings for chapter',
68+
'breadcrumb_siblings_for_book' => 'Navigate siblings for book',
69+
'breadcrumb_siblings_for_bookshelf' => 'Navigate siblings for shelf',
6670

6771
// Permissions and restrictions
6872
'permissions' => 'Permissions',

‎resources/sass/_components.scss

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -904,8 +904,11 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
904904
border-radius: 4px;
905905
line-height: normal;
906906
padding: vars.$xs;
907+
opacity: 0.6;
908+
cursor: pointer;
907909
&:hover {
908-
border-color: #DDD;
910+
opacity: 1;
911+
@include mixins.lightDark(border-color, #DDD, #444);
909912
}
910913
.svg-icon {
911914
margin-inline-end: 0;

‎resources/sass/_header.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ header {
6565
margin: 0 (-(vars.$s));
6666
border-radius: 3px;
6767
gap: vars.$xs;
68+
color: #FFF;
6869
> span {
6970
padding-inline-start: vars.$xs;
7071
display: inline-block;

‎resources/sass/styles.scss

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -232,13 +232,15 @@ $loadingSize: 10px;
232232
.list-sort-label {
233233
font-weight: bold;
234234
display: inline-block;
235+
}
236+
.list-sort-label, .list-sort-toggle {
235237
@include mixins.lightDark(color, #555, #888);
236238
}
237239
.list-sort-type {
238240
text-align: start;
239241
}
240-
.list-sort-type, .list-sort-dir {
241-
padding: vars.$xs vars.$s;
242+
.list-sort-toggle, .list-sort-dir {
243+
padding: (vars.$xs + 2) vars.$s;
242244
cursor: pointer;
243245
}
244246
.list-sort-dir {
@@ -252,6 +254,11 @@ $loadingSize: 10px;
252254
transform: rotate(180deg);
253255
}
254256
}
257+
.list-sort-toggle {
258+
display: block;
259+
width: 100%;
260+
text-align: start;
261+
}
255262
}
256263

257264
.import-item {

‎resources/views/common/dark-mode-toggle.blade.php

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
{{ method_field('patch') }}
44
<input type="hidden" name="_return" value="{{ url()->current() }}">
55
@if(setting()->getForCurrentUser('dark-mode-enabled'))
6-
<button class="{{ $classes ?? '' }}"><span>@icon('light-mode')</span><span>{{ trans('common.light_mode') }}</span></button>
6+
<button class="{{ $classes ?? '' }}" role="{{ $butonRole ?? '' }}"><span>@icon('light-mode')</span><span>{{ trans('common.light_mode') }}</span></button>
77
@else
8-
<button class="{{ $classes ?? '' }}"><span>@icon('dark-mode')</span><span>{{ trans('common.dark_mode') }}</span></button>
8+
<button class="{{ $classes ?? '' }}" role="{{ $butonRole ?? '' }}"><span>@icon('dark-mode')</span><span>{{ trans('common.dark_mode') }}</span></button>
99
@endif
1010
</form>

‎resources/views/common/sort.blade.php

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,14 @@
2929

3030
<div class="list-sort">
3131
<div component="dropdown" class="list-sort-type dropdown-container">
32-
<div refs="dropdown@toggle" aria-haspopup="true" aria-expanded="false" aria-label="{{ trans('common.sort_options') }}" tabindex="0">{{ $options[$selectedSort] }}</div>
33-
<ul refs="dropdown@menu list-sort-control@menu" class="dropdown-menu">
32+
<button refs="dropdown@toggle"
33+
aria-haspopup="true"
34+
aria-expanded="false"
35+
aria-label="{{ trans('common.sort_options') }}"
36+
class="list-sort-toggle">{{ $options[$selectedSort] }}</button>
37+
<ul refs="dropdown@menu list-sort-control@menu" class="dropdown-menu" role="menu">
3438
@foreach($options as $key => $label)
35-
<li @if($key === $selectedSort) class="active" @endif><a href="#" data-sort-value="{{$key}}" class="text-item">{{ $label }}</a></li>
39+
<li @if($key === $selectedSort) class="active" @endif><a href="#" data-sort-value="{{$key}}" role="menuitem" class="text-item">{{ $label }}</a></li>
3640
@endforeach
3741
</ul>
3842
</div>

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

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,14 @@
22
option:dropdown-search:url="/search/entity/siblings?entity_type={{$entity->getType()}}&entity_id={{ $entity->id }}"
33
option:dropdown-search:local-search-selector=".entity-list-item"
44
class="dropdown-search">
5-
<div class="dropdown-search-toggle-breadcrumb" refs="dropdown@toggle"
6-
aria-haspopup="true" aria-expanded="false" tabindex="0">
7-
<div class="separator">@icon('chevron-right')</div>
8-
</div>
9-
<div refs="dropdown@menu" class="dropdown-search-dropdown card" role="menu">
5+
<button class="dropdown-search-toggle-breadcrumb"
6+
refs="dropdown@toggle"
7+
aria-haspopup="true"
8+
aria-expanded="false"
9+
title="{{ trans('entities.breadcrumb_siblings_for_' . $entity->getType()) }}">
10+
<div role="presentation" class="separator">@icon('chevron-right')</div>
11+
</button>
12+
<div refs="dropdown@menu" class="dropdown-search-dropdown card">
1013
<div class="dropdown-search-search">
1114
@icon('search')
1215
<input refs="dropdown-search@searchInput"
@@ -18,6 +21,6 @@ class="dropdown-search">
1821
<div refs="dropdown-search@loading">
1922
@include('common.loading-icon')
2023
</div>
21-
<div refs="dropdown-search@listContainer" class="dropdown-search-list px-m" tabindex="-1"></div>
24+
<div refs="dropdown-search@listContainer" class="dropdown-search-list px-m" tabindex="-1" role="list"></div>
2225
</div>
2326
</div>

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

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,22 @@
22
class="dropdown-container"
33
id="export-menu">
44

5-
<div refs="dropdown@toggle"
6-
class="icon-list-item"
5+
<button refs="dropdown@toggle"
6+
class="icon-list-item text-link"
77
aria-haspopup="true"
88
aria-expanded="false"
99
aria-label="{{ trans('entities.export') }}"
10-
data-shortcut="export"
11-
tabindex="0">
10+
data-shortcut="export">
1211
<span>@icon('export')</span>
1312
<span>{{ trans('entities.export') }}</span>
14-
</div>
13+
</button>
1514

1615
<ul refs="dropdown@menu" class="wide dropdown-menu" role="menu">
17-
<li><a href="{{ $entity->getUrl('/export/html') }}" target="_blank" class="label-item"><span>{{ trans('entities.export_html') }}</span><span>.html</span></a></li>
18-
<li><a href="{{ $entity->getUrl('/export/pdf') }}" target="_blank" class="label-item"><span>{{ trans('entities.export_pdf') }}</span><span>.pdf</span></a></li>
19-
<li><a href="{{ $entity->getUrl('/export/plaintext') }}" target="_blank" class="label-item"><span>{{ trans('entities.export_text') }}</span><span>.txt</span></a></li>
20-
<li><a href="{{ $entity->getUrl('/export/markdown') }}" target="_blank" class="label-item"><span>{{ trans('entities.export_md') }}</span><span>.md</span></a></li>
21-
<li><a href="{{ $entity->getUrl('/export/zip') }}" target="_blank" class="label-item"><span>{{ trans('entities.export_zip') }}</span><span>.zip</span></a></li>
16+
<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>
17+
<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>
18+
<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>
19+
<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>
20+
<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>
2221
</ul>
2322

2423
</div>

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
<?php $type = $entity->getType(); ?>
2-
<a href="{{ $entity->getUrl() }}" class="{{$type}} {{$type === 'page' && $entity->draft ? 'draft' : ''}} {{$classes ?? ''}} entity-list-item" data-entity-type="{{$type}}" data-entity-id="{{$entity->id}}">
2+
<a href="{{ $entity->getUrl() }}"
3+
class="{{$type}} {{$type === 'page' && $entity->draft ? 'draft' : ''}} {{$classes ?? ''}} entity-list-item"
4+
data-entity-type="{{$type}}"
5+
data-entity-id="{{$entity->id}}">
36
<span role="presentation" class="icon text-{{$type}}">@icon($type)</span>
47
<div class="content">
58
<h4 class="entity-list-item-name break-text">{{ $entity->preview_name ?? $entity->name }}</h4>

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

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
<div component="dropdown"
22
class="dropdown-container block my-xxs">
3-
<a refs="dropdown@toggle" href="#" class="entity-meta-item my-none">
3+
<a refs="dropdown@toggle"
4+
aria-haspopup="menu"
5+
aria-expanded="false"
6+
role="button"
7+
href="#"
8+
class="entity-meta-item my-none">
49
@icon(($ignoring ? 'watch-ignore' : 'watch'))
510
<span>{{ $label }}</span>
611
</a>
@@ -10,10 +15,10 @@ class="dropdown-container block my-xxs">
1015
<input type="hidden" name="type" value="{{ $entity->getMorphClass() }}">
1116
<input type="hidden" name="id" value="{{ $entity->id }}">
1217

13-
<ul refs="dropdown@menu" class="dropdown-menu xl-limited anchor-left pb-none">
18+
<ul refs="dropdown@menu" class="dropdown-menu xl-limited anchor-left pb-none" role="menu">
1419
@foreach(\BookStack\Activity\WatchLevels::allSuitedFor($entity) as $option => $value)
1520
<li>
16-
<button name="level" value="{{ $option }}" class="icon-item">
21+
<button name="level" value="{{ $option }}" class="icon-item" role="menuitem">
1722
@if($watchLevel === $option)
1823
<span class="text-pos pt-m"
1924
title="{{ trans('common.status_active') }}">@icon('check-circle')</span>
@@ -32,12 +37,13 @@ class="dropdown-container block my-xxs">
3237
</div>
3338
</button>
3439
</li>
35-
<li>
40+
<li role="presentation">
3641
<hr class="my-none">
3742
</li>
3843
@endforeach
3944
<li>
4045
<a href="{{ url('/my-account/notifications') }}"
46+
role="menuitem"
4147
target="_blank"
4248
class="text-item text-muted text-small break-text">{{ trans('entities.watch_change_default') }}</a>
4349
</li>

0 commit comments

Comments
 (0)