fix: resolve axe violations (button-name, empty-table-header, spinner)

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

@@ -4,7 +4,7 @@
       ref="avatarsRef"
       v-oc-tooltip="tooltip"
       class="oc-avatars inline-flex w-fit flex-nowrap flex-row"
-      aria-hidden="true"
+      :aria-label="avatarsAriaLabel"
       :class="{
         'oc-avatars-stacked [&>*]:not-first:-ml-3': stacked,
         'oc-avatars-hover-effect [&>*]:hover:!z-1000 [&>*]:hover:transform-[scale(1.1)] [&>*]:transition-transform [&>*]:duration-200 [&>*]:ease-out':
@@ -150,6 +150,14 @@ const otherItems = computed(() => {
   return a.slice(0, maxDisplayed! - avatars.value.length)
 })
 
+const avatarsAriaLabel = computed(() => {
+  if (isTooltipDisplayed) return tooltip.value as string
+  const names = (avatars.value || [])
+    .map((a) => a?.displayName || a?.name || a?.username)
+    .filter(Boolean)
+  return names.length ? names.join(', ') : undefined
+})
+
 const tooltip = computed(() => {
   if (isTooltipDisplayed) {
     const names = avatars.value.map((user) => user.displayName)

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

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`OcAvatars > displays tooltip 1`] = `"<span><span class="oc-avatars inline-flex w-fit flex-nowrap flex-row gap-0.5" aria-hidden="true"><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Bob" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Marie" width="30" icon-size="small"></oc-avatar-stub> <!--v-if--> <oc-avatar-count-stub count="3" size="30"></oc-avatar-count-stub></span> <span class="sr-only">List of users</span></span>"`;
+exports[`OcAvatars > displays tooltip 1`] = `"<span><span class="oc-avatars inline-flex w-fit flex-nowrap flex-row gap-0.5" aria-label="Bob, Marie +3"><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Bob" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Marie" width="30" icon-size="small"></oc-avatar-stub> <!--v-if--> <oc-avatar-count-stub count="3" size="30"></oc-avatar-count-stub></span> <span class="sr-only">List of users</span></span>"`;
 
-exports[`OcAvatars > prefers avatars over links when maxDisplayed is exceeded 1`] = `"<span><span class="oc-avatars inline-flex w-fit flex-nowrap flex-row gap-0.5" aria-hidden="true"><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Bob" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Marie" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="" username="John Richards Emperor of long names" width="30" icon-size="small"></oc-avatar-stub> <!--v-if--> <oc-avatar-count-stub count="2" size="30"></oc-avatar-count-stub></span> <span class="sr-only">List of users</span></span>"`;
+exports[`OcAvatars > prefers avatars over links when maxDisplayed is exceeded 1`] = `"<span><span class="oc-avatars inline-flex w-fit flex-nowrap flex-row gap-0.5" aria-label="Bob, Marie, John Richards Emperor of long names +2"><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Bob" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Marie" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="" username="John Richards Emperor of long names" width="30" icon-size="small"></oc-avatar-stub> <!--v-if--> <oc-avatar-count-stub count="2" size="30"></oc-avatar-count-stub></span> <span class="sr-only">List of users</span></span>"`;
 
-exports[`OcAvatars > shows avatars first and links last 1`] = `"<span><span class="oc-avatars inline-flex w-fit flex-nowrap flex-row gap-0.5" aria-hidden="true"><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Bob" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Marie" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="" username="John Richards Emperor of long names" width="30" icon-size="small"></oc-avatar-stub> <oc-avatar-link-stub name="link 0" accessiblelabel="" iconsize="small" width="30"></oc-avatar-link-stub><oc-avatar-link-stub name="link 1" accessiblelabel="" iconsize="small" width="30"></oc-avatar-link-stub> <!--v-if--></span> <span class="sr-only">List of users</span></span>"`;
+exports[`OcAvatars > shows avatars first and links last 1`] = `"<span><span class="oc-avatars inline-flex w-fit flex-nowrap flex-row gap-0.5" aria-label="Bob, Marie, John Richards Emperor of long names, link 0, link 1"><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1610216705422-caa3fcb6d158?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MTB8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Bob" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="https://images.unsplash.com/photo-1584308972272-9e4e7685e80f?ixid=MXwxMjA3fDB8MHxzZWFyY2h8Mzh8fGZhY2V8ZW58MHwyfDB8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=800&amp;q=60" username="Marie" width="30" icon-size="small"></oc-avatar-stub><oc-avatar-stub accessiblelabel="" color="white" src="" username="John Richards Emperor of long names" width="30" icon-size="small"></oc-avatar-stub> <oc-avatar-link-stub name="link 0" accessiblelabel="" iconsize="small" width="30"></oc-avatar-link-stub><oc-avatar-link-stub name="link 1" accessiblelabel="" iconsize="small" width="30"></oc-avatar-link-stub> <!--v-if--></span> <span class="sr-only">List of users</span></span>"`;

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

@@ -16,9 +16,7 @@
           'flex',
           'items-center',
           {
-            'sr-only':
-              hiddenItems.indexOf(item) !== -1 ||
-              (item.isTruncationPlaceholder && hiddenItems.length === 0)
+            'sr-only': isItemHidden(item, index)
           }
         ]"
         @dragover.prevent
@@ -28,17 +26,17 @@
         @drop="dropItemEvent(item, index)"
       >
         <router-link
-          v-if="item.to"
+          v-if="item.to && !item.isTruncationPlaceholder"
           :aria-current="getAriaCurrent(index)"
-          :to="item.isTruncationPlaceholder ? lastHiddenItem.to : item.to"
+          :to="item.to"
           class="first:text-base text-xl text-role-on-surface"
         >
           <span class="hover:underline align-sub truncate inline-block leading-[1.2] max-w-3xs">{{
             item.text
           }}</span>
         </router-link>
         <oc-button
-          v-else-if="item.onClick"
+          v-else-if="item.onClick && !item.isTruncationPlaceholder"
           :aria-current="getAriaCurrent(index)"
           appearance="raw-inverse"
           color-role="surface"
@@ -61,6 +59,13 @@
             v-text="item.text"
           />
         </oc-button>
+        <span
+          v-else-if="item.isTruncationPlaceholder"
+          class="first:text-base text-xl align-sub truncate inline-block leading-[1.2] max-w-3xs"
+          tabindex="-1"
+          aria-hidden="true"
+          v-text="item.text"
+        />
         <span
           v-else
           class="first:text-base text-xl align-sub truncate inline-block leading-[1.2] max-w-3xs"
@@ -198,6 +203,13 @@ const hiddenItems = ref<BreadcrumbItem[]>([])
 const displayItems: Ref<BreadcrumbItem[]> = ref([])
 displayItems.value = items
 
+const isItemHidden = (item: BreadcrumbItem, index: number): boolean => {
+  return (
+    hiddenItems.value.indexOf(item) !== -1 ||
+    (item.isTruncationPlaceholder && hiddenItems.value.length === 0)
+  )
+}
+
 const getBreadcrumbElement = (id: string): HTMLElement => {
   return document.querySelector(`.oc-breadcrumb-list [data-item-id="${id}"]`)
 }

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

@@ -8,8 +8,7 @@ exports[`OcBreadcrumb > displays all items 1`] = `
       <oc-icon-stub data-v-5914b352="" accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1 align-sub"></oc-icon-stub>
       <!--v-if-->
     </li>
-    <li data-v-5914b352="" data-key="1" aria-hidden="true" class="oc-breadcrumb-list-item flex items-center sr-only">
-      <router-link-stub data-v-5914b352="" tag="a" to="[object Object]" class="first:text-base text-xl text-role-on-surface"><span data-v-5914b352="" class="hover:underline align-sub truncate inline-block leading-[1.2] max-w-3xs">...</span></router-link-stub>
+    <li data-v-5914b352="" data-key="1" aria-hidden="true" class="oc-breadcrumb-list-item flex items-center sr-only"><span data-v-5914b352="" class="first:text-base text-xl align-sub truncate inline-block leading-[1.2] max-w-3xs" tabindex="-1" aria-hidden="true">...</span>
       <oc-icon-stub data-v-5914b352="" accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1 align-sub"></oc-icon-stub>
       <!--v-if-->
     </li>
@@ -44,8 +43,7 @@ exports[`OcBreadcrumb > sets correct variation 1`] = `
       <oc-icon-stub data-v-5914b352="" accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1 align-sub"></oc-icon-stub>
       <!--v-if-->
     </li>
-    <li data-v-5914b352="" data-key="1" aria-hidden="true" class="oc-breadcrumb-list-item flex items-center sr-only">
-      <router-link-stub data-v-5914b352="" tag="a" to="[object Object]" class="first:text-base text-xl text-role-on-surface"><span data-v-5914b352="" class="hover:underline align-sub truncate inline-block leading-[1.2] max-w-3xs">...</span></router-link-stub>
+    <li data-v-5914b352="" data-key="1" aria-hidden="true" class="oc-breadcrumb-list-item flex items-center sr-only"><span data-v-5914b352="" class="first:text-base text-xl align-sub truncate inline-block leading-[1.2] max-w-3xs" tabindex="-1" aria-hidden="true">...</span>
       <oc-icon-stub data-v-5914b352="" accessiblelabel="" color="var(--oc-role-on-surface)" filltype="line" name="arrow-right-s" size="medium" type="span" class="mx-1 align-sub"></oc-icon-stub>
       <!--v-if-->
     </li>

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

@@ -39,7 +39,7 @@ exports[`OcModal > displays loading state 1`] = `
         <div class="oc-modal-body-actions-grid grid grid-flow-col auto-cols-1fr"><button type="button" disabled="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-modal-body-actions-cancel">
             <!--v-if-->
             <!-- @slot Content of the button --> Cancel
-          </button> <button type="button" disabled="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-modal-body-actions-confirm ml-2"><span class="oc-spinner inline-block after:block after:bg-transparent after:border after:border-current after:rounded-full after:size-full relative after:relative animate-spin after:content-[''] after:border-b-transparent size-4 spinner" aria-label="" tabindex="-1" role="img"></span> <!-- @slot Content of the button --> Confirm</button></div>
+          </button> <button type="button" disabled="" class="oc-button-secondary oc-button-outline oc-button-secondary-outline gap-2 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-modal-body-actions-confirm ml-2"><span class="oc-spinner inline-block after:block after:bg-transparent after:border after:border-current after:rounded-full after:size-full relative after:relative animate-spin after:content-[''] after:border-b-transparent size-4 spinner" aria-hidden="true" tabindex="-1"></span> <!-- @slot Content of the button --> Confirm</button></div>
       </div>
     </div>
   </focus-trap-stub>

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

@@ -10,9 +10,11 @@
       'size-12': size === 'xxlarge',
       'size-16': size === 'xxxlarge'
     }"
-    :aria-label="ariaLabel"
+    :aria-label="ariaLabel || undefined"
+    :aria-live="ariaLabel ? 'polite' : undefined"
+    :aria-hidden="ariaLabel ? undefined : 'true'"
     tabindex="-1"
-    role="img"
+    :role="ariaLabel ? 'img' : undefined"
   />
 </template>
 
@@ -31,5 +33,5 @@ export interface Props {
   size?: SizeType
 }
 
-const { ariaLabel = '', size = 'medium' } = defineProps<Props>()
+const { ariaLabel = undefined, size = 'medium' } = defineProps<Props>()
 </script>

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

@@ -34,6 +34,9 @@
           "
         />
       </template>
+      <template #avatarHeader>
+        <span class="sr-only">{{ $gettext('Avatar') }}</span>
+      </template>
       <template #select="rowData">
         <oc-checkbox
           size="large"
@@ -328,7 +331,9 @@ export default defineComponent({
           name: 'avatar',
           title: '',
           type: 'slot',
-          width: 'shrink'
+          width: 'shrink',
+          headerType: 'slot',
+          sortable: false
         },
         {
           name: 'displayName',

packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue

@@ -25,6 +25,7 @@
       @highlight="fileClicked"
     >
       <template #selectHeader>
+        <span class="sr-only">{{ $gettext('Select spaces') }}</span>
         <oc-checkbox
           size="large"
           :label="$gettext('Select all spaces')"
@@ -35,6 +36,12 @@
           "
         />
       </template>
+      <template #iconHeader>
+        <span class="sr-only">{{ $gettext('Icon') }}</span>
+      </template>
+      <template #avatarHeader>
+        <span class="sr-only">{{ $gettext('Avatar') }}</span>
+      </template>
       <template #select="{ item }">
         <oc-checkbox
           size="large"
@@ -278,7 +285,9 @@ const fields = computed<FieldType[]>(() => [
     name: 'icon',
     title: '',
     type: 'slot',
-    width: 'shrink'
+    width: 'shrink',
+    headerType: 'slot',
+    sortable: false
   },
   {
     name: 'name',

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

@@ -24,6 +24,7 @@
         @highlight="rowClicked"
       >
         <template #selectHeader>
+          <span class="sr-only">{{ $gettext('Select users') }}</span>
           <oc-checkbox
             size="large"
             :label="$gettext('Select all users')"
@@ -45,6 +46,9 @@
             @click.stop="rowClicked([item, $event])"
           />
         </template>
+        <template #avatarHeader>
+          <span class="sr-only">{{ $gettext('Avatar') }}</span>
+        </template>
         <template #avatar="{ item }">
           <user-avatar :user-id="item.id" :user-name="item.displayName" />
         </template>
@@ -351,7 +355,9 @@ export default defineComponent({
           name: 'avatar',
           title: '',
           type: 'slot',
-          width: 'shrink'
+          width: 'shrink',
+          headerType: 'slot',
+          sortable: false
         },
         {
           name: 'onPremisesSamAccountName',

packages/web-app-admin-settings/src/views/Users.vue

@@ -101,9 +101,11 @@
                 id="users-filter-confirm"
                 class="ml-1 p-1 mt-5"
                 appearance="raw"
+                :aria-label="$gettext('Search users')"
+                v-oc-tooltip="$gettext('Search')"
                 @click="filterDisplayName"
               >
-                <oc-icon name="search" fill-type="line" />
+                <oc-icon name="search" fill-type="line" aria-hidden="true" />
               </oc-button>
             </div>
           </template>

packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap

@@ -18,10 +18,12 @@ exports[`SpacesList > should render all spaces in a table 1`] = `
     <thead data-v-3c9ab66c="" class="oc-thead border-b">
       <tr data-v-98c4aba8="" data-v-3c9ab66c="" class="oc-table-header-row h-10.5">
         <th data-v-27e13406="" data-v-c53469a5="" data-v-3c9ab66c="" class="oc-table-cell text-left align-middle w-px oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-select z-10 pl-4" style="top: 0px;">
-          <div data-v-3c9ab66c=""><span data-v-3c9ab66c="" class="oc-table-thead-content inline-table align-middle"><oc-checkbox-stub label="Select all spaces" disabled="false" id="oc-checkbox-1" labelhidden="true" size="large" modelvalue="false"></oc-checkbox-stub></span></div>
+          <div data-v-3c9ab66c=""><span data-v-3c9ab66c="" class="oc-table-thead-content inline-table align-middle"><span class="sr-only">Select spaces</span>
+            <oc-checkbox-stub label="Select all spaces" disabled="false" id="oc-checkbox-1" labelhidden="true" size="large" modelvalue="false"></oc-checkbox-stub></span>
+          </div>
         </th>
         <th data-v-27e13406="" data-v-c53469a5="" data-v-3c9ab66c="" class="oc-table-cell text-left align-middle w-px oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-icon z-10" style="top: 0px;">
-          <div data-v-3c9ab66c=""><span data-v-3c9ab66c="" class="oc-table-thead-content inline-table align-middle header-text"></span></div>
+          <div data-v-3c9ab66c=""><span data-v-3c9ab66c="" class="oc-table-thead-content inline-table align-middle"><span class="sr-only">Icon</span></span></div>
         </th>
         <th data-v-27e13406="" data-v-c53469a5="" data-v-3c9ab66c="" class="oc-table-cell text-left align-middle min-w-38 oc-th aria-[sort]:cursor-pointer oc-table-header-cell oc-table-header-cell-name z-10" style="top: 0px;" aria-sort="ascending"><button data-v-3c9ab66c="" type="button" aria-label="Sort by name" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-1 justify-start text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-button-sort w-full hover:underline">
             <!--v-if-->