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:
Dan Brown 2023-05-29 16:21:44 +01:00
parent f5ef52ca59
commit a139c2a8a2
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
3 changed files with 9 additions and 5 deletions

View File

@ -6,6 +6,7 @@ return [
// Buttons
'cancel' => 'Cancel',
'close' => 'Close',
'confirm' => 'Confirm',
'back' => 'Back',
'save' => 'Save',

View File

@ -7,10 +7,10 @@
style="animation-delay: {{ min($index * 10, 260) . 'ms' }};">
<img src="{{ $image->thumbs['gallery'] }}"
alt="{{ $image->name }}"
role="none"
width="150"
height="150"
loading="lazy"
title="{{ $image->name }}">
loading="lazy">
<div class="image-meta">
<span class="name">{{ $image->name }}</span>
<span class="date">{{ trans('components.image_uploaded', ['uploadedDate' => $image->created_at->format('Y-m-d')]) }}</span>

View File

@ -21,7 +21,10 @@
<span>@icon('upload')</span>
<span>{{ trans('components.image_upload') }}</span>
</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 component="tabs"
@ -49,10 +52,10 @@
<div class="image-manager-filter-bar flex-container-row wrap justify-space-between">
<div class="primary-background image-manager-filter-bar-bg"></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"
placeholder="{{ trans('components.image_search_hint') }}"
type="text">
type="search">
<button refs="image-manager@cancelSearch"
title="{{ trans('common.search_clear') }}"
type="button"