mirror of
https://github.com/BookStackApp/BookStack.git
synced 2025-05-04 16:20:26 +00:00
Image manager: Improved screen reader usage
Added extra labels, or removed duplicate info, to improve screen reader ux after testing via gnome/fedora/firefox screen reader usage testing.
This commit is contained in:
parent
f5ef52ca59
commit
a139c2a8a2
3 changed files with 9 additions and 5 deletions
|
@ -6,6 +6,7 @@ return [
|
||||||
|
|
||||||
// Buttons
|
// Buttons
|
||||||
'cancel' => 'Cancel',
|
'cancel' => 'Cancel',
|
||||||
|
'close' => 'Close',
|
||||||
'confirm' => 'Confirm',
|
'confirm' => 'Confirm',
|
||||||
'back' => 'Back',
|
'back' => 'Back',
|
||||||
'save' => 'Save',
|
'save' => 'Save',
|
||||||
|
|
|
@ -7,10 +7,10 @@
|
||||||
style="animation-delay: {{ min($index * 10, 260) . 'ms' }};">
|
style="animation-delay: {{ min($index * 10, 260) . 'ms' }};">
|
||||||
<img src="{{ $image->thumbs['gallery'] }}"
|
<img src="{{ $image->thumbs['gallery'] }}"
|
||||||
alt="{{ $image->name }}"
|
alt="{{ $image->name }}"
|
||||||
|
role="none"
|
||||||
width="150"
|
width="150"
|
||||||
height="150"
|
height="150"
|
||||||
loading="lazy"
|
loading="lazy">
|
||||||
title="{{ $image->name }}">
|
|
||||||
<div class="image-meta">
|
<div class="image-meta">
|
||||||
<span class="name">{{ $image->name }}</span>
|
<span class="name">{{ $image->name }}</span>
|
||||||
<span class="date">{{ trans('components.image_uploaded', ['uploadedDate' => $image->created_at->format('Y-m-d')]) }}</span>
|
<span class="date">{{ trans('components.image_uploaded', ['uploadedDate' => $image->created_at->format('Y-m-d')]) }}</span>
|
||||||
|
|
|
@ -21,7 +21,10 @@
|
||||||
<span>@icon('upload')</span>
|
<span>@icon('upload')</span>
|
||||||
<span>{{ trans('components.image_upload') }}</span>
|
<span>{{ trans('components.image_upload') }}</span>
|
||||||
</button>
|
</button>
|
||||||
<button refs="popup@hide" type="button" class="popup-header-close">@icon('close')</button>
|
<button refs="popup@hide"
|
||||||
|
type="button"
|
||||||
|
title="{{ trans('common.close') }}"
|
||||||
|
class="popup-header-close">@icon('close')</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div component="tabs"
|
<div component="tabs"
|
||||||
|
@ -49,10 +52,10 @@
|
||||||
<div class="image-manager-filter-bar flex-container-row wrap justify-space-between">
|
<div class="image-manager-filter-bar flex-container-row wrap justify-space-between">
|
||||||
<div class="primary-background image-manager-filter-bar-bg"></div>
|
<div class="primary-background image-manager-filter-bar-bg"></div>
|
||||||
<div>
|
<div>
|
||||||
<form refs="image-manager@searchForm" class="contained-search-box floating mx-m my-s">
|
<form refs="image-manager@searchForm" role="search" class="contained-search-box floating mx-m my-s">
|
||||||
<input refs="image-manager@searchInput"
|
<input refs="image-manager@searchInput"
|
||||||
placeholder="{{ trans('components.image_search_hint') }}"
|
placeholder="{{ trans('components.image_search_hint') }}"
|
||||||
type="text">
|
type="search">
|
||||||
<button refs="image-manager@cancelSearch"
|
<button refs="image-manager@cancelSearch"
|
||||||
title="{{ trans('common.search_clear') }}"
|
title="{{ trans('common.search_clear') }}"
|
||||||
type="button"
|
type="button"
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue