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 @@
}}
+
([])
const displayItems: Ref = 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}"]`)
}
diff --git a/packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.ts.snap b/packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.ts.snap
index 084ff24254..28d6dc8f03 100644
--- a/packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.ts.snap
+++ b/packages/design-system/src/components/OcBreadcrumb/__snapshots__/OcBreadcrumb.spec.ts.snap
@@ -8,8 +8,7 @@ exports[`OcBreadcrumb > displays all items 1`] = `
-
- ...
+ ...
@@ -44,8 +43,7 @@ exports[`OcBreadcrumb > sets correct variation 1`] = `
-
- ...
+ ...
diff --git a/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap b/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
index be86e8aa33..3c92811e1d 100644
--- a/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
+++ b/packages/design-system/src/components/OcModal/__snapshots__/OcModal.spec.ts.snap
@@ -39,7 +39,7 @@ exports[`OcModal > displays loading state 1`] = `
+
diff --git a/packages/design-system/src/components/OcSpinner/OcSpinner.vue b/packages/design-system/src/components/OcSpinner/OcSpinner.vue
index d47284f0dd..01879caee4 100644
--- a/packages/design-system/src/components/OcSpinner/OcSpinner.vue
+++ b/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"
/>
@@ -31,5 +33,5 @@ export interface Props {
size?: SizeType
}
-const { ariaLabel = '', size = 'medium' } = defineProps()
+const { ariaLabel = undefined, size = 'medium' } = defineProps()
diff --git a/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue b/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue
index 783e584b4f..e8ce2a739d 100644
--- a/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue
+++ b/packages/web-app-admin-settings/src/components/Groups/GroupsList.vue
@@ -34,6 +34,9 @@
"
/>
+
+ {{ $gettext('Avatar') }}
+
+ {{ $gettext('Select spaces') }}
+
+ {{ $gettext('Icon') }}
+
+
+ {{ $gettext('Avatar') }}
+
(() => [
name: 'icon',
title: '',
type: 'slot',
- width: 'shrink'
+ width: 'shrink',
+ headerType: 'slot',
+ sortable: false
},
{
name: 'name',
diff --git a/packages/web-app-admin-settings/src/components/Users/UsersList.vue b/packages/web-app-admin-settings/src/components/Users/UsersList.vue
index e0a538a756..808b6a1571 100644
--- a/packages/web-app-admin-settings/src/components/Users/UsersList.vue
+++ b/packages/web-app-admin-settings/src/components/Users/UsersList.vue
@@ -24,6 +24,7 @@
@highlight="rowClicked"
>
+ {{ $gettext('Select users') }}
+
+ {{ $gettext('Avatar') }}
+
@@ -351,7 +355,9 @@ export default defineComponent({
name: 'avatar',
title: '',
type: 'slot',
- width: 'shrink'
+ width: 'shrink',
+ headerType: 'slot',
+ sortable: false
},
{
name: 'onPremisesSamAccountName',
diff --git a/packages/web-app-admin-settings/src/views/Users.vue b/packages/web-app-admin-settings/src/views/Users.vue
index 20806945bf..5f1e548324 100644
--- a/packages/web-app-admin-settings/src/views/Users.vue
+++ b/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"
>
-
+
diff --git a/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap b/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
index 7250a1e691..1d4ff7df4b 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Spaces/__snapshots__/SpacesList.spec.ts.snap
+++ b/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`] = `