Accessibility: Media uploader widget can't be accessed via keyb… (#5944)

umbraco · Aug 14, 2019 · fe6df58 · fe6df58
1 parent 6bd647f
commit fe6df58
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>