]> BookStack Code Mirror - bookstack/commitdiff
Made another mass of accessibility improvements
authorDan Brown <redacted>
Sun, 25 Aug 2019 14:44:51 +0000 (15:44 +0100)
committerDan Brown <redacted>
Sun, 25 Aug 2019 14:44:51 +0000 (15:44 +0100)
- 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

48 files changed:
resources/assets/js/components/collapsible.js
resources/assets/js/vues/components/autosuggest.js
resources/assets/js/vues/tag-manager.js
resources/assets/sass/_forms.scss
resources/assets/sass/_layout.scss
resources/lang/en/common.php
resources/lang/en/entities.php
resources/views/base.blade.php
resources/views/books/create.blade.php
resources/views/books/edit.blade.php
resources/views/books/form.blade.php
resources/views/books/list.blade.php
resources/views/books/permissions.blade.php
resources/views/books/show.blade.php
resources/views/books/sort.blade.php
resources/views/chapters/create.blade.php
resources/views/chapters/edit.blade.php
resources/views/chapters/form.blade.php
resources/views/chapters/move.blade.php
resources/views/chapters/permissions.blade.php
resources/views/chapters/show.blade.php
resources/views/comments/comments.blade.php
resources/views/common/header.blade.php
resources/views/common/home-custom.blade.php
resources/views/components/image-picker.blade.php
resources/views/components/tag-manager.blade.php
resources/views/pages/copy.blade.php
resources/views/pages/detailed-listing.blade.php
resources/views/pages/guest-create.blade.php
resources/views/pages/move.blade.php
resources/views/pages/permissions.blade.php
resources/views/pages/revision.blade.php
resources/views/pages/revisions.blade.php
resources/views/pages/show.blade.php
resources/views/partials/book-tree.blade.php
resources/views/partials/breadcrumbs.blade.php
resources/views/partials/entity-dashboard-search-box.blade.php
resources/views/settings/navbar.blade.php
resources/views/shelves/create.blade.php
resources/views/shelves/edit.blade.php
resources/views/shelves/form.blade.php
resources/views/shelves/list.blade.php
resources/views/shelves/show.blade.php
resources/views/tri-layout.blade.php
resources/views/users/create.blade.php
resources/views/users/edit.blade.php
resources/views/users/index.blade.php
resources/views/users/profile.blade.php

index 40ab325082df08a3a2cc37c968a3ffeabe6675b8..464f394c1e7e42a8d1dc568c94568d53f1498819 100644 (file)
@@ -18,11 +18,13 @@ class Collapsible {
 
     open() {
         this.elem.classList.add('open');
+        this.trigger.setAttribute('aria-expanded', 'true');
         slideDown(this.content, 300);
     }
 
     close() {
         this.elem.classList.remove('open');
+        this.trigger.setAttribute('aria-expanded', 'false');
         slideUp(this.content, 300);
     }
 
index d76ee89f189dd517f9805663aa08c06eaf690df5..b809313cb641cc0b723e334f510542fb045975a2 100644 (file)
@@ -6,6 +6,7 @@ const template = `
             @input="inputUpdate($event.target.value)" @focus="inputUpdate($event.target.value)"
             @blur="inputBlur"
             @keydown="inputKeydown"
+            :aria-label="placeholder"
         />
         <ul class="suggestion-box" v-if="showSuggestions">
             <li v-for="(suggestion, i) in suggestions"
@@ -66,23 +67,23 @@ const methods = {
     },
 
     inputKeydown(event) {
-        if (event.keyCode === 13) event.preventDefault();
+        if (event.key === 'Enter') event.preventDefault();
         if (!this.showSuggestions) return;
 
         // Down arrow
-        if (event.keyCode === 40) {
+        if (event.key === 'ArrowDown') {
             this.active = (this.active === this.suggestions.length - 1) ? 0 : this.active+1;
         }
         // Up Arrow
-        else if (event.keyCode === 38) {
+        else if (event.key === 'ArrowUp') {
             this.active = (this.active === 0) ? this.suggestions.length - 1 : this.active-1;
         }
-        // Enter or tab keys
-        else if ((event.keyCode === 13 || event.keyCode === 9) && !event.shiftKey) {
+        // Enter key
+        else if ((event.key === 'Enter') && !event.shiftKey) {
             this.selectSuggestion(this.suggestions[this.active]);
         }
         // Escape key
-        else if (event.keyCode === 27) {
+        else if (event.key === 'Escape') {
             this.showSuggestions = false;
         }
     },
index e0dab595ae79502d17655634691e210a799cca68..65233cbb676636bd7756ade1cd48b026d0572835 100644 (file)
@@ -1,7 +1,7 @@
 import draggable from 'vuedraggable';
 import autosuggest from './components/autosuggest';
 
-let data = {
+const data = {
     entityId: false,
     entityType: null,
     tags: [],
@@ -10,7 +10,7 @@ let data = {
 const components = {draggable, autosuggest};
 const directives = {};
 
-let methods = {
+const methods = {
 
     addEmptyTag() {
         this.tags.push({name: '', value: '', key: Math.random().toString(36).substring(7)});
index 4f89533b05c4ba479171b65013de661a6d608bad..2f34dc0926cdb4e27c813f27769fbbe230a647f8 100644 (file)
   &.disabled, &[disabled] {
     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAMUlEQVQIW2NkwAGuXbv2nxGbHEhCS0uLEUMSJgHShCKJLIEiiS4Bl8QmAZbEJQGSBAC62BuJ+tt7zgAAAABJRU5ErkJggg==);
   }
+  &:focus {
+    border-color: var(--color-primary);
+    outline: 1px solid var(--color-primary);
+  }
 }
 
 .fake-input {
@@ -266,6 +270,9 @@ input[type=color] {
     margin-left: -$-m;
     margin-right: -$-m;
     padding: $-s $-m;
+    display: block;
+    width: calc(100% + 32px);
+    text-align: left;
   }
   .collapse-title, .collapse-title label {
     cursor: pointer;
@@ -377,3 +384,18 @@ div[editor-type="markdown"] .title-input.page-title input[type="text"] {
   background-color: #BBB;
   max-width: 100%;
 }
+
+.custom-file-input {
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+  height: 1px;
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+}
+.custom-file-input:focus + label {
+  border-color: var(--color-primary);
+  outline: 1px solid var(--color-primary);
+}
\ No newline at end of file
index 381dc3ff3175f68225dcc65597b66df729379bf7..a280e4ed1f25514ad689b590dda7522d3aba2caa 100644 (file)
@@ -301,7 +301,7 @@ body.flexbox {
   .tri-layout-mobile-tabs {
     display: none;
   }
-  .tri-layout-left-contents > div, .tri-layout-right-contents > div {
+  .tri-layout-left-contents > *, .tri-layout-right-contents > * {
     opacity: 0.6;
     transition: opacity ease-in-out 120ms;
     &:hover {
index e81cf6a52031dcdcb648112605c64f2454ab52f8..1807217a375d2f0a77f5fe10ea80113ee57ea490 100644 (file)
@@ -59,6 +59,7 @@ return [
     'grid_view' => 'Grid View',
     'list_view' => 'List View',
     'default' => 'Default',
+    'breadcrumb' => 'Breadcrumb',
 
     // Header
     'profile_menu' => 'Profile Menu',
index b4fdbf0e550fa736b0972626a9c93d89dfaf80e5..6bbc723b0abfc1e6b1f69e270bbb9d2afdbe851b 100644 (file)
@@ -243,9 +243,11 @@ return [
     'shelf_tags' => 'Shelf Tags',
     'tag' => 'Tag',
     'tags' =>  'Tags',
+    'tag_name' =>  'Tag Name',
     'tag_value' => 'Tag Value (Optional)',
     'tags_explain' => "Add some tags to better categorise your content. \n You can assign a value to a tag for more in-depth organisation.",
     'tags_add' => 'Add another tag',
+    'tags_remove' => 'Remove this tag',
     'attachments' => 'Attachments',
     'attachments_explain' => 'Upload some files or attach some links to display on your page. These are visible in the page sidebar.',
     'attachments_explain_instant_save' => 'Changes here are saved instantly.',
index c7fba7b6468c4ac7d63d9fd0fc62ea96d5cb3258..07548162067404fa82061695c6753fe5bd15e27c 100644 (file)
@@ -30,9 +30,9 @@
     @include('partials.notifications')
     @include('common.header')
 
-    <section id="content" class="block">
+    <div id="content" class="block">
         @yield('content')
-    </section>
+    </div>
 
     <div back-to-top class="primary-background print-hidden">
         <div class="inner">
index 65958e137e8aa357fb1613115e86edade88c8566..6de81cd462db648bcf11e294eff640c1c67c6f91 100644 (file)
             @endif
         </div>
 
-        <div class="content-wrap card">
+        <main class="content-wrap card">
             <h1 class="list-heading">{{ trans('entities.books_create') }}</h1>
             <form action="{{ isset($bookshelf) ? $bookshelf->getUrl('/create-book') : url('/books') }}" method="POST" enctype="multipart/form-data">
                 @include('books.form')
             </form>
-        </div>
+        </main>
     </div>
 
 @stop
\ No newline at end of file
index 2e51ed6e956fb947b905b97282d895ef38f1137c..400fd6e817a0a3dc6bdd5d7289abf59c0386f0c8 100644 (file)
             ]])
         </div>
 
-        <div class="content-wrap card">
+        <main class="content-wrap card">
             <h1 class="list-heading">{{ trans('entities.books_edit') }}</h1>
             <form action="{{ $book->getUrl() }}" method="POST" enctype="multipart/form-data">
                 <input type="hidden" name="_method" value="PUT">
                 @include('books.form', ['model' => $book])
             </form>
-        </div>
+        </main>
     </div>
 @stop
\ No newline at end of file
index 1100190023bd75f53632c37c4cf7f5e140cd8197..8960b41359584ceb2cdec3b41039a90f0b1bfdde 100644 (file)
@@ -11,9 +11,9 @@
 </div>
 
 <div class="form-group" collapsible id="logo-control">
-    <div class="collapse-title text-primary" collapsible-trigger>
-        <label for="user-avatar">{{ trans('common.cover_image') }}</label>
-    </div>
+    <button type="button" class="collapse-title text-primary" collapsible-trigger aria-expanded="false">
+        <label>{{ trans('common.cover_image') }}</label>
+    </button>
     <div class="collapse-content" collapsible-content>
         <p class="small">{{ trans('common.cover_image_description') }}</p>
 
@@ -27,9 +27,9 @@
 </div>
 
 <div class="form-group" collapsible id="tags-control">
-    <div class="collapse-title text-primary" collapsible-trigger>
+    <button type="button" class="collapse-title text-primary" collapsible-trigger aria-expanded="false">
         <label for="tag-manager">{{ trans('entities.book_tags') }}</label>
-    </div>
+    </button>
     <div class="collapse-content" collapsible-content>
         @include('components.tag-manager', ['entity' => isset($book)?$book:null, 'entityType' => 'chapter'])
     </div>
index 84578e3a59ba5851ca4224143ccf9c96c8e6b10a..871d931f17953496478a7f456e910c5ec3d6ee36 100644 (file)
@@ -1,5 +1,5 @@
 
-<div class="content-wrap mt-m card">
+<main class="content-wrap mt-m card">
     <div class="grid half v-center no-row-gap">
         <h1 class="list-heading">{{ trans('entities.books') }}</h1>
         <div class="text-m-right my-m">
@@ -31,4 +31,4 @@
             <a href="{{ url("/create-book") }}" class="text-pos">@icon('edit'){{ trans('entities.create_now') }}</a>
         @endif
     @endif
-</div>
\ No newline at end of file
+</main>
\ No newline at end of file
index 64322cf859696af63971a57b76abad784ac14be9..b387ed6c7c94b082800b1a72979c61668308a2f7 100644 (file)
             ]])
         </div>
 
-        <div class="card content-wrap">
+        <main class="card content-wrap">
             <h1 class="list-heading">{{ trans('entities.books_permissions') }}</h1>
             @include('form.entity-permissions', ['model' => $book])
-        </div>
+        </main>
     </div>
 
 @stop
index 528eb5496d7f041d9c49ccedae665aac1fb037d9..cbafdb4364b0d18e350369d83e6457775edba5e5 100644 (file)
@@ -14,7 +14,7 @@
         ]])
     </div>
 
-    <div class="content-wrap card">
+    <main class="content-wrap card">
         <h1 class="break-text" v-pre>{{$book->name}}</h1>
         <div class="book-content" v-show="!searching">
             <p class="text-muted" v-pre>{!! nl2br(e($book->description)) !!}</p>
@@ -53,7 +53,7 @@
         </div>
 
         @include('partials.entity-dashboard-search-results')
-    </div>
+    </main>
 
 @stop
 
index 26ac8470f5282118f4d9737715bf09c662068611..642b88c873a1c442451494903a5db83db76c5c33 100644 (file)
             </div>
 
             <div>
-                <div class="card content-wrap">
+                <main class="card content-wrap">
                     <h2 class="list-heading mb-m">{{ trans('entities.books_sort_show_other') }}</h2>
 
                     @include('components.entity-selector', ['name' => 'books_list', 'selectorSize' => 'compact', 'entityTypes' => 'book', 'entityPermission' => 'update', 'showAdd' => true])
 
-                </div>
+                </main>
             </div>
         </div>
 
index fd2c82b46563e507f4b9647ddfb15fcc9ba8ac59..c9787e6348991073a5c3e265097e0926b8179338 100644 (file)
             ]])
         </div>
 
-        <div class="content-wrap card">
+        <main class="content-wrap card">
             <h1 class="list-heading">{{ trans('entities.chapters_create') }}</h1>
             <form action="{{ $book->getUrl('/create-chapter') }}" method="POST">
                 @include('chapters.form')
             </form>
-        </div>
+        </main>
 
     </div>
 @stop
\ No newline at end of file
index d282fe1ddc9b614d5d40aede5f093dcacefa6792..d8bb056f632ce8d172da67ebb8b2e50ad7c092cb 100644 (file)
             ]])
         </div>
 
-        <div class="content-wrap card">
+        <main class="content-wrap card">
             <h1 class="list-heading">{{ trans('entities.chapters_edit') }}</h1>
             <form action="{{  $chapter->getUrl() }}" method="POST">
                 <input type="hidden" name="_method" value="PUT">
                 @include('chapters.form', ['model' => $chapter])
             </form>
-        </div>
+        </main>
 
     </div>
 
index 399d3fe36158d0ba1590f5e672773d6a4548a83f..cd240e685dd651f5501a4659e74d8e145c0c1760 100644 (file)
@@ -12,9 +12,9 @@
 </div>
 
 <div class="form-group" collapsible id="logo-control">
-    <div class="collapse-title text-primary" collapsible-trigger>
-        <label for="user-avatar">{{ trans('entities.chapter_tags') }}</label>
-    </div>
+    <button type="button" class="collapse-title text-primary" collapsible-trigger aria-expanded="false">
+        <label for="tags">{{ trans('entities.chapter_tags') }}</label>
+    </button>
     <div class="collapse-content" collapsible-content>
         @include('components.tag-manager', ['entity' => isset($chapter)?$chapter:null, 'entityType' => 'chapter'])
     </div>
index b7fe6cb0aca687661e1e8fd447c8b984b424c1bd..8663dca5050e53fb0dbbc9ab6b369d720bbab59a 100644 (file)
@@ -15,7 +15,7 @@
             ]])
         </div>
 
-        <div class="card content-wrap">
+        <main class="card content-wrap">
             <h1 class="list-heading">{{ trans('entities.chapters_move') }}</h1>
 
             <form action="{{ $chapter->getUrl('/move') }}" method="POST">
@@ -31,7 +31,7 @@
                 </div>
             </form>
 
-        </div>
+        </main>
 
 
 
index cb5808e7d5070f9fa0c3e2b0dfc1fa273248c24b..48c954dc96871b0f23154772ec2ba6e79a600d80 100644 (file)
             ]])
         </div>
 
-        <div class="card content-wrap">
+        <main class="card content-wrap">
             <h1 class="list-heading">{{ trans('entities.chapters_permissions') }}</h1>
             @include('form.entity-permissions', ['model' => $chapter])
-        </div>
+        </main>
     </div>
 
 @stop
index c343115a9870e943f0e0d515836c83cf905c7961..105cda760ff496c909aadf723c274fd12b64637b 100644 (file)
@@ -15,7 +15,7 @@
         ]])
     </div>
 
-    <div class="content-wrap card">
+    <main class="content-wrap card">
         <h1 class="break-text" v-pre>{{ $chapter->name }}</h1>
         <div class="chapter-content" v-show="!searching">
             <p v-pre class="text-muted break-text">{!! nl2br(e($chapter->description)) !!}</p>
@@ -50,7 +50,7 @@
         </div>
 
         @include('partials.entity-dashboard-search-results')
-    </div>
+    </main>
 
 @stop
 
index 5bfcc31bd4a730b80f75e94998ac7dab619946a0..fc81f13ee73053e4c4e208f64cc64e9eb8183826 100644 (file)
@@ -1,4 +1,4 @@
-<div page-comments page-id="{{ $page->id }}" class="comments-list">
+<section page-comments page-id="{{ $page->id }}" class="comments-list" aria-label="{{ trans('entities.comments') }}">
 
     @exposeTranslations([
         'entities.comment_updated_success',
@@ -34,4 +34,4 @@
         @endif
     @endif
 
-</div>
\ No newline at end of file
+</section>
\ No newline at end of file
index f9e12014ec436f0b281df70f2060a3609255ef89..19299695042e98ded5b55735865c31f6fee9528b 100644 (file)
@@ -15,7 +15,7 @@
 
         <div class="header-search hide-under-l">
             @if (hasAppAccess())
-            <form action="{{ url('/search') }}" method="GET" class="search-box">
+            <form action="{{ url('/search') }}" method="GET" class="search-box" role="search">
                 <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') }}"
@@ -25,7 +25,7 @@
         </div>
 
         <div class="text-right">
-            <div class="header-links">
+            <nav class="header-links" >
                 <div class="links text-center">
                     @if (hasAppAccess())
                         <a class="hide-over-l" href="{{ url('/search') }}">@icon('search'){{ trans('common.search') }}</a>
@@ -69,7 +69,7 @@
                         </ul>
                     </div>
                 @endif
-            </div>
+            </nav>
         </div>
 
     </div>
index c93fa1a24c28c285c740372bf46edd552fa09128..56e281dcb7fd107c52317ba0f856ce9c4310a103 100644 (file)
@@ -2,11 +2,11 @@
 
 @section('body')
     <div class="mt-m">
-        <div class="content-wrap card">
+        <main class="content-wrap card">
             <div class="page-content" page-display="{{ $customHomepage->id }}">
                 @include('pages.page-display', ['page' => $customHomepage])
             </div>
-        </div>
+        </main>
     </div>
 @stop
 
index 73885aeb4548c54aa085c795caed53f081de72f7..9c2661cccbd3d19c412a39af93837ad0be8ab205 100644 (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">
index 31585dc41aedb8bede78dba2fd7d6b5d43fa4803..2878569374d6db6bd80928a3fe34d8477d982124 100644 (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>
 
index 2b5d7e74ea74a4d0f1e2e37594990456f23f99de..0f2af0476e17143b5f8a48df42fccd75d0892f2a 100644 (file)
@@ -29,9 +29,9 @@
                 </div>
 
                 <div class="form-group" collapsible>
-                    <div class="collapse-title text-primary" collapsible-trigger>
+                    <button type="button" class="collapse-title text-primary" collapsible-trigger aria-expanded="false">
                         <label for="entity_selection">{{ trans('entities.pages_copy_desination') }}</label>
-                    </div>
+                    </button>
                     <div class="collapse-content" collapsible-content>
                         @include('components.entity-selector', ['name' => 'entity_selection', 'selectorSize' => 'large', 'entityTypes' => 'book,chapter', 'entityPermission' => 'page-create'])
                     </div>
index eb2fab94cb3076602b909499ee5a29656c7fe257..c2bbdb53711629d86bc7a3272f8fcab12ff6ba20 100644 (file)
@@ -2,7 +2,7 @@
 
 @section('body')
     <div class="container small pt-xl">
-        <div class="card content-wrap">
+        <main class="card content-wrap">
             <h1 class="list-heading">{{ $title }}</h1>
 
             <div class="book-contents">
@@ -12,6 +12,6 @@
             <div class="text-center">
                 {!! $pages->links() !!}
             </div>
-        </div>
+        </main>
     </div>
 @stop
\ No newline at end of file
index 5404d8f4b762de21bc9d27f145ac3589b6ba2fb1..55db85144ae1f9ba147b4da17268c78cfc2589ec 100644 (file)
@@ -15,7 +15,7 @@
             ]])
         </div>
 
-        <div class="card content-wrap">
+        <main class="card content-wrap">
             <h1 class="list-heading">{{ trans('entities.pages_new') }}</h1>
             <form action="{{  $parent->getUrl('/create-guest-page') }}" method="POST">
                 {!! csrf_field() !!}
@@ -31,7 +31,7 @@
                 </div>
 
             </form>
-        </div>
+        </main>
     </div>
 
 @stop
\ No newline at end of file
index 7cf294f14bdde061548a30db979f584895d236a1..3bf1db5e46671f98ead3e3cd8c879f0bb92887ec 100644 (file)
@@ -16,7 +16,7 @@
             ]])
         </div>
 
-        <div class="card content-wrap">
+        <main class="card content-wrap">
             <h1 class="list-heading">{{ trans('entities.pages_move') }}</h1>
 
             <form action="{{ $page->getUrl('/move') }}" method="POST">
@@ -31,7 +31,7 @@
                 </div>
             </form>
 
-        </div>
+        </main>
     </div>
 
 @stop
index 260f0e49f961eae313aa276653d982fd12ba82ad..de28137dbe02952d52f5cb563d52d95e992074f2 100644 (file)
             ]])
         </div>
 
-        <div class="card content-wrap">
+        <main class="card content-wrap">
             <h1 class="list-heading">{{ trans('entities.pages_permissions') }}</h1>
             @include('form.entity-permissions', ['model' => $page])
-        </div>
+        </main>
     </div>
 
 @stop
index e897522cb4607d9bfd23f40fbc998f817c89ec00..0557b6b1cd79be45f57d51074bcbf32ab9753b86 100644 (file)
         ]])
     </div>
 
-    <div class="card content-wrap">
+    <main class="card content-wrap">
         <div class="page-content page-revision">
             @include('pages.page-display')
         </div>
-    </div>
+    </main>
 
 @stop
\ No newline at end of file
index d1491bdec0dcd4ec2ba0cc39a09814fef2ee871f..feb3180775adaff018fe9dd739e21bc64354998c 100644 (file)
@@ -15,7 +15,7 @@
             ]])
         </div>
 
-        <div class="card content-wrap">
+        <main class="card content-wrap">
             <h1 class="list-heading">{{ trans('entities.pages_revisions') }}</h1>
             @if(count($page->revisions) > 0)
 
@@ -86,7 +86,7 @@
             @else
                 <p>{{ trans('entities.pages_revisions_none') }}</p>
             @endif
-        </div>
+        </main>
 
     </div>
 
index 4c6b63d48cef01c51f5ceeb679a03f9367911c3d..51ab5bbbe53531e315e6ae314694123adcfc7281 100644 (file)
         ]])
     </div>
 
-    <div class="content-wrap card">
+    <main class="content-wrap card">
         <div class="page-content" page-display="{{ $page->id }}">
             @include('pages.pointer', ['page' => $page])
             @include('pages.page-display')
         </div>
-    </div>
+    </main>
 
     @if ($commentsEnabled)
         <div class="container small p-none comments-container mb-l print-hidden">
@@ -50,7 +50,7 @@
     @endif
 
     @if (isset($pageNav) && count($pageNav))
-        <div id="page-navigation" class="mb-xl">
+        <nav id="page-navigation" class="mb-xl" aria-label="{{ trans('entities.pages_navigation') }}">
             <h5>{{ trans('entities.pages_navigation') }}</h5>
             <div class="body">
                 <div class="sidebar-page-nav menu">
@@ -62,7 +62,7 @@
                     @endforeach
                 </div>
             </div>
-        </div>
+        </nav>
     @endif
 
     @include('partials.book-tree', ['book' => $book, 'sidebarTree' => $sidebarTree])
index 1a1a945487a85e3913801fdebc3175e15a2e5df9..c288e63674ff38b456a4b13ed530746510f11e29 100644 (file)
@@ -1,4 +1,4 @@
-<div id="book-tree" class="book-tree mb-xl" v-pre>
+<nav id="book-tree" class="book-tree mb-xl" v-pre aria-label="{{ trans('entities.books_navigation') }}">
     <h5>{{ trans('entities.books_navigation') }}</h5>
 
     <ul class="sidebar-page-list mt-xs menu entity-list">
@@ -29,4 +29,4 @@
             </li>
         @endforeach
     </ul>
-</div>
\ No newline at end of file
+</nav>
\ No newline at end of file
index 28c7196ee490c9e0e8a0039f984e200b00e128d6..5e11a9190b8a935748069a92288331c1e55fe927 100644 (file)
@@ -1,4 +1,4 @@
-<div class="breadcrumbs text-center">
+<nav class="breadcrumbs text-center" aria-label="{{ trans('common.breadcrumb') }}">
     <?php $breadcrumbCount = 0; ?>
 
     {{-- Show top level books item --}}
@@ -51,4 +51,4 @@
         @endif
         <?php $breadcrumbCount++; ?>
     @endforeach
-</div>
\ No newline at end of file
+</nav>
\ No newline at end of file
index f46c9a8f1327f6ef0487bf8f344318e900099c14..2e0395253b7680e5b21166228c59e8389118d4ce 100644 (file)
@@ -1,5 +1,5 @@
 <div class="mb-xl">
-    <form v-on:submit.prevent="searchBook" class="search-box flexible">
+    <form v-on:submit.prevent="searchBook" class="search-box flexible" role="search">
         <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"
index 51fda5b9031e57f967e895b4b7ab6761f0e65fd4..896de9d97477c0c3e510ca806ed7e33cbf12e611 100644 (file)
@@ -1,5 +1,5 @@
 
-<div class="active-link-list">
+<nav class="active-link-list">
     @if($currentUser->can('settings-manage'))
         <a href="{{ url('/settings') }}" @if($selected == 'settings') class="active" @endif>@icon('settings'){{ trans('settings.settings') }}</a>
         <a href="{{ url('/settings/maintenance') }}" @if($selected == 'maintenance') class="active" @endif>@icon('spanner'){{ trans('settings.maint') }}</a>
@@ -10,4 +10,4 @@
     @if($currentUser->can('user-roles-manage'))
         <a href="{{ url('/settings/roles') }}" @if($selected == 'roles') class="active" @endif>@icon('lock-open'){{ trans('settings.roles') }}</a>
     @endif
-</div>
\ No newline at end of file
+</nav>
\ No newline at end of file
index aee1c5a4299bfe6352dfec6d550c6f982abcde9a..bea20eca93624cf234e89b73099b51fc5574c3c4 100644 (file)
             ]])
         </div>
 
-        <div class="card content-wrap">
+        <main class="card content-wrap">
             <h1 class="list-heading">{{ trans('entities.shelves_create') }}</h1>
             <form action="{{ url("/shelves") }}" method="POST" enctype="multipart/form-data">
                 @include('shelves.form', ['shelf' => null, 'books' => $books])
             </form>
-        </div>
+        </main>
 
     </div>
 
index 8c2cd4f45e7d11d816a3472a9e0b109c0aeb392d..5ae3638fee955ec3f30ee3c068f5c45e6f7b7976 100644 (file)
             ]])
         </div>
 
-        <div class="card content-wrap">
+        <main class="card content-wrap">
             <h1 class="list-heading">{{ trans('entities.shelves_edit') }}</h1>
             <form action="{{ $shelf->getUrl() }}" method="POST" enctype="multipart/form-data">
                 <input type="hidden" name="_method" value="PUT">
                 @include('shelves.form', ['model' => $shelf])
             </form>
-        </div>
+        </main>
     </div>
 
 @stop
\ No newline at end of file
index fa19409481dcb61da9116955ebd33b440fd7a53f..5125e7e194ce250f53bbc6a4a0fd61b5a5837132 100644 (file)
@@ -40,9 +40,9 @@
 
 
 <div class="form-group" collapsible id="logo-control">
-    <div class="collapse-title text-primary" collapsible-trigger>
-        <label for="user-avatar">{{ trans('common.cover_image') }}</label>
-    </div>
+    <button type="button" class="collapse-title text-primary" collapsible-trigger aria-expanded="false">
+        <label>{{ trans('common.cover_image') }}</label>
+    </button>
     <div class="collapse-content" collapsible-content>
         <p class="small">{{ trans('common.cover_image_description') }}</p>
 
@@ -56,9 +56,9 @@
 </div>
 
 <div class="form-group" collapsible id="tags-control">
-    <div class="collapse-title text-primary" collapsible-trigger>
+    <button type="button" class="collapse-title text-primary" collapsible-trigger aria-expanded="false">
         <label for="tag-manager">{{ trans('entities.shelf_tags') }}</label>
-    </div>
+    </button>
     <div class="collapse-content" collapsible-content>
         @include('components.tag-manager', ['entity' => $shelf ?? null, 'entityType' => 'bookshelf'])
     </div>
index 3f8c266e992b83e23cd261d3860a0d0e6973541e..b20b08a2c59e40f8a110394404f63ac198c91f8f 100644 (file)
@@ -1,5 +1,5 @@
 
-<div class="content-wrap mt-m card">
+<main class="content-wrap mt-m card">
 
     <div class="grid half v-center">
         <h1 class="list-heading">{{ trans('entities.shelves') }}</h1>
@@ -35,4 +35,4 @@
         @endif
     @endif
 
-</div>
+</main>
index 3a9d599519a95035e7d4a8cb8dfbcca23303669f..6bfc525a5dc458852ce750984891862857f9b010 100644 (file)
@@ -8,7 +8,7 @@
         ]])
     </div>
 
-    <div class="card content-wrap">
+    <main class="card content-wrap">
         <h1 class="break-text">{{$shelf->name}}</h1>
         <div class="book-content">
             <p class="text-muted">{!! nl2br(e($shelf->description)) !!}</p>
@@ -39,7 +39,7 @@
                 </div>
             @endif
         </div>
-    </div>
+    </main>
 
 @stop
 
index d869d6f13f605c5aef5a6a1a2e0e06abd62a33a0..71c546964ef6fb31d89a553256654324998de35b 100644 (file)
@@ -18,9 +18,9 @@
     <div class="tri-layout-container" tri-layout @yield('container-attrs') >
 
         <div class="tri-layout-left print-hidden pt-m" id="sidebar">
-            <div class="tri-layout-left-contents">
+            <aside class="tri-layout-left-contents">
                 @yield('left')
-            </div>
+            </aside>
         </div>
 
         <div class="@yield('body-wrap-classes') tri-layout-middle">
@@ -30,9 +30,9 @@
         </div>
 
         <div class="tri-layout-right print-hidden pt-m">
-            <div class="tri-layout-right-contents">
+            <aside class="tri-layout-right-contents">
                 @yield('right')
-            </div>
+            </aside>
         </div>
     </div>
 
index 109b812257f7c8a515bc35a5e445954150c56cea..9971eeeeb54ca63ba42045982f076e6324936989 100644 (file)
@@ -8,7 +8,7 @@
             @include('settings.navbar', ['selected' => 'users'])
         </div>
 
-        <div class="card content-wrap">
+        <main class="card content-wrap">
             <h1 class="list-heading">{{ trans('settings.users_add_new') }}</h1>
 
             <form action="{{ url("/settings/users/create") }}" method="post">
@@ -25,7 +25,7 @@
 
             </form>
 
-        </div>
+        </main>
     </div>
 
 @stop
index 9f8fba8df4fc5c33938d0cc706aab36749efa74c..ff1e7cbe5d51577e2cd807dc4842aee8b268f1c8 100644 (file)
@@ -7,7 +7,7 @@
             @include('settings.navbar', ['selected' => 'users'])
         </div>
 
-        <div class="card content-wrap">
+        <section class="card content-wrap">
             <h1 class="list-heading">{{ $user->id === $currentUser->id ? trans('settings.users_edit_profile') : trans('settings.users_edit') }}</h1>
             <form action="{{ url("/settings/users/{$user->id}") }}" method="post" enctype="multipart/form-data">
                 {!! csrf_field() !!}
                     <button class="button" type="submit">{{ trans('common.save') }}</button>
                 </div>
             </form>
-        </div>
+        </section>
 
         @if($currentUser->id === $user->id && count($activeSocialDrivers) > 0)
-            <div class="card content-wrap auto-height">
+            <section class="card content-wrap auto-height">
                 <h2 class="list-heading">{{ trans('settings.users_social_accounts') }}</h2>
                 <p class="text-muted">{{ trans('settings.users_social_accounts_info') }}</p>
                 <div class="container">
                     <div class="grid third">
                         @foreach($activeSocialDrivers as $driver => $enabled)
                             <div class="text-center mb-m">
-                                <div>@icon('auth/'. $driver, ['style' => 'width: 56px;height: 56px;'])</div>
+                                <div role="presentation">@icon('auth/'. $driver, ['style' => 'width: 56px;height: 56px;'])</div>
                                 <div>
                                     @if($user->hasSocialAccount($driver))
-                                        <a href="{{ url("/login/service/{$driver}/detach") }}" class="button small outline">{{ trans('settings.users_social_disconnect') }}</a>
+                                        <a href="{{ url("/login/service/{$driver}/detach") }}" aria-label="{{ trans('settings.users_social_disconnect') }} - {{ $driver }}"
+                                           class="button small outline">{{ trans('settings.users_social_disconnect') }}</a>
                                     @else
-                                        <a href="{{ url("/login/service/{$driver}") }}" class="button small outline">{{ trans('settings.users_social_connect') }}</a>
+                                        <a href="{{ url("/login/service/{$driver}") }}" aria-label="{{ trans('settings.users_social_connect') }} - {{ $driver }}"
+                                           class="button small outline">{{ trans('settings.users_social_connect') }}</a>
                                     @endif
                                 </div>
                             </div>
                         @endforeach
                     </div>
                 </div>
-            </div>
+            </section>
         @endif
     </div>
 
index 72db240758f228c7b56d045125b2b01140ec0323..da373c1618b563fddcc9768644b7d1ac608e29cf 100644 (file)
@@ -7,7 +7,7 @@
             @include('settings.navbar', ['selected' => 'users'])
         </div>
 
-        <div class="card content-wrap">
+        <main class="card content-wrap">
 
             <div class="grid right-focus v-center">
                 <h1 class="list-heading">{{ trans('settings.users') }}</h1>
@@ -62,7 +62,7 @@
             <div>
                 {{ $users->links() }}
             </div>
-        </div>
+        </main>
 
     </div>
 
index f817e328f410ae6358314b17dc9903ec23bebfd1..4028b5c1da731c45925d8d27caea334b46cc0e74 100644 (file)
@@ -7,14 +7,14 @@
         <div class="grid right-focus reverse-collapse">
 
             <div>
-                <div id="recent-user-activity" class="mb-xl">
+                <section id="recent-user-activity" class="mb-xl">
                     <h5>{{ trans('entities.recent_activity') }}</h5>
                     @include('partials.activity-list', ['activity' => $activity])
-                </div>
+                </section>
             </div>
 
             <div>
-                <div class="card content-wrap auto-height">
+                <section class="card content-wrap auto-height">
                     <div class="grid half v-center">
                         <div>
                             <div class="mr-m float left">
@@ -54,9 +54,9 @@
 
                         </div>
                     </div>
-                </div>
+                </section>
 
-                <div class="card content-wrap auto-height book-contents">
+                <section class="card content-wrap auto-height book-contents">
                     <h2 id="recent-pages" class="list-heading">
                         {{ trans('entities.recently_created_pages') }}
                         @if (count($recentlyCreated['pages']) > 0)
@@ -68,9 +68,9 @@
                     @else
                         <p class="text-muted">{{ trans('entities.profile_not_created_pages', ['userName' => $user->name]) }}</p>
                     @endif
-                </div>
+                </section>
 
-                <div class="card content-wrap auto-height book-contents">
+                <section class="card content-wrap auto-height book-contents">
                     <h2 id="recent-chapters" class="list-heading">
                         {{ trans('entities.recently_created_chapters') }}
                         @if (count($recentlyCreated['chapters']) > 0)
@@ -82,9 +82,9 @@
                     @else
                         <p class="text-muted">{{ trans('entities.profile_not_created_chapters', ['userName' => $user->name]) }}</p>
                     @endif
-                </div>
+                </section>
 
-                <div class="card content-wrap auto-height book-contents">
+                <section class="card content-wrap auto-height book-contents">
                     <h2 id="recent-books" class="list-heading">
                         {{ trans('entities.recently_created_books') }}
                         @if (count($recentlyCreated['books']) > 0)
@@ -96,9 +96,9 @@
                     @else
                         <p class="text-muted">{{ trans('entities.profile_not_created_books', ['userName' => $user->name]) }}</p>
                     @endif
-                </div>
+                </section>
 
-                <div class="card content-wrap auto-height book-contents">
+                <section class="card content-wrap auto-height book-contents">
                     <h2 id="recent-shelves" class="list-heading">
                         {{ trans('entities.recently_created_shelves') }}
                         @if (count($recentlyCreated['shelves']) > 0)
                     @else
                         <p class="text-muted">{{ trans('entities.profile_not_created_shelves', ['userName' => $user->name]) }}</p>
                     @endif
-                </div>
+                </section>
             </div>
 
         </div>
 
 
     </div>
-
-
 @stop
\ No newline at end of file