From: Dan Brown <redacted>
Date: Mon, 29 May 2023 15:21:44 +0000 (+0100)
Subject: Image manager: Improved screen reader usage
X-Git-Tag: v23.06~1^2~34^2~1
X-Git-Url: http://source.bookstackapp.com/bookstack/commitdiff_plain/a139c2a8a28d055aeb2aa7841f07390bc07ccbc7?hp=-c

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

a139c2a8a28d055aeb2aa7841f07390bc07ccbc7
diff --git a/lang/en/common.php b/lang/en/common.php
index c74dcc907..de7937b2b 100644
--- a/lang/en/common.php
+++ b/lang/en/common.php
@@ -6,6 +6,7 @@ return [
 
     // Buttons
     'cancel' => 'Cancel',
+    'close' => 'Close',
     '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 da3f3be44..7e660c747 100644
--- 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 }}"
+             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>
diff --git a/resources/views/pages/parts/image-manager.blade.php b/resources/views/pages/parts/image-manager.blade.php
index a57e3a1a2..3050f5c5b 100644
--- 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>
-                <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"