drag-drop: Add label for the input for better a11y (#2257)

* add label for the input for better a11y

* Update packages/@uppy/drag-drop/src/index.js

* use this.uppy.id

packages/@uppy/drag-drop/src/index.js

@@ -142,6 +142,7 @@ module.exports = class DragDrop extends Plugin {
     const restrictions = this.uppy.opts.restrictions
     return (
       <input
+        id={this.uppy.id + '-' + this.id}
         class="uppy-DragDrop-input"
         type="file"
         tabindex={-1}
@@ -165,11 +166,11 @@ module.exports = class DragDrop extends Plugin {
 
   renderLabel () {
     return (
-      <div class="uppy-DragDrop-label">
+      <label class="uppy-DragDrop-label" for={this.uppy.id + '-' + this.id}>
         {this.i18nArray('dropHereOr', {
           browse: <span class="uppy-DragDrop-browse">{this.i18n('browse')}</span>
         })}
-      </div>
+      </label>
     )
   }
 

packages/@uppy/drag-drop/src/style.scss

@@ -61,16 +61,16 @@
 
 .uppy-DragDrop-label {
   display: block;
-  cursor: pointer;
   font-size: 1.15em;
   margin-bottom: 5px;
 }
 
+.uppy-DragDrop-browse {
+  color: $blue;
+  cursor: pointer;
+}
+
 .uppy-DragDrop-note {
   font-size: 1em;
   color: lighten($gray-500, 10%);
 }
-
-.uppy-DragDrop-browse {
-  color: $blue;
-}