$revision->delete();
session()->flash('success', trans('entities.revision_delete_success'));
- return view('pages.revisions', ['page' => $page, 'book' => $page->book, 'current' => $page]);
+ return redirect($page->getUrl('/revisions'));
}
/**
function icon($name, $attrs = [])
{
$attrs = array_merge([
- 'class' => 'svg-icon',
- 'data-icon' => $name
+ 'class' => 'svg-icon',
+ 'data-icon' => $name,
+ 'role' => 'presentation',
], $attrs);
$attrString = ' ';
foreach ($attrs as $attrName => $attr) {
this.searchInput = elem.querySelector('input');
this.loadingElem = elem.querySelector('.loading-container');
this.entityListElem = elem.querySelector('.breadcrumb-listing-entity-list');
- this.toggleElem = elem.querySelector('[dropdown-toggle]');
// this.loadingElem.style.display = 'none';
const entityDescriptor = elem.getAttribute('breadcrumb-listing').split(':');
this.entityType = entityDescriptor[0];
this.entityId = Number(entityDescriptor[1]);
- this.toggleElem.addEventListener('click', this.onShow.bind(this));
+ this.elem.addEventListener('show', this.onShow.bind(this));
this.searchInput.addEventListener('input', this.onSearch.bind(this));
- this.elem.addEventListener('keydown', this.keyDown.bind(this));
- }
-
- keyDown(event) {
- if (event.key === 'ArrowDown') {
- this.listFocusChange(1);
- event.preventDefault();
- } else if (event.key === 'ArrowUp') {
- this.listFocusChange(-1);
- event.preventDefault();
- }
- }
-
- listFocusChange(indexChange = 1) {
- const links = Array.from(this.entityListElem.querySelectorAll('a:not(.hidden)'));
- const currentFocused = this.entityListElem.querySelector('a:focus');
- const currentFocusedIndex = links.indexOf(currentFocused);
- const defaultFocus = (indexChange > 0) ? links[0] : this.searchInput;
- const nextElem = links[currentFocusedIndex + indexChange] || defaultFocus;
- nextElem.focus();
}
onShow() {
open() {
const list = this.elem.parentNode.querySelector('.inset-list');
this.elem.classList.add('open');
+ this.elem.setAttribute('aria-expanded', 'true');
slideDown(list, 240);
}
close() {
const list = this.elem.parentNode.querySelector('.inset-list');
this.elem.classList.remove('open');
+ this.elem.setAttribute('aria-expanded', 'false');
slideUp(list, 240);
}
+import {onSelect} from "../services/dom";
+
/**
* Dropdown
* Provides some simple logic to create simple dropdown menus.
this.moveMenu = elem.hasAttribute('dropdown-move-menu');
this.toggle = elem.querySelector('[dropdown-toggle]');
this.body = document.body;
+ this.showing = false;
this.setupListeners();
}
- show(event) {
+ show(event = null) {
this.hideAll();
this.menu.style.display = 'block';
this.menu.classList.add('anim', 'menuIn');
+ this.toggle.setAttribute('aria-expanded', 'true');
if (this.moveMenu) {
// Move to body to prevent being trapped within scrollable sections
});
// Focus on first input if existing
- let input = this.menu.querySelector('input');
+ const input = this.menu.querySelector('input');
if (input !== null) input.focus();
- event.stopPropagation();
+ this.showing = true;
+
+ const showEvent = new Event('show');
+ this.container.dispatchEvent(showEvent);
+
+ if (event) {
+ event.stopPropagation();
+ }
}
hideAll() {
hide() {
this.menu.style.display = 'none';
this.menu.classList.remove('anim', 'menuIn');
+ this.toggle.setAttribute('aria-expanded', 'false');
if (this.moveMenu) {
this.menu.style.position = '';
this.menu.style.left = '';
this.menu.style.width = '';
this.container.appendChild(this.menu);
}
+ this.showing = false;
+ }
+
+ getFocusable() {
+ return Array.from(this.menu.querySelectorAll('[tabindex],[href],button,input:not([type=hidden])'));
+ }
+
+ focusNext() {
+ const focusable = this.getFocusable();
+ const currentIndex = focusable.indexOf(document.activeElement);
+ let newIndex = currentIndex + 1;
+ if (newIndex >= focusable.length) {
+ newIndex = 0;
+ }
+
+ focusable[newIndex].focus();
+ }
+
+ focusPrevious() {
+ const focusable = this.getFocusable();
+ const currentIndex = focusable.indexOf(document.activeElement);
+ let newIndex = currentIndex - 1;
+ if (newIndex < 0) {
+ newIndex = focusable.length - 1;
+ }
+
+ focusable[newIndex].focus();
}
setupListeners() {
// Hide menu on option click
this.container.addEventListener('click', event => {
- let possibleChildren = Array.from(this.menu.querySelectorAll('a'));
- if (possibleChildren.indexOf(event.target) !== -1) this.hide();
+ const possibleChildren = Array.from(this.menu.querySelectorAll('a'));
+ if (possibleChildren.includes(event.target)) {
+ this.hide();
+ }
+ });
+
+ onSelect(this.toggle, event => {
+ event.stopPropagation();
+ console.log('cat', event);
+ this.show(event);
+ if (event instanceof KeyboardEvent) {
+ this.focusNext();
+ }
+ });
+
+ // Arrow navigation
+ this.container.addEventListener('keydown', event => {
+ if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {
+ this.focusNext();
+ event.preventDefault();
+ } else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {
+ this.focusPrevious();
+ event.preventDefault();
+ } else if (event.key === 'Escape') {
+ this.hide();
+ event.stopPropagation();
+ }
});
- // Show dropdown on toggle click
- this.toggle.addEventListener('click', this.show.bind(this));
- // Hide menu on enter press
- this.container.addEventListener('keypress', event => {
- if (event.keyCode !== 13) return true;
+
+ // Hide menu on enter press or escape
+ this.menu.addEventListener('keydown ', event => {
+ if (event.key === 'Enter') {
event.preventDefault();
+ event.stopPropagation();
this.hide();
- return false;
+ }
});
}
elem.addEventListener('click', event => {
if (event.target === elem) return this.hide();
});
+
+ window.addEventListener('keyup', event => {
+ if (event.key === 'Escape') {
+ this.hide();
+ }
+ });
+
let closeButtons = elem.querySelectorAll('.popup-header-close');
for (let i=0; i < closeButtons.length; i++) {
closeButtons[i].addEventListener('click', this.hide.bind(this));
}
}
+ hide() { this.toggle(false); }
+ show() { this.toggle(true); }
+
toggle(show = true) {
let start = Date.now();
let duration = 240;
this.container.style.opacity = targetOpacity;
if (elapsedTime > duration) {
this.container.style.display = show ? 'flex' : 'none';
+ if (show) {
+ this.focusOnBody();
+ }
this.container.style.opacity = '';
} else {
requestAnimationFrame(setOpacity.bind(this));
requestAnimationFrame(setOpacity.bind(this));
}
- hide() { this.toggle(false); }
- show() { this.toggle(true); }
+ focusOnBody() {
+ const body = this.container.querySelector('.popup-body');
+ if (body) {
+ body.focus();
+ }
+ }
}
}
}
+/**
+ * Helper to run an action when an element is selected.
+ * A "select" is made to be accessible, So can be a click, space-press or enter-press.
+ * @param listenerElement
+ * @param callback
+ */
+export function onSelect(listenerElement, callback) {
+ listenerElement.addEventListener('click', callback);
+ listenerElement.addEventListener('keydown', (event) => {
+ if (event.key === 'Enter' || event.key === ' ') {
+ event.preventDefault();
+ callback(event);
+ }
+ });
+}
+
/**
* Set a listener on an element for an event emitted by a child
* matching the given childSelector param.
const methods = {
show() {
if (!this.editor) this.editor = codeLib.popupEditor(this.$refs.editor, this.language);
- this.$refs.overlay.style.display = 'flex';
+ this.$refs.overlay.components.overlay.show();
},
hide() {
- this.$refs.overlay.style.display = 'none';
+ this.$refs.overlay.components.overlay.hide();
},
updateEditorMode(language) {
codeLib.setMode(this.editor, language);
button {
+ background-color: transparent;
+ border: 0;
font-size: 100%;
}
&:hover, &:focus {
text-decoration: none;
}
+ &:focus {
+ outline: 1px dotted currentColor;
+ outline-offset: -$-xs;
+ }
&:active {
+ outline: 0;
background-color: darken($primary, 8%);
}
}
user-select: none;
font-size: 0.75rem;
line-height: 1.4em;
- &:focus, &:active {
+ &:active {
outline: 0;
}
&:hover {
.popup-content {
overflow-y: auto;
}
+ &:focus {
+ outline: 0;
+ }
}
.popup-footer button, .popup-header-close {
opacity: 0;
transition: opacity ease-in-out 120ms;
}
- &:hover .actions {
+ &:hover .actions, &:focus-within .actions {
opacity: 1;
}
}
}
a { color: #666; }
span {
- color: #888;
padding-left: $-xxs;
}
}
&.disabled, &[disabled] {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAMUlEQVQIW2NkwAGuXbv2nxGbHEhCS0uLEUMSJgHShCKJLIEiiS4Bl8QmAZbEJQGSBAC62BuJ+tt7zgAAAABJRU5ErkJggg==);
}
- &:focus {
- outline: 0;
- }
}
.fake-input {
}
.user-name {
vertical-align: top;
- padding-top: $-m;
position: relative;
- top: -3px;
display: inline-block;
cursor: pointer;
> * {
}
}
+.header *, .primary-background * {
+ outline-color: #FFF;
+}
.header-search {
color: #EEE;
z-index: 2;
padding-left: 40px;
+ &:focus {
+ outline: none;
+ border: 1px solid rgba(255, 255, 255, 0.6);
+ }
}
button {
fill: #EEE;
::-moz-placeholder { /* Firefox 19+ */
color: #DDD;
}
- :-ms-input-placeholder { /* IE 10+ */
- color: #DDD;
- }
- :-moz-placeholder { /* Firefox 18- */
- color: #DDD;
- }
@include between($l, $xl) {
max-width: 200px;
}
line-height: 0.8;
margin: -2px 0 0;
}
- &:hover {
+ &:hover, &:focus-within {
opacity: 1;
}
}
* {
box-sizing: border-box;
+ outline-color: #444444;
+}
+
+*:focus {
+ outline-style: dotted;
}
html {
&:hover {
opacity: 1;
}
+ &:focus-within {
+ opacity: 1;
+ }
}
+
}
@include smaller-than($m) {
background-color: transparent;
border-color: rgba(0, 0, 0, 0.1);
}
+ &:focus {
+ background-color: #eee;
+ outline: 1px dotted #666;
+ outline-offset: -2px;
+ }
}
.entity-list-item-path-sep {
color: #555;
fill: #555;
white-space: nowrap;
- &:hover {
+ &:hover, &:focus {
text-decoration: none;
background-color: #EEE;
}
+ &:focus {
+ outline: 1px solid rgba(0, 0, 0, 0.2);
+ outline-offset: -2px;
+ }
svg {
margin-right: $-s;
display: inline-block;
'add' => 'Add',
// Sort Options
+ 'sort_options' => 'Sort Options',
+ 'sort_direction_toggle' => 'Sort Direction Toggle',
+ 'sort_ascending' => 'Sort Ascending',
+ 'sort_descending' => 'Sort Descending',
'sort_name' => 'Name',
'sort_created_at' => 'Created Date',
'sort_updated_at' => 'Updated Date',
'default' => 'Default',
// Header
+ 'profile_menu' => 'Profile Menu',
'view_profile' => 'View Profile',
'edit_profile' => 'Edit Profile',
'pages_delete_confirm' => 'Are you sure you want to delete this page?',
'pages_delete_draft_confirm' => 'Are you sure you want to delete this draft page?',
'pages_editing_named' => 'Editing Page :pageName',
+ 'pages_edit_draft_options' => 'Draft Options',
'pages_edit_save_draft' => 'Save Draft',
'pages_edit_draft' => 'Edit Page Draft',
'pages_editing_draft' => 'Editing Draft',
<hr class="primary-background">
- <div dropdown class="dropdown-container">
- <div dropdown-toggle class="icon-list-item">
- <span>@icon('export')</span>
- <span>{{ trans('entities.export') }}</span>
- </div>
- <ul class="wide dropdown-menu">
- <li><a href="{{ $book->getUrl('/export/html') }}" target="_blank">{{ trans('entities.export_html') }} <span class="text-muted float right">.html</span></a></li>
- <li><a href="{{ $book->getUrl('/export/pdf') }}" target="_blank">{{ trans('entities.export_pdf') }} <span class="text-muted float right">.pdf</span></a></li>
- <li><a href="{{ $book->getUrl('/export/plaintext') }}" target="_blank">{{ trans('entities.export_text') }} <span class="text-muted float right">.txt</span></a></li>
- </ul>
- </div>
+ @include('partials.entity-export-menu', ['entity' => $book])
</div>
</div>
<div class="chapter-child-menu">
- <p chapter-toggle class="text-muted @if($bookChild->matchesOrContains($current)) open @endif">
+ <button chapter-toggle type="button" aria-expanded="{{ $isOpen ? 'true' : 'false' }}" aria-label="{{ trans('common.profile_menu') }}"
+ class="text-muted @if($isOpen) open @endif">
@icon('caret-right') @icon('page') <span>{{ trans_choice('entities.x_pages', $bookChild->pages->count()) }}</span>
- </p>
- <ul class="sub-menu inset-list @if($bookChild->matchesOrContains($current)) open @endif">
+ </button>
+ <ul class="sub-menu inset-list @if($isOpen) open @endif" @if($isOpen) style="display: block;" @endif role="menu">
@foreach($bookChild->pages as $childPage)
- <li class="list-item-page {{ $childPage->isA('page') && $childPage->draft ? 'draft' : '' }}">
+ <li class="list-item-page {{ $childPage->isA('page') && $childPage->draft ? 'draft' : '' }}" role="presentation">
@include('partials.entity-list-item-basic', ['entity' => $childPage, 'classes' => $current->matches($childPage)? 'selected' : '' ])
</li>
@endforeach
<hr class="primary-background"/>
- <div dropdown class="dropdown-container">
- <div dropdown-toggle class="icon-list-item">
- <span>@icon('export')</span>
- <span>{{ trans('entities.export') }}</span>
- </div>
- <ul class="wide dropdown-menu">
- <li><a href="{{ $chapter->getUrl('/export/html') }}" target="_blank">{{ trans('entities.export_html') }} <span class="text-muted float right">.html</span></a></li>
- <li><a href="{{ $chapter->getUrl('/export/pdf') }}" target="_blank">{{ trans('entities.export_pdf') }} <span class="text-muted float right">.pdf</span></a></li>
- <li><a href="{{ $chapter->getUrl('/export/plaintext') }}" target="_blank">{{ trans('entities.export_text') }} <span class="text-muted float right">.txt</span></a></li>
- </ul>
- </div>
+ @include('partials.entity-export-menu', ['entity' => $chapter])
</div>
</div>
@stop
<div class="comment-box mb-m" comment="{{ $comment->id }}" local-id="{{$comment->local_id}}" parent-id="{{$comment->parent_id}}" id="comment{{$comment->local_id}}">
<div class="header p-s">
- <div class="grid half no-gap v-center">
- <div class="meta">
- <a href="#comment{{$comment->local_id}}" class="text-muted">#{{$comment->local_id}}</a>
+ <div class="grid half left-focus no-gap v-center">
+ <div class="meta text-muted text-small">
+ <a href="#comment{{$comment->local_id}}">#{{$comment->local_id}}</a>
@if ($comment->createdBy)
<img width="50" src="{{ $comment->createdBy->getAvatar(50) }}" class="avatar" alt="{{ $comment->createdBy->name }}">
</div>
<div class="actions text-right">
@if(userCan('comment-update', $comment))
- <button type="button" class="text-button" action="edit" title="{{ trans('common.edit') }}">@icon('edit')</button>
+ <button type="button" class="text-button" action="edit" aria-label="{{ trans('common.edit') }}" title="{{ trans('common.edit') }}">@icon('edit')</button>
@endif
@if(userCan('comment-create-all'))
- <button type="button" class="text-button" action="reply" title="{{ trans('common.reply') }}">@icon('reply')</button>
+ <button type="button" class="text-button" action="reply" aria-label="{{ trans('common.reply') }}" title="{{ trans('common.reply') }}">@icon('reply')</button>
@endif
@if(userCan('comment-delete', $comment))
<div dropdown class="dropdown-container">
- <button type="button" dropdown-toggle class="text-button" title="{{ trans('common.delete') }}">@icon('delete')</button>
- <ul class="dropdown-menu">
+ <button type="button" dropdown-toggle aria-haspopup="true" aria-expanded="false" class="text-button" title="{{ trans('common.delete') }}">@icon('delete')</button>
+ <ul class="dropdown-menu" role="menu">
<li class="px-m text-small text-muted pb-s">{{trans('entities.comment_delete_confirm')}}</li>
- <li><a action="delete" class="text-button text-neg" >@icon('delete'){{ trans('common.delete') }}</a></li>
+ <li><a action="delete" href="#" class="text-button text-neg" >@icon('delete'){{ trans('common.delete') }}</a></li>
</ul>
</div>
@endif
<div class="header-search hide-under-l">
@if (hasAppAccess())
<form action="{{ url('/search') }}" method="GET" class="search-box">
- <button id="header-search-box-button" type="submit" aria-label="{{ trans('common.search') }}">@icon('search') </button>
- <input id="header-search-box-input" type="text" name="term" tabindex="2"
+ <button id="header-search-box-button" type="submit" aria-label="{{ trans('common.search') }}" tabindex="-1">@icon('search') </button>
+ <input id="header-search-box-input" type="text" name="term"
aria-label="{{ trans('common.search') }}" placeholder="{{ trans('common.search') }}"
value="{{ isset($searchTerm) ? $searchTerm : '' }}">
</form>
@if(signedInUser())
<?php $currentUser = user(); ?>
<div class="dropdown-container" dropdown>
- <span class="user-name hide-under-l" dropdown-toggle>
+ <span class="user-name py-s hide-under-l" dropdown-toggle
+ aria-haspopup="true" aria-expanded="false" aria-label="{{ trans('common.profile_menu') }}" tabindex="0">
<img class="avatar" src="{{$currentUser->getAvatar(30)}}" alt="{{ $currentUser->name }}">
<span class="name">{{ $currentUser->getShortName(9) }}</span> @icon('caret-down')
</span>
- <ul class="dropdown-menu">
+ <ul class="dropdown-menu" role="menu">
<li>
<a href="{{ url("/user/{$currentUser->id}") }}">@icon('user'){{ trans('common.view_profile') }}</a>
</li>
<div id="code-editor">
<div overlay ref="overlay" v-cloak @click="hide()">
- <div class="popup-body" @click.stop>
+ <div class="popup-body" tabindex="-1" @click.stop>
<div class="popup-header primary-background">
<div class="popup-title">{{ trans('components.code_editor') }}</div>
<div id="entity-selector-wrap">
<div overlay entity-selector-popup>
- <div class="popup-body small">
+ <div class="popup-body small" tabindex="-1">
<div class="popup-header primary-background">
<div class="popup-title">{{ trans('entities.entity_select') }}</div>
<button type="button" class="popup-header-close">x</button>
$key - Unique key for checking existing stored state.
--}}
<?php $isOpen = setting()->getForCurrentUser('section_expansion#'. $key); ?>
-<a expand-toggle="{{ $target }}"
+<button type="button" expand-toggle="{{ $target }}"
expand-toggle-update-endpoint="{{ url('/settings/users/'. $currentUser->id .'/update-expansion-preference/' . $key) }}"
expand-toggle-is-open="{{ $isOpen ? 'yes' : 'no' }}"
class="text-muted icon-list-item text-primary">
<span>@icon('expand-text')</span>
<span>{{ trans('common.toggle_details') }}</span>
-</a>
+</button>
@if($isOpen)
@push('head')
<style>
])
<div overlay v-cloak @click="hide">
- <div class="popup-body" @click.stop="">
+ <div class="popup-body" tabindex="-1" @click.stop>
<div class="popup-header primary-background">
<div class="popup-title">{{ trans('components.image_select') }}</div>
<div class="text-center px-m py-xs">
<div v-show="draftsEnabled" dropdown dropdown-move-menu class="dropdown-container draft-display text">
- <a dropdown-toggle class="text-primary text-button"><span class="faded-text" v-text="draftText"></span> @icon('more')</a>
+ <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>
@icon('check-circle', ['class' => 'text-pos draft-notification svg-icon', ':class' => '{visible: draftUpdated}'])
- <ul class="dropdown-menu">
+ <ul class="dropdown-menu" role="menu">
<li>
<a @click="saveDraft()" class="text-pos">@icon('save'){{ trans('entities.pages_edit_save_draft') }}</a>
</li>
@else
<a href="{{ $revision->getUrl() }}" target="_blank">{{ trans('entities.pages_revisions_preview') }}</a>
<span class="text-muted"> | </span>
- <a href="{{ $revision->getUrl('restore') }}"></a>
<div dropdown class="dropdown-container">
- <a dropdown-toggle>{{ trans('entities.pages_revisions_restore') }}</a>
- <ul class="dropdown-menu">
+ <a dropdown-toggle href="#" aria-haspopup="true" aria-expanded="false">{{ trans('entities.pages_revisions_restore') }}</a>
+ <ul class="dropdown-menu" role="menu">
<li class="px-m py-s"><small class="text-muted">{{trans('entities.revision_restore_confirm')}}</small></li>
<li>
<form action="{{ $revision->getUrl('/restore') }}" method="POST">
</div>
<span class="text-muted"> | </span>
<div dropdown class="dropdown-container">
- <a dropdown-toggle>{{ trans('common.delete') }}</a>
- <ul class="dropdown-menu">
+ <a dropdown-toggle href="#" aria-haspopup="true" aria-expanded="false">{{ trans('common.delete') }}</a>
+ <ul class="dropdown-menu" role="menu">
<li class="px-m py-s"><small class="text-muted">{{trans('entities.revision_delete_confirm')}}</small></li>
<li>
<form action="{{ $revision->getUrl('/delete/') }}" method="POST">
<hr class="primary-background"/>
{{--Export--}}
- <div dropdown class="dropdown-container block">
- <div dropdown-toggle class="icon-list-item">
- <span>@icon('export')</span>
- <span>{{ trans('entities.export') }}</span>
- </div>
- <ul class="dropdown-menu wide">
- <li><a href="{{ $page->getUrl('/export/html') }}" target="_blank">{{ trans('entities.export_html') }} <span class="text-muted float right">.html</span></a></li>
- <li><a href="{{ $page->getUrl('/export/pdf') }}" target="_blank">{{ trans('entities.export_pdf') }} <span class="text-muted float right">.pdf</span></a></li>
- <li><a href="{{ $page->getUrl('/export/plaintext') }}" target="_blank">{{ trans('entities.export_text') }} <span class="text-muted float right">.txt</span></a></li>
- </ul>
- </div>
+ @include('partials.entity-export-menu', ['entity' => $page])
</div>
</div>
@if($bookChild->isA('chapter') && count($bookChild->pages) > 0)
<div class="entity-list-item no-hover">
- <span class="icon text-chapter">
-
- </span>
+ <span role="presentation" class="icon text-chapter"></span>
<div class="content">
- @include('chapters.child-menu', ['chapter' => $bookChild, 'current' => $current])
+ @include('chapters.child-menu', [
+ 'chapter' => $bookChild,
+ 'current' => $current,
+ 'isOpen' => $bookChild->matchesOrContains($current)
+ ])
</div>
</div>
<div class="breadcrumb-listing" dropdown breadcrumb-listing="{{ $entity->getType() }}:{{ $entity->id }}">
- <div class="breadcrumb-listing-toggle" dropdown-toggle>
+ <div class="breadcrumb-listing-toggle" dropdown-toggle
+ aria-haspopup="true" aria-expanded="false" tabindex="0">
<div class="separator">@icon('chevron-right')</div>
</div>
- <div dropdown-menu class="breadcrumb-listing-dropdown card">
+ <div dropdown-menu class="breadcrumb-listing-dropdown card" role="menu">
<div class="breadcrumb-listing-search">
@icon('search')
- <input autocomplete="off" type="text" name="entity-search">
+ <input autocomplete="off" type="text" name="entity-search" placeholder="{{ trans('common.search') }}" aria-label="{{ trans('common.search') }}">
</div>
@include('partials.loading-icon')
<div class="breadcrumb-listing-entity-list px-m"></div>
<div class="mb-xl">
<form v-on:submit.prevent="searchBook" class="search-box flexible">
- <input v-model="searchTerm" v-on:change="checkSearchForm" type="text" name="term" placeholder="{{ trans('entities.books_search_this') }}">
- <button type="submit">@icon('search')</button>
- <button v-if="searching" v-cloak class="search-box-cancel text-neg" v-on:click="clearSearch" type="button">@icon('close')</button>
+ <input v-model="searchTerm" v-on:change="checkSearchForm" type="text" aria-label="{{ trans('entities.books_search_this') }}" name="term" placeholder="{{ trans('entities.books_search_this') }}">
+ <button type="submit" aria-label="{{ trans('common.search') }}">@icon('search')</button>
+ <button v-if="searching" v-cloak class="search-box-cancel text-neg" v-on:click="clearSearch"
+ type="button" aria-label="{{ trans('common.search_clear') }}">@icon('close')</button>
</form>
</div>
\ No newline at end of file
--- /dev/null
+<div dropdown class="dropdown-container" >
+ <div dropdown-toggle class="icon-list-item"
+ aria-haspopup="true" aria-expanded="false" aria-label="{{ trans('entities.export') }}" tabindex="0">
+ <span>@icon('export')</span>
+ <span>{{ trans('entities.export') }}</span>
+ </div>
+ <ul class="wide dropdown-menu" role="menu">
+ <li><a href="{{ $entity->getUrl('/export/html') }}" target="_blank">{{ trans('entities.export_html') }} <span class="text-muted float right">.html</span></a></li>
+ <li><a href="{{ $entity->getUrl('/export/pdf') }}" target="_blank">{{ trans('entities.export_pdf') }} <span class="text-muted float right">.pdf</span></a></li>
+ <li><a href="{{ $entity->getUrl('/export/plaintext') }}" target="_blank">{{ trans('entities.export_text') }} <span class="text-muted float right">.txt</span></a></li>
+ </ul>
+</div>
\ No newline at end of file
<?php $type = $entity->getType(); ?>
<a href="{{ $entity->getUrl() }}" class="{{$type}} {{$type === 'page' && $entity->draft ? 'draft' : ''}} {{$classes ?? ''}} entity-list-item" data-entity-type="{{$type}}" data-entity-id="{{$entity->id}}">
- <span class="icon text-{{$type}}">@icon($type)</span>
+ <span role="presentation" class="icon text-{{$type}}">@icon($type)</span>
<div class="content">
<h4 class="entity-list-item-name break-text">{{ $entity->name }}</h4>
{{ $slot ?? '' }}
<div class="list-sort">
<div class="list-sort-type dropdown-container" dropdown>
- <div dropdown-toggle>{{ $options[$selectedSort] }}</div>
+ <div dropdown-toggle aria-haspopup="true" aria-expanded="false" aria-label="{{ trans('common.sort_options') }}" tabindex="0">{{ $options[$selectedSort] }}</div>
<ul class="dropdown-menu">
@foreach($options as $key => $label)
<li @if($key === $selectedSort) class="active" @endif><a href="#" data-sort-value="{{$key}}">{{ $label }}</a></li>
@endforeach
</ul>
</div>
- <div class="list-sort-dir" data-sort-dir>
+ <button href="#" class="list-sort-dir" type="button" data-sort-dir
+ aria-label="{{ trans('common.sort_direction_toggle') }} - {{ $order === 'asc' ? trans('common.sort_ascending') : trans('common.sort_descending') }}" tabindex="0">
@icon($order === 'desc' ? 'sort-up' : 'sort-down')
- </div>
+ </button>
</div>
</form>
</div>
\ No newline at end of file
projects / bookstack / commitdiff