First batch of a11y adjustments (#10802)

changelog/unreleased/enhancement-accessibility-improvements

@@ -0,0 +1,8 @@
+Enhancement: Accessibility improvements
+
+Across the board, we have implemented improvements in regards of accessibility for the web UI.
+
+https://github.com/owncloud/web/issues/5383
+https://github.com/owncloud/web/issues/5391
+https://github.com/owncloud/web/issues/10731
+https://github.com/owncloud/web/pull/10802

packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue

@@ -1,5 +1,9 @@
 <template>
-  <nav :id="id" :class="`oc-breadcrumb oc-breadcrumb-${variation}`">
+  <nav
+    :id="id"
+    :class="`oc-breadcrumb oc-breadcrumb-${variation}`"
+    :aria-label="$gettext('Breadcrumbs')"
+  >
     <ol class="oc-breadcrumb-list oc-flex oc-m-rm oc-p-rm">
       <li
         v-for="(item, index) in displayItems"

packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`OcBreadcrumb > displays all items 1`] = `
-"<nav id="oc-breadcrumbs-2" class="oc-breadcrumb oc-breadcrumb-default">
+"<nav id="oc-breadcrumbs-2" class="oc-breadcrumb oc-breadcrumb-default" aria-label="Breadcrumbs">
   <ol class="oc-breadcrumb-list oc-flex oc-m-rm oc-p-rm">
     <li data-key="0" class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
       <router-link-stub tag="a" to="[object Object]"><span class="oc-breadcrumb-item-text oc-breadcrumb-item-navigable">First folder</span></router-link-stub>
@@ -37,7 +37,7 @@ exports[`OcBreadcrumb > displays all items 1`] = `
 `;
 
 exports[`OcBreadcrumb > sets correct variation 1`] = `
-"<nav id="oc-breadcrumbs-1" class="oc-breadcrumb oc-breadcrumb-lead">
+"<nav id="oc-breadcrumbs-1" class="oc-breadcrumb oc-breadcrumb-lead" aria-label="Breadcrumbs">
   <ol class="oc-breadcrumb-list oc-flex oc-m-rm oc-p-rm">
     <li data-key="0" class="oc-breadcrumb-list-item oc-flex oc-flex-middle">
       <router-link-stub tag="a" to="[object Object]"><span class="oc-breadcrumb-item-text oc-breadcrumb-item-navigable">First folder</span></router-link-stub>

packages/design-system/src/components/OcFilterChip/OcFilterChip.vue

@@ -40,6 +40,7 @@
       v-oc-tooltip="$gettext('Clear filter')"
       class="oc-filter-chip-clear oc-px-xs"
       appearance="raw"
+      :aria-label="$gettext('Clear filter')"
       @click="$emit('clearFilter')"
     >
       <oc-icon name="close" size="small" color="var(--oc-color-text-inverse)" />

packages/design-system/src/components/OcInfoDrop/OcInfoDrop.vue

@@ -10,7 +10,11 @@
     <div class="info-drop-content">
       <div v-if="title" class="oc-flex oc-flex-between info-header oc-border-b oc-pb-s">
         <h4 class="oc-m-rm info-title" v-text="$gettext(title)" />
-        <oc-button appearance="raw">
+        <oc-button
+          v-oc-tooltip="$gettext('Close')"
+          appearance="raw"
+          :aria-label="$gettext('Close')"
+        >
           <oc-icon name="close" fill-type="line" size="medium" variation="inherit" />
         </oc-button>
       </div>

packages/design-system/src/components/OcTextInput/__snapshots__/OcTextInput.spec.ts.snap

@@ -4,10 +4,10 @@ exports[`OcTextInput > password input field > password policy > displays error s
 "<div class=""><label class="oc-label" for="oc-textinput-24"></label>
   <div class="oc-position-relative">
     <!--v-if-->
-    <div class="oc-text-input-password-wrapper"><input id="oc-textinput-24" aria-invalid="false" class="oc-text-input oc-input oc-rounded" type="password"> <button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-input-show-password-toggle oc-px-s oc-background-default">
+    <div class="oc-text-input-password-wrapper"><input id="oc-textinput-24" aria-invalid="false" class="oc-text-input oc-input oc-rounded" type="password"> <button type="button" aria-label="Show password" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-input-show-password-toggle oc-px-s oc-background-default">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s oc-icon-passive"><!----></span>
-      </button> <button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-input-copy-password-button oc-px-s oc-background-default">
+      </button> <button type="button" aria-label="Copy password" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-input-copy-password-button oc-px-s oc-background-default">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s oc-icon-passive"><!----></span>
       </button>
@@ -29,10 +29,10 @@ exports[`OcTextInput > password input field > password policy > displays success
 "<div class=""><label class="oc-label" for="oc-textinput-25"></label>
   <div class="oc-position-relative">
     <!--v-if-->
-    <div class="oc-text-input-password-wrapper"><input id="oc-textinput-25" aria-invalid="false" class="oc-text-input oc-input oc-rounded" type="password"> <button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-input-show-password-toggle oc-px-s oc-background-default">
+    <div class="oc-text-input-password-wrapper"><input id="oc-textinput-25" aria-invalid="false" class="oc-text-input oc-input oc-rounded" type="password"> <button type="button" aria-label="Show password" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-input-show-password-toggle oc-px-s oc-background-default">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s oc-icon-passive"><!----></span>
-      </button> <button type="button" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-input-copy-password-button oc-px-s oc-background-default">
+      </button> <button type="button" aria-label="Copy password" class="oc-button oc-rounded oc-button-s oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw oc-text-input-copy-password-button oc-px-s oc-background-default">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s oc-icon-passive"><!----></span>
       </button>

packages/design-system/src/components/_OcTextInputPassword/_OcTextInputPassword.vue

@@ -16,7 +16,8 @@
     />
     <oc-button
       v-if="password && !disabled"
-      v-oc-tooltip="$gettext('Show password')"
+      v-oc-tooltip="showPassword ? $gettext('Hide password') : $gettext('Show password')"
+      :aria-label="showPassword ? $gettext('Hide password') : $gettext('Show password')"
       class="oc-text-input-show-password-toggle oc-px-s oc-background-default"
       appearance="raw"
       size="small"
@@ -27,6 +28,7 @@
     <oc-button
       v-if="password && !disabled"
       v-oc-tooltip="$gettext('Copy password')"
+      :aria-label="$gettext('Copy password')"
       class="oc-text-input-copy-password-button oc-px-s oc-background-default"
       appearance="raw"
       size="small"
@@ -37,6 +39,7 @@
     <oc-button
       v-if="generatePasswordMethod && !disabled"
       v-oc-tooltip="$gettext('Generate password')"
+      :aria-label="$gettext('Generate password')"
       class="oc-text-input-generate-password-button oc-px-s oc-background-default"
       appearance="raw"
       size="small"

packages/web-app-admin-settings/src/components/Groups/GroupsList.vue

@@ -67,7 +67,8 @@
       </template>
       <template #actions="{ item }">
         <oc-button
-          v-oc-tooltip="$gettext('Details')"
+          v-oc-tooltip="$gettext('Show details')"
+          :aria-label="$gettext('Show details')"
           appearance="raw"
           class="oc-mr-xs groups-table-btn-details oc-p-xs"
           @click="showDetails(item)"
@@ -77,6 +78,7 @@
         <oc-button
           v-if="!item.groupTypes?.includes('ReadOnly')"
           v-oc-tooltip="$gettext('Edit')"
+          :aria-label="$gettext('Edit')"
           appearance="raw"
           class="oc-mr-xs quick-action-button oc-p-xs groups-table-btn-edit"
           @click="showEditPanel(item)"

packages/web-app-admin-settings/src/components/Users/UsersList.vue

@@ -61,7 +61,8 @@
       </template>
       <template #actions="{ item }">
         <oc-button
-          v-oc-tooltip="$gettext('Details')"
+          v-oc-tooltip="$gettext('Show details')"
+          :aria-label="$gettext('Show details')"
           appearance="raw"
           class="oc-mr-xs quick-action-button oc-p-xs users-table-btn-details"
           @click="showDetails(item)"
@@ -70,6 +71,7 @@
         </oc-button>
         <oc-button
           v-oc-tooltip="$gettext('Edit')"
+          :aria-label="$gettext('Edit')"
           appearance="raw"
           class="oc-mr-xs quick-action-button oc-p-xs users-table-btn-edit"
           @click="showEditPanel(item)"

packages/web-app-admin-settings/tests/unit/views/__snapshots__/Users.spec.ts.snap

@@ -128,8 +128,8 @@ exports[`Users view > list view > renders list initially 1`] = `
                 <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-role">Admin</td>
                 <td class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-accountEnabled"><span class="oc-flex oc-flex-middle"><span class="oc-icon oc-icon-m oc-icon-passive oc-mr-s"><!----></span><span>Allowed</span></span></td>
                 <td class="oc-table-cell oc-table-cell-align-right oc-table-cell-align-middle oc-table-cell-width-auto oc-td oc-table-data-cell oc-table-data-cell-actions oc-pr-s">
-                  <oc-button-stub type="button" disabled="false" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" showspinner="false" class="oc-mr-xs quick-action-button oc-p-xs users-table-btn-details"></oc-button-stub>
-                  <oc-button-stub type="button" disabled="false" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" showspinner="false" class="oc-mr-xs quick-action-button oc-p-xs users-table-btn-edit"></oc-button-stub>
+                  <oc-button-stub type="button" disabled="false" size="medium" arialabel="Show details" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" showspinner="false" class="oc-mr-xs quick-action-button oc-p-xs users-table-btn-details"></oc-button-stub>
+                  <oc-button-stub type="button" disabled="false" size="medium" arialabel="Edit" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" showspinner="false" class="oc-mr-xs quick-action-button oc-p-xs users-table-btn-edit"></oc-button-stub>
                   <oc-button-stub type="button" disabled="false" size="medium" arialabel="Show context menu" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" showspinner="false" id="context-menu-trigger-1" class="users-table-btn-action-dropdown"></oc-button-stub>
                 </td>
               </tr>

packages/web-app-epub-reader/src/App.vue

@@ -21,6 +21,7 @@
         <div class="epub-reader-controls-font-size oc-flex oc-button-group">
           <oc-button
             v-oc-tooltip="`${currentFontSizePercentage - FONT_SIZE_PERCENTAGE_STEP}%`"
+            :aria-label="$gettext('Decrease font size')"
             class="epub-reader-controls-font-size-decrease"
             :disabled="decreaseFontSizeDisabled"
             gap-size="none"
@@ -38,6 +39,7 @@
           />
           <oc-button
             v-oc-tooltip="`${currentFontSizePercentage + FONT_SIZE_PERCENTAGE_STEP}%`"
+            :aria-label="$gettext('Increase font size')"
             class="epub-reader-controls-font-size-increase"
             :disabled="increaseFontSizeDisabled"
             gap-size="none"
@@ -59,6 +61,7 @@
         <div class="oc-flex oc-flex-middle oc-mx-l">
           <oc-button
             class="epub-reader-navigate-left"
+            :aria-label="$gettext('Navigate to previous page')"
             :disabled="navigateLeftDisabled"
             appearance="raw"
             @click="navigateLeft"
@@ -71,6 +74,7 @@
         <div class="oc-flex oc-flex-middle oc-mx-l">
           <oc-button
             class="epub-reader-navigate-right"
+            :aria-label="$gettext('Navigate to next page')"
             :disabled="navigateRightDisabled"
             appearance="raw"
             @click="navigateRight"

packages/web-app-epub-reader/tests/unit/__snapshots__/app.spec.ts.snap

@@ -14,10 +14,10 @@ exports[`Epub reader app > renders correctly 1`] = `
   </ul>
   <div class="oc-width-1-1 oc-height-1-1">
     <div class="epub-reader-controls oc-flex oc-flex-middle oc-m-s">
-      <div class="epub-reader-controls-font-size oc-flex oc-button-group"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-undefined oc-button-passive oc-button-passive-outline epub-reader-controls-font-size-decrease">
+      <div class="epub-reader-controls-font-size oc-flex oc-button-group"><button type="button" aria-label="Decrease font size" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-undefined oc-button-passive oc-button-passive-outline epub-reader-controls-font-size-decrease">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s oc-icon-passive"><!----></span> <span class="oc-icon oc-icon-xs oc-icon-passive"><!----></span>
-        </button> <button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-undefined oc-button-passive oc-button-passive-outline epub-reader-controls-font-size-reset">100%</button> <button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-undefined oc-button-passive oc-button-passive-outline epub-reader-controls-font-size-increase">
+        </button> <button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-undefined oc-button-passive oc-button-passive-outline epub-reader-controls-font-size-reset">100%</button> <button type="button" aria-label="Increase font size" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-undefined oc-button-passive oc-button-passive-outline epub-reader-controls-font-size-increase">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon oc-icon-s oc-icon-passive"><!----></span> <span class="oc-icon oc-icon-xs oc-icon-passive"><!----></span>
         </button></div>
@@ -43,12 +43,12 @@ exports[`Epub reader app > renders correctly 1`] = `
       </div>
     </div>
     <div class="oc-flex oc-flex-center oc-width-1-1 oc-height-1-1">
-      <div class="oc-flex oc-flex-middle oc-mx-l"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw epub-reader-navigate-left">
+      <div class="oc-flex oc-flex-middle oc-mx-l"><button type="button" aria-label="Navigate to previous page" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw epub-reader-navigate-left">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon oc-icon-xl oc-icon-passive"><!----></span>
         </button></div>
       <div id="reader" class="oc-flex oc-flex-center"></div>
-      <div class="oc-flex oc-flex-middle oc-mx-l"><button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw epub-reader-navigate-right">
+      <div class="oc-flex oc-flex-middle oc-mx-l"><button type="button" aria-label="Navigate to next page" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-passive oc-button-passive-raw epub-reader-navigate-right">
           <!--v-if-->
           <!-- @slot Content of the button --> <span class="oc-icon oc-icon-xl oc-icon-passive"><!----></span>
         </button></div>

packages/web-app-files/src/components/Shares/SharedWithMeSection.vue

@@ -40,6 +40,7 @@
           <oc-icon
             v-if="resource.syncEnabled"
             v-oc-tooltip="$gettext('Synced with your devices')"
+            :accessible-label="$gettext('Synced with your devices')"
             name="loop-right"
             class="sync-enabled"
           />

packages/web-app-files/src/components/SideBar/Shares/Collaborators/EditDropdown.vue

@@ -4,6 +4,9 @@
       <oc-button
         :id="editShareBtnId"
         class="collaborator-edit-dropdown-options-btn"
+        :aria-label="
+          isLocked ? dropButtonTooltip : $gettext('Open context menu with share editing options')
+        "
         appearance="raw"
         :disabled="isLocked"
       >

packages/web-pkg/src/components/AppBar/AppBar.vue

@@ -1,9 +1,8 @@
 <template>
   <div id="files-app-bar" ref="filesAppBar" :class="{ 'files-app-bar-squashed': isSideBarOpen }">
-    <oc-hidden-announcer :announcement="selectedResourcesAnnouncement" level="polite" />
-
     <div class="files-topbar oc-py-s">
       <h1 class="oc-invisible-sr" v-text="pageTitle" />
+      <oc-hidden-announcer :announcement="selectedResourcesAnnouncement" level="polite" />
       <div
         class="oc-flex oc-flex-middle files-app-bar-controls"
         :class="{

packages/web-pkg/tests/unit/components/AppBar/__snapshots__/AppBar.spec.ts.snap

@@ -2,9 +2,9 @@
 
 exports[`AppBar component > renders > by default no breadcrumbs, no bulkactions, no sharesnavigation but viewoptions and sidebartoggle 1`] = `
 "<div data-v-aba8ddeb="" id="files-app-bar" class="" displayviewmodeswitch="false" hassidebartoggle="true">
-  <oc-hidden-announcer-stub data-v-aba8ddeb="" announcement="No items selected." level="polite"></oc-hidden-announcer-stub>
   <div data-v-aba8ddeb="" class="files-topbar oc-py-s">
     <h1 data-v-aba8ddeb="" class="oc-invisible-sr">ExampleTitle</h1>
+    <oc-hidden-announcer-stub data-v-aba8ddeb="" announcement="No items selected." level="polite"></oc-hidden-announcer-stub>
     <div data-v-aba8ddeb="" class="oc-flex oc-flex-middle files-app-bar-controls oc-flex-right">
       <!--v-if-->
       <portal-target data-v-aba8ddeb="" name="app.runtime.mobile.nav"></portal-target>
@@ -24,9 +24,9 @@ exports[`AppBar component > renders > by default no breadcrumbs, no bulkactions,
 
 exports[`AppBar component > renders > if given, with content in the actions slot 1`] = `
 "<div data-v-aba8ddeb="" id="files-app-bar" class="" displayviewmodeswitch="false" hassidebartoggle="true">
-  <oc-hidden-announcer-stub data-v-aba8ddeb="" announcement="No items selected." level="polite"></oc-hidden-announcer-stub>
   <div data-v-aba8ddeb="" class="files-topbar oc-py-s">
     <h1 data-v-aba8ddeb="" class="oc-invisible-sr">ExampleTitle</h1>
+    <oc-hidden-announcer-stub data-v-aba8ddeb="" announcement="No items selected." level="polite"></oc-hidden-announcer-stub>
     <div data-v-aba8ddeb="" class="oc-flex oc-flex-middle files-app-bar-controls oc-flex-right">
       <!--v-if-->
       <portal-target data-v-aba8ddeb="" name="app.runtime.mobile.nav"></portal-target>
@@ -46,9 +46,9 @@ exports[`AppBar component > renders > if given, with content in the actions slot
 
 exports[`AppBar component > renders > if given, with content in the content slot 1`] = `
 "<div data-v-aba8ddeb="" id="files-app-bar" class="" displayviewmodeswitch="false" hassidebartoggle="true">
-  <oc-hidden-announcer-stub data-v-aba8ddeb="" announcement="No items selected." level="polite"></oc-hidden-announcer-stub>
   <div data-v-aba8ddeb="" class="files-topbar oc-py-s">
     <h1 data-v-aba8ddeb="" class="oc-invisible-sr">ExampleTitle</h1>
+    <oc-hidden-announcer-stub data-v-aba8ddeb="" announcement="No items selected." level="polite"></oc-hidden-announcer-stub>
     <div data-v-aba8ddeb="" class="oc-flex oc-flex-middle files-app-bar-controls oc-flex-right">
       <!--v-if-->
       <portal-target data-v-aba8ddeb="" name="app.runtime.mobile.nav"></portal-target>