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.

diff --git a/lang/en/common.php b/lang/en/common.php
index c74dcc90775219416dfe1e56cd0c2d9c577c6f4d..de7937b2be406a00fb344bb079b0773a77b5533c 100644 (file)
--- a/lang/en/common.php
+++ b/lang/en/common.php
@@ -6,6 +6,7 @@ return [
 
     // Buttons
     'cancel' => 'Cancel',
 
     // Buttons
     'cancel' => 'Cancel',

+    'close' => 'Close',

     'confirm' => 'Confirm',
     'back' => 'Back',
     'save' => 'Save',
     'confirm' => 'Confirm',
     'back' => 'Back',
     'save' => 'Save',

diff --git a/resources/views/pages/parts/image-manager-list.blade.php b/resources/views/pages/parts/image-manager-list.blade.php
index da3f3be44d82fe6fe187e9c8d89d8c7419132a38..7e660c747dca135c9d947596dca6d76ace6ad1d8 100644 (file)
--- a/resources/views/pages/parts/image-manager-list.blade.php
+++ b/resources/views/pages/parts/image-manager-list.blade.php
@@ -7,10 +7,10 @@
          style="animation-delay: {{ min($index * 10, 260) . 'ms' }};">
         <img src="{{ $image->thumbs['gallery'] }}"
              alt="{{ $image->name }}"
          style="animation-delay: {{ min($index * 10, 260) . 'ms' }};">
         <img src="{{ $image->thumbs['gallery'] }}"
              alt="{{ $image->name }}"

+             role="none"

              width="150"
              height="150"
              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>
         <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>

diff --git a/resources/views/pages/parts/image-manager.blade.php b/resources/views/pages/parts/image-manager.blade.php
index a57e3a1a26763ddecc97576e9d762820bcc8329d..3050f5c5b3403097a2d4180cdc19792bcb12c526 100644 (file)
--- a/resources/views/pages/parts/image-manager.blade.php
+++ b/resources/views/pages/parts/image-manager.blade.php
@@ -21,7 +21,10 @@
                     <span>@icon('upload')</span>
                     <span>{{ trans('components.image_upload') }}</span>
                 </button>
                     <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"
             </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>
                         <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') }}"
                                     <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"
                                     <button refs="image-manager@cancelSearch"
                                             title="{{ trans('common.search_clear') }}"
                                             type="button"