Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-10-01 01:36:00 -04:00
Code Issues Packages Projects Releases Wiki Activity

Improved accessibility for many editor page components

Browse Source 
Related to #1320
This commit is contained in:
Dan Brown 2019-08-26 12:47:04 +01:00
parent 7cc17934a8
commit 64abe10dc4
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
8 changed files with 38 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
resources/assets/js/components/dropdown.js
View File

@ -118,8 +118,8 @@ class DropDown {
} }
}); });
// Arrow navigation // Keyboard navigation
this.container.addEventListener('keydown', event => { const keyboardNavigation = event => {
if (event.key === 'ArrowDown' || event.key === 'ArrowRight') { if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
this.focusNext(); this.focusNext();
event.preventDefault(); event.preventDefault();
@ -128,9 +128,14 @@ class DropDown {
event.preventDefault(); event.preventDefault();
} else if (event.key === 'Escape') { } else if (event.key === 'Escape') {
this.hide(); this.hide();
this.toggle.focus();
event.stopPropagation(); event.stopPropagation();
} }
}); };
this.container.addEventListener('keydown', keyboardNavigation);
if (this.moveMenu) {
this.menu.addEventListener('keydown', keyboardNavigation);
}
// Hide menu on enter press or escape // Hide menu on enter press or escape
this.menu.addEventListener('keydown ', event => { this.menu.addEventListener('keydown ', event => {

2
resources/assets/js/components/editor-toolbox.js
View File

@ -23,6 +23,8 @@ class EditorToolbox {
toggle() { toggle() {
this.elem.classList.toggle('open'); this.elem.classList.toggle('open');
const expanded = this.elem.classList.contains('open') ? 'true' : 'false';
this.toggleButton.setAttribute('aria-expanded', expanded);
} }
setActiveTab(tabName, openToolbox = false) { setActiveTab(tabName, openToolbox = false) {

4
resources/assets/js/vues/components/dropzone.js
View File

@ -2,8 +2,8 @@ import DropZone from "dropzone";
import { fadeOut } from "../../services/animations"; import { fadeOut } from "../../services/animations";
const template = ` const template = `
<div class="dropzone-container"> <div class="dropzone-container text-center">
<div class="dz-message">{{placeholder}}</div> <button type="button" class="dz-message">{{placeholder}}</button>
</div> </div>
`; `;

4
resources/assets/sass/_pages.scss
View File

@ -258,7 +258,7 @@ body.mce-fullscreen .page-editor .edit-area {
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.tabs > span { .tabs > button {
display: block; display: block;
cursor: pointer; cursor: pointer;
padding: $-s $-m; padding: $-s $-m;
@ -266,7 +266,7 @@ body.mce-fullscreen .page-editor .edit-area {
line-height: 1.6; line-height: 1.6;
border-bottom: 1px solid rgba(255, 255, 255, 0.3); border-bottom: 1px solid rgba(255, 255, 255, 0.3);
} }
&.open .tabs > span.active { &.open .tabs > button.active {
fill: #444; fill: #444;
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.1);
} }

19
resources/views/pages/attachment-manager.blade.php
View File

@ -18,9 +18,12 @@
<div class="tab-container"> <div class="tab-container">
<div class="nav-tabs"> <div class="nav-tabs">
<div @click="tab = 'list'" :class="{selected: tab === 'list'}" class="tab-item">{{ trans('entities.attachments_items') }}</div> <button type="button" @click="tab = 'list'" :class="{selected: tab === 'list'}"
<div @click="tab = 'file'" :class="{selected: tab === 'file'}" class="tab-item">{{ trans('entities.attachments_upload') }}</div> class="tab-item">{{ trans('entities.attachments_items') }}</button>
<div @click="tab = 'link'" :class="{selected: tab === 'link'}" class="tab-item">{{ trans('entities.attachments_link') }}</div> <button type="button" @click="tab = 'file'" :class="{selected: tab === 'file'}"
class="tab-item">{{ trans('entities.attachments_upload') }}</button>
<button type="button" @click="tab = 'link'" :class="{selected: tab === 'link'}"
class="tab-item">{{ trans('entities.attachments_link') }}</button>
</div> </div>
<div v-show="tab === 'list'"> <div v-show="tab === 'list'">
<draggable style="width: 100%;" :options="{handle: '.handle'}" @change="fileSortUpdate" :list="files" element="div"> <draggable style="width: 100%;" :options="{handle: '.handle'}" @change="fileSortUpdate" :list="files" element="div">
@ -31,11 +34,11 @@
<div v-if="file.deleting"> <div v-if="file.deleting">
<span class="text-neg small">{{ trans('entities.attachments_delete_confirm') }}</span> <span class="text-neg small">{{ trans('entities.attachments_delete_confirm') }}</span>
<br> <br>
<span class="text-primary small" @click="file.deleting = false;">{{ trans('common.cancel') }}</span> <button type="button" class="text-primary small" @click="file.deleting = false;">{{ trans('common.cancel') }}</button>
</div> </div>
</div> </div>
<div @click="startEdit(file)" class="drag-card-action text-center text-primary">@icon('edit')</div> <button type="button" @click="startEdit(file)" class="drag-card-action text-center text-primary">@icon('edit')</button>
<div @click="deleteFile(file)" class="drag-card-action text-center text-neg">@icon('close')</div> <button type="button" @click="deleteFile(file)" class="drag-card-action text-center text-neg">@icon('close')</button>
</div> </div>
</draggable> </draggable>
<p class="small text-muted" v-if="files.length === 0"> <p class="small text-muted" v-if="files.length === 0">
@ -75,8 +78,8 @@
<div class="tab-container"> <div class="tab-container">
<div class="nav-tabs"> <div class="nav-tabs">
<div @click="editTab = 'file'" :class="{selected: editTab === 'file'}" class="tab-item">{{ trans('entities.attachments_upload') }}</div> <button type="button" @click="editTab = 'file'" :class="{selected: editTab === 'file'}" class="tab-item">{{ trans('entities.attachments_upload') }}</button>
<div @click="editTab = 'link'" :class="{selected: editTab === 'link'}" class="tab-item">{{ trans('entities.attachments_set_link') }}</div> <button type="button" @click="editTab = 'link'" :class="{selected: editTab === 'link'}" class="tab-item">{{ trans('entities.attachments_set_link') }}</button>
</div> </div>
<div v-if="editTab === 'file'"> <div v-if="editTab === 'file'">
<dropzone :upload-url="getUploadUrl(fileToEdit)" :uploaded-to="pageId" placeholder="{{ trans('entities.attachments_edit_drop_upload') }}" @success="uploadSuccessUpdate"></dropzone> <dropzone :upload-url="getUploadUrl(fileToEdit)" :uploaded-to="pageId" placeholder="{{ trans('entities.attachments_edit_drop_upload') }}" @success="uploadSuccessUpdate"></dropzone>

8
resources/views/pages/editor-toolbox.blade.php
View File

@ -1,12 +1,12 @@
<div editor-toolbox class="floating-toolbox"> <div editor-toolbox class="floating-toolbox">
<div class="tabs primary-background-light"> <div class="tabs primary-background-light">
<span toolbox-toggle>@icon('caret-left-circle')</span> <button type="button" toolbox-toggle aria-expanded="false">@icon('caret-left-circle')</button>
<span toolbox-tab-button="tags" title="{{ trans('entities.page_tags') }}" class="active">@icon('tag')</span> <button type="button" toolbox-tab-button="tags" title="{{ trans('entities.page_tags') }}" class="active">@icon('tag')</button>
@if(userCan('attachment-create-all')) @if(userCan('attachment-create-all'))
<span toolbox-tab-button="files" title="{{ trans('entities.attachments') }}">@icon('attach')</span> <button type="button" toolbox-tab-button="files" title="{{ trans('entities.attachments') }}">@icon('attach')</button>
@endif @endif
<span toolbox-tab-button="templates" title="{{ trans('entities.templates') }}">@icon('template')</span> <button type="button" toolbox-tab-button="templates" title="{{ trans('entities.templates') }}">@icon('template')</button>
</div> </div>
<div toolbox-tab-content="tags"> <div toolbox-tab-content="tags">

8
resources/views/pages/form.blade.php
View File

@ -26,17 +26,17 @@
<div class="text-center px-m py-xs"> <div class="text-center px-m py-xs">
<div v-show="draftsEnabled" dropdown dropdown-move-menu class="dropdown-container draft-display text"> <div v-show="draftsEnabled" dropdown dropdown-move-menu class="dropdown-container draft-display text">
<a dropdown-toggle aria-haspopup="true" aria-expanded="false" title="{{ trans('entities.pages_edit_draft_options') }}" class="text-primary text-button"><span class="faded-text" v-text="draftText"></span>&nbsp; @icon('more')</a> <button type="button" dropdown-toggle aria-haspopup="true" aria-expanded="false" title="{{ trans('entities.pages_edit_draft_options') }}" class="text-primary text-button"><span class="faded-text" v-text="draftText"></span>&nbsp; @icon('more')</button>
@icon('check-circle', ['class' => 'text-pos draft-notification svg-icon', ':class' => '{visible: draftUpdated}']) @icon('check-circle', ['class' => 'text-pos draft-notification svg-icon', ':class' => '{visible: draftUpdated}'])
<ul class="dropdown-menu" role="menu"> <ul class="dropdown-menu" role="menu">
<li> <li>
<a @click="saveDraft()" class="text-pos">@icon('save'){{ trans('entities.pages_edit_save_draft') }}</a> <button type="button" @click="saveDraft()" class="text-pos">@icon('save'){{ trans('entities.pages_edit_save_draft') }}</button>
</li> </li>
<li v-if="isNewDraft"> <li v-if="isNewDraft">
<a href="{{ $model->getUrl('/delete') }}" class="text-neg">@icon('delete'){{ trans('entities.pages_edit_delete_draft') }}</a> <a href="{{ $model->getUrl('/delete') }}" class="text-neg">@icon('delete'){{ trans('entities.pages_edit_delete_draft') }}</a>
</li> </li>
<li v-if="isUpdateDraft"> <li v-if="isUpdateDraft">
<a type="button" @click="discardDraft" class="text-neg">@icon('cancel'){{ trans('entities.pages_edit_discard_draft') }}</a> <button type="button" @click="discardDraft" class="text-neg">@icon('cancel'){{ trans('entities.pages_edit_discard_draft') }}</button>
</li> </li>
</ul> </ul>
</div> </div>
@ -44,7 +44,7 @@
<div class="action-buttons px-m py-xs" v-cloak> <div class="action-buttons px-m py-xs" v-cloak>
<div dropdown dropdown-move-menu class="dropdown-container"> <div dropdown dropdown-move-menu class="dropdown-container">
<a dropdown-toggle class="text-primary text-button">@icon('edit') <span v-text="changeSummaryShort"></span></a> <button type="button" dropdown-toggle aria-haspopup="true" aria-expanded="false" class="text-primary text-button">@icon('edit') <span v-text="changeSummaryShort"></span></button>
<ul class="wide dropdown-menu"> <ul class="wide dropdown-menu">
<li class="px-l py-m"> <li class="px-l py-m">
<p class="text-muted pb-s">{{ trans('entities.pages_edit_enter_changelog_desc') }}</p> <p class="text-muted pb-s">{{ trans('entities.pages_edit_enter_changelog_desc') }}</p>

6
resources/views/pages/template-manager-list.blade.php
View File

@ -1,7 +1,9 @@
{{ $templates->links() }} {{ $templates->links() }}
@foreach($templates as $template) @foreach($templates as $template)
<div class="card template-item border-card p-m mb-m" draggable="true" template-id="{{ $template->id }}"> <div class="card template-item border-card p-m mb-m" tabindex="0"
aria-label="{{ trans('entities.templates_replace_content') }} - {{ $template->name }}"
draggable="true" template-id="{{ $template->id }}">
<div class="template-item-content" title="{{ trans('entities.templates_replace_content') }}"> <div class="template-item-content" title="{{ trans('entities.templates_replace_content') }}">
<div>{{ $template->name }}</div> <div>{{ $template->name }}</div>
<div class="text-muted">{{ trans('entities.meta_updated', ['timeLength' => $template->updated_at->diffForHumans()]) }}</div> <div class="text-muted">{{ trans('entities.meta_updated', ['timeLength' => $template->updated_at->diffForHumans()]) }}</div>
@ -9,9 +11,11 @@
<div class="template-item-actions"> <div class="template-item-actions">
<button type="button" <button type="button"
title="{{ trans('entities.templates_prepend_content') }}" title="{{ trans('entities.templates_prepend_content') }}"
aria-label="{{ trans('entities.templates_prepend_content') }} - {{ $template->name }}"
template-action="prepend">@icon('chevron-up')</button> template-action="prepend">@icon('chevron-up')</button>
<button type="button" <button type="button"
title="{{ trans('entities.templates_append_content') }}" title="{{ trans('entities.templates_append_content') }}"
aria-label="{{ trans('entities.templates_append_content') }} -- {{ $template->name }}"
template-action="append">@icon('chevron-down')</button> template-action="append">@icon('chevron-down')</button>
</div> </div>
</div> </div>