chore(deps): update devdependencies (non-major)

package.json

@@ -42,22 +42,22 @@
     "@opencloud-eu/eslint-config": "workspace:*",
     "@opencloud-eu/prettier-config": "workspace:*",
     "@opencloud-eu/tsconfig": "workspace:*",
-    "@playwright/test": "1.63.0",
+    "@playwright/test": "1.64.1",
     "@tailwindcss/vite": "^4.2.2",
     "@types/lodash-es": "^4.17.12",
     "@types/luxon": "^3.7.1",
     "@types/qs": "^6.15.0",
-    "@vitejs/plugin-vue": "6.0.9",
+    "@vitejs/plugin-vue": "6.0.10",
     "@vitest/coverage-v8": "^5.0.0",
     "@vitest/web-worker": "^5.0.0",
     "@vue/compiler-dom": "^3.5.31",
     "@vue/compiler-sfc": "^3.5.31",
     "@vue/test-utils": "2.5.1",
     "browserslist-to-esbuild": "^2.1.1",
     "browserslist-useragent-regexp": "^4.1.3",
-    "eslint": "10.12.0",
+    "eslint": "10.13.0",
     "franc-min": "^6.2.0",
-    "happy-dom": "20.14.5",
+    "happy-dom": "20.14.6",
     "knip": "5.88.1",
     "license-checker-rseidelsohn": "4.4.2",
     "node-fetch": "3.3.2",
@@ -77,7 +77,7 @@
     "vitest": "^5.0.0",
     "vitest-mock-extended": "5.1.1",
     "vue": "^3.5.31",
-    "vue-tsc": "3.3.12",
+    "vue-tsc": "3.3.13",
     "vue3-gettext": "^4.0.0"
   },
   "engines": {

packages/design-system/package.json

@@ -116,7 +116,7 @@
   "devDependencies": {
     "@opencloud-eu/web-test-helpers": "workspace:*",
     "@tailwindcss/vite": "^4.2.2",
-    "@vitejs/plugin-vue": "6.0.9",
+    "@vitejs/plugin-vue": "6.0.10",
     "markdown-it-container": "^4.0.0",
     "postcss": "^8.5.8",
     "process": "^0.11.10",

packages/design-system/src/components/OcAvatar/OcAvatar.spec.ts

@@ -78,7 +78,7 @@ describe('OcAvatar', () => {
         })
         const userInitialElement = wrapper.find(selectors.initials)
         expect(userInitialElement.exists()).toBeTruthy()
-        expect(userInitialElement.text()).toBe('TU')
+        expect(userInitialElement.attributes('data-initials')).toBe('TU')
       })
     })
     describe('when width is set', () => {

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

@@ -16,7 +16,12 @@
       :src="src"
       @error="onImgError"
     />
-    <span v-else class="avatar-initials" :style="{ color }">{{ userInitial }}</span>
+    <span
+      v-else
+      class="avatar-initials before:content-[attr(data-initials)]"
+      :data-initials="userInitial"
+      :style="{ color }"
+    />
   </span>
 </template>
 
@@ -113,6 +118,7 @@ const style = computed(() => {
   return style
 })
 
+// rendered as CSS generated content, so axe doesn't treat initials as visible label of a labelled parent
 const userInitial = computed(() => {
   if (!isImage.value) {
     return extractInitials(userName)

packages/web-app-admin-settings/src/components/AppTemplate.vue

@@ -62,7 +62,11 @@
                   <div v-if="batchActionItems.length" class="flex items-center gap-1">
                     <oc-button
                       v-oc-tooltip="$gettext('Clear selection')"
-                      :aria-label="$gettext('Clear selection')"
+                      :aria-label="
+                        $gettext('%{count} selected, clear selection', {
+                          count: batchActionItems.length
+                        })
+                      "
                       appearance="raw"
                       gap-size="small"
                       class="p-1 clear-selection-btn"

packages/web-app-admin-settings/tests/unit/components/Spaces/SideBar/MembersPanel.spec.ts

@@ -124,13 +124,12 @@ describe('MembersPanel', () => {
       await nextTick()
       await goToPage(wrapper, 2)
 
-      // the leading `U2` is the initials of the rendered avatar
       expect(wrapper.findAll(selectors.memberListItem).map((item) => item.text())).toEqual([
-        'U2 User 20',
-        'U2 User 21',
-        'U2 User 22',
-        'U2 User 23',
-        'U2 User 24'
+        'User 20',
+        'User 21',
+        'User 22',
+        'User 23',
+        'User 24'
       ])
     })
   })

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

@@ -10,9 +10,7 @@
         appearance="raw"
         gap-size="none"
         :disabled="isLocked"
-        :aria-label="
-          mode === 'create' ? $gettext('Select permission') : $gettext('Edit permission')
-        "
+        :aria-label="roleButtonLabel"
         no-hover
       >
         <span class="truncate" v-text="inviteLabel" />
@@ -168,4 +166,11 @@ const roleButtonId = computed(() => {
 const inviteLabel = computed(() => {
   return $gettext(selectedRole.value?.displayName || '')
 })
+
+const roleButtonLabel = computed(() => {
+  if (mode === 'create') {
+    return $gettext('Select permission: %{role}', { role: unref(inviteLabel) })
+  }
+  return $gettext('Edit permission: %{role}', { role: unref(inviteLabel) })
+})
 </script>

packages/web-app-files/src/components/Spaces/SpaceHeader.vue

@@ -54,7 +54,7 @@
         </div>
         <oc-button
           v-if="memberCount"
-          :aria-label="$gettext('Open context menu and show members')"
+          :aria-label="showMembersLabel"
           appearance="raw"
           no-hover
           @click="openSideBarSharePanel"
@@ -300,6 +300,12 @@ const memberCountString = computed(() => {
   })
 })
 
+const showMembersLabel = computed(() => {
+  return $ngettext('Show %{count} member', 'Show %{count} members', unref(memberCount), {
+    count: unref(memberCount).toString()
+  })
+})
+
 const openSideBarSharePanel = () => {
   resourcesStore.setSelection([])
   sidebarStore.openSideBarPanel('space-share')

packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/__snapshots__/RecipientContainer.spec.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`InviteCollaborator RecipientContainer > displays an avatar image if capability is present 1`] = `
-"<span data-v-1e6c8369="" class="oc-recipient bg-role-surface-container flex items-center justify-center outline outline-role-outline rounded-md wrap-anywhere" data-testid="recipient-container-Albert Einstein"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #c21c53; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: white;">AE</span></span>
+"<span data-v-1e6c8369="" class="oc-recipient bg-role-surface-container flex items-center justify-center outline outline-role-outline rounded-md wrap-anywhere" data-testid="recipient-container-Albert Einstein"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #c21c53; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials before:content-[attr(data-initials)]" data-initials="AE" style="color: white;"></span></span>
 <p data-v-1e6c8369="" class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->
@@ -10,7 +10,7 @@ exports[`InviteCollaborator RecipientContainer > displays an avatar image if cap
 `;
 
 exports[`InviteCollaborator RecipientContainer > renders a recipient with a deselect button > different recipients for different shareTypes 1`] = `
-"<span data-v-1e6c8369="" class="oc-recipient bg-role-surface-container flex items-center justify-center outline outline-role-outline rounded-md wrap-anywhere" data-testid="recipient-container-Albert Einstein"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #c21c53; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: white;">AE</span></span>
+"<span data-v-1e6c8369="" class="oc-recipient bg-role-surface-container flex items-center justify-center outline outline-role-outline rounded-md wrap-anywhere" data-testid="recipient-container-Albert Einstein"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #c21c53; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials before:content-[attr(data-initials)]" data-initials="AE" style="color: white;"></span></span>
 <p data-v-1e6c8369="" class="oc-recipient-name m-0" data-testid="recipient-name">Albert Einstein</p> <!-- @slot Append content (actions, additional info, etc.)  --> <button type="button" aria-label="Deselect Albert Einstein" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default files-share-invite-recipient-btn-remove raw-hover-surface">
   <!--v-if-->
   <!-- @slot Content of the button -->

packages/web-app-files/tests/unit/components/SideBar/__snapshots__/ActivitiesPanel.spec.ts.snap

@@ -4,28 +4,28 @@ exports[`ActivitiesPanel > should render a list of activities when data is prese
 "<div class="ml-2">
   <ul class="oc-list oc-timeline wrap-anywhere">
     <li><span class="text-role-on-surface-variant text-sm leading-[1lh]">Jul 29, 2024, 6:34 PM</span>
-      <div class="flex items-start mt-1"><span class="mr-1 inline-flex h-lh shrink-0 items-center"><span role="img" class="oc-avatars inline-flex w-fit flex-nowrap flex-row oc-avatars-stacked [&amp;>*]:not-first:-ml-3 gap-1" aria-label="Marie Curie"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #8e5c11; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Marie Curie"><span class="avatar-initials" style="color: white;">MC</span></span>
+      <div class="flex items-start mt-1"><span class="mr-1 inline-flex h-lh shrink-0 items-center"><span role="img" class="oc-avatars inline-flex w-fit flex-nowrap flex-row oc-avatars-stacked [&amp;>*]:not-first:-ml-3 gap-1" aria-label="Marie Curie"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #8e5c11; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Marie Curie"><span class="avatar-initials before:content-[attr(data-initials)]" data-initials="MC" style="color: white;"></span></span>
         <!--v-if-->
         <!--v-if--></span>
         <!--v-if--></span> <span class="text-role-on-surface-variant"><span class="font-medium text-role-on-surface">Marie Curie</span> created <span class="font-medium text-role-on-surface">new folder</span>.</span>
       </div>
     </li>
     <li><span class="text-role-on-surface-variant text-sm leading-[1lh]">Jul 29, 2023, 6:34 PM</span>
-      <div class="flex items-start mt-1"><span class="mr-1 inline-flex h-lh shrink-0 items-center"><span role="img" class="oc-avatars inline-flex w-fit flex-nowrap flex-row oc-avatars-stacked [&amp;>*]:not-first:-ml-3 gap-1" aria-label="Albert Einstein"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #c21c53; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials" style="color: white;">AE</span></span>
+      <div class="flex items-start mt-1"><span class="mr-1 inline-flex h-lh shrink-0 items-center"><span role="img" class="oc-avatars inline-flex w-fit flex-nowrap flex-row oc-avatars-stacked [&amp;>*]:not-first:-ml-3 gap-1" aria-label="Albert Einstein"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #c21c53; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Einstein"><span class="avatar-initials before:content-[attr(data-initials)]" data-initials="AE" style="color: white;"></span></span>
         <!--v-if-->
         <!--v-if--></span>
         <!--v-if--></span> <span class="text-role-on-surface-variant"><span class="font-medium text-role-on-surface">Albert Einstein</span> moved <span class="font-medium text-role-on-surface">textfile.txt</span>.</span>
       </div>
     </li>
     <li><span class="text-role-on-surface-variant text-sm leading-[1lh]">Jul 29, 2022, 6:34 PM</span>
-      <div class="flex items-start mt-1"><span class="mr-1 inline-flex h-lh shrink-0 items-center"><span role="img" class="oc-avatars inline-flex w-fit flex-nowrap flex-row oc-avatars-stacked [&amp;>*]:not-first:-ml-3 gap-1" aria-label="Robert Oppenheimer"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #3F51B5; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Robert Oppenheimer"><span class="avatar-initials" style="color: white;">RO</span></span>
+      <div class="flex items-start mt-1"><span class="mr-1 inline-flex h-lh shrink-0 items-center"><span role="img" class="oc-avatars inline-flex w-fit flex-nowrap flex-row oc-avatars-stacked [&amp;>*]:not-first:-ml-3 gap-1" aria-label="Robert Oppenheimer"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #3F51B5; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Robert Oppenheimer"><span class="avatar-initials before:content-[attr(data-initials)]" data-initials="RO" style="color: white;"></span></span>
         <!--v-if-->
         <!--v-if--></span>
         <!--v-if--></span> <span class="text-role-on-surface-variant"><span class="font-medium text-role-on-surface">Robert Oppenheimer</span> deleted <span class="font-medium text-role-on-surface">atom plans.pdf</span>.</span>
       </div>
     </li>
     <li><span class="text-role-on-surface-variant text-sm leading-[1lh]">Jul 29, 2021, 6:34 PM</span>
-      <div class="flex items-start mt-1"><span class="mr-1 inline-flex h-lh shrink-0 items-center"><span role="img" class="oc-avatars inline-flex w-fit flex-nowrap flex-row oc-avatars-stacked [&amp;>*]:not-first:-ml-3 gap-1" aria-label="Albert Schweitzer"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #673AB7; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Schweitzer"><span class="avatar-initials" style="color: white;">AS</span></span>
+      <div class="flex items-start mt-1"><span class="mr-1 inline-flex h-lh shrink-0 items-center"><span role="img" class="oc-avatars inline-flex w-fit flex-nowrap flex-row oc-avatars-stacked [&amp;>*]:not-first:-ml-3 gap-1" aria-label="Albert Schweitzer"><span class="vue-avatar--wrapper oc-avatar flex justify-center items-center shrink-0 text-center rounded-[50%] select-none" style="width: 16.8px; height: 16.8px; line-height: 16.8px; background-color: #673AB7; font-size: 6px; font-family: Helvetica, Arial, sans-serif; color: white;" width="16.8" aria-hidden="true" focusable="false" data-test-user-name="Albert Schweitzer"><span class="avatar-initials before:content-[attr(data-initials)]" data-initials="AS" style="color: white;"></span></span>
         <!--v-if-->
         <!--v-if--></span>
         <!--v-if--></span> <span class="text-role-on-surface-variant"><span class="font-medium text-role-on-surface">Albert Schweitzer</span> removed <span class="font-medium text-role-on-surface">Selfie.png</span>.</span>

packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap

@@ -31,7 +31,7 @@ exports[`SpaceHeader > should add the "squashed"-class when the sidebar is opene
           <!--v-if-->
           <!--teleport end-->
         </transition-stub>
-      </div> <button type="button" aria-label="Open context menu and show members" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default">
+      </div> <button type="button" aria-label="Show 1 member" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-4"><svg data-testid="inline-svg-stub" src="icons/group-line.svg" unique-ids="false" transform-source="(svg) => {
 			if (__props.accessibleLabel !== &quot;&quot;) {
@@ -82,7 +82,7 @@ exports[`SpaceHeader > space description > should show the description 1`] = `
           <!--v-if-->
           <!--teleport end-->
         </transition-stub>
-      </div> <button type="button" aria-label="Open context menu and show members" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default">
+      </div> <button type="button" aria-label="Show 1 member" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-4"><svg data-testid="inline-svg-stub" src="icons/group-line.svg" unique-ids="false" transform-source="(svg) => {
 			if (__props.accessibleLabel !== &quot;&quot;) {
@@ -127,7 +127,7 @@ exports[`SpaceHeader > space image > should show the set image 1`] = `
           <!--v-if-->
           <!--teleport end-->
         </transition-stub>
-      </div> <button type="button" aria-label="Open context menu and show members" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default">
+      </div> <button type="button" aria-label="Show 1 member" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-base min-h-4 no-hover oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default">
         <!--v-if-->
         <!-- @slot Content of the button --> <span class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-4"><svg data-testid="inline-svg-stub" src="icons/group-line.svg" unique-ids="false" transform-source="(svg) => {
 			if (__props.accessibleLabel !== &quot;&quot;) {

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

@@ -69,7 +69,9 @@
           <div v-if="selectedResources.length" class="flex items-center gap-1">
             <oc-button
               v-oc-tooltip="$gettext('Clear selection')"
-              :aria-label="$gettext('Clear selection')"
+              :aria-label="
+                $gettext('%{count} selected, clear selection', { count: selectedResources.length })
+              "
               appearance="raw"
               gap-size="small"
               class="p-1 clear-selection-btn"