Add focus management for uploads

Regarding: progressbar, to listwrapper on complete
owncloud · Nov 25, 2019 · ad49132 · ad49132
1 parent d0eef89
commit ad49132
Show file tree

Hide file tree

Showing 6 changed files with 910 additions and 655 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
@@ -1,9 +1,9 @@
   <template>
     <div id="files" class="uk-flex uk-flex-column">
-      <files-app-bar />
-      <upload-progress v-show="inProgress.length" class="uk-padding-small uk-background-muted" />
+      <files-app-bar @upload-start="onUploadStart" @upload-end="onUploadEnd" />
+      <upload-progress v-show="inProgress.length" class="uk-padding-small uk-background-muted" :progressbarFocus="progressbarFocussed" />
       <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" />
@@ -66,7 +66,8 @@ export default {
       selected: [],
       breadcrumbs: [],
       self: {},
-      renameDialogErrorMessage: null
+      renameDialogErrorMessage: null,
+      progressbarFocussed: false
     }
   },
   methods: {
@@ -77,6 +78,14 @@ export default {
       console.info('trace', arguments)
     },
 
+    onUploadStart () {
+      this.progressbarFocussed = true
+    },
+    onUploadEnd () {
+      this.progressbarFocussed = false
+      this.$refs.filesListWrapper.focus()
+    },
+
     openFileActionBar (file) {
       this.openFile({
         filePath: file.path

diff --git a/apps/files/src/components/FilesAppBar.vue b/apps/files/src/components/FilesAppBar.vue
@@ -38,8 +38,8 @@
             <oc-button v-else disabled id="new-file-menu-btn" :uk-tooltip="_cannotCreateDialogText"><translate>+ New</translate></oc-button>
             <oc-drop toggle="#new-file-menu-btn" mode="click">
               <oc-nav>
-                <file-upload :path='currentPath' :headers="headers" @success="onFileSuccess" @error="onFileError" @progress="onFileProgress"></file-upload>
-                <folder-upload v-if="!isIE11()" :rootPath='item' :path='currentPath' :headers="headers" @success="onFileSuccess" @error="onFileError" @progress="onFileProgress"></folder-upload>
+                <file-upload :path='currentPath' :headers="headers" @success="onFileSuccess" @error="onFileError" @progress="onFileProgress" @upload-start="onUploadStart" @upload-end="onUploadEnd"></file-upload>
+                <folder-upload v-if="!isIE11()" :rootPath='item' :path='currentPath' :headers="headers" @success="onFileSuccess" @error="onFileError" @progress="onFileProgress" @upload-start="onUploadStart" @upload-end="onUploadEnd"></folder-upload>
                 <oc-nav-item @click="showCreateFolderDialog" id="new-folder-btn" icon="create_new_folder"><translate>Create new folder…</translate></oc-nav-item>
                 <oc-nav-item v-for="(newFileHandler, key) in newFileHandlers"
                   :key="key"
@@ -298,6 +298,12 @@ export default {
           this.isLoadingSearch = false
         })
     },
+    onUploadStart () {
+      this.$emit('upload-start')
+    },
+    onUploadEnd () {
+      this.$emit('upload-end')
+    },
     focusMobileSearchInput () {
       this.$refs.mobileSearch.$el.querySelector('input').focus()
       // nested vuetify VList animation will block native autofocus, so we use this workaround...

diff --git a/apps/files/src/components/UploadProgress.vue b/apps/files/src/components/UploadProgress.vue
@@ -9,25 +9,30 @@
         id="files-upload-progress-dropdown-trigger"
         icon="expand_more"
       />
-      <translate
-        :translate-n="count"
-        translate-plural="Uploading %{ count } items"
-      >
-        Uploading %{ count } item
-      </translate>
+      <span id="upload-label">
+        <translate
+          :translate-n="count"
+          translate-plural="Uploading %{ count } items"
+        >
+          Uploading %{ count } item
+        </translate>
+      </span>
       <oc-grid
         gutter="small"
         flex
         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 +52,30 @@ import Mixins from '../mixins'
 
 export default {
   name: 'UploadProgress',
-
+  data () {
+    return {
+      announcement: '',
+      announcementOnComplete: this.$gettext('Upload complete')
+    }
+  },
+  props: {
+    progressbarFocus: {
+      type: Boolean,
+      default: false,
+      required: true
+    }
+  },
   components: {
     UploadMenu
   },
-
   mixins: [
     Mixins
   ],
-
+  methods: {
+    focusProgressbar () {
+      this.$refs.progressbar.$el.focus()
+    }
+  },
   computed: {
     ...mapGetters('Files', ['inProgress', 'uploaded']),
 
@@ -82,6 +102,18 @@ export default {
 
       return progressTotal
     }
+  },
+  watch: {
+    progressbarFocus (value) {
+      if (value) {
+        this.focusProgressbar()
+      }
+    },
+    totalUploadProgress (value) {
+      if (value === 100) {
+        this.announcement = this.announcementOnComplete
+      }
+    }
   }
 }
 </script>
diff --git a/apps/files/src/mixins.js b/apps/files/src/mixins.js
@@ -271,6 +271,7 @@ export default {
     },
 
     $_ocUpload (file, path, overwrite = null, emitSuccess = true, addToProgress = true) {
+      this.$emit('upload-start')
       let basePath = this.path || ''
       let relativePath = path
       if (addToProgress) {
@@ -302,6 +303,7 @@ export default {
       }
 
       promise.then(e => {
+        this.$emit('upload-end')
         this.removeFileFromProgress(file)
         if (emitSuccess) {
           this.$emit('success', e, file)