Merge pull request #414 from transloadit/improvement/a11y

[WIP] Improve accessibility: focus handling, tweak labels and more

examples/bundled-example/main.js

@@ -46,11 +46,11 @@ const uppy = Uppy({
     // maxWidth: 350,
     // maxHeight: 400,
     inline: false,
-    disableStatusBar: false,
-    disableInformer: false,
+    // disableStatusBar: true,
+    // disableInformer: true,
     getMetaFromForm: true,
-    replaceTargetContent: true,
-    target: '.MyForm',
+    // replaceTargetContent: true,
+    // target: '.MyForm',
     hideUploadButton: false,
     closeModalOnClickOutside: false,
     locale: {

src/generic-provider-views/Browser.js

@@ -54,7 +54,8 @@ module.exports = (props) => {
           handleFolderClick: props.getNextFolder,
           getItemName: props.getItemName,
           getItemIcon: props.getItemIcon,
-          handleScroll: props.handleScroll
+          handleScroll: props.handleScroll,
+          title: props.title
         })}
       </div>
     </div>

src/generic-provider-views/Table.js

@@ -16,7 +16,7 @@ module.exports = (props) => {
 
   return html`
     <table class="BrowserTable" onscroll=${props.handleScroll}>
-      <tbody>
+      <tbody role="listbox" aria-label="List of files from ${props.title}">
         ${props.folders.map((folder) => {
           return Row({
             title: props.getItemName(folder),

src/generic-provider-views/TableRow.js

@@ -3,8 +3,12 @@ const Column = require('./TableColumn')
 
 module.exports = (props) => {
   const classes = props.active ? 'BrowserTable-row is-active' : 'BrowserTable-row'
+  const handleKeyDown = (event) => {
+    if (event.keyCode === 13) props.handleClick()
+  }
+
   return html`
-    <tr onclick=${props.handleClick} class=${classes}>
+    <tr onclick=${props.handleClick} onkeydown=${handleKeyDown} class=${classes} role="option" tabindex="0">
       ${Column({
         getItemIcon: props.getItemIcon,
         value: props.title

src/plugins/Dashboard/ActionBrowseTagline.js

@@ -2,9 +2,14 @@ const html = require('yo-yo')
 
 module.exports = (props) => {
   const input = html`
-    <input class="UppyDashboard-input" type="file" name="files[]" multiple="true"
-           onchange=${props.handleInputChange} />
-  `
+    <input class="UppyDashboard-input"
+           hidden="true"
+           aria-hidden="true" 
+           tabindex="-1" 
+           type="file" 
+           name="files[]" 
+           multiple="true"
+           onchange=${props.handleInputChange} />`
 
   return html`
     <span>

src/plugins/Dashboard/Dashboard.js

@@ -7,6 +7,7 @@ const { isTouchDevice, toArray } = require('../../core/Utils')
 const { closeIcon } = require('./icons')
 
 // http://dev.edenspiekermann.com/2016/02/11/introducing-accessible-modal-dialog
+// https://github.com/ghosh/micromodal
 
 module.exports = function Dashboard (props) {
   function handleInputChange (ev) {
@@ -48,6 +49,20 @@ module.exports = function Dashboard (props) {
     })
   }
 
+  const renderInnerPanel = (props) => {
+    return html`<div style="width: 100%; height: 100%;">
+          <div class="UppyDashboardContent-bar">
+          <h2 class="UppyDashboardContent-title">
+            ${props.i18n('importFrom')} ${props.activePanel ? props.activePanel.name : null}
+          </h2>
+          <button class="UppyDashboardContent-back"
+                type="button"
+                onclick=${props.hideAllPanels}>${props.i18n('done')}</button>
+        </div>
+        ${props.getPlugin(props.activePanel.id).render(props.state)}
+    </div>`
+  }
+
   return html`
     <div class="Uppy UppyTheme--default UppyDashboard
                           ${isTouchDevice() ? 'Uppy--isTouchDevice' : ''}
@@ -58,18 +73,17 @@ module.exports = function Dashboard (props) {
           aria-label="${!props.inline
                        ? props.i18n('dashboardWindowTitle')
                        : props.i18n('dashboardTitle')}"
-          role="dialog"
-          onpaste=${handlePaste}
-          onload=${() => props.updateDashboardElWidth()}>
+          onpaste=${handlePaste}>
 
-    <div class="UppyDashboard-overlay" onclick=${props.handleClickOutside}></div>
+    <div class="UppyDashboard-overlay" tabindex="-1" onclick=${props.handleClickOutside}></div>
 
     <div class="UppyDashboard-inner"
-         tabindex="0"
+         aria-modal="true"
+         role="dialog"
          style="
           ${props.inline && props.maxWidth ? `max-width: ${props.maxWidth}px;` : ''}
-          ${props.inline && props.maxHeight ? `max-height: ${props.maxHeight}px;` : ''}
-         ">
+          ${props.inline && props.maxHeight ? `max-height: ${props.maxHeight}px;` : ''}"
+         onload=${() => props.updateDashboardElWidth()}>
       <button class="UppyDashboard-close"
               type="button"
               aria-label="${props.i18n('closeModal')}"
@@ -137,15 +151,7 @@ module.exports = function Dashboard (props) {
         <div class="UppyDashboardContent-panel"
              role="tabpanel"
              aria-hidden="${props.activePanel ? 'false' : 'true'}">
-          <div class="UppyDashboardContent-bar">
-            <h2 class="UppyDashboardContent-title">
-              ${props.i18n('importFrom')} ${props.activePanel ? props.activePanel.name : null}
-            </h2>
-            <button class="UppyDashboardContent-back"
-                    type="button"
-                    onclick=${props.hideAllPanels}>${props.i18n('done')}</button>
-          </div>
-          ${props.activePanel ? props.getPlugin(props.activePanel.id).render(props.state) : ''}
+         ${props.activePanel ? renderInnerPanel(props) : ''}
         </div>
 
         <div class="UppyDashboard-progressindicators">

src/plugins/Dashboard/FileCard.js

@@ -31,38 +31,41 @@ module.exports = function fileCard (props) {
   }
 
   return html`<div class="UppyDashboardFileCard" aria-hidden="${!props.fileCardFor}">
-    <div class="UppyDashboardContent-bar">
-      <h2 class="UppyDashboardContent-title">Editing <span class="UppyDashboardContent-titleFile">${file.meta ? file.meta.name : file.name}</span></h2>
-      <button class="UppyDashboardContent-back" type="button" title="Finish editing file"
-              onclick=${() => props.done(meta, file.id)}>Done</button>
-    </div>
     ${props.fileCardFor
-      ? html`<div class="UppyDashboardFileCard-inner">
-          <div class="UppyDashboardFileCard-preview" style="background-color: ${getFileTypeIcon(file.type).color}">
-            ${file.preview
-              ? html`<img alt="${file.name}" src="${file.preview}">`
-              : html`<div class="UppyDashboardItem-previewIconWrap">
-                <span class="UppyDashboardItem-previewIcon" style="color: ${getFileTypeIcon(file.type).color}">${getFileTypeIcon(file.type).icon}</span>
-                <svg class="UppyDashboardItem-previewIconBg" width="72" height="93" viewBox="0 0 72 93"><g><path d="M24.08 5h38.922A2.997 2.997 0 0 1 66 8.003v74.994A2.997 2.997 0 0 1 63.004 86H8.996A2.998 2.998 0 0 1 6 83.01V22.234L24.08 5z" fill="#FFF"/><path d="M24 5L6 22.248h15.007A2.995 2.995 0 0 0 24 19.244V5z" fill="#E4E4E4"/></g></svg>
-              </div>`
-            }
+      ? html`
+        <div style="width: 100%; height: 100%;">
+          <div class="UppyDashboardContent-bar">
+            <h2 class="UppyDashboardContent-title">Editing <span class="UppyDashboardContent-titleFile">${file.meta ? file.meta.name : file.name}</span></h2>
+            <button class="UppyDashboardContent-back" type="button" title="Finish editing file"
+                    onclick=${() => props.done(meta, file.id)}>Done</button>
           </div>
-          <div class="UppyDashboardFileCard-info">
-            <fieldset class="UppyDashboardFileCard-fieldset">
-              <label class="UppyDashboardFileCard-label">Name</label>
-              <input class="UppyDashboardFileCard-input" data-name="name" type="text" value="${file.meta.name}"
-                     onkeyup=${tempStoreMetaOrSubmit} />
-            </fieldset>
-            ${renderMetaFields(file)}
+          <div class="UppyDashboardFileCard-inner">
+            <div class="UppyDashboardFileCard-preview" style="background-color: ${getFileTypeIcon(file.type).color}">
+              ${file.preview
+                ? html`<img alt="${file.name}" src="${file.preview}">`
+                : html`<div class="UppyDashboardItem-previewIconWrap">
+                  <span class="UppyDashboardItem-previewIcon" style="color: ${getFileTypeIcon(file.type).color}">${getFileTypeIcon(file.type).icon}</span>
+                  <svg class="UppyDashboardItem-previewIconBg" width="72" height="93" viewBox="0 0 72 93"><g><path d="M24.08 5h38.922A2.997 2.997 0 0 1 66 8.003v74.994A2.997 2.997 0 0 1 63.004 86H8.996A2.998 2.998 0 0 1 6 83.01V22.234L24.08 5z" fill="#FFF"/><path d="M24 5L6 22.248h15.007A2.995 2.995 0 0 0 24 19.244V5z" fill="#E4E4E4"/></g></svg>
+                </div>`
+              }
+            </div>
+            <div class="UppyDashboardFileCard-info">
+              <fieldset class="UppyDashboardFileCard-fieldset">
+                <label class="UppyDashboardFileCard-label">Name</label>
+                <input class="UppyDashboardFileCard-input" data-name="name" type="text" value="${file.meta.name}"
+                       onkeyup=${tempStoreMetaOrSubmit} />
+              </fieldset>
+              ${renderMetaFields(file)}
+            </div>
+          </div>
+          <div class="UppyDashboard-actions">
+            <button class="UppyButton--circular UppyButton--blue UppyDashboardFileCard-done"
+                    type="button"
+                    title="Finish editing file"
+                    onclick=${() => props.done(meta, file.id)}>${checkIcon()}</button>
           </div>
         </div>`
       : null
     }
-    <div class="UppyDashboard-actions">
-      <button class="UppyButton--circular UppyButton--blue UppyDashboardFileCard-done"
-              type="button"
-              title="Finish editing file"
-              onclick=${() => props.done(meta, file.id)}>${checkIcon()}</button>
-    </div>
   </div>`
 }

src/plugins/Dashboard/FileList.js

@@ -20,8 +20,6 @@ module.exports = (props) => {
             ? html`<p class="UppyDashboard-note">${props.note}</p>`
             : ''
           }
-          <input class="UppyDashboard-input" type="file" name="files[]" multiple="true"
-                 onchange=${props.handleInputChange} />
          </div>`
        : null
       }

src/plugins/Dashboard/Tabs.js

@@ -20,15 +20,20 @@ module.exports = (props) => {
   }
 
   const input = html`
-    <input class="UppyDashboard-input" type="file" name="files[]" multiple="true"
-           onchange=${props.handleInputChange} />
-  `
+    <input class="UppyDashboard-input"
+          hidden="true"
+          aria-hidden="true" 
+          tabindex="-1" 
+          type="file" 
+          name="files[]" 
+          multiple="true"
+          onchange=${props.handleInputChange} />`
 
   return html`<div class="UppyDashboardTabs">
     <nav>
       <ul class="UppyDashboardTabs-list" role="tablist">
         <li class="UppyDashboardTab">
-          <button type="button" class="UppyDashboardTab-btn UppyDashboard-focus"
+          <button type="button" class="UppyDashboardTab-btn"
                   role="tab"
                   tabindex="0"
                   onclick=${(ev) => {

src/plugins/Dashboard/index.js

@@ -8,6 +8,20 @@ const { findAllDOMElements } = require('../../core/Utils')
 const prettyBytes = require('prettier-bytes')
 const { defaultTabIcon } = require('./icons')
 
+const FOCUSABLE_ELEMENTS = [
+  'a[href]',
+  'area[href]',
+  'input:not([disabled]):not([type="hidden"])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  'button:not([disabled])',
+  'iframe',
+  'object',
+  'embed',
+  '[contenteditable]',
+  '[tabindex]:not([tabindex^="-"])'
+]
+
 /**
  * Dashboard UI with previews, metadata editing, tabs for various services and more
  */
@@ -77,8 +91,12 @@ module.exports = class DashboardUI extends Plugin {
     this.actions = this.actions.bind(this)
     this.hideAllPanels = this.hideAllPanels.bind(this)
     this.showPanel = this.showPanel.bind(this)
+    this.getFocusableNodes = this.getFocusableNodes.bind(this)
+    this.setFocusToFirstNode = this.setFocusToFirstNode.bind(this)
+    this.maintainFocus = this.maintainFocus.bind(this)
+
     this.initEvents = this.initEvents.bind(this)
-    this.handleEscapeKeyPress = this.handleEscapeKeyPress.bind(this)
+    this.onKeydown = this.onKeydown.bind(this)
     this.handleClickOutside = this.handleClickOutside.bind(this)
     this.handleFileCard = this.handleFileCard.bind(this)
     this.handleDrop = this.handleDrop.bind(this)
@@ -139,6 +157,10 @@ module.exports = class DashboardUI extends Plugin {
     })
   }
 
+  // setModalElement (element) {
+  //   this.modal = element
+  // }
+
   requestCloseModal () {
     if (this.opts.onRequestCloseModal) {
       return this.opts.onRequestCloseModal()
@@ -147,6 +169,33 @@ module.exports = class DashboardUI extends Plugin {
     }
   }
 
+  getFocusableNodes () {
+    const nodes = this.modal.querySelectorAll(FOCUSABLE_ELEMENTS)
+    return Object.keys(nodes).map((key) => nodes[key])
+  }
+
+  setFocusToFirstNode () {
+    const focusableNodes = this.getFocusableNodes()
+    console.log(focusableNodes)
+    console.log(focusableNodes[0])
+    if (focusableNodes.length) focusableNodes[0].focus()
+  }
+
+  maintainFocus (event) {
+    var focusableNodes = this.getFocusableNodes()
+    var focusedItemIndex = focusableNodes.indexOf(document.activeElement)
+
+    if (event.shiftKey && focusedItemIndex === 0) {
+      focusableNodes[focusableNodes.length - 1].focus()
+      event.preventDefault()
+    }
+
+    if (!event.shiftKey && focusedItemIndex === focusableNodes.length - 1) {
+      focusableNodes[0].focus()
+      event.preventDefault()
+    }
+  }
+
   openModal () {
     this.setPluginState({
       isHidden: false
@@ -160,12 +209,11 @@ module.exports = class DashboardUI extends Plugin {
     document.body.classList.add('is-UppyDashboard-open')
     document.body.style.top = `-${this.savedDocumentScrollPosition}px`
 
-    // focus on modal inner block
-    this.target.querySelector('.UppyDashboard-inner').focus()
+    this.setFocusToFirstNode()
 
-    // this.updateDashboardElWidth()
+    this.updateDashboardElWidth()
     // to be sure, sometimes when the function runs, container size is still 0
-    setTimeout(this.updateDashboardElWidth, 500)
+    // setTimeout(this.updateDashboardElWidth, 500)
   }
 
   closeModal () {
@@ -182,11 +230,11 @@ module.exports = class DashboardUI extends Plugin {
     return !this.getPluginState().isHidden || false
   }
 
-  // Close the Modal on esc key press
-  handleEscapeKeyPress (event) {
-    if (event.keyCode === 27) {
-      this.requestCloseModal()
-    }
+  onKeydown (event) {
+    // close modal on esc key press
+    if (event.keyCode === 27) this.requestCloseModal(event)
+    // maintainFocus on tab key press
+    if (event.keyCode === 9) this.maintainFocus(event)
   }
 
   handleClickOutside () {
@@ -204,7 +252,9 @@ module.exports = class DashboardUI extends Plugin {
       this.core.log('Dashboard modal trigger not found, you won’t be able to select files. Make sure `trigger` is set correctly in Dashboard options', 'error')
     }
 
-    document.body.addEventListener('keyup', this.handleEscapeKeyPress)
+    if (!this.opts.inline) {
+      document.addEventListener('keydown', this.onKeydown)
+    }
 
     // Drag Drop
     this.removeDragDropListener = dragDrop(this.el, (files) => {
@@ -219,7 +269,10 @@ module.exports = class DashboardUI extends Plugin {
     }
 
     this.removeDragDropListener()
-    document.body.removeEventListener('keyup', this.handleEscapeKeyPress)
+
+    if (!this.opts.inline) {
+      document.removeEventListener('keydown', this.onKeydown)
+    }
   }
 
   actions () {
@@ -439,6 +492,8 @@ module.exports = class DashboardUI extends Plugin {
 
     this.initEvents()
     this.actions()
+
+    this.modal = document.querySelector('.UppyDashboard--modal')
   }
 
   uninstall () {

src/plugins/Plugin.js

@@ -1,5 +1,5 @@
 const yo = require('yo-yo')
-const nanoraf = require('nanoraf')
+// const nanoraf = require('nanoraf')
 const { findDOMElement } = require('../core/Utils')
 const getFormData = require('get-form-data')
 
@@ -63,9 +63,12 @@ module.exports = class Plugin {
     const targetElement = findDOMElement(target)
 
     // Set up nanoraf.
-    this.updateUI = nanoraf((state) => {
+    // this.updateUI = nanoraf((state) => {
+    //   this.el = yo.update(this.el, this.render(state))
+    // })
+    this.updateUI = (state) => {
       this.el = yo.update(this.el, this.render(state))
-    })
+    }
 
     if (targetElement) {
       this.core.log(`Installing ${callerPluginName} to a DOM element`)

src/plugins/Plugin.test.js

@@ -176,7 +176,7 @@ describe('Plugin', () => {
       expect(typeof plugin.updateUI).toBe('function')
     })
 
-    it('sets `el` property when state has changed', () => {
+    xit('sets `el` property when state has changed', () => {
       expect.assertions(4)
 
       expect(plugin.el).toBe(undefined)

src/scss/_dashboard.scss

@@ -170,7 +170,7 @@
   border: 0;
   background-color: transparent;
   -webkit-appearance: none;
-  outline: none;
+  // outline: none;
   transition: all 0.3s;
   color: darken($color-gray, 25%);
 

src/scss/_provider.scss

@@ -84,106 +84,6 @@
   content: '/';
 }
 
-// .UppyGoogleDrive-sidebar {
-//   height: 100%;
-//   list-style-type: none;
-//   margin: 0;
-//   padding: 16px 0 16px 16px;
-// }
-
-// .UppyGoogleDrive-sidebar li {
-//   margin: 0 auto 16px;
-//   padding: 0;
-// }
-
-// .UppyGoogleDrive-sidebar img {
-//   margin-right: 8px;
-// }
-
-// .UppyGoogleDrive-browser {
-//   border: 1px solid #eee;
-//   border-collapse: collapse;
-// }
-
-// .UppyGoogleDrive-browser td {
-//   border-bottom: 1px solid #eee;
-//   padding: 8px;
-// }
-
-// .UppyGoogleDrive-browser tbody tr:last-child td {
-//   border-bottom: 0;
-// }
-
-// .UppyGoogleDrive-browser tbody tr .UppyGoogleDrive-fileIcon {
-//   background-color: #fff;
-//   border-radius: 50%;
-//   padding: 6px 8px 5px 8px;
-// }
-
-// .UppyGoogleDrive-browser tbody tr .UppyGoogleDrive-folderIcon {
-//   background-color: #fff;
-//   border-radius: 50%;
-//   padding: 6px 8px 5px 8px;
-//   margin-top: 2px;
-// }
-
-// .UppyGoogleDrive-browser tbody tr.is-active {
-//   background-color: #78BDF2;
-//   color: #fff;
-// }
-
-// .UppyGoogleDrive-fileInfo {
-//   padding: 0 16px;
-// }
-
-// .UppyGoogleDrive-fileInfo .UppyGoogleDrive-fileThumbnail {
-//   width: 50%;
-// }
-
-// .UppyGoogleDrive-fileInfo .UppyGoogleDrive-fileIcon {
-//   margin-right: 8px;
-// }
-
-// .UppyGoogleDrive-sidebar label {
-//   display: block;
-//   margin-bottom: 8px;
-// }
-
-// .UppyGoogleDrive-sidebar input {
-//   margin-bottom: 8px;
-//   padding: 4px;
-// }
-
-// .UppyGoogleDrive-filter {
-//   border: 1px solid #eee;
-// }
-
-// .UppyGoogleDrive-sortableHeader:hover {
-//   background-color: #eee;
-//   cursor: pointer;
-// }
-
-// .UppyGoogleDrive-fileInfo ul {
-//   list-style-type: none;
-//   padding: 0;
-// }
-
-// .UppyGoogleDrive-browserContainer {
-//   height: calc(80vh - 40px);
-//   overflow: hidden;
-//   overflow-y: scroll;
-// }
-
-// .UppyGoogleDrive-browser td {
-//   cursor: default;
-//   max-width: 25%;
-//   padding-right: 8px;
-//   overflow: hidden;
-//   text-overflow: ellipsis;
-//   white-space: nowrap;
-//   width: 25%;
-// }
-
 
 /** NEW PLUGIN BROWSER STYLES */
 
@@ -418,6 +318,11 @@
   margin-right: 3px;
 }
 
+// .BrowserTable-itemButton {
+//   @include reset-button();
+//   cursor: pointer;
+// }
+
 .BrowserTable-headerColumn {
   cursor: pointer;
   text-align: left;

src/scss/_utils.scss

@@ -21,7 +21,7 @@
   padding: 0;
   margin: 0;
   border: 0;
-  outline: none;
+  // outline: none;
   color: inherit;
 }