From 7d5d2626c229b5f5da4aa0daec65a1edd37c1e7a Mon Sep 17 00:00:00 2001
From: Felix Niklas <mrflix@gmail.com>
Date: Sun, 29 Jul 2018 15:20:40 +0200
Subject: [PATCH] Attachment: add focus style so that it gets highlighted when
 tabbing through inputs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- also, usability: use a <label> for “select attachment…” and connect it to the <input type=“file”>
---
 .../javascripts/app/views/generic/attachment.jst.eco     | 7 +++++--
 .../app/views/ticket_zoom/article_new.jst.eco            | 9 ++++++---
 app/assets/stylesheets/zammad.scss                       | 7 ++++++-
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/app/views/generic/attachment.jst.eco b/app/assets/javascripts/app/views/generic/attachment.jst.eco
index 9b9328a01..827312ade 100644
--- a/app/assets/javascripts/app/views/generic/attachment.jst.eco
+++ b/app/assets/javascripts/app/views/generic/attachment.jst.eco
@@ -2,8 +2,11 @@
 <div class="article-attachment">
   <div class="attachmentPlaceholder">
     <span class="attachmentPlaceholder-inputHolder fileUpload">
-      <%- @T('select attachment...') %>
-      <input multiple="multiple" type="file" name="file" style="">
+      <% uid =  _.uniqueId('fileUpload_') %>
+      <input multiple="multiple" type="file" name="file" id="<%- uid %>">
+      <label class="attachmentPlaceholder-label" for="<%- uid %>">
+        <%- @T('select attachment...') %>
+      </label>
     </span>
   </div>
   <div class="attachmentUpload hide">
diff --git a/app/assets/javascripts/app/views/ticket_zoom/article_new.jst.eco b/app/assets/javascripts/app/views/ticket_zoom/article_new.jst.eco
index 08e6d13c0..d58e451e3 100644
--- a/app/assets/javascripts/app/views/ticket_zoom/article_new.jst.eco
+++ b/app/assets/javascripts/app/views/ticket_zoom/article_new.jst.eco
@@ -69,9 +69,12 @@
         <div class="article-attachment">
           <div class="attachmentPlaceholder">
             <span class="attachmentPlaceholder-hint"><%- @T('Enter Answer or') %></span>
-            <span class="attachmentPlaceholder-inputHolder">
-              <%- @T('select attachment...') %>
-              <input multiple="multiple" type="file" name="file" style="position: absolute; right: 0px; top: 0px; font-family: Arial; font-size: 118px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;">
+            <span class="attachmentPlaceholder-inputHolder fileUpload">
+              <% uid =  _.uniqueId('fileUpload_') %>
+              <input multiple="multiple" type="file" name="file" id="<%- uid %>">
+              <label class="attachmentPlaceholder-label" for="<%- uid %>">
+                <%- @T('select attachment...') %>
+              </label>
             </span>
           </div>
           <div class="attachmentUpload hide">
diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss
index 557224449..3b0bf141c 100644
--- a/app/assets/stylesheets/zammad.scss
+++ b/app/assets/stylesheets/zammad.scss
@@ -1358,7 +1358,8 @@ label,
 .inline-label,
 .label-success,
 .label-warning,
-.label-danger {
+.label-danger,
+.fileUpload label {
   font-size: inherit;
   font-weight: inherit;
   text-align: inherit;
@@ -7378,6 +7379,10 @@ label + .wizard-buttonList {
   padding: 0;
   @extend %clickable;
   opacity: 0;
+  
+  &:focus + label {
+    text-decoration: underline;
+  }
 }
 
 .imagePreview img {