From b6a703d5ded81e230a95b954e0579ce676383d83 Mon Sep 17 00:00:00 2001
From: Danny Coates <dannycoates@gmail.com>
Date: Wed, 20 Feb 2019 15:58:44 -0800
Subject: [PATCH] added outline styles for keyboard nav

---
 app/main.css          | 14 ++++++++++----
 app/ui/account.js     |  2 +-
 app/ui/archiveTile.js | 32 ++++++++++++++++++++++++--------
 app/ui/copyDialog.js  | 12 ++++++++----
 app/ui/download.js    |  2 --
 tailwind.js           |  3 ++-
 6 files changed, 45 insertions(+), 20 deletions(-)

diff --git a/app/main.css b/app/main.css
index 14a11317..459502a2 100644
--- a/app/main.css
+++ b/app/main.css
@@ -13,6 +13,10 @@ a {
   text-decoration: none;
 }
 
+a:focus {
+  outline: 1px dotted grey;
+}
+
 body {
   background-image: url('../assets/bg.svg');
   background-position: center;
@@ -96,10 +100,6 @@ body {
   cursor: auto;
 }
 
-.delete:hover {
-  opacity: 0.7;
-}
-
 details {
   overflow: hidden;
 }
@@ -278,6 +278,12 @@ select {
   }
 }
 
+@variants focus {
+  .outline {
+    outline: 1px dotted grey;
+  }
+}
+
 .word-break-all {
   word-break: break-all;
 }
diff --git a/app/ui/account.js b/app/ui/account.js
index 29374adb..f632d985 100644
--- a/app/ui/account.js
+++ b/app/ui/account.js
@@ -62,7 +62,7 @@ class Account extends Component {
       return html`
         <send-account>
           <button
-            class="p-2 border rounded text-blue-dark border-blue-dark hover:text-white hover:bg-blue-dark"
+            class="p-2 border rounded text-blue-dark border-blue-dark hover:text-white hover:bg-blue-dark focus:outline"
             onclick="${e => this.login(e)}"
           >
             ${translate('signInMenuOption')}
diff --git a/app/ui/archiveTile.js b/app/ui/archiveTile.js
index ead9ce06..9450c883 100644
--- a/app/ui/archiveTile.js
+++ b/app/ui/archiveTile.js
@@ -157,7 +157,7 @@ module.exports = function(state, emit, archive) {
     platform() !== 'android'
       ? html`
           <button
-            class="text-blue-dark hover:text-blue-darker focus:text-blue-darker self-end flex items-center"
+            class="text-blue-dark hover:text-blue-darker focus:text-blue-darker focus:outline self-end flex items-center"
             onclick=${copy}
           >
             <img src="${assets.get('copy-16.svg')}" class="mr-2" />
@@ -178,6 +178,7 @@ module.exports = function(state, emit, archive) {
           <a
             class="flex items-baseline text-blue-dark hover:text-blue-darker focus:text-blue-darker"
             href="${archive.url}"
+            tabindex="0"
           >
             <img src="${assets.get('dl.svg')}" class="mr-2" />
             ${state.translate('downloadButtonLabel')}
@@ -194,7 +195,7 @@ module.exports = function(state, emit, archive) {
       <img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
       <input
         type="image"
-        class="float-right self-center text-white delete"
+        class="float-right self-center text-white hover:opacity-75 focus:outline"
         alt="Delete"
         src="${assets.get('close-16.svg')}"
         onclick=${del}/>
@@ -251,9 +252,11 @@ module.exports.wip = function(state, emit) {
       >
         <input
           id="file-upload"
-          class="hidden"
+          class="opacity-0 w-0"
           type="file"
           multiple
+          onfocus="${focus}"
+          onblur="${blur}"
           onchange="${add}"
         />
         <label
@@ -273,7 +276,7 @@ module.exports.wip = function(state, emit) {
       ${expiryOptions(state, emit)} ${password(state, emit)}
       <button
         id="upload-btn"
-        class="btn rounded-lg flex-no-shrink"
+        class="btn rounded-lg flex-no-shrink focus:outline"
         title="${state.translate('uploadFilesButton')}"
         onclick="${upload}"
       >
@@ -282,6 +285,16 @@ module.exports.wip = function(state, emit) {
     </send-upload-area>
   `;
 
+  function focus(event) {
+    event.target.nextElementSibling.firstElementChild.classList.add('outline');
+  }
+
+  function blur(event) {
+    event.target.nextElementSibling.firstElementChild.classList.remove(
+      'outline'
+    );
+  }
+
   function upload(event) {
     window.scrollTo(0, 0);
     event.preventDefault();
@@ -307,7 +320,7 @@ module.exports.wip = function(state, emit) {
     return html`
       <input
         type="image"
-        class="self-center text-white ml-4 h-4"
+        class="self-center text-white ml-4 h-4 hover:opacity-75 focus:outline"
         alt="Delete"
         src="${assets.get('close-16.svg')}"
         onclick="${del}"
@@ -399,11 +412,14 @@ module.exports.empty = function(state, emit) {
   `;
 
   function focus(event) {
-    event.target.nextElementSibling.classList.add('bg-blue-darker');
+    event.target.nextElementSibling.classList.add('bg-blue-darker', 'outline');
   }
 
   function blur(event) {
-    event.target.nextElementSibling.classList.remove('bg-blue-darker');
+    event.target.nextElementSibling.classList.remove(
+      'bg-blue-darker',
+      'outline'
+    );
   }
 
   function add(event) {
@@ -433,7 +449,7 @@ module.exports.preview = function(state, emit) {
     </div>
     <button
       id="download-btn"
-      class="btn rounded-lg mt-4 w-full flex-no-shrink"
+      class="btn rounded-lg mt-4 w-full flex-no-shrink focus:outline"
       title="${state.translate('downloadButtonLabel')}"
       onclick=${download}>
       ${state.translate('downloadButtonLabel')}
diff --git a/app/ui/copyDialog.js b/app/ui/copyDialog.js
index 3281c0ef..362355f4 100644
--- a/app/ui/copyDialog.js
+++ b/app/ui/copyDialog.js
@@ -18,14 +18,18 @@ module.exports = function(name, url) {
           value="${url}"
           readonly="true"
         />
-        <button class="btn rounded-lg w-full flex-no-shrink" onclick="${copy}">
+        <button
+          class="btn rounded-lg w-full flex-no-shrink focus:outline"
+          onclick="${copy}"
+        >
           ${state.translate('copyUrlFormButton')}
         </button>
-        <a
-          class="text-blue-dark hover:text-blue-darker focus:text-blue-darker my-4 font-medium cursor-pointer"
+        <button
+          class="text-blue-dark hover:text-blue-darker focus:text-blue-darker my-4 font-medium cursor-pointer focus:outline"
           onclick="${close}"
-          >${state.translate('okButton')}</a
         >
+          ${state.translate('okButton')}
+        </button>
       </send-copy-dialog>
     `;
 
diff --git a/app/ui/download.js b/app/ui/download.js
index 9b681ea9..5c591625 100644
--- a/app/ui/download.js
+++ b/app/ui/download.js
@@ -68,8 +68,6 @@ function password(state, emit) {
     event.preventDefault();
     const el = document.getElementById('password-input');
     const password = el.value;
-    // clear the value to prevent the save password dialog
-    el.value = '';
     if (password.length > 0) {
       document.getElementById('password-btn').disabled = true;
       state.fileInfo.url = window.location.href;
diff --git a/tailwind.js b/tailwind.js
index fb0ed426..b020cf89 100644
--- a/tailwind.js
+++ b/tailwind.js
@@ -457,6 +457,7 @@ module.exports = {
   width: {
     auto: 'auto',
     px: '1px',
+    '0': '0',
     '1': '0.25rem',
     '2': '0.5rem',
     '3': '0.75rem',
@@ -861,7 +862,7 @@ module.exports = {
     minHeight: ['responsive'],
     minWidth: ['responsive'],
     negativeMargin: ['responsive'],
-    opacity: ['responsive'],
+    opacity: ['responsive', 'hover'],
     outline: ['focus'],
     overflow: ['responsive'],
     padding: ['responsive'],