diff --git a/packages/design-system/src/components/OcAvatars/OcAvatars.vue b/packages/design-system/src/components/OcAvatars/OcAvatars.vue index 30784f4e9c..4e49e74edb 100644 --- a/packages/design-system/src/components/OcAvatars/OcAvatars.vue +++ b/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) diff --git a/packages/design-system/src/components/OcAvatars/__snapshots__/OcAvatars.spec.ts.snap b/packages/design-system/src/components/OcAvatars/__snapshots__/OcAvatars.spec.ts.snap index b534dd64c0..2957905406 100644 --- a/packages/design-system/src/components/OcAvatars/__snapshots__/OcAvatars.spec.ts.snap +++ b/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`] = `" List of users"`; +exports[`OcAvatars > displays tooltip 1`] = `" List of users"`; -exports[`OcAvatars > prefers avatars over links when maxDisplayed is exceeded 1`] = `" List of users"`; +exports[`OcAvatars > prefers avatars over links when maxDisplayed is exceeded 1`] = `" List of users"`; -exports[`OcAvatars > shows avatars first and links last 1`] = `" List of users"`; +exports[`OcAvatars > shows avatars first and links last 1`] = `" List of users"`; diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue index 19a6723599..3c614f4679 100644 --- a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue +++ b/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,9 +26,9 @@ @drop="dropItemEvent(item, index)" > {{ @@ -38,7 +36,7 @@ }} +