github-mirror/BookStack
2
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-06-12 14:53:32 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fixed failing test and added more accessibility improvements

Browse Source 
- 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
This commit is contained in:
Dan Brown
2019-08-25 17:21:25 +01:00
parent 9fbef8cd1b
commit 2dfe6c2d56
7 changed files with 19 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
resources/assets/sass/_lists.scss
View File

@ -59,6 +59,8 @@
.chapter-expansion-toggle { .chapter-expansion-toggle {
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
padding: $-xs $-m; padding: $-xs $-m;
width: 100%;
text-align: left;
} }
.chapter-expansion-toggle:hover { .chapter-expansion-toggle:hover {
background-color: rgba(0, 0, 0, 0.06); background-color: rgba(0, 0, 0, 0.06);
@ -554,14 +556,15 @@ ul.pagination {
display: block; display: block;
padding: $-xs $-m; padding: $-xs $-m;
color: #555; color: #555;
fill: #555; fill: currentColor;
white-space: nowrap; white-space: nowrap;
&:hover, &:focus { &:hover, &:focus {
text-decoration: none; text-decoration: none;
background-color: #EEE; background-color: var(--color-primary-light);
color: var(--color-primary);
} }
&:focus { &:focus {
outline: 1px solid rgba(0, 0, 0, 0.2); outline: 1px solid var(--color-primary);
outline-offset: -2px; outline-offset: -2px;
} }
svg { svg {

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

@ -106,6 +106,10 @@ a {
position: relative; position: relative;
display: inline-block; display: inline-block;
} }
&:focus img:only-child {
outline: 2px dashed var(--color-primary);
outline-offset: 2px;
}
} }
.blended-links a { .blended-links a {

2
resources/views/chapters/child-menu.blade.php
View File

@ -1,5 +1,5 @@
<div class="chapter-child-menu"> <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"> class="text-muted @if($isOpen) open @endif">
@icon('caret-right') @icon('page') <span>{{ trans_choice('entities.x_pages', $bookChild->pages->count()) }}</span> @icon('caret-right') @icon('page') <span>{{ trans_choice('entities.x_pages', $bookChild->pages->count()) }}</span>
</button> </button>

4
resources/views/chapters/list-item.blade.php
View File

@ -11,7 +11,9 @@
<div class="chapter chapter-expansion"> <div class="chapter chapter-expansion">
<span class="icon text-chapter">@icon('page')</span> <span class="icon text-chapter">@icon('page')</span>
<div class="content"> <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="inset-list">
<div class="entity-list-item-children"> <div class="entity-list-item-children">
@include('partials.entity-list', ['entities' => $chapter->pages]) @include('partials.entity-list', ['entities' => $chapter->pages])

2
resources/views/partials/custom-styles.blade.php
View File

@ -3,4 +3,4 @@
--color-primary: {{ setting('app-color') }}; --color-primary: {{ setting('app-color') }};
--color-primary-light: {{ setting('app-color-light') }}; --color-primary-light: {{ setting('app-color-light') }};
} }
</style> </style>

6
resources/views/partials/notifications.blade.php
View 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> @icon('check-circle') <span>{!! nl2br(htmlentities(session()->get('success'))) !!}</span>
</div> </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> @icon('info') <span>{!! nl2br(htmlentities(session()->get('warning'))) !!}</span>
</div> </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> @icon('danger') <span>{!! nl2br(htmlentities(session()->get('error'))) !!}</span>
</div> </div>

2
tests/Entity/PageRevisionTest.php
View File

@ -87,7 +87,7 @@ class PageRevisionTest extends TestCase
// Delete the first revision // Delete the first revision
$revision = $page->revisions->get(1); $revision = $page->revisions->get(1);
$resp = $this->asEditor()->delete($revision->getUrl('/delete/')); $resp = $this->asEditor()->delete($revision->getUrl('/delete/'));
$resp->assertStatus(200); $resp->assertRedirect($page->getUrl('/revisions'));
$page = Page::find($page->id); $page = Page::find($page->id);
$afterRevisionCount = $page->revisions->count(); $afterRevisionCount = $page->revisions->count();