[DO NOT MERGE] a11y fixes

changelog/unreleased/enhancement-table-role-presentation-for-version-table

@@ -0,0 +1,7 @@
+Enhancement: Add table role to version table
+
+In order to achieve better a11y we needed to adjust the role of the
+version table.
+
+https://github.com/owncloud/web/issues/5381
+https://github.com/owncloud/web/pull/5567

package.json

@@ -103,6 +103,6 @@
     "xml-js": "^1.6.11"
   },
   "engines": {
-    "node": ">=10 <=15"
+    "node": ">=10 <=16"
   }
 }

packages/web-app-draw-io/l10n/translations.json

@@ -1 +1 @@
-{"cs":{},"de":{"Diagram imported":"Diagramm importiert","Loading media":"Lade Daten","New draw.io document…":"Neues draw.io Dokument...","The diagram could not be loaded…":"Das Diagramm konnte nicht geladen werden..."},"es":{},"fr":{},"gl":{},"it":{}}
+{"cs":{},"de":{"Diagram imported":"Diagramm importiert","Loading media":"Lade Daten","New draw.io document…":"Neues draw.io Dokument...","The diagram could not be loaded…":"Das Diagramm konnte nicht geladen werden..."},"es":{"Diagram imported":"Diagrama importado","Loading media":"Cargando medios","New draw.io document…":"Nuevo documento Draw.io ...","The diagram could not be loaded…":"El diagrama no puede cargarse ..."},"fr":{"Diagram imported":"Diagramme importé","Loading media":"Chargement du media","New draw.io document…":"Nouveau document draw.io …","The diagram could not be loaded…":"Le diagramme ne peut pas être chargé..."},"gl":{},"it":{}}

packages/web-app-files/src/components/AppBar.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="files-app-bar">
-    <oc-hidden-announcer :announcement="selectedResourcesAnnouncement" level="polite" />
     <file-drop
       v-if="!isIE11() && canUpload && hasFreeSpace"
       :root-path="currentPath"
@@ -18,6 +17,7 @@
         :items="breadcrumbs"
       />
       <h1 class="oc-invisible-sr" v-text="pageTitle" />
+      <oc-hidden-announcer :announcement="selectedResourcesAnnouncement" level="polite" />
       <div
         v-if="showActions || selectedFiles.length > 0 || isTrashbinRoute"
         class="uk-flex uk-flex-middle oc-p-s"
@@ -159,7 +159,7 @@ export default {
       if (tooltip) {
         return tooltip
       }
-      return this.$gettext('Add files or folders')
+      return this.$gettext('Add new files or folders')
     },
     currentPath() {
       const path = this.$route.params.item || ''
@@ -306,7 +306,12 @@ export default {
         inputError: isFolder
           ? this.checkNewFolderName(defaultName)
           : this.checkNewFileName(defaultName),
-        onCancel: this.hideModal,
+        onCancel: () => {
+          this.hideModal()
+          this.$nextTick(() => {
+            document.getElementById('new-file-menu-btn').focus()
+          })
+        },
         onConfirm: isFolder ? this.addNewFolder : this.addNewFile,
         onInput: checkInputValue
       }

packages/web-app-files/src/components/Collaborators/CollaboratorsEditOptions.vue

@@ -1,13 +1,12 @@
 <template>
   <div>
-    <translate tag="label" for="files-collaborators-role-button" class="oc-label">Role</translate>
     <oc-select
       v-model="selectedRole"
       input-id="files-collaborators-role-button"
       class="files-collaborators-role-button-wrapper"
       :options="roles"
       :clearable="false"
-      label="label"
+      :label="$gettext('Role')"
     >
       <template v-slot:option="option">
         <role-item :role="option" />

packages/web-app-files/src/components/Collaborators/EditCollaborator.vue

@@ -6,19 +6,6 @@
       class="oc-invisible-sr"
       v-text="editCollaboratorHint"
     />
-    <transition
-      enter-active-class="uk-animation-slide-top-small"
-      leave-active-class="uk-animation-slide-top-small uk-animation-reverse"
-      name="custom-classes-transition"
-    >
-      <oc-alert
-        v-if="errors"
-        class="oc-files-collaborators-collaborator-error-alert"
-        variation="danger"
-      >
-        {{ errors }}
-      </oc-alert>
-    </transition>
     <p
       v-if="user.id !== collaborator.owner.name"
       class="oc-text-muted uk-flex uk-flex-middle oc-mb-s"
@@ -47,20 +34,19 @@
         </oc-button>
       </div>
       <div>
-        <oc-button v-if="saving" key="edit-collaborator-saving-button" :disabled="true">
-          <oc-spinner :aria-label="$gettext('Saving Share')" size="small" />
-          <span v-translate :aria-hidden="true">Saving Share</span>
-        </oc-button>
         <oc-button
-          v-else
           id="files-collaborators-collaborator-save-share-button"
           key="edit-collaborator-saving-button"
           :aria-label="$gettext('Save Share')"
-          :disabled="!$_hasChanges"
+          :disabled="!$_hasChanges || saving"
           variation="primary"
           @click="$_ocCollaborators_saveChanges"
         >
-          <translate>Save</translate>
+          <template v-if="saving">
+            <oc-spinner :aria-label="$gettext('Saving Share')" size="small" />
+            <span v-translate :aria-hidden="true">Saving Share</span>
+          </template>
+          <span v-else v-translate>Save</span>
         </oc-button>
       </div>
     </oc-grid>
@@ -95,8 +81,7 @@ export default {
       selectedRole: null,
       additionalPermissions: null,
       saving: false,
-      expirationDate: null,
-      errors: false
+      expirationDate: null
     }
   },
   computed: {
@@ -181,26 +166,33 @@ export default {
   },
   methods: {
     ...mapActions('Files', ['changeShare']),
+    ...mapActions(['showMessage']),
 
-    $_ocCollaborators_saveChanges() {
+    async $_ocCollaborators_saveChanges() {
       this.saving = true
 
       if (!this.selectedRole) this.selectedRole = this.$_originalRole
       const bitmask = this.$_permissionsBitmask
 
-      this.changeShare({
-        client: this.$client,
-        share: this.collaborator,
-        // Map bitmask to role to get the correct role in case the advanced role was mapped to existing role
-        role: bitmaskToRole(bitmask, this.highlightedFile.type === 'folder', !this.isOcis),
-        permissions: bitmask,
-        expirationDate: this.expirationDate
-      })
-        .then(() => this.$_ocCollaborators_cancelChanges())
-        .catch(errors => {
-          this.errors = errors
-          this.saving = false
+      try {
+        await this.changeShare({
+          client: this.$client,
+          share: this.collaborator,
+          // Map bitmask to role to get the correct role in case the advanced role was mapped to existing role
+          role: bitmaskToRole(bitmask, this.highlightedFile.type === 'folder', !this.isOcis),
+          permissions: bitmask,
+          expirationDate: this.expirationDate
         })
+      } catch (e) {
+        console.error(e)
+        this.showMessage({
+          title: this.$gettext('Failed to update share'),
+          status: 'danger'
+        })
+        this.saving = false
+        return
+      }
+      this.$_ocCollaborators_cancelChanges()
     },
 
     $_ocCollaborators_cancelChanges() {

packages/web-app-files/src/components/Collaborators/NewCollaborator.vue

@@ -53,20 +53,19 @@
         </oc-button>
       </div>
       <div>
-        <oc-button v-if="saving" key="new-collaborator-saving-button" :disabled="true">
-          <oc-spinner :aria-label="$gettext('Adding People')" size="small" />
-          <span v-translate :aria-hidden="true">Adding People</span>
-        </oc-button>
         <oc-button
-          v-else
           id="files-collaborators-collaborator-save-new-share-button"
           key="new-collaborator-save-button"
-          :disabled="!$_isValid"
+          :disabled="!$_isValid || saving"
           variation="primary"
           appearance="filled"
           @click="share"
         >
-          <translate>Share</translate>
+          <template v-if="saving">
+            <oc-spinner :aria-label="$gettext('Adding People')" size="small" />
+            <span v-translate :aria-hidden="true">Adding People</span>
+          </template>
+          <span v-else v-translate>Share</span>
         </oc-button>
       </div>
     </oc-grid>
@@ -131,6 +130,7 @@ export default {
 
   methods: {
     ...mapActions('Files', ['addShare']),
+    ...mapActions(['showMessage']),
 
     close() {
       this.$emit('close')
@@ -203,30 +203,42 @@ export default {
       this.saving = false
       this.close()
     },
-    share() {
+    async share() {
       this.saving = true
 
       const saveQueue = new PQueue({ concurrency: 4 })
       const savePromises = []
+      const errors = []
       this.selectedCollaborators.forEach(collaborator => {
         savePromises.push(
-          saveQueue.add(() =>
-            this.addShare({
-              client: this.$client,
-              path: this.highlightedFile.path,
-              $gettext: this.$gettext,
-              shareWith: collaborator.value.shareWith,
-              shareType: collaborator.value.shareType,
-              permissions: roleToBitmask(this.selectedRole, this.additionalPermissions),
-              expirationDate: this.expirationDate
-            })
-          )
+          saveQueue.add(async () => {
+            try {
+              await this.addShare({
+                client: this.$client,
+                path: this.highlightedFile.path,
+                shareWith: collaborator.value.shareWith,
+                shareType: collaborator.value.shareType,
+                permissions: roleToBitmask(this.selectedRole, this.additionalPermissions),
+                expirationDate: this.expirationDate
+              })
+            } catch (e) {
+              console.error(e)
+              errors.push(e)
+            }
+          })
         )
       })
 
-      return Promise.all(savePromises).then(() => {
-        this.$_ocCollaborators_newCollaboratorsCancel()
-      })
+      await Promise.all(savePromises)
+      if (errors.length > 0) {
+        this.showMessage({
+          title: this.$gettext('Failed to create share'),
+          status: 'danger'
+        })
+        this.saving = false
+        return
+      }
+      this.$_ocCollaborators_newCollaboratorsCancel()
     },
     $_ocCollaborators_selectAutocompleteResult(collaborator) {
       this.selectedCollaborators.push(collaborator)

packages/web-app-files/src/components/FileInfoVersions.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="oc-file-versions-sidebar">
     <oc-loader v-if="loading" />
-    <oc-table-simple v-if="!loading && hasVersion">
+    <oc-table-simple v-if="!loading && hasVersion" role="presentation">
       <oc-tbody>
         <oc-tr v-for="(item, index) in versions" :key="index" class="file-row">
           <oc-td width="shrink">

packages/web-app-files/src/components/FilesLists/NotFoundMessage.vue

@@ -20,7 +20,7 @@
         appearance="raw"
         :to="homeRoute"
       >
-        <translate>Go to »All files«</translate>
+        <translate>Go to "All files"</translate>
       </oc-button>
       <oc-button
         v-if="showPublicLinkButton"