webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-28 17:02:04 +03:00
Code Activity

Made another mass of accessibility improvements

Browse Source 
- Set proper semantic tags for main parts of content.
- Removed focus-trap from tag manager/autosuggest.
- Set better accessibility labelling on tag manager.
- Updated collapsible sections to be keyboard navigatable.
- Improved input focus styling to better fit theme.
- Updated custom styled file picker to be accessible via keyboard.

Related to #1320
This commit is contained in:
Dan Brown
2019-08-25 15:44:51 +01:00
parent ae93a6ed07
commit cf5d51e7b8
48 changed files with 146 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/views/components/image-picker.blade.php
View File

@ -8,8 +8,8 @@
</div>
<div class="text-center">
<input type="file" class="custom-file-input" accept="image/*" name="{{ $name }}" id="{{ $name }}">
<label for="{{ $name }}" class="button outline">{{ trans('components.image_select_image') }}</label>
<input type="file" class="hidden" accept="image/*" name="{{ $name }}" id="{{ $name }}">
<input type="hidden" data-reset-input name="{{ $name }}_reset" value="true" disabled="disabled">
@if(isset($removeName))
<input type="hidden" data-remove-input name="{{ $removeName }}" value="{{ $removeValue }}" disabled="disabled">

5
resources/views/components/tag-manager.blade.php
View File

@ -2,19 +2,18 @@
<div class="tags">
<p class="text-muted small">{!! nl2br(e(trans('entities.tags_explain'))) !!}</p>
<draggable :options="{handle: '.handle'}" :list="tags" element="div">
<div v-for="(tag, i) in tags" :key="tag.key" class="card drag-card">
<div class="handle" >@icon('grip')</div>
<div>
<autosuggest url="{{ url('/ajax/tags/suggest/names') }}" type="name" class="outline" :name="getTagFieldName(i, 'name')"
v-model="tag.name" @input="tagChange(tag)" @blur="tagBlur(tag)" placeholder="{{ trans('entities.tag') }}"/>
v-model="tag.name" @input="tagChange(tag)" @blur="tagBlur(tag)" placeholder="{{ trans('entities.tag_name') }}"/>
</div>
<div>
<autosuggest url="{{ url('/ajax/tags/suggest/values') }}" type="value" class="outline" :name="getTagFieldName(i, 'value')"
v-model="tag.value" @change="tagChange(tag)" @blur="tagBlur(tag)" placeholder="{{ trans('entities.tag_value') }}"/>
</div>
<div v-show="tags.length !== 1" class="text-center drag-card-action text-neg" @click="removeTag(tag)">@icon('close')</div>
<button type="button" aria-label="{{ trans('entities.tags_remove') }}" v-show="tags.length !== 1" class="text-center drag-card-action text-neg" @click="removeTag(tag)">@icon('close')</button>
</div>
</draggable>