Accessibility follow-up PR: make all svgs not focusable in IE11 (#1662)

* /examples/dev - added polyfills for easy development in IE11

* @uppy/dashboard - made all svgs not focusable in IE11

* /examples/dev - started sharing serviceWorker registration code

* /examples/dev - added polyfills for IE11 to dev bundle

examples/dev/Dashboard.js

@@ -54,17 +54,4 @@ module.exports = () => {
 
   const modalTrigger = document.querySelector('#pick-files')
   if (modalTrigger) modalTrigger.click()
-
-  /* eslint-disable compat/compat */
-  if ('serviceWorker' in navigator) {
-    navigator.serviceWorker
-      .register('/sw.js')
-      .then((registration) => {
-        console.log('ServiceWorker registration successful with scope: ', registration.scope)
-      })
-      .catch((error) => {
-        console.log('Registration failed with ' + error)
-      })
-  }
-  /* eslint-enable */
 }

examples/dev/index.js

@@ -1,3 +1,7 @@
+// Polyfills, primarily for testing in IE11
+require('es6-promise/auto')
+require('whatwg-fetch')
+
 const DragDrop = require('./DragDrop.js')
 const Dashboard = require('./Dashboard.js')
 
@@ -6,3 +10,15 @@ switch (window.location.pathname.toLowerCase()) {
   case '/dashboard.html': Dashboard(); break
   case '/dragdrop.html': DragDrop(); break
 }
+
+if ('serviceWorker' in navigator) {
+  // eslint-disable-next-line compat/compat
+  navigator.serviceWorker
+    .register('/sw.js')
+    .then((registration) => {
+      console.log('ServiceWorker registration successful with scope: ', registration.scope)
+    })
+    .catch((error) => {
+      console.log('Registration failed with ' + error)
+    })
+}

examples/dev/package-lock.json

@@ -1025,6 +1025,11 @@
         "minimalistic-crypto-utils": "^1.0.0"
       }
     },
+    "es6-promise": {
+      "version": "4.2.8",
+      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
+      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="
+    },
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
@@ -3025,6 +3030,11 @@
         "xtend": "^4.0.0"
       }
     },
+    "whatwg-fetch": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz",
+      "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q=="
+    },
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",

examples/dev/package.json

@@ -4,7 +4,9 @@
     "@babel/core": "^7.4.4",
     "aliasify": "^2.1.0",
     "babelify": "^10.0.0",
-    "watchify": "^3.11.0"
+    "es6-promise": "^4.2.8",
+    "watchify": "^3.11.0",
+    "whatwg-fetch": "^3.0.0"
   },
   "private": true,
   "scripts": {

packages/@uppy/dashboard/src/components/FileItem.js

@@ -197,7 +197,7 @@ module.exports = function FileItem (props) {
           aria-label={props.i18n('removeFile')}
           title={props.i18n('removeFile')}
           onclick={() => props.removeFile(file.id)}>
-          <svg aria-hidden="true" class="UppyIcon" width="18" height="18" viewBox="0 0 18 18">
+          <svg aria-hidden="true" focusable="false" class="UppyIcon" width="18" height="18" viewBox="0 0 18 18">
             <path d="M9 0C4.034 0 0 4.034 0 9s4.034 9 9 9 9-4.034 9-9-4.034-9-9-9z" />
             <path fill="#FFF" d="M13 12.222l-.778.778L9 9.778 5.778 13 5 12.222 8.222 9 5 5.778 5.778 5 9 8.222 12.222 5l.778.778L9.778 9z" />
           </svg>

packages/@uppy/dashboard/src/components/FileItemProgress.js

@@ -11,7 +11,7 @@ const circleLength = 2 * Math.PI * 15
 // substracted from circleLength, because its an offset
 module.exports = (props) => {
   return (
-    <svg width="70" height="70" viewBox="0 0 36 36" class="UppyIcon UppyIcon-progressCircle">
+    <svg aria-hidden="true" focusable="false" width="70" height="70" viewBox="0 0 36 36" class="UppyIcon UppyIcon-progressCircle">
       <g class="progress-group">
         <circle class="bg" r="15" cx="18" cy="18" stroke-width="2" fill="none" />
         <circle class="progress" r="15" cx="18" cy="18" transform="rotate(-90, 18, 18)" stroke-width="2" fill="none"

packages/@uppy/dashboard/src/components/FilePreview.js

@@ -13,7 +13,7 @@ module.exports = function FilePreview (props) {
   return (
     <div class="uppy-DashboardItem-previewIconWrap">
       <span class="uppy-DashboardItem-previewIcon" style={{ color: color }}>{icon}</span>
-      <svg class="uppy-DashboardItem-previewIconBg" width="58" height="76" viewBox="0 0 58 76"><rect fill="#FFF" width="58" height="76" rx="3" fill-rule="evenodd" /></svg>
+      <svg aria-hidden="true" focusable="false" class="uppy-DashboardItem-previewIconBg" width="58" height="76" viewBox="0 0 58 76"><rect fill="#FFF" width="58" height="76" rx="3" fill-rule="evenodd" /></svg>
     </div>
   )
 }

packages/@uppy/dashboard/src/components/PickerPanelTopBar.js

@@ -94,7 +94,7 @@ function PanelTopBar (props) {
           aria-label={props.i18n('addMoreFiles')}
           title={props.i18n('addMoreFiles')}
           onclick={() => props.toggleAddFilesPanel(true)}>
-          <svg class="UppyIcon" width="15" height="15" viewBox="0 0 15 15">
+          <svg aria-hidden="true" focusable="false" class="UppyIcon" width="15" height="15" viewBox="0 0 15 15">
             <path d="M8 6.5h6a.5.5 0 0 1 .5.5v.5a.5.5 0 0 1-.5.5H8v6a.5.5 0 0 1-.5.5H7a.5.5 0 0 1-.5-.5V8h-6a.5.5 0 0 1-.5-.5V7a.5.5 0 0 1 .5-.5h6v-6A.5.5 0 0 1 7 0h.5a.5.5 0 0 1 .5.5v6z" />
           </svg>
         </button>

packages/@uppy/dashboard/src/components/icons.js

@@ -3,26 +3,26 @@ const { h } = require('preact')
 // https://css-tricks.com/creating-svg-icon-system-react/
 
 function defaultPickerIcon () {
-  return <svg aria-hidden="true" width="30" height="30" viewBox="0 0 30 30">
+  return <svg aria-hidden="true" focusable="false" width="30" height="30" viewBox="0 0 30 30">
     <path d="M15 30c8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15zm4.258-12.676v6.846h-8.426v-6.846H5.204l9.82-12.364 9.82 12.364H19.26z" />
   </svg>
 }
 
 function iconCopy () {
-  return <svg aria-hidden="true" class="UppyIcon" width="51" height="51" viewBox="0 0 51 51">
+  return <svg aria-hidden="true" focusable="false" class="UppyIcon" width="51" height="51" viewBox="0 0 51 51">
     <path d="M17.21 45.765a5.394 5.394 0 0 1-7.62 0l-4.12-4.122a5.393 5.393 0 0 1 0-7.618l6.774-6.775-2.404-2.404-6.775 6.776c-3.424 3.427-3.424 9 0 12.426l4.12 4.123a8.766 8.766 0 0 0 6.216 2.57c2.25 0 4.5-.858 6.214-2.57l13.55-13.552a8.72 8.72 0 0 0 2.575-6.213 8.73 8.73 0 0 0-2.575-6.213l-4.123-4.12-2.404 2.404 4.123 4.12a5.352 5.352 0 0 1 1.58 3.81c0 1.438-.562 2.79-1.58 3.808l-13.55 13.55z" />
     <path d="M44.256 2.858A8.728 8.728 0 0 0 38.043.283h-.002a8.73 8.73 0 0 0-6.212 2.574l-13.55 13.55a8.725 8.725 0 0 0-2.575 6.214 8.73 8.73 0 0 0 2.574 6.216l4.12 4.12 2.405-2.403-4.12-4.12a5.357 5.357 0 0 1-1.58-3.812c0-1.437.562-2.79 1.58-3.808l13.55-13.55a5.348 5.348 0 0 1 3.81-1.58c1.44 0 2.792.562 3.81 1.58l4.12 4.12c2.1 2.1 2.1 5.518 0 7.617L39.2 23.775l2.404 2.404 6.775-6.777c3.426-3.427 3.426-9 0-12.426l-4.12-4.12z" />
   </svg>
 }
 
 function iconResume () {
-  return <svg aria-hidden="true" class="UppyIcon" width="25" height="25" viewBox="0 0 44 44">
+  return <svg aria-hidden="true" focusable="false" class="UppyIcon" width="25" height="25" viewBox="0 0 44 44">
     <polygon class="play" transform="translate(6, 5.5)" points="13 21.6666667 13 11 21 16.3333333" />
   </svg>
 }
 
 function iconPause () {
-  return <svg aria-hidden="true" class="UppyIcon" width="25px" height="25px" viewBox="0 0 44 44">
+  return <svg aria-hidden="true" focusable="false" class="UppyIcon" width="25px" height="25px" viewBox="0 0 44 44">
     <g transform="translate(18, 17)" class="pause">
       <rect x="0" y="0" width="2" height="10" rx="0" />
       <rect x="6" y="0" width="2" height="10" rx="0" />
@@ -31,14 +31,14 @@ function iconPause () {
 }
 
 function localIcon () {
-  return <svg aria-hidden="true" fill="#607d8b" width="27" height="25" viewBox="0 0 27 25">
+  return <svg aria-hidden="true" focusable="false" fill="#607d8b" width="27" height="25" viewBox="0 0 27 25">
     <path d="M5.586 9.288a.313.313 0 0 0 .282.176h4.84v3.922c0 1.514 1.25 2.24 2.792 2.24 1.54 0 2.79-.726 2.79-2.24V9.464h4.84c.122 0 .23-.068.284-.176a.304.304 0 0 0-.046-.324L13.735.106a.316.316 0 0 0-.472 0l-7.63 8.857a.302.302 0 0 0-.047.325z" />
     <path d="M24.3 5.093c-.218-.76-.54-1.187-1.208-1.187h-4.856l1.018 1.18h3.948l2.043 11.038h-7.193v2.728H9.114v-2.725h-7.36l2.66-11.04h3.33l1.018-1.18H3.907c-.668 0-1.06.46-1.21 1.186L0 16.456v7.062C0 24.338.676 25 1.51 25h23.98c.833 0 1.51-.663 1.51-1.482v-7.062L24.3 5.093z" />
   </svg>
 }
 
 function iconRetry () {
-  return <svg aria-hidden="true" class="UppyIcon retry" width="28" height="31" viewBox="0 0 16 19">
+  return <svg aria-hidden="true" focusable="false" class="UppyIcon retry" width="28" height="31" viewBox="0 0 16 19">
     <path d="M16 11a8 8 0 1 1-8-8v2a6 6 0 1 0 6 6h2z" />
     <path d="M7.9 3H10v2H7.9z" />
     <path d="M8.536.5l3.535 3.536-1.414 1.414L7.12 1.914z" />
@@ -47,31 +47,31 @@ function iconRetry () {
 }
 
 function checkIcon () {
-  return <svg aria-hidden="true" class="UppyIcon UppyIcon-check" width="13" height="9" viewBox="0 0 13 9">
+  return <svg aria-hidden="true" focusable="false" class="UppyIcon UppyIcon-check" width="13" height="9" viewBox="0 0 13 9">
     <polygon points="5 7.293 1.354 3.647 0.646 4.354 5 8.707 12.354 1.354 11.646 0.647" />
   </svg>
 }
 
 function iconAudio () {
-  return <svg aria-hidden="true" class="UppyIcon" width="25" height="25" viewBox="0 0 25 25">
+  return <svg aria-hidden="true" focusable="false" class="UppyIcon" width="25" height="25" viewBox="0 0 25 25">
     <path d="M9.5 18.64c0 1.14-1.145 2-2.5 2s-2.5-.86-2.5-2c0-1.14 1.145-2 2.5-2 .557 0 1.079.145 1.5.396V7.25a.5.5 0 0 1 .379-.485l9-2.25A.5.5 0 0 1 18.5 5v11.64c0 1.14-1.145 2-2.5 2s-2.5-.86-2.5-2c0-1.14 1.145-2 2.5-2 .557 0 1.079.145 1.5.396V8.67l-8 2v7.97zm8-11v-2l-8 2v2l8-2zM7 19.64c.855 0 1.5-.484 1.5-1s-.645-1-1.5-1-1.5.484-1.5 1 .645 1 1.5 1zm9-2c.855 0 1.5-.484 1.5-1s-.645-1-1.5-1-1.5.484-1.5 1 .645 1 1.5 1z" fill="#049BCF" fill-rule="nonzero" />
   </svg>
 }
 
 function iconVideo () {
-  return <svg aria-hidden="true" class="UppyIcon" width="25" height="25" viewBox="0 0 25 25">
+  return <svg aria-hidden="true" focusable="false" class="UppyIcon" width="25" height="25" viewBox="0 0 25 25">
     <path d="M16 11.834l4.486-2.691A1 1 0 0 1 22 10v6a1 1 0 0 1-1.514.857L16 14.167V17a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v2.834zM15 9H5v8h10V9zm1 4l5 3v-6l-5 3z" fill="#19AF67" fill-rule="nonzero" />
   </svg>
 }
 
 function iconPDF () {
-  return <svg aria-hidden="true" class="UppyIcon" width="25" height="25" viewBox="0 0 25 25">
+  return <svg aria-hidden="true" focusable="false" class="UppyIcon" width="25" height="25" viewBox="0 0 25 25">
     <path d="M9.766 8.295c-.691-1.843-.539-3.401.747-3.726 1.643-.414 2.505.938 2.39 3.299-.039.79-.194 1.662-.537 3.148.324.49.66.967 1.055 1.51.17.231.382.488.629.757 1.866-.128 3.653.114 4.918.655 1.487.635 2.192 1.685 1.614 2.84-.566 1.133-1.839 1.084-3.416.249-1.141-.604-2.457-1.634-3.51-2.707a13.467 13.467 0 0 0-2.238.426c-1.392 4.051-4.534 6.453-5.707 4.572-.986-1.58 1.38-4.206 4.914-5.375.097-.322.185-.656.264-1.001.08-.353.306-1.31.407-1.737-.678-1.059-1.2-2.031-1.53-2.91zm2.098 4.87c-.033.144-.068.287-.104.427l.033-.01-.012.038a14.065 14.065 0 0 1 1.02-.197l-.032-.033.052-.004a7.902 7.902 0 0 1-.208-.271c-.197-.27-.38-.526-.555-.775l-.006.028-.002-.003c-.076.323-.148.632-.186.8zm5.77 2.978c1.143.605 1.832.632 2.054.187.26-.519-.087-1.034-1.113-1.473-.911-.39-2.175-.608-3.55-.608.845.766 1.787 1.459 2.609 1.894zM6.559 18.789c.14.223.693.16 1.425-.413.827-.648 1.61-1.747 2.208-3.206-2.563 1.064-4.102 2.867-3.633 3.62zm5.345-10.97c.088-1.793-.351-2.48-1.146-2.28-.473.119-.564 1.05-.056 2.405.213.566.52 1.188.908 1.859.18-.858.268-1.453.294-1.984z" fill="#E2514A" fill-rule="nonzero" />
   </svg>
 }
 
 function iconFile () {
-  return <svg aria-hidden="true" class="UppyIcon" width="25" height="25" viewBox="0 0 25 25">
+  return <svg aria-hidden="true" focusable="false" class="UppyIcon" width="25" height="25" viewBox="0 0 25 25">
     <g fill="#A7AFB7" fill-rule="nonzero">
       <path d="M5.5 22a.5.5 0 0 1-.5-.5v-18a.5.5 0 0 1 .5-.5h10.719a.5.5 0 0 1 .367.16l3.281 3.556a.5.5 0 0 1 .133.339V21.5a.5.5 0 0 1-.5.5h-14zm.5-1h13V7.25L16 4H6v17z" />
       <path d="M15 4v3a1 1 0 0 0 1 1h3V7h-3V4h-1z" />
@@ -80,7 +80,7 @@ function iconFile () {
 }
 
 function iconText () {
-  return <svg aria-hidden="true" class="UppyIcon" width="25" height="25" viewBox="0 0 25 25">
+  return <svg aria-hidden="true" focusable="false" class="UppyIcon" width="25" height="25" viewBox="0 0 25 25">
     <path d="M4.5 7h13a.5.5 0 1 1 0 1h-13a.5.5 0 0 1 0-1zm0 3h15a.5.5 0 1 1 0 1h-15a.5.5 0 1 1 0-1zm0 3h15a.5.5 0 1 1 0 1h-15a.5.5 0 1 1 0-1zm0 3h10a.5.5 0 1 1 0 1h-10a.5.5 0 1 1 0-1z" fill="#5A5E69" fill-rule="nonzero" />
   </svg>
 }

packages/@uppy/dropbox/src/index.js

@@ -12,7 +12,7 @@ module.exports = class Dropbox extends Plugin {
     Provider.initPlugin(this, opts)
     this.title = this.opts.title || 'Dropbox'
     this.icon = () => (
-      <svg aria-hidden="true" width="128" height="128" viewBox="0 0 128 128">
+      <svg aria-hidden="true" focusable="false" width="128" height="128" viewBox="0 0 128 128">
         <path d="M31.997 11L64 31.825 31.997 52.651 0 31.825 31.997 11zM96 11l32 20.825-32 20.826-32-20.826L96 11zM0 73.476l31.997-20.825L64 73.476 31.997 94.302 0 73.476zm96-20.825l32 20.825-32 20.826-32-20.826 32-20.825zm-64.508 48.254l32.003-20.826 31.997 20.826-31.997 20.825-32.003-20.825z" fill="#0260FF" fill-rule="nonzero" />
       </svg>
     )

packages/@uppy/google-drive/src/index.js

@@ -13,7 +13,7 @@ module.exports = class GoogleDrive extends Plugin {
     Provider.initPlugin(this, opts)
     this.title = this.opts.title || 'Google Drive'
     this.icon = () => (
-      <svg aria-hidden="true" width="18px" height="16px" viewBox="0 0 18 16" version="1.1">
+      <svg aria-hidden="true" focusable="false" width="18px" height="16px" viewBox="0 0 18 16" version="1.1">
         <g fill-rule="evenodd">
           <polygon fill="#3089FC" points="6.32475 10.2 18 10.2 14.999625 15.3 3.324375 15.3" />
           <polygon fill="#00A85D" points="3.000375 15.3 0 10.2 5.83875 0.275974026 8.838 5.37597403 5.999625 10.2" />

packages/@uppy/instagram/src/index.js

@@ -12,7 +12,7 @@ module.exports = class Instagram extends Plugin {
     Provider.initPlugin(this, opts)
     this.title = this.opts.title || 'Instagram'
     this.icon = () => (
-      <svg aria-hidden="true" fill="#DE3573" width="28" height="28" viewBox="0 0 512 512">
+      <svg aria-hidden="true" focusable="false" fill="#DE3573" width="28" height="28" viewBox="0 0 512 512">
         <path d="M256,49.471c67.266,0,75.233.257,101.8,1.469,24.562,1.121,37.9,5.224,46.778,8.674a78.052,78.052,0,0,1,28.966,18.845,78.052,78.052,0,0,1,18.845,28.966c3.45,8.877,7.554,22.216,8.674,46.778,1.212,26.565,1.469,34.532,1.469,101.8s-0.257,75.233-1.469,101.8c-1.121,24.562-5.225,37.9-8.674,46.778a83.427,83.427,0,0,1-47.811,47.811c-8.877,3.45-22.216,7.554-46.778,8.674-26.56,1.212-34.527,1.469-101.8,1.469s-75.237-.257-101.8-1.469c-24.562-1.121-37.9-5.225-46.778-8.674a78.051,78.051,0,0,1-28.966-18.845,78.053,78.053,0,0,1-18.845-28.966c-3.45-8.877-7.554-22.216-8.674-46.778-1.212-26.564-1.469-34.532-1.469-101.8s0.257-75.233,1.469-101.8c1.121-24.562,5.224-37.9,8.674-46.778A78.052,78.052,0,0,1,78.458,78.458a78.053,78.053,0,0,1,28.966-18.845c8.877-3.45,22.216-7.554,46.778-8.674,26.565-1.212,34.532-1.469,101.8-1.469m0-45.391c-68.418,0-77,.29-103.866,1.516-26.815,1.224-45.127,5.482-61.151,11.71a123.488,123.488,0,0,0-44.62,29.057A123.488,123.488,0,0,0,17.3,90.982C11.077,107.007,6.819,125.319,5.6,152.134,4.369,179,4.079,187.582,4.079,256S4.369,333,5.6,359.866c1.224,26.815,5.482,45.127,11.71,61.151a123.489,123.489,0,0,0,29.057,44.62,123.486,123.486,0,0,0,44.62,29.057c16.025,6.228,34.337,10.486,61.151,11.71,26.87,1.226,35.449,1.516,103.866,1.516s77-.29,103.866-1.516c26.815-1.224,45.127-5.482,61.151-11.71a128.817,128.817,0,0,0,73.677-73.677c6.228-16.025,10.486-34.337,11.71-61.151,1.226-26.87,1.516-35.449,1.516-103.866s-0.29-77-1.516-103.866c-1.224-26.815-5.482-45.127-11.71-61.151a123.486,123.486,0,0,0-29.057-44.62A123.487,123.487,0,0,0,421.018,17.3C404.993,11.077,386.681,6.819,359.866,5.6,333,4.369,324.418,4.079,256,4.079h0Z" />
         <path d="M256,126.635A129.365,129.365,0,1,0,385.365,256,129.365,129.365,0,0,0,256,126.635Zm0,213.338A83.973,83.973,0,1,1,339.974,256,83.974,83.974,0,0,1,256,339.973Z" />
         <circle cx="390.476" cy="121.524" r="30.23" />

packages/@uppy/provider-views/src/Filter.js

@@ -25,7 +25,7 @@ module.exports = class Filter extends Component {
         onkeypress={this.preventEnterPress}
         oninput={(e) => this.props.filterQuery(e)}
         value={this.props.filterInput} />
-      <svg aria-hidden="true" class="UppyIcon uppy-ProviderBrowser-searchIcon" width="12" height="12" viewBox="0 0 12 12">
+      <svg aria-hidden="true" focusable="false" class="UppyIcon uppy-ProviderBrowser-searchIcon" width="12" height="12" viewBox="0 0 12 12">
         <path d="M8.638 7.99l3.172 3.172a.492.492 0 1 1-.697.697L7.91 8.656a4.977 4.977 0 0 1-2.983.983C2.206 9.639 0 7.481 0 4.819 0 2.158 2.206 0 4.927 0c2.721 0 4.927 2.158 4.927 4.82a4.74 4.74 0 0 1-1.216 3.17zm-3.71.685c2.176 0 3.94-1.726 3.94-3.856 0-2.129-1.764-3.855-3.94-3.855C2.75.964.984 2.69.984 4.819c0 2.13 1.765 3.856 3.942 3.856z" />
       </svg>
       { this.props.filterInput &&
@@ -35,7 +35,7 @@ module.exports = class Filter extends Component {
           aria-label={this.props.i18n('resetFilter')}
           title={this.props.i18n('resetFilter')}
           onclick={this.props.filterQuery}>
-          <svg aria-hidden="true" class="UppyIcon" viewBox="0 0 19 19">
+          <svg aria-hidden="true" focusable="false" class="UppyIcon" viewBox="0 0 19 19">
             <path d="M17.318 17.232L9.94 9.854 9.586 9.5l-.354.354-7.378 7.378h.707l-.62-.62v.706L9.318 9.94l.354-.354-.354-.354L1.94 1.854v.707l.62-.62h-.706l7.378 7.378.354.354.354-.354 7.378-7.378h-.707l.622.62v-.706L9.854 9.232l-.354.354.354.354 7.378 7.378.708-.707-7.38-7.378v.708l7.38-7.38.353-.353-.353-.353-.622-.622-.353-.353-.354.352-7.378 7.38h.708L2.56 1.23 2.208.88l-.353.353-.622.62-.353.355.352.353 7.38 7.38v-.708l-7.38 7.38-.353.353.352.353.622.622.353.353.354-.353 7.38-7.38h-.708l7.38 7.38z" />
           </svg>
         </button>

packages/@uppy/provider-views/src/Item/components/ItemIcon.js

@@ -5,15 +5,15 @@ module.exports = (props) => {
 
   switch (props.itemIconString) {
     case 'file':
-      return <svg aria-hidden="true" class="UppyIcon" width={11} height={14.5} viewBox="0 0 44 58">
+      return <svg aria-hidden="true" focusable="false" class="UppyIcon" width={11} height={14.5} viewBox="0 0 44 58">
         <path d="M27.437.517a1 1 0 0 0-.094.03H4.25C2.037.548.217 2.368.217 4.58v48.405c0 2.212 1.82 4.03 4.03 4.03H39.03c2.21 0 4.03-1.818 4.03-4.03V15.61a1 1 0 0 0-.03-.28 1 1 0 0 0 0-.093 1 1 0 0 0-.03-.032 1 1 0 0 0 0-.03 1 1 0 0 0-.032-.063 1 1 0 0 0-.03-.063 1 1 0 0 0-.032 0 1 1 0 0 0-.03-.063 1 1 0 0 0-.032-.03 1 1 0 0 0-.03-.063 1 1 0 0 0-.063-.062l-14.593-14a1 1 0 0 0-.062-.062A1 1 0 0 0 28 .708a1 1 0 0 0-.374-.157 1 1 0 0 0-.156 0 1 1 0 0 0-.03-.03l-.003-.003zM4.25 2.547h22.218v9.97c0 2.21 1.82 4.03 4.03 4.03h10.564v36.438a2.02 2.02 0 0 1-2.032 2.032H4.25c-1.13 0-2.032-.9-2.032-2.032V4.58c0-1.13.902-2.032 2.03-2.032zm24.218 1.345l10.375 9.937.75.718H30.5c-1.13 0-2.032-.9-2.032-2.03V3.89z" />
       </svg>
     case 'folder':
-      return <svg aria-hidden="true" class="UppyIcon" style={{ width: 16, marginRight: 3 }} viewBox="0 0 276.157 276.157">
+      return <svg aria-hidden="true" focusable="false" class="UppyIcon" style={{ width: 16, marginRight: 3 }} viewBox="0 0 276.157 276.157">
         <path d="M273.08 101.378c-3.3-4.65-8.86-7.32-15.254-7.32h-24.34V67.59c0-10.2-8.3-18.5-18.5-18.5h-85.322c-3.63 0-9.295-2.875-11.436-5.805l-6.386-8.735c-4.982-6.814-15.104-11.954-23.546-11.954H58.73c-9.292 0-18.638 6.608-21.737 15.372l-2.033 5.752c-.958 2.71-4.72 5.37-7.596 5.37H18.5C8.3 49.09 0 57.39 0 67.59v167.07c0 .886.16 1.73.443 2.52.152 3.306 1.18 6.424 3.053 9.064 3.3 4.652 8.86 7.32 15.255 7.32h188.487c11.395 0 23.27-8.425 27.035-19.18l40.677-116.188c2.11-6.035 1.43-12.164-1.87-16.816zM18.5 64.088h8.864c9.295 0 18.64-6.607 21.738-15.37l2.032-5.75c.96-2.712 4.722-5.373 7.597-5.373h29.565c3.63 0 9.295 2.876 11.437 5.806l6.386 8.735c4.982 6.815 15.104 11.954 23.546 11.954h85.322c1.898 0 3.5 1.602 3.5 3.5v26.47H69.34c-11.395 0-23.27 8.423-27.035 19.178L15 191.23V67.59c0-1.898 1.603-3.5 3.5-3.5zm242.29 49.15l-40.676 116.188c-1.674 4.78-7.812 9.135-12.877 9.135H18.75c-1.447 0-2.576-.372-3.02-.997-.442-.625-.422-1.814.057-3.18l40.677-116.19c1.674-4.78 7.812-9.134 12.877-9.134h188.487c1.448 0 2.577.372 3.02.997.443.625.423 1.814-.056 3.18z" />
       </svg>
     case 'video':
-      return <svg aria-hidden="true" viewBox="0 0 58 58">
+      return <svg aria-hidden="true" focusable="false" viewBox="0 0 58 58">
         <path d="M36.537 28.156l-11-7a1.005 1.005 0 0 0-1.02-.033C24.2 21.3 24 21.635 24 22v14a1 1 0 0 0 1.537.844l11-7a1.002 1.002 0 0 0 0-1.688zM26 34.18V23.82L34.137 29 26 34.18z" /><path d="M57 6H1a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h56a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1zM10 28H2v-9h8v9zm-8 2h8v9H2v-9zm10 10V8h34v42H12V40zm44-12h-8v-9h8v9zm-8 2h8v9h-8v-9zm8-22v9h-8V8h8zM2 8h8v9H2V8zm0 42v-9h8v9H2zm54 0h-8v-9h8v9z" />
       </svg>
     default:

packages/@uppy/status-bar/src/StatusBar.js

@@ -163,7 +163,7 @@ const RetryBtn = (props) => {
     <button type="button"
       class="uppy-u-reset uppy-c-btn uppy-StatusBar-actionBtn uppy-StatusBar-actionBtn--retry" aria-label={props.i18n('retryUpload')} onclick={props.retryAll}
       data-uppy-super-focusable>
-      <svg aria-hidden="true" class="UppyIcon" width="8" height="10" viewBox="0 0 8 10">
+      <svg aria-hidden="true" focusable="false" class="UppyIcon" width="8" height="10" viewBox="0 0 8 10">
         <path d="M4 2.408a2.75 2.75 0 1 0 2.75 2.75.626.626 0 0 1 1.25.018v.023a4 4 0 1 1-4-4.041V.25a.25.25 0 0 1 .389-.208l2.299 1.533a.25.25 0 0 1 0 .416l-2.3 1.533A.25.25 0 0 1 4 3.316v-.908z" />
       </svg>
       {props.i18n('retry')}
@@ -179,7 +179,7 @@ const CancelBtn = (props) => {
     aria-label={props.i18n('cancel')}
     onclick={props.cancelAll}
     data-uppy-super-focusable>
-    <svg aria-hidden="true" class="UppyIcon" width="16" height="16" viewBox="0 0 16 16">
+    <svg aria-hidden="true" focusable="false" class="UppyIcon" width="16" height="16" viewBox="0 0 16 16">
       <g fill="none" fill-rule="evenodd">
         <circle fill="#888" cx="8" cy="8" r="8" />
         <path fill="#FFF" d="M9.283 8l2.567 2.567-1.283 1.283L8 9.283 5.433 11.85 4.15 10.567 6.717 8 4.15 5.433 5.433 4.15 8 6.717l2.567-2.567 1.283 1.283z" />
@@ -200,13 +200,13 @@ const PauseResumeButton = (props) => {
     onclick={() => togglePauseResume(props)}
     data-uppy-super-focusable>
     {isAllPaused
-      ? <svg aria-hidden="true" class="UppyIcon" width="16" height="16" viewBox="0 0 16 16">
+      ? <svg aria-hidden="true" focusable="false" class="UppyIcon" width="16" height="16" viewBox="0 0 16 16">
         <g fill="none" fill-rule="evenodd">
           <circle fill="#888" cx="8" cy="8" r="8" />
           <path fill="#FFF" d="M6 4.25L11.5 8 6 11.75z" />
         </g>
       </svg>
-      : <svg aria-hidden="true" class="UppyIcon" width="16" height="16" viewBox="0 0 16 16">
+      : <svg aria-hidden="true" focusable="false" class="UppyIcon" width="16" height="16" viewBox="0 0 16 16">
         <g fill="none" fill-rule="evenodd">
           <circle fill="#888" cx="8" cy="8" r="8" />
           <path d="M5 4.5h2v7H5v-7zm4 0h2v7H9v-7z" fill="#FFF" />
@@ -216,8 +216,8 @@ const PauseResumeButton = (props) => {
   </button>
 }
 
-const LoadingSpinner = (props) => {
-  return <svg class="uppy-StatusBar-spinner" width="14" height="14">
+const LoadingSpinner = () => {
+  return <svg aria-hidden="true" focusable="false" class="uppy-StatusBar-spinner" width="14" height="14">
     <path d="M13.983 6.547c-.12-2.509-1.64-4.893-3.939-5.936-2.48-1.127-5.488-.656-7.556 1.094C.524 3.367-.398 6.048.162 8.562c.556 2.495 2.46 4.52 4.94 5.183 2.932.784 5.61-.602 7.256-3.015-1.493 1.993-3.745 3.309-6.298 2.868-2.514-.434-4.578-2.349-5.153-4.84a6.226 6.226 0 0 1 2.98-6.778C6.34.586 9.74 1.1 11.373 3.493c.407.596.693 1.282.842 1.988.127.598.073 1.197.161 1.794.078.525.543 1.257 1.15.864.525-.341.49-1.05.456-1.592-.007-.15.02.3 0 0" fill-rule="evenodd" />
   </svg>
 }
@@ -226,7 +226,7 @@ const ProgressBarProcessing = (props) => {
   const value = Math.round(props.value * 100)
 
   return <div class="uppy-StatusBar-content">
-    <LoadingSpinner {...props} />
+    <LoadingSpinner />
     {props.mode === 'determinate' ? `${value}% \u00B7 ` : ''}
     {props.message}
   </div>
@@ -281,7 +281,7 @@ const ProgressBarUploading = (props) => {
 
   return (
     <div class="uppy-StatusBar-content" aria-label={title} title={title}>
-      { !props.isAllPaused ? <LoadingSpinner {...props} /> : null }
+      { !props.isAllPaused ? <LoadingSpinner /> : null }
       <div class="uppy-StatusBar-status">
         <div class="uppy-StatusBar-statusPrimary">
           {props.supportsUploadProgress ? `${title}: ${props.totalProgress}%` : title}
@@ -301,7 +301,7 @@ const ProgressBarComplete = ({ totalProgress, i18n }) => {
     <div class="uppy-StatusBar-content" role="status" title={i18n('complete')}>
       <div class="uppy-StatusBar-status">
         <div class="uppy-StatusBar-statusPrimary">
-          <svg aria-hidden="true" class="uppy-StatusBar-statusIndicator UppyIcon" width="15" height="11" viewBox="0 0 15 11">
+          <svg aria-hidden="true" focusable="false" class="uppy-StatusBar-statusIndicator UppyIcon" width="15" height="11" viewBox="0 0 15 11">
             <path d="M.414 5.843L1.627 4.63l3.472 3.472L13.202 0l1.212 1.213L5.1 10.528z" />
           </svg>
           {i18n('complete')}
@@ -316,7 +316,7 @@ const ProgressBarError = ({ error, retryAll, hideRetryButton, i18n }) => {
     <div class="uppy-StatusBar-content" role="alert" title={i18n('uploadFailed')}>
       <div class="uppy-StatusBar-status">
         <div class="uppy-StatusBar-statusPrimary">
-          <svg aria-hidden="true" class="uppy-StatusBar-statusIndicator UppyIcon" width="11" height="11" viewBox="0 0 11 11">
+          <svg aria-hidden="true" focusable="false" class="uppy-StatusBar-statusIndicator UppyIcon" width="11" height="11" viewBox="0 0 11 11">
             <path d="M4.278 5.5L0 1.222 1.222 0 5.5 4.278 9.778 0 11 1.222 6.722 5.5 11 9.778 9.778 11 5.5 6.722 1.222 11 0 9.778z" />
           </svg>
           {i18n('uploadFailed')}

packages/@uppy/url/src/index.js

@@ -17,7 +17,7 @@ module.exports = class Url extends Plugin {
     this.id = this.opts.id || 'Url'
     this.title = this.opts.title || 'Link'
     this.type = 'acquirer'
-    this.icon = () => <svg aria-hidden="true" width="23" height="23" viewBox="0 0 23 23">
+    this.icon = () => <svg aria-hidden="true" focusable="false" width="23" height="23" viewBox="0 0 23 23">
       <path d="M20.485 11.236l-2.748 2.737c-.184.182-.367.365-.642.547-1.007.73-2.107 1.095-3.298 1.095-1.65 0-3.298-.73-4.398-2.19-.275-.365-.183-1.003.183-1.277.367-.273 1.008-.182 1.283.183 1.191 1.642 3.482 1.915 5.13.73a.714.714 0 0 0 .367-.365l2.75-2.737c1.373-1.46 1.373-3.74-.093-5.108a3.72 3.72 0 0 0-5.13 0L12.33 6.4a.888.888 0 0 1-1.283 0 .88.88 0 0 1 0-1.277l1.558-1.55a5.38 5.38 0 0 1 7.605 0c2.29 2.006 2.382 5.564.274 7.662zm-8.979 6.294L9.95 19.081a3.72 3.72 0 0 1-5.13 0c-1.467-1.368-1.467-3.74-.093-5.108l2.75-2.737.366-.365c.824-.547 1.74-.82 2.748-.73 1.008.183 1.833.639 2.382 1.46.275.365.917.456 1.283.182.367-.273.458-.912.183-1.277-.916-1.186-2.199-1.915-3.573-2.098-1.374-.273-2.84.091-4.031 1.004l-.55.547-2.749 2.737c-2.107 2.189-2.015 5.655.092 7.753C4.727 21.453 6.101 22 7.475 22c1.374 0 2.749-.547 3.848-1.55l1.558-1.551a.88.88 0 0 0 0-1.278c-.367-.364-1.008-.456-1.375-.09z" fill="#FF814F" fill-rule="nonzero" />
     </svg>
 

packages/@uppy/webcam/src/CameraIcon.js

@@ -1,7 +1,7 @@
 const { h } = require('preact')
 
 module.exports = (props) => {
-  return <svg aria-hidden="true" fill="#0097DC" width="66" height="55" viewBox="0 0 66 55">
+  return <svg aria-hidden="true" focusable="false" fill="#0097DC" width="66" height="55" viewBox="0 0 66 55">
     <path d="M57.3 8.433c4.59 0 8.1 3.51 8.1 8.1v29.7c0 4.59-3.51 8.1-8.1 8.1H8.7c-4.59 0-8.1-3.51-8.1-8.1v-29.7c0-4.59 3.51-8.1 8.1-8.1h9.45l4.59-7.02c.54-.54 1.35-1.08 2.16-1.08h16.2c.81 0 1.62.54 2.16 1.08l4.59 7.02h9.45zM33 14.64c-8.62 0-15.393 6.773-15.393 15.393 0 8.62 6.773 15.393 15.393 15.393 8.62 0 15.393-6.773 15.393-15.393 0-8.62-6.773-15.393-15.393-15.393zM33 40c-5.648 0-9.966-4.319-9.966-9.967 0-5.647 4.318-9.966 9.966-9.966s9.966 4.319 9.966 9.966C42.966 35.681 38.648 40 33 40z" fill-rule="evenodd" />
   </svg>
 }

packages/@uppy/webcam/src/RecordButton.js

@@ -9,7 +9,7 @@ module.exports = function RecordButton ({ recording, onStartRecording, onStopRec
         aria-label={i18n('stopRecording')}
         onclick={onStopRecording}
         data-uppy-super-focusable>
-        <svg aria-hidden="true" class="UppyIcon" width="100" height="100" viewBox="0 0 100 100">
+        <svg aria-hidden="true" focusable="false" class="UppyIcon" width="100" height="100" viewBox="0 0 100 100">
           <rect x="15" y="15" width="70" height="70" />
         </svg>
       </button>
@@ -23,7 +23,7 @@ module.exports = function RecordButton ({ recording, onStartRecording, onStopRec
       aria-label={i18n('startRecording')}
       onclick={onStartRecording}
       data-uppy-super-focusable>
-      <svg aria-hidden="true" class="UppyIcon" width="100" height="100" viewBox="0 0 100 100">
+      <svg aria-hidden="true" focusable="false" class="UppyIcon" width="100" height="100" viewBox="0 0 100 100">
         <circle cx="50" cy="50" r="40" />
       </svg>
     </button>