Merge pull request #574 from ehuggett/tab-upload

Make upload button focusable (accessibility/tab navigation)

app/templates/welcome.js

@@ -23,11 +23,11 @@ module.exports = function(state, emit) {
         'uploadPageSizeMessage'
       )}</em></span>
       <form method="post" action="upload" enctype="multipart/form-data">
+        <input id="file-upload" type="file" name="fileUploaded" onchange=${upload} onfocus=${onfocus} onblur=${onblur} />
         <label for="file-upload" id="browse" class="${state.config
           .uploadButtonStyle}" title="${state.translate(
     'uploadPageBrowseButton1'
   )}">${state.translate('uploadPageBrowseButton1')}</label>
-        <input id="file-upload" type="file" name="fileUploaded" onchange=${upload} />
       </form>
     </div>
     ${fileList(state, emit)}
@@ -44,6 +44,14 @@ module.exports = function(state, emit) {
     div.classList.remove('ondrag');
   }
 
+  function onfocus(event) {
+    event.target.classList.add('has-focus');
+  }
+
+  function onblur(event) {
+    event.target.classList.remove('has-focus');
+  }
+
   async function upload(event) {
     event.preventDefault();
     const target = event.target;

assets/main.css

@@ -279,7 +279,17 @@ a {
 }
 
 input[type='file'] {
-  display: none;
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+  z-index: -1;
+}
+
+input[type='file'].has-focus + #browse,
+input[type='file']:focus + #browse {
+  background-color: #0287e8;
+  outline: 1px dotted #000;
+  outline: -webkit-focus-ring-color auto 5px;
 }
 
 #file-size-msg {