From a5d17d29aa21fa9956ffe4642f38706f9a5bd1c5 Mon Sep 17 00:00:00 2001
From: blek <me@blek.codes>
Date: Sat, 30 Sep 2023 13:55:17 +1000
Subject: [PATCH] accessibility stuff

---
 filed/static/dragndrop-form.js     |  4 ++++
 filed/static/paint.css             |  6 ++++--
 filed/templates/index.html         | 22 ++++++++++++----------
 filed/templates/text-x-generic.svg |  2 +-
 4 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/filed/static/dragndrop-form.js b/filed/static/dragndrop-form.js
index 8289ef4..8684bbc 100644
--- a/filed/static/dragndrop-form.js
+++ b/filed/static/dragndrop-form.js
@@ -26,6 +26,10 @@
             input_el.files = transfer.files;
         }
 
+        root_drag_rop.onclick = e => {
+            input_el.click();
+        }
+
         input_el.onchange = e => {
             const file = input_el.files[0]
             selectFile(file);
diff --git a/filed/static/paint.css b/filed/static/paint.css
index 84bf5b1..52cd426 100644
--- a/filed/static/paint.css
+++ b/filed/static/paint.css
@@ -148,13 +148,15 @@ p {
 .file-drag-n-drop {
     display: block;
     cursor: pointer;
-    width: 400px;
-    height: 400px;
+    width: 440px;
+    height: 440px;
     background: var(--header-sec-color);
     border-radius: 16px;
     padding: var(--header-padding-x);
     transition: 250ms ease;
     margin-bottom: 0;
+    border: 0px solid transparent;
+    color: var(--header-fg-color);
 }
 .file-drag-n-drop:hover {
     background: #393939;
diff --git a/filed/templates/index.html b/filed/templates/index.html
index e1bbaa5..2fcb6d4 100644
--- a/filed/templates/index.html
+++ b/filed/templates/index.html
@@ -31,14 +31,16 @@
                     <p>
                         <label class="fancycheckbox">
                             <input type="checkbox" name="named">
-                            I also want my file named:
-                            <span class="form-input-partial">
-                                <span class="form-input-label">
-                                    file.blek.codes/
-                                </span>
-                                <input style="max-width:100px" type="text" name="filename" placeholder="file.txt"></input>
-                            </span>
                         </label>
+                        <label for="bfile-formupload-file-name">
+                            I also want my file named:
+                        </label>
+                        <span class="form-input-partial">
+                            <span class="form-input-label">
+                                file.blek.codes/
+                            </span>
+                            <input style="max-width:100px" id='bfile-formupload-file-name' type="text" name="filename" placeholder="file.txt"></input>
+                        </span>
                     </p>
                     <p>
                         <input type="file" name="file" id="bfile-formupload-file" style="display: none" />
@@ -46,10 +48,10 @@
                             <span class='btn btn-fill mobile-file-upload-btn'>
                                 Select a file
                             </span>
-                            <span class="file-drag-n-drop">
+                            <button type="button" class="file-drag-n-drop">
                                 <span class="file-drag-n-drop-inside">
                                     <span class="file-drag-n-drop-inside-text">
-                                        <object data="/tab-new-symbolic.svg" width="32" height="32"></object><br/>
+                                        <object data="/tab-new-symbolic.svg" width="32" height="32" tabindex="-1"></object><br/>
                                         <span style="line-height:16pt">
                                             <span id='drag-n-drop-jsonly' style='display:none'>
                                                 Drag & drop your files here!
@@ -63,7 +65,7 @@
                                         </span>
                                     </span>
                                 </span>
-                            </span>
+                            </button>
                             <script src="/dragndrop-form.js"></script>
                         </label>
                     </p>
diff --git a/filed/templates/text-x-generic.svg b/filed/templates/text-x-generic.svg
index c38478d..9d1eca2 100644
--- a/filed/templates/text-x-generic.svg
+++ b/filed/templates/text-x-generic.svg
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg height="128px" viewBox="0 0 128 128" width="128px" xmlns="http://www.w3.org/2000/svg">
+<svg aria-label='A file icon' height="128px" viewBox="0 0 128 128" width="128px" xmlns="http://www.w3.org/2000/svg">
     <path d="m 28 8 h 50 l 30.042969 29.917969 v 74.058593 c 0 4.433594 -3.609375 8.023438 -8.042969 8.023438 h -72 c -4.433594 0 -8 -3.566406 -8 -8 v -96 c 0 -4.433594 3.566406 -8 8 -8 z m 0 0" fill="#f6f5f4"/>
     <g fill="#deddda">
         <path d="m 78 8 v 22 c 0 4.433594 3.609375 7.921875 8.042969 7.921875 l 22 -0.003906 z m 0 0"/>