From 208c28ee01531857125843058d4b1dbc7f701e72 Mon Sep 17 00:00:00 2001
From: ehuggett <ehuggett@users.noreply.github.com>
Date: Wed, 13 Sep 2017 00:49:50 +0100
Subject: [PATCH] Make upload button focusable (accessibility/tab navigation)

---
 app/templates/welcome.js | 10 +++++++++-
 assets/main.css          | 12 +++++++++++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/app/templates/welcome.js b/app/templates/welcome.js
index f3cc89f9..a96f78fd 100644
--- a/app/templates/welcome.js
+++ b/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;
diff --git a/assets/main.css b/assets/main.css
index 1cd51f36..a448505a 100644
--- a/assets/main.css
+++ b/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 {