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 // Buttons
'cancel' => 'Cancel', 'cancel' => 'Cancel',
'close' => 'Close',
'confirm' => 'Confirm', 'confirm' => 'Confirm',
'back' => 'Back', 'back' => 'Back',
'save' => 'Save', 'save' => 'Save',

View File

@ -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>

View File

@ -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"