]> BookStack Code Mirror - bookstack/commitdiff
Fixed failing test and added more accessibility improvements
authorDan Brown <redacted>
Sun, 25 Aug 2019 16:21:25 +0000 (17:21 +0100)
committerDan Brown <redacted>
Sun, 25 Aug 2019 16:21:25 +0000 (17:21 +0100)
- Updated linked images to have obvious focus styles
- Added proper role to notifications
- Made dropdown list focus styles a bit nicer.
- Updated book list chapter child slide down to be keyboard activatable.

Related to #1320

resources/assets/sass/_lists.scss
resources/assets/sass/_text.scss
resources/views/chapters/child-menu.blade.php
resources/views/chapters/list-item.blade.php
resources/views/partials/custom-styles.blade.php
resources/views/partials/notifications.blade.php
tests/Entity/PageRevisionTest.php

index 74c36c86c432edfd3cd05c8839aefdb150a82297..a448266f393c1f7b532f8a96ae8c6aa208a52002 100644 (file)
@@ -59,6 +59,8 @@
   .chapter-expansion-toggle {
     border-radius: 0 4px 4px 0;
     padding: $-xs $-m;
+    width: 100%;
+    text-align: left;
   }
   .chapter-expansion-toggle:hover {
     background-color: rgba(0, 0, 0, 0.06);
@@ -554,14 +556,15 @@ ul.pagination {
     display: block;
     padding: $-xs $-m;
     color: #555;
-    fill: #555;
+    fill: currentColor;
     white-space: nowrap;
     &:hover, &:focus {
       text-decoration: none;
-      background-color: #EEE;
+      background-color: var(--color-primary-light);
+      color: var(--color-primary);
     }
     &:focus {
-      outline: 1px solid rgba(0, 0, 0, 0.2);
+      outline: 1px solid var(--color-primary);
       outline-offset: -2px;
     }
     svg {
index f4406144dc21aa64fc7461bd151f42ce8b97e593..315f08c34b77261ce18ab6c1c7560441f8788dfb 100644 (file)
@@ -106,6 +106,10 @@ a {
     position: relative;
     display: inline-block;
   }
+  &:focus img:only-child {
+    outline: 2px dashed var(--color-primary);
+    outline-offset: 2px;
+  }
 }
 
 .blended-links a {
index 95182534648d5e5e7563703b5d1c4c39d233c06b..6137c34e8fce357653db2583e3a21cb413f01aba 100644 (file)
@@ -1,5 +1,5 @@
 <div class="chapter-child-menu">
-    <button chapter-toggle type="button" aria-expanded="{{ $isOpen ? 'true' : 'false' }}" aria-label="{{ trans('common.profile_menu') }}"
+    <button chapter-toggle type="button" aria-expanded="{{ $isOpen ? 'true' : 'false' }}"
             class="text-muted @if($isOpen) open @endif">
         @icon('caret-right') @icon('page') <span>{{ trans_choice('entities.x_pages', $bookChild->pages->count()) }}</span>
     </button>
index fd463e07a4fbfc51945c45678f2761e22cd8ef9f..7e2e0e1c539c9dca666540a245c5cf2342ea9384 100644 (file)
@@ -11,7 +11,9 @@
     <div class="chapter chapter-expansion">
         <span class="icon text-chapter">@icon('page')</span>
         <div class="content">
-            <div chapter-toggle class="text-muted chapter-expansion-toggle">@icon('caret-right') <span>{{ trans_choice('entities.x_pages', $chapter->pages->count()) }}</span></div>
+            <button type="button" chapter-toggle
+                    aria-expanded="false"
+                    class="text-muted chapter-expansion-toggle">@icon('caret-right') <span>{{ trans_choice('entities.x_pages', $chapter->pages->count()) }}</span></button>
             <div class="inset-list">
                 <div class="entity-list-item-children">
                     @include('partials.entity-list', ['entities' => $chapter->pages])
index 34b702c5130345e676674545f641c5ad6147efc5..9080790825f74c4014f53368458f7c3fe3705570 100644 (file)
@@ -3,4 +3,4 @@
         --color-primary: {{ setting('app-color') }};
         --color-primary-light: {{ setting('app-color-light') }};
     }
-</style>
+</style>
\ No newline at end of file
index ac853a56cc01b79f7a1c7a681a9e0ec59da33158..52687149928b299777276912b6e1870c4d9c90e7 100644 (file)
@@ -1,11 +1,11 @@
-<div notification="success" style="display: none;" data-autohide class="pos" @if(session()->has('success')) data-show @endif>
+<div notification="success" style="display: none;" data-autohide class="pos" role="alert" @if(session()->has('success')) data-show @endif>
     @icon('check-circle') <span>{!! nl2br(htmlentities(session()->get('success'))) !!}</span>
 </div>
 
-<div notification="warning" style="display: none;" class="warning" @if(session()->has('warning')) data-show @endif>
+<div notification="warning" style="display: none;" class="warning" role="alert" @if(session()->has('warning')) data-show @endif>
     @icon('info') <span>{!! nl2br(htmlentities(session()->get('warning'))) !!}</span>
 </div>
 
-<div notification="error" style="display: none;" class="neg" @if(session()->has('error')) data-show @endif>
+<div notification="error" style="display: none;" class="neg" role="alert" @if(session()->has('error')) data-show @endif>
     @icon('danger') <span>{!! nl2br(htmlentities(session()->get('error'))) !!}</span>
 </div>
index 521ea79a4760ee6bcfa30c3497b8882f1a267ddb..140f67fe81abb339614978e9fd913531ac5b47e4 100644 (file)
@@ -87,7 +87,7 @@ class PageRevisionTest extends TestCase
         // Delete the first revision
         $revision = $page->revisions->get(1);
         $resp = $this->asEditor()->delete($revision->getUrl('/delete/'));
-        $resp->assertStatus(200);
+        $resp->assertRedirect($page->getUrl('/revisions'));
 
         $page = Page::find($page->id);
         $afterRevisionCount = $page->revisions->count();