From fe6df58e664599aa7b47cffa16dc6f9c799585fb Mon Sep 17 00:00:00 2001
From: Jan Skovgaard <jaskov@gmail.com>
Date: Wed, 14 Aug 2019 17:40:52 +0200
Subject: [PATCH] =?UTF-8?q?Accessibility:=20Media=20uploader=20widget=20ca?=
 =?UTF-8?q?n't=20be=20accessed=20via=20keyb=E2=80=A6=20(#5944)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/less/components/umb-file-dropzone.less     |  9 ++++++++-
 .../views/components/upload/umb-file-dropzone.html | 14 +++++++++-----
 src/Umbraco.Web.UI/Umbraco/config/lang/da.xml      |  1 +
 src/Umbraco.Web.UI/Umbraco/config/lang/en.xml      |  1 +
 src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml   |  1 +
 5 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-file-dropzone.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-file-dropzone.less
index 5071091fcc..b5d8c3cced 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-file-dropzone.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-file-dropzone.less
@@ -14,15 +14,18 @@
     margin: 0 0 20px 0;
     position: relative;
     transition: height 0.8s;
+
     .illustration {
       width: 300px;
     }
+
     &.is-small {
       height: 100px;
       .illustration {
         width: 200px;
       }
     }
+    
     &.drag-over {
       border: 1px dashed @gray-1;
     }
@@ -35,15 +38,19 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%,-50%);
+    display: flex;
+    flex-direction: column;
   }
 
 
   // file select link
   .file-select {
+    background: transparent;
+    border: 0;
+    padding: 0;
     font-size: 15px;
     color: @ui-action-discreet-type;
     cursor: pointer;
-
     margin-top: 10px;
 
     &:hover {
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/upload/umb-file-dropzone.html b/src/Umbraco.Web.UI.Client/src/views/components/upload/umb-file-dropzone.html
index a379a05829..1a0086e836 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/upload/umb-file-dropzone.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/upload/umb-file-dropzone.html
@@ -17,13 +17,17 @@
 
 
         <div class="content" >
-
+            <p>
+                <localize key="media_dragAndDropYourFilesIntoTheArea">Drag and drop your file(s) into the area</localize>
+            </p>
             <!-- Drag and drop illustration -->
             <img class="illustration" src="assets/img/uploader/upload-illustration.svg" alt="" draggable="false" />
 
 
             <!-- Select files -->
-            <div 
+            <button
+                 type="button"
+                 prevent-default
                  data-element="button-uploadMedia"
                  class="file-select"
                  ngf-select
@@ -32,8 +36,8 @@
                  ngf-multiple="true"
                  ngf-pattern="{{ accept }}"
                  ngf-max-size="{{ maxFileSize }}">
-                - <localize key="media_orClickHereToUpload">or click here to choose files</localize>
-            </div>
+                 -&nbsp;<localize key="media_orClickHereToUpload">or click here to choose files</localize>
+            </button>
         </div>
     </div>
 
@@ -104,7 +108,7 @@
 		ng-if="mediatypepickerOverlay.show"
 		model="mediatypepickerOverlay"
         view="mediatypepickerOverlay.view"
-		position="right">        
+		position="right">
 </umb-overlay>
 
 </div>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
index 614e5f8e8e..1946965c69 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/da.xml
@@ -308,6 +308,7 @@
     <key alias="copyFailed">Kopiering af mediet fejlede</key>
     <key alias="createFolderFailed">Oprettelse af mappen under parent med id %0% fejlede</key>
     <key alias="renameFolderFailed">Omdøbning af mappen med id %0% fejlede</key>
+    <key alias="dragAndDropYourFilesIntoTheArea">Træk og slip dine filer ind i dropzonen</key>
   </area>
   <area alias="member">
     <key alias="createNewMember">Opret et nyt medlem</key>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
index b9351e324f..2e40958e92 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en.xml
@@ -317,6 +317,7 @@
     <key alias="copyFailed">Failed to copy media</key>
     <key alias="createFolderFailed">Failed to create a folder under parent id %0%</key>
     <key alias="renameFolderFailed">Failed to rename the folder with id %0%</key>
+    <key alias="dragAndDropYourFilesIntoTheArea">Drag and drop your file(s) into the area</key>
   </area>
   <area alias="member">
     <key alias="createNewMember">Create a new member</key>
diff --git a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
index 5f2b1eccf3..043ca2fb7e 100644
--- a/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
+++ b/src/Umbraco.Web.UI/Umbraco/config/lang/en_us.xml
@@ -322,6 +322,7 @@
     <key alias="copyFailed">Failed to copy media</key>
     <key alias="createFolderFailed">Failed to create a folder under parent id %0%</key>
     <key alias="renameFolderFailed">Failed to rename the folder with id %0%</key>
+    <key alias="dragAndDropYourFilesIntoTheArea">Drag and drop your file(s) into the area</key>
   </area>
   <area alias="member">
     <key alias="createNewMember">Create a new member</key>