[PATCH gwspamd v2] gwspamd: web: Improving accessibility in select image section

[PATCH gwspamd v2] gwspamd: web: Improving accessibility in select image section

[Memet Zx]

Replacing the plain input file element with a custom-file wrapper
element that includes a label for better accessibility.
The label text is "Choose image".

Signed-off-by: Memet Zx <zxce3@gnuweeb.org>
---
 web/views/components/modal.php | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/web/views/components/modal.php b/web/views/components/modal.php
index 08e86b9..cd8cad2 100644
--- a/web/views/components/modal.php
+++ b/web/views/components/modal.php
@@ -21,10 +21,13 @@
 <div class="modal" id="modal-profile" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
         <div class="modal-content ">
-            <h5 class="modal-title">Update Images</h5>
+            <h5 class="modal-title">Update Image</h5>
             <canvas style="touch-action: none; cursor: move;" id="photo_canvas"></canvas>
             <input type="range" min="1" max="5" value="1" step="0.01" id="photo_range" style="display: none;" />
-            <input type="file" id="photo" name="photo" accept=".jpg,.png,.gif,.jpeg" />
+            <div class="custom-file">
+                <input type="file" id="photo" name="photo" accept=".jpg,.png,.gif,.jpeg">
+                <label for="photo">Choose image</label>
+            </div>
             <div class="text-right mt-20">
                 <button type="button" onclick="apply_photo();" data-dismiss="modal" class="btn">Apply photo</button>
                 <button class="btn" data-dismiss="modal">Close</button>

base-commit: dbb57d61ed9e417582c571af92d364c3889afaf7
-- 
Memet Zx

Re: [PATCH gwspamd v2] gwspamd: web: Improving accessibility in select image section

[Ammar Faizi]

On Thu, 20 Apr 2023 00:41:50 +0700, Memet Zx wrote:
> Replacing the plain input file element with a custom-file wrapper
> element that includes a label for better accessibility.
> The label text is "Choose image".
> 
> 

Applied, thanks!

[1/1] gwspamd: web: Improving accessibility in select image section
      commit: c6882bf1d1e0605c19551d7c2ecd52b0eea52470

Best regards,
-- 
Ammar Faizi