mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-26 12:16:07 +00:00
Improved accessibility for many editor page components
Related to #1320
This commit is contained in:
parent
7cc17934a8
commit
64abe10dc4
@ -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 => {
|
||||||
|
@ -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) {
|
||||||
|
@ -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>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -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);
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
@ -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">
|
||||||
|
@ -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> @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> @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>
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user