accessibility stuff

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);

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;

filed/templates/index.html

@@ -31,14 +31,16 @@
                     <p>
                         <label class="fancycheckbox">
                             <input type="checkbox" name="named">
+                        </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" type="text" name="filename" placeholder="file.txt"></input>
+                            <input style="max-width:100px" id='bfile-formupload-file-name' type="text" name="filename" placeholder="file.txt"></input>
                         </span>
-                        </label>
                     </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>

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