Accessibility & cleanup

src/plugins/Dummy.js

@@ -18,15 +18,6 @@ export default class Dummy extends Plugin {
     this.opts = Object.assign({}, defaultOptions, opts)
   }
 
-  update (state) {
-    if (typeof this.el === 'undefined') {
-      return
-    }
-
-    const newEl = this.render(state)
-    yo.update(this.el, newEl)
-  }
-
   render () {
     return yo`
       <div class="wow-this-works">

src/plugins/Modal.js

@@ -196,7 +196,8 @@ export default class Modal extends Plugin {
             return yo`<li class="UppyModalTab">
               <button class="UppyModalTab-btn"
                       role="tab"
-                      aria-controls="${target.id}"
+                      tabindex="0"
+                      aria-controls="${this.opts.panelSelectorPrefix}--${target.id}"
                       aria-selected="${target.isHidden ? 'false' : 'true'}"
                       onclick=${this.showTabPanel.bind(this, target.id)}>
                 ${target.icon}
@@ -209,8 +210,8 @@ export default class Modal extends Plugin {
         <div class="UppyModalContent">
           <div class="UppyModal-presenter"></div>
           ${acquirers.map((target) => {
-            return yo`<div class="UppyModalContent-panel
-                           ${this.opts.panelSelectorPrefix}--${target.id}"
+            return yo`<div class="UppyModalContent-panel"
+                           id="${this.opts.panelSelectorPrefix}--${target.id}"
                            role="tabpanel"
                            aria-hidden="${target.isHidden}">
               ${target.render(state)}

src/plugins/Tus10.js

@@ -66,11 +66,6 @@ export default class Tus10 extends Plugin {
       this.core.log('Tus is uploading..')
       const files = this.core.state.files
 
-      // Select only files that haven’t been uploaded or are not in progress yet
-      // const filesForUpload = Object.keys(files).filter((file) => {
-      //   return files[file].progress === 0
-      // })
-
       const filesForUpload = {}
       Object.keys(files).forEach((file) => {
         if (files[file].progress === 0) {

src/scss/_modal.scss

@@ -92,15 +92,15 @@
   overflow: hidden;
   transition: all 0.3s;
 
-  // &.is-selected {
-  //   background-color: $color-cornflower-blue;
-  // }
-
+  &:focus,
+  &:active,
   &:hover {
     background-color: $color-cornflower-blue;
     overflow: visible;
   }
 
+  &:focus .UppyModalTab-name,
+  &:active .UppyModalTab-name,
   &:hover .UppyModalTab-name {
     opacity: 1;
   }

src/scss/_progressbar.scss

@@ -1,5 +1,5 @@
 .UppyProgressBar {
-  position: fixed;
+  position: absolute;
   top: 0;
   left: 0;
   width: 100%;

website/src/examples/modal/app.html

@@ -5,9 +5,7 @@
 <button id="uppyModalOpener" class="UppyModalOpenerBtn">Open Uppy Modal</button>
 
 <script>
-
   window.addEventListener('load', function () {
-    // document.querySelector('#uppyModalOpener').click()
     if ( localStorage.getItem('openUppyModalOnLoad') ) {
       document.querySelector('#uppyModalOpener').click()
     }