Skip to content

Commit 0bc9ddd

Browse files
ssddanbrownssddanbrown
committed
A11y: Updated other dropdown menus with correct tagging
Made some form improvements at the same time.
1 parent c66f3b2 commit 0bc9ddd

File tree

13 files changed

+80
-44
lines changed

13 files changed

+80
-44
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/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/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>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ class="popup-background code-editor">
1313
</button>
1414
<ul refs="dropdown@menu code-editor@historyList" class="dropdown-menu"></ul>
1515
</div>
16-
<button class="popup-header-close" refs="popup@hide">@icon('close')</button>
16+
<button class="popup-header-close" refs="popup@hide" title="{{ trans('common.close') }}">@icon('close')</button>
1717
</div>
1818

1919
<div class="code-editor-body-wrap flex-container-row flex-fill">
@@ -34,8 +34,8 @@ class="popup-background code-editor">
3434
@foreach($languages as $language)
3535
<div class="relative">
3636
<button type="button" refs="code-editor@language-button" data-favourite="false" data-lang="{{ strtolower($language) }}">{{ $language }}</button>
37-
<button class="lang-option-favorite-toggle action-favourite" data-title="{{ trans('common.favourite') }}">@icon('star-outline')</button>
38-
<button class="lang-option-favorite-toggle action-unfavourite" data-title="{{ trans('common.unfavourite') }}">@icon('star')</button>
37+
<button class="lang-option-favorite-toggle action-favourite" title="{{ trans('common.favourite') }}">@icon('star-outline')</button>
38+
<button class="lang-option-favorite-toggle action-unfavourite" title="{{ trans('common.unfavourite') }}">@icon('star')</button>
3939
</div>
4040
@endforeach
4141
</div>

‎resources/views/pages/parts/editor-toolbar.blade.php‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ class="dropdown-container draft-display text {{ $draftsEnabled ? '' : 'hidden'
1414
<div class="flex-container-row items-center justify-center">
1515
<button type="button"
1616
refs="dropdown@toggle"
17-
aria-haspopup="true"
17+
aria-haspopup="menu"
1818
aria-expanded="false"
1919
title="{{ trans('entities.pages_edit_draft_options') }}"
2020
class="text-link icon-list-item">
@@ -25,46 +25,46 @@ class="text-link icon-list-item">
2525
</div>
2626
<ul refs="dropdown@menu" class="dropdown-menu" role="menu">
2727
<li>
28-
<button refs="page-editor@saveDraft" type="button" class="text-pos icon-item">
28+
<button refs="page-editor@saveDraft" type="button" role="menuitem" class="text-pos icon-item">
2929
@icon('save')
3030
<div>{{ trans('entities.pages_edit_save_draft') }}</div>
3131
</button>
3232
</li>
3333
@if($isDraft)
3434
<li>
35-
<a href="{{ $model->getUrl('/delete') }}" class="text-neg icon-item">
35+
<a href="{{ $model->getUrl('/delete') }}" role="menuitem" class="text-neg icon-item">
3636
@icon('delete')
3737
{{ trans('entities.pages_edit_delete_draft') }}
3838
</a>
3939
</li>
4040
@endif
4141
<li refs="page-editor@discard-draft-wrap" {{ $isDraftRevision ? '' : 'hidden' }}>
42-
<button refs="page-editor@discard-draft" type="button" class="text-warn icon-item">
42+
<button refs="page-editor@discard-draft" type="button" role="menuitem" class="text-warn icon-item">
4343
@icon('cancel')
4444
<div>{{ trans('entities.pages_edit_discard_draft') }}</div>
4545
</button>
4646
</li>
4747
<li refs="page-editor@delete-draft-wrap" {{ $isDraftRevision ? '' : 'hidden' }}>
48-
<button refs="page-editor@delete-draft" type="button" class="text-neg icon-item">
48+
<button refs="page-editor@delete-draft" type="button" role="menuitem" class="text-neg icon-item">
4949
@icon('delete')
5050
<div>{{ trans('entities.pages_edit_delete_draft') }}</div>
5151
</button>
5252
</li>
5353
@if(userCan('editor-change'))
54-
<li>
54+
<li role="presentation">
5555
<hr>
5656
</li>
5757
<li>
5858
@if($editor !== \BookStack\Entities\Tools\PageEditorType::Markdown)
59-
<a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor=markdown-clean" refs="page-editor@changeEditor" class="icon-item">
59+
<a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor=markdown-clean" refs="page-editor@changeEditor" role="menuitem" class="icon-item">
6060
@icon('swap-horizontal')
6161
<div>
6262
{{ trans('entities.pages_edit_switch_to_markdown') }}
6363
<br>
6464
<small>{{ trans('entities.pages_edit_switch_to_markdown_clean') }}</small>
6565
</div>
6666
</a>
67-
<a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor=markdown-stable" refs="page-editor@changeEditor" class="icon-item">
67+
<a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor=markdown-stable" refs="page-editor@changeEditor" role="menuitem" class="icon-item">
6868
@icon('swap-horizontal')
6969
<div>
7070
{{ trans('entities.pages_edit_switch_to_markdown') }}
@@ -74,13 +74,13 @@ class="text-link icon-list-item">
7474
</a>
7575
@endif
7676
@if($editor !== \BookStack\Entities\Tools\PageEditorType::WysiwygTinymce)
77-
<a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor=wysiwyg" refs="page-editor@changeEditor" class="icon-item">
77+
<a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor=wysiwyg" refs="page-editor@changeEditor" role="menuitem" class="icon-item">
7878
@icon('swap-horizontal')
7979
<div>{{ trans('entities.pages_edit_switch_to_wysiwyg') }}</div>
8080
</a>
8181
@endif
8282
@if($editor !== \BookStack\Entities\Tools\PageEditorType::WysiwygLexical)
83-
<a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor=wysiwyg2024" refs="page-editor@changeEditor" class="icon-item">
83+
<a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor=wysiwyg2024" refs="page-editor@changeEditor" role="menuitem" class="icon-item">
8484
@icon('swap-horizontal')
8585
<div>
8686
{{ trans('entities.pages_edit_switch_to_new_wysiwyg') }}
@@ -112,6 +112,7 @@ class="dropdown-container">
112112
id="summary-input"
113113
rows="2"
114114
maxlength="180"
115+
title="{{ trans('entities.pages_edit_enter_changelog') }}"
115116
placeholder="{{ trans('entities.pages_edit_enter_changelog') }}"
116117
></textarea>
117118
<small refs="page-editor@changelogCounter" class="text-muted mt-xs">0 / 180</small>

0 commit comments

Comments
 (0)