Add focus management for uploads

Regarding: progressbar, to listwrapper on complete
owncloud · Dec 12, 2019 · 08648f1 · 08648f1
1 parent d0eef89
commit 08648f1
Show file tree

Hide file tree

Showing 5 changed files with 884 additions and 645 deletions.
diff --git a/apps/files/src/components/FileUpload.vue b/apps/files/src/components/FileUpload.vue
@@ -2,7 +2,7 @@
   <oc-nav-item icon="file_upload" @click="triggerUpload">
     <span id="files-file-upload-button" v-translate>Upload File</span>
     <div slot="outer-content">
-      <input id="fileUploadInput" type="file" name="file" @change="$_ocUpload_addFileToQue" multiple ref="input" />
+      <input id="fileUploadInput" type="file" aria-labelledby="files-file-upload-button" name="file" @change="$_ocUpload_addFileToQue" multiple ref="input" />
     </div>
   </oc-nav-item>
 </template>

diff --git a/apps/files/src/components/FilesApp.vue b/apps/files/src/components/FilesApp.vue
@@ -3,7 +3,7 @@
       <files-app-bar />
       <upload-progress v-show="inProgress.length" class="uk-padding-small uk-background-muted" />
       <oc-grid class="uk-height-1-1 uk-flex-1 uk-overflow-auto">
-        <div class="uk-width-expand uk-overflow-auto uk-height-1-1" @dragover="$_ocApp_dragOver" :class="{ 'uk-visible@m' : _sidebarOpen }">
+        <div ref="filesListWrapper" tabindex="-1" class="uk-width-expand uk-overflow-auto uk-height-1-1" @dragover="$_ocApp_dragOver" :class="{ 'uk-visible@m' : _sidebarOpen }">
           <oc-loader id="files-list-progress" v-if="loadingFolder"></oc-loader>
           <trash-bin v-if="$route.name === 'files-trashbin'" :fileData="activeFiles" />
           <shared-files-list v-else-if="sharedList" :fileData="activeFiles" @sideBarOpen="openSideBar" />
@@ -125,7 +125,11 @@ export default {
       this.renameDialogErrorMessage = this.validateFileName(value)
     }
   },
-
+  created () {
+    this.$root.$on('upload-end', () => {
+      this.delayForScreenreader(() => this.$refs.filesListWrapper.focus())
+    })
+  },
   computed: {
     ...mapGetters('Files', [
       'selectedFiles', 'activeFiles', 'dropzone', 'loadingFolder', 'highlightedFile', 'currentFolder', 'inProgress',

diff --git a/apps/files/src/components/UploadProgress.vue b/apps/files/src/components/UploadProgress.vue
@@ -10,6 +10,7 @@
         icon="expand_more"
       />
       <translate
+        id="upload-label"
         :translate-n="count"
         translate-plural="Uploading %{ count } items"
       >
@@ -21,13 +22,16 @@
         class="uk-width-1-1 uk-width-medium@s"
       >
         <oc-progress
+          ref="progressbar"
           :value="totalUploadProgress"
           :max="100"
+          aria-labelledby="upload-label"
           class="uk-width-expand uk-margin-remove-bottom"
         />
         <span>
           {{ totalUploadProgress | roundNumber}} %
         </span>
+        <oc-hidden-announcer level="assertive" :announcement="announcement" />
       </oc-grid>
     </oc-grid>
     <oc-drop
@@ -47,15 +51,25 @@ import Mixins from '../mixins'
 
 export default {
   name: 'UploadProgress',
-
+  data () {
+    return {
+      announcement: '',
+      announcementOnComplete: this.$gettext('Upload complete')
+    }
+  },
   components: {
     UploadMenu
   },
-
   mixins: [
     Mixins
   ],
-
+  created () {
+    this.$root.$on('upload-start', () => {
+      this.$nextTick(() => {
+        this.delayForScreenreader(() => this.$refs.progressbar.$el.focus())
+      })
+    })
+  },
   computed: {
     ...mapGetters('Files', ['inProgress', 'uploaded']),
 
@@ -82,6 +96,13 @@ export default {
 
       return progressTotal
     }
+  },
+  watch: {
+    totalUploadProgress (value) {
+      if (value === 100) {
+        this.announcement = this.announcementOnComplete
+      }
+    }
   }
 }
 </script>
diff --git a/apps/files/src/mixins.js b/apps/files/src/mixins.js
@@ -44,6 +44,12 @@ export default {
     formDateFromNow (date) {
       return moment(date).locale(this.$language.current).fromNow()
     },
+    delayForScreenreader (func, delay = 500) {
+      /*
+      * Delay for screen readers Virtual buffers
+      */
+      setTimeout(() => func(), delay)
+    },
     fileTypeIcon (file) {
       if (file) {
         if (file.type === 'folder') {
@@ -271,6 +277,7 @@ export default {
     },
 
     $_ocUpload (file, path, overwrite = null, emitSuccess = true, addToProgress = true) {
+      this.$root.$emit('upload-start')
       let basePath = this.path || ''
       let relativePath = path
       if (addToProgress) {
@@ -302,6 +309,7 @@ export default {
       }
 
       promise.then(e => {
+        this.$root.$emit('upload-end')
         this.removeFileFromProgress(file)
         if (emitSuccess) {
           this.$emit('success', e, file)