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

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 {

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>