From fe13768e8b9fdb768126363744383083727b500b Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Wed, 21 Oct 2026 15:52:10 +0200
Subject: [PATCH 01/16] fix: improve a11y semantics of search, spaces list and
 space header

---
 .../OcSearchBar/OcSearchBar.spec.ts           |  14 +++
 .../components/OcSearchBar/OcSearchBar.vue    |  11 +-
 .../src/components/Spaces/SpacesList.vue      |   7 +-
 .../unit/components/Spaces/SpacesList.spec.ts |  10 ++
 .../src/components/Spaces/SpaceHeader.vue     |   6 +-
 .../components/Spaces/SpaceHeader.spec.ts     |   9 ++
 .../__snapshots__/SpaceHeader.spec.ts.snap    |   2 +-
 .../web-app-search/src/portals/SearchBar.vue  | 118 ++++++++++++++----
 .../tests/unit/portals/SearchBar.spec.ts      |  91 +++++++++++++-
 .../SideBar/Spaces/Details/SpaceDetails.vue   |  10 +-
 .../Spaces/Details/SpaceDetails.spec.ts       |   7 ++
 .../__snapshots__/SpaceDetails.spec.ts.snap   |   4 +-
 .../objects/app-files/resource/search.ts      |   2 +-
 .../objects/app-files/search/actions.ts       |   2 +-
 14 files changed, 247 insertions(+), 46 deletions(-)

diff --git a/packages/design-system/src/components/OcSearchBar/OcSearchBar.spec.ts b/packages/design-system/src/components/OcSearchBar/OcSearchBar.spec.ts
index 6149720c6a6..9f16a83e54d 100644
--- a/packages/design-system/src/components/OcSearchBar/OcSearchBar.spec.ts
+++ b/packages/design-system/src/components/OcSearchBar/OcSearchBar.spec.ts
@@ -138,6 +138,20 @@ describe('OcSearchBar', () => {
       const searchInput = wrapper.find(selectors.searchInput)
       expect(searchInput.attributes('placeholder')).toBe('Start typing..')
     })
+    it('should pass the input attributes to the input', () => {
+      const wrapper = getWrapper({
+        inputAttributes: {
+          role: 'combobox',
+          'aria-expanded': true,
+          'aria-activedescendant': 'option-1'
+        }
+      })
+      const searchInput = wrapper.find(selectors.searchInput)
+      expect(searchInput.attributes('role')).toBe('combobox')
+      expect(searchInput.attributes('aria-expanded')).toBe('true')
+      expect(searchInput.attributes('aria-activedescendant')).toBe('option-1')
+      expect(searchInput.attributes('aria-label')).toBe('Test search label')
+    })
     it('should emit input event on typing', async () => {
       const wrapper = getWrapper()
       const searchInput = wrapper.find(selectors.searchInput)
diff --git a/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue b/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
index dd9a151c135..e85cc2eeb77 100644
--- a/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
+++ b/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
@@ -6,6 +6,7 @@
   >
     <div class="flex-1 relative">
       <input
+        v-bind="inputAttributes"
         :id="inputId"
         v-model="model"
         :class="inputClass"
@@ -58,7 +59,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, unref, useId, watch } from 'vue'
+import { computed, InputHTMLAttributes, unref, useId, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import OcButton, { Props as OcButtonProps } from '../OcButton/OcButton.vue'
 import OcIcon from '../OcIcon/OcIcon.vue'
@@ -141,6 +142,11 @@ export interface Props {
    * @docs The handler for the cancel button.
    */
   cancelHandler?: () => void
+  /**
+   * @docs Additional attributes for the input element, e.g. `role`, `aria-expanded` and `aria-activedescendant` to make it a combobox.
+   * @default {}
+   */
+  inputAttributes?: InputHTMLAttributes
 }
 
 export interface Emits {
@@ -183,7 +189,8 @@ const {
   cancelButtonAppearance = 'raw',
   cancelButtonColorRole = 'secondary',
   isRounded = true,
-  cancelHandler = () => {}
+  cancelHandler = () => {},
+  inputAttributes = {}
 } = defineProps<Props>()
 
 const model = defineModel<string>({ default: '' })
diff --git a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
index 40136651b2f..39629969a70 100644
--- a/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
+++ b/packages/web-app-admin-settings/src/components/Spaces/SpacesList.vue
@@ -68,11 +68,8 @@
       <resource-status-indicators :space="item" :resource="item" />
     </template>
     <template #mdate="{ item }">
-      <span
-        v-oc-tooltip="formatDate(item.mdate)"
-        tabindex="0"
-        v-text="formatDateRelative(item.mdate)"
-      />
+      <span v-oc-tooltip="formatDate(item.mdate)" v-text="formatDateRelative(item.mdate)" />
+      <span class="sr-only" v-text="`(${formatDate(item.mdate)})`" />
     </template>
     <template #actions="{ item }">
       <div class="spaces-list-actions">
diff --git a/packages/web-app-admin-settings/tests/unit/components/Spaces/SpacesList.spec.ts b/packages/web-app-admin-settings/tests/unit/components/Spaces/SpacesList.spec.ts
index d046ee25c27..344a7621d08 100644
--- a/packages/web-app-admin-settings/tests/unit/components/Spaces/SpacesList.spec.ts
+++ b/packages/web-app-admin-settings/tests/unit/components/Spaces/SpacesList.spec.ts
@@ -172,6 +172,16 @@ describe('SpacesList', () => {
       expect(getColumn(wrapper, 'usedQuota')).toEqual(['-'])
       expect(getColumn(wrapper, 'remainingQuota')).toEqual(['Unrestricted'])
     })
+    it('renders the modified date without a tab stop and the absolute date for screen readers', () => {
+      const space = mock<SpaceResource>({
+        ...spaceMocks[0],
+        mdate: 'Wed, 21 Oct 2015 07:28:00 GMT'
+      })
+      const { wrapper } = getWrapper({ spaces: [space] })
+      const cell = wrapper.find('.oc-table-data-cell-mdate')
+      expect(cell.find('[tabindex]').exists()).toBeFalsy()
+      expect(cell.find('.sr-only').text()).toContain('2015')
+    })
     it('renders the status indicators of each space', () => {
       const { wrapper } = getWrapper({ spaces: spaceMocks })
       expect(wrapper.findAllComponents(OcStatusIndicators)).toHaveLength(spaceMocks.length)
diff --git a/packages/web-app-files/src/components/Spaces/SpaceHeader.vue b/packages/web-app-files/src/components/Spaces/SpaceHeader.vue
index 4996f7b8e11..aba39a431a9 100644
--- a/packages/web-app-files/src/components/Spaces/SpaceHeader.vue
+++ b/packages/web-app-files/src/components/Spaces/SpaceHeader.vue
@@ -84,7 +84,11 @@
           'mask-linear-[180deg,black,80%,transparent]': showMarkdownCollapse && markdownCollapsed
         }"
       >
-        <TextEditorViewer class="markdown-container-content w-full" :content="markdownContent" />
+        <TextEditorViewer
+          class="markdown-container-content w-full"
+          :content="markdownContent"
+          :aria-label="$gettext('Space description')"
+        />
       </div>
       <div
         v-if="showMarkdownCollapse && markdownContent"
diff --git a/packages/web-app-files/tests/unit/components/Spaces/SpaceHeader.spec.ts b/packages/web-app-files/tests/unit/components/Spaces/SpaceHeader.spec.ts
index 79c41af58b1..0abdcb6a284 100644
--- a/packages/web-app-files/tests/unit/components/Spaces/SpaceHeader.spec.ts
+++ b/packages/web-app-files/tests/unit/components/Spaces/SpaceHeader.spec.ts
@@ -104,6 +104,15 @@ describe('SpaceHeader', () => {
       expect(wrapper.find('.markdown-container').exists()).toBeTruthy()
       expect(wrapper.html()).toMatchSnapshot()
     })
+    it('gives the description viewer an accessible name', async () => {
+      const space = getSpaceMock()
+      space.spaceReadmeData = {}
+      const wrapper = getWrapper({ space })
+      await flushPromises()
+      expect(wrapper.findComponent({ name: 'TextEditorViewer' }).attributes('aria-label')).toBe(
+        'Space description'
+      )
+    })
     it('shows a loading spinner when the description is loading', () => {
       const space = getSpaceMock()
       space.spaceReadmeData = {}
diff --git a/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap b/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap
index ee9c50a4324..1ca2214c0a3 100644
--- a/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/components/Spaces/__snapshots__/SpaceHeader.spec.ts.snap
@@ -97,7 +97,7 @@ exports[`SpaceHeader > space description > should show the description 1`] = `
     </div>
     <!--v-if-->
     <div class="markdown-container flex min-h-0 [&amp;.collapsed]:max-h-15 [&amp;.collapsed]:overflow-hidden collapsed">
-      <div class="markdown-container-content w-full" content="body"></div>
+      <div class="markdown-container-content w-full" content="body" aria-label="Space description"></div>
     </div>
     <!--v-if-->
   </div>
diff --git a/packages/web-app-search/src/portals/SearchBar.vue b/packages/web-app-search/src/portals/SearchBar.vue
index 50b99769fdd..797451729dc 100644
--- a/packages/web-app-search/src/portals/SearchBar.vue
+++ b/packages/web-app-search/src/portals/SearchBar.vue
@@ -19,6 +19,7 @@
       cancel-button-appearance="raw-inverse"
       cancel-button-color-role="chrome"
       :cancel-handler="cancelSearch"
+      :input-attributes="searchInputAttributes"
       small
       class="mx-auto sm:mx-0 bg-role-chrome sm:bg-transparent w-[95vw] sm:w-2xs md:w-lg h-12 absolute inset-0 sm:relative invisible sm:visible z-90 sm:z-auto"
       @advanced-search="onKeyUpEnter"
@@ -65,6 +66,8 @@
       close-on-click
       enforce-drop-on-mobile
       :is-menu="false"
+      @show-drop="isPreviewOpen = true"
+      @hide-drop="isPreviewOpen = false"
     >
       <oc-list class="oc-list-divider p-2">
         <li
@@ -79,12 +82,18 @@
         </li>
         <template v-else>
           <li v-for="provider in displayProviders" :key="provider.id" class="provider">
-            <oc-list>
-              <li
-                class="truncate flex justify-between text-role-on-surface-variant provider-details py-1 px-2 text-xs"
+            <div role="grid" :aria-labelledby="getProviderNameId(provider)">
+              <div
+                role="row"
+                class="truncate flex justify-between text-role-on-surface-variant provider-details py-1 px-2 mb-1 text-xs"
               >
-                <span class="display-name" v-text="$gettext(provider.displayName)" />
-                <span v-if="!!provider.listSearch">
+                <span
+                  :id="getProviderNameId(provider)"
+                  role="gridcell"
+                  class="display-name"
+                  v-text="$gettext(provider.displayName)"
+                />
+                <span v-if="!!provider.listSearch" :id="getMoreResultsId(provider)" role="gridcell">
                   <router-link
                     class="more-results p-0"
                     :to="getSearchResultLocation(provider.id)"
@@ -95,27 +104,35 @@
                     <span>{{ getMoreResultsDetailsTextForProvider(provider) }}</span>
                   </router-link>
                 </span>
-              </li>
-              <li
-                v-for="providerSearchResultValue in getSearchResultForProvider(provider).values"
+              </div>
+              <div
+                v-for="(providerSearchResultValue, index) in getSearchResultForProvider(provider)
+                  .values"
                 :key="providerSearchResultValue.id"
-                :data-search-id="providerSearchResultValue.id"
-                :class="{
-                  'active bg-role-secondary-container': isPreviewElementActive(
-                    providerSearchResultValue.id
-                  )
-                }"
-                class="preview flex items-center py-1 px-2 text-sm min-h-10 [&.disabled]:opacity-70 [&.disabled]:grayscale-60 [&.disabled]:pointer-events-none hover:bg-role-surface-container"
+                role="row"
+                class="mb-1 last:mb-0"
               >
-                <component
-                  :is="provider.previewSearch.component"
-                  class="preview-component"
-                  :provider="provider"
-                  :search-result="providerSearchResultValue"
-                  :term="term"
-                />
-              </li>
-            </oc-list>
+                <div
+                  :id="getPreviewId(provider, index)"
+                  role="gridcell"
+                  :data-search-id="providerSearchResultValue.id"
+                  :class="{
+                    'active bg-role-secondary-container': isPreviewElementActive(
+                      providerSearchResultValue.id
+                    )
+                  }"
+                  class="preview flex items-center py-1 px-2 text-sm min-h-10 [&.disabled]:opacity-70 [&.disabled]:grayscale-60 [&.disabled]:pointer-events-none hover:bg-role-surface-container"
+                >
+                  <component
+                    :is="provider.previewSearch.component"
+                    class="preview-component"
+                    :provider="provider"
+                    :search-result="providerSearchResultValue"
+                    :term="term"
+                  />
+                </div>
+              </div>
+            </div>
           </li>
         </template>
       </oc-list>
@@ -152,7 +169,8 @@ import {
   useTemplateRef,
   watch,
   nextTick,
-  onMounted
+  onMounted,
+  useId
 } from 'vue'
 import { SearchLocationFilterConstants } from '@opencloud-eu/web-pkg'
 import { SearchBarFilter } from '@opencloud-eu/web-pkg'
@@ -182,6 +200,8 @@ const locationFilterId = ref(SearchLocationFilterConstants.allFiles)
 const optionsDropRef = useTemplateRef<ComponentPublicInstance<typeof OcDrop>>('optionsDropRef')
 const searchBarRef = useTemplateRef<HTMLElement>('searchBar')
 const activePreviewIndex = ref<number | null>(null)
+const isPreviewOpen = ref(false)
+const previewIdPrefix = `files-global-search-${useId()}`
 const term = ref('')
 const restoreSearchFromRoute = ref(false)
 const searchResults = ref<
@@ -425,7 +445,7 @@ onBeforeUnmount(() => {
 
 function getFocusableElements() {
   const elements = [document.querySelector('.more-results')]
-  elements.push(...Array.from(document.querySelectorAll('li.preview')))
+  elements.push(...Array.from(document.querySelectorAll('.preview[role="gridcell"]')))
   return elements as HTMLElement[]
 }
 
@@ -521,6 +541,52 @@ function getMoreResultsDetailsTextForProvider(provider: SearchProvider) {
   )
 }
 
+function getProviderNameId(provider: SearchProvider) {
+  return `${previewIdPrefix}-${provider.id}-name`
+}
+
+function getMoreResultsId(provider: SearchProvider) {
+  return `${previewIdPrefix}-${provider.id}-more-results`
+}
+
+function getPreviewId(provider: SearchProvider, index: number) {
+  return `${previewIdPrefix}-${provider.id}-${index}`
+}
+
+// ids of the cells the arrow keys move through, in the same order as getFocusableElements()
+const previewCellIds = computed(() => {
+  const moreResultsProvider = unref(displayProviders).find((provider) => !!provider.listSearch)
+  return [
+    moreResultsProvider ? getMoreResultsId(moreResultsProvider) : undefined,
+    ...unref(displayProviders).flatMap((provider) =>
+      getSearchResultForProvider(provider).values.map((_, index) => getPreviewId(provider, index))
+    )
+  ]
+})
+
+const activeDescendantId = computed(() => {
+  if (!unref(isPreviewOpen) || unref(loading) || unref(activePreviewIndex) === null) {
+    return undefined
+  }
+  return unref(previewCellIds)[unref(activePreviewIndex)]
+})
+
+// the input is a combobox whose popup is the preview drop, the arrow keys move a virtual focus
+// through the preview cells which aria-activedescendant exposes to assistive technologies
+const searchInputAttributes = computed(() => {
+  if (!unref(showDrop)) {
+    return {}
+  }
+  return {
+    role: 'combobox',
+    'aria-autocomplete': 'list' as const,
+    'aria-haspopup': 'grid' as const,
+    'aria-expanded': unref(isPreviewOpen),
+    'aria-controls': 'files-global-search-options',
+    'aria-activedescendant': unref(activeDescendantId)
+  }
+})
+
 function isPreviewElementActive(searchId: string) {
   const previewElements = getFocusableElements()
   const activeEl = previewElements?.[activePreviewIndex.value] as HTMLElement
diff --git a/packages/web-app-search/tests/unit/portals/SearchBar.spec.ts b/packages/web-app-search/tests/unit/portals/SearchBar.spec.ts
index 536bfffd785..6a06c750c3e 100644
--- a/packages/web-app-search/tests/unit/portals/SearchBar.spec.ts
+++ b/packages/web-app-search/tests/unit/portals/SearchBar.spec.ts
@@ -296,6 +296,93 @@ describe('Search Bar portal component', () => {
       expect.stringContaining('folder-id')
     )
   })
+  describe('combobox semantics', () => {
+    function emitPreviewDropEvent(
+      wrapper: ReturnType<typeof getMountedWrapper>['wrapper'],
+      event: 'showDrop' | 'hideDrop'
+    ) {
+      wrapper.findComponent({ ref: 'optionsDropRef' }).vm.$emit(event)
+      return nextTick()
+    }
+
+    test('marks the input as a combobox that controls the preview', async () => {
+      const { wrapper } = getMountedWrapper()
+      const input = wrapper.find(selectors.searchInput)
+      expect(input.attributes('role')).toBe('combobox')
+      expect(input.attributes('aria-haspopup')).toBe('grid')
+      expect(input.attributes('aria-autocomplete')).toBe('list')
+      expect(input.attributes('aria-controls')).toBe('files-global-search-options')
+      expect(input.attributes('aria-expanded')).toBe('false')
+
+      await emitPreviewDropEvent(wrapper, 'showDrop')
+      expect(input.attributes('aria-expanded')).toBe('true')
+
+      await emitPreviewDropEvent(wrapper, 'hideDrop')
+      expect(input.attributes('aria-expanded')).toBe('false')
+    })
+    test('renders the preview results as cells of a grid per provider', async () => {
+      const { wrapper } = getMountedWrapper()
+      wrapper.find(selectors.searchInput).setValue('albert')
+      await flushPromises()
+
+      const grids = wrapper.findAll('[role="grid"]')
+      expect(grids).toHaveLength(2)
+      grids.forEach((grid) => {
+        const rows = grid.findAll(':scope > [role="row"]')
+        expect(rows).toHaveLength(3)
+        rows.forEach((row) => {
+          expect(row.findAll(':scope > [role="gridcell"]').length).toBeGreaterThan(0)
+        })
+      })
+
+      const ids = wrapper.findAll('[role="gridcell"]').map((cell) => cell.attributes('id'))
+      expect(ids.every((id) => !!id)).toBe(true)
+      expect(new Set(ids).size).toBe(ids.length)
+      expect(wrapper.find('.more-results').element.closest('[role="gridcell"]')).not.toBeNull()
+      wrapper.findAll('.preview').forEach((preview) => {
+        expect(preview.attributes('role')).toBe('gridcell')
+      })
+    })
+    test('points aria-activedescendant to the preview cell highlighted with the arrow keys', async () => {
+      const { wrapper } = getMountedWrapper({ attachTo: document.body })
+      const input = wrapper.find(selectors.searchInput)
+      input.setValue('albert')
+      await flushPromises()
+      await emitPreviewDropEvent(wrapper, 'showDrop')
+      expect(input.attributes('aria-activedescendant')).toBeUndefined()
+
+      const moreResultsCellId = wrapper
+        .find('.more-results')
+        .element.closest('[role="gridcell"]').id
+      const previews = wrapper.findAll('.preview')
+
+      await input.trigger('keyup.down')
+      expect(input.attributes('aria-activedescendant')).toBe(moreResultsCellId)
+
+      await input.trigger('keyup.down')
+      expect(input.attributes('aria-activedescendant')).toBe(previews.at(0).attributes('id'))
+      expect(previews.at(0).classes()).toContain('active')
+
+      await input.trigger('keyup.down')
+      expect(input.attributes('aria-activedescendant')).toBe(previews.at(1).attributes('id'))
+      expect(previews.at(1).classes()).toContain('active')
+
+      await input.trigger('keyup.up')
+      expect(input.attributes('aria-activedescendant')).toBe(previews.at(0).attributes('id'))
+    })
+    test('removes aria-activedescendant when the preview gets hidden', async () => {
+      const { wrapper } = getMountedWrapper({ attachTo: document.body })
+      const input = wrapper.find(selectors.searchInput)
+      input.setValue('albert')
+      await flushPromises()
+      await emitPreviewDropEvent(wrapper, 'showDrop')
+      await input.trigger('keyup.down')
+      expect(input.attributes('aria-activedescendant')).toBeDefined()
+
+      await emitPreviewDropEvent(wrapper, 'hideDrop')
+      expect(input.attributes('aria-activedescendant')).toBeUndefined()
+    })
+  })
   describe('search location across views', () => {
     test('discards an in-flight preview from the previous scope', async () => {
       const { wrapper } = getMountedWrapper({
@@ -651,7 +738,8 @@ function getMountedWrapper({
   route = 'files-spaces-generic',
   store = {},
   term = '',
-  query = {} as Record<string, string>
+  query = {} as Record<string, string>,
+  attachTo = undefined as HTMLElement | undefined
 } = {}) {
   vi.mocked(useAvailableProviders).mockReturnValue(ref(providers))
 
@@ -673,6 +761,7 @@ function getMountedWrapper({
   }
 
   const wrapper = mount(SearchBar, {
+    attachTo,
     global: {
       plugins: [
         ...defaultPlugins({
diff --git a/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetails.vue b/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetails.vue
index d6ba8046584..0277e54dc82 100644
--- a/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetails.vue
+++ b/packages/web-pkg/src/components/SideBar/Spaces/Details/SpaceDetails.vue
@@ -41,10 +41,10 @@
       >
         <oc-icon name="link" size-class="size-4" fill-type="line" />
       </oc-button>
-      <p v-text="shareLabel" />
+      <p :id="shareLabelId" v-text="shareLabel" />
       <oc-button
         appearance="raw"
-        :aria-label="openSharesPanelHint"
+        :aria-describedby="shareLabelId"
         size="small"
         no-hover
         @click="openSideBarPanel('space-share')"
@@ -83,7 +83,7 @@
 </template>
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import { computed, inject, Ref, ref, unref, watch } from 'vue'
+import { computed, inject, Ref, ref, unref, useId, watch } from 'vue'
 import {
   buildSpaceImageResource,
   getSpaceManagers,
@@ -196,6 +196,7 @@ const lastModifiedDate = computed(() => {
 const hasShares = computed(() => {
   return unref(hasMemberShares) || unref(hasLinkShares)
 })
+const shareLabelId = useId()
 const shareLabel = computed(() => {
   if (unref(hasMemberShares) && !unref(hasLinkShares)) {
     return unref(memberShareLabel)
@@ -224,9 +225,6 @@ const shareLabel = computed(() => {
       })
   }
 })
-const openSharesPanelHint = computed(() => {
-  return $gettext('Open share panel')
-})
 const openSharesPanelLinkHint = computed(() => {
   return $gettext('Open link list in share panel')
 })
diff --git a/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/SpaceDetails.spec.ts b/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/SpaceDetails.spec.ts
index 8438c21aff2..ce8ad870760 100644
--- a/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/SpaceDetails.spec.ts
+++ b/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/SpaceDetails.spec.ts
@@ -62,6 +62,13 @@ describe('Details SideBar Panel', () => {
     })
     expect(wrapper.find(selectors.spaceMembers).exists()).toBeFalsy()
   })
+  it('names the share panel button by its visible text and describes it with the share summary', () => {
+    const { wrapper } = createWrapper()
+    const showButton = wrapper.find(selectors.spaceMembers).findAll('oc-button-stub').at(-1)
+    expect(showButton.attributes('arialabel')).toBeUndefined()
+    const description = wrapper.find(`[id="${showButton.attributes('aria-describedby')}"]`)
+    expect(description.text()).toBe('This space has 1 member.')
+  })
   it('renders the size if the space is the current folder', () => {
     const { wrapper } = createWrapper()
     expect(wrapper.findAll('dt').map((dt) => dt.text())).toContain('Size')
diff --git a/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/__snapshots__/SpaceDetails.spec.ts.snap b/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/__snapshots__/SpaceDetails.spec.ts.snap
index b0eaa78d674..d4a3559750f 100644
--- a/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/__snapshots__/SpaceDetails.spec.ts.snap
+++ b/packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/__snapshots__/SpaceDetails.spec.ts.snap
@@ -10,8 +10,8 @@ exports[`Details SideBar Panel > displays the details side panel 1`] = `
   <div class="flex items-center oc-space-details-sidebar-members mb-2 text-sm gap-2">
     <oc-button-stub arialabel="Open member list in share panel" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="medium" submit="button" type="button" nohover="true"></oc-button-stub>
     <!--v-if-->
-    <p>This space has 1 member.</p>
-    <oc-button-stub arialabel="Open share panel" appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="small" submit="button" type="button" nohover="true"></oc-button-stub>
+    <p id="v-0">This space has 1 member.</p>
+    <oc-button-stub appearance="raw" colorrole="secondary" disabled="false" gapsize="medium" justifycontent="center" showspinner="false" size="small" submit="button" type="button" nohover="true" aria-describedby="v-0"></oc-button-stub>
   </div>
   <dl class="details-list" aria-label="Overview of the information about the selected space">
     <dt>Last activity</dt>
diff --git a/tests/e2e/support/objects/app-files/resource/search.ts b/tests/e2e/support/objects/app-files/resource/search.ts
index 8a6b64fc442..88509c6df7b 100644
--- a/tests/e2e/support/objects/app-files/resource/search.ts
+++ b/tests/e2e/support/objects/app-files/resource/search.ts
@@ -10,7 +10,7 @@ const globalSearchDirFilterDropdown =
 const globalSearchBarFilterAllFiles = '//*[@data-test-id="all-files"]'
 const globalSearchBarFilterCurrentFolder = '//*[@data-test-id="current-folder"]'
 const searchList =
-  '//div[@id="files-global-search-options"]//li[contains(@class,"preview")]//span[contains(@class,"oc-resource-name")]'
+  '//div[@id="files-global-search-options"]//div[@role="gridcell"][contains(@class,"preview")]//span[contains(@class,"oc-resource-name")]'
 const globalSearchOptions = '#files-global-search-options'
 const loadingSpinner = '#files-global-search-options .loading'
 const searchListItem = '#files-global-search span[data-test-resource-name="%s"]'
diff --git a/tests/e2e/support/objects/app-files/search/actions.ts b/tests/e2e/support/objects/app-files/search/actions.ts
index 3f8e447e517..36985b34099 100644
--- a/tests/e2e/support/objects/app-files/search/actions.ts
+++ b/tests/e2e/support/objects/app-files/search/actions.ts
@@ -19,7 +19,7 @@ const locationSearchPanelSelector = '//*[@data-testid="search-bar-filter"]'
 const searchResultItemSelector =
   '//*[@data-test-resource-name="%s"]/ancestor::*[self::tr or contains(@class, "oc-tile-card")][1]'
 const searchPreviewItemSelector =
-  '//div[@id="files-global-search-options"]//*[@data-test-resource-name="%s"]/ancestor::li[contains(@class, "preview")]'
+  '//div[@id="files-global-search-options"]//*[@data-test-resource-name="%s"]/ancestor::div[@role="gridcell"][contains(@class, "preview")]'
 const foundContentSelector = '.search-highlights-content'
 const foundContentMatchSelector = '.search-highlights-content mark'
 const matchingTagSelector = '.search-highlights-tag'

From e934dd2bb8537a24ff0513c86b8ae9c60625b5a4 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Wed, 21 Oct 2026 16:03:54 +0200
Subject: [PATCH 02/16] fix: name the folder README and app description viewers

---
 packages/web-app-app-store/src/views/AppDetails.vue      | 1 +
 .../tests/unit/views/AppDetails.spec.ts                  | 9 ++++++++-
 .../src/components/FilesList/ListHeader.vue              | 6 +++++-
 .../tests/unit/components/FilesList/ListHeader.spec.ts   | 7 +++++++
 4 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-app-store/src/views/AppDetails.vue b/packages/web-app-app-store/src/views/AppDetails.vue
index a9076ef566b..6ae9aae02aa 100644
--- a/packages/web-app-app-store/src/views/AppDetails.vue
+++ b/packages/web-app-app-store/src/views/AppDetails.vue
@@ -31,6 +31,7 @@
                 v-if="app.description"
                 class="max-w-[70ch]"
                 :content="app.description"
+                :aria-label="$gettext('App description')"
               />
               <p v-else class="my-0 max-w-[70ch]" v-text="app.subtitle" />
             </section>
diff --git a/packages/web-app-app-store/tests/unit/views/AppDetails.spec.ts b/packages/web-app-app-store/tests/unit/views/AppDetails.spec.ts
index 465d41e9416..508309f6065 100644
--- a/packages/web-app-app-store/tests/unit/views/AppDetails.spec.ts
+++ b/packages/web-app-app-store/tests/unit/views/AppDetails.spec.ts
@@ -18,7 +18,8 @@ import { APPID } from '../../../src/appid'
 vi.mock('@opencloud-eu/web-pkg', async (importOriginal) => ({
   ...(await importOriginal<any>()),
   useRouteParam: vi.fn(),
-  useRouter: vi.fn()
+  useRouter: vi.fn(),
+  TextEditorViewer: { name: 'TextEditorViewer', template: '<div />' }
 }))
 
 const app: App = {
@@ -64,6 +65,12 @@ describe('AppDetails', () => {
     const { wrapper } = getWrapper(app)
     expect(wrapper.find(selectors.description).text()).toContain('An example app')
   })
+  it('gives the description viewer an accessible name', () => {
+    const { wrapper } = getWrapper({ ...app, description: '# Example' })
+    expect(wrapper.findComponent({ name: 'TextEditorViewer' }).attributes('aria-label')).toBe(
+      'App description'
+    )
+  })
   describe('back link', () => {
     it('returns to the previous list including its filters', () => {
       const { wrapper, mocks } = getWrapper(app, {
diff --git a/packages/web-app-files/src/components/FilesList/ListHeader.vue b/packages/web-app-files/src/components/FilesList/ListHeader.vue
index d1e5934f734..3ce488e129d 100644
--- a/packages/web-app-files/src/components/FilesList/ListHeader.vue
+++ b/packages/web-app-files/src/components/FilesList/ListHeader.vue
@@ -15,7 +15,11 @@
         'mask-linear-[180deg,black,80%,transparent]': markdownCollapsed && showMarkdownCollapse
       }"
     >
-      <TextEditorViewer class="w-full" :content="markdownContent" />
+      <TextEditorViewer
+        class="w-full"
+        :content="markdownContent"
+        :aria-label="$gettext('README')"
+      />
     </div>
     <div v-if="showMarkdownCollapse && markdownContent" class="markdown-collapse text-center mt-2">
       <oc-button appearance="raw" no-hover @click="toggleMarkdownCollapsed">
diff --git a/packages/web-app-files/tests/unit/components/FilesList/ListHeader.spec.ts b/packages/web-app-files/tests/unit/components/FilesList/ListHeader.spec.ts
index 50ea2f713b2..cbd7b50d436 100644
--- a/packages/web-app-files/tests/unit/components/FilesList/ListHeader.spec.ts
+++ b/packages/web-app-files/tests/unit/components/FilesList/ListHeader.spec.ts
@@ -20,6 +20,13 @@ describe('ListHeader', () => {
     await flushPromises()
     expect(wrapper.find('.markdown-container').exists()).toBeTruthy()
   })
+  it('gives the README viewer an accessible name', async () => {
+    const wrapper = getWrapper()
+    await flushPromises()
+    expect(wrapper.findComponent({ name: 'TextEditorViewer' }).attributes('aria-label')).toBe(
+      'README'
+    )
+  })
 })
 
 function getWrapper() {

From 614785b0844cdbe7597d944e5513ee8317e58468 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Wed, 21 Oct 2026 16:10:49 +0200
Subject: [PATCH 03/16] fix: drop the extra tab stop around the files view

---
 packages/web-app-files/src/App.vue            |  2 +-
 packages/web-app-files/tests/unit/App.spec.ts | 33 +++++++++++++++++++
 2 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 packages/web-app-files/tests/unit/App.spec.ts

diff --git a/packages/web-app-files/src/App.vue b/packages/web-app-files/src/App.vue
index c46e8fad704..c325aa371c2 100644
--- a/packages/web-app-files/src/App.vue
+++ b/packages/web-app-files/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <main id="files" class="flex h-full max-h-full relative">
-    <router-view tabindex="0" class="files-wrapper flex-1 h-full flex-nowrap sm:flex-wrap" />
+    <router-view class="files-wrapper flex-1 h-full flex-nowrap sm:flex-wrap" />
   </main>
 </template>
 <script setup lang="ts">
diff --git a/packages/web-app-files/tests/unit/App.spec.ts b/packages/web-app-files/tests/unit/App.spec.ts
new file mode 100644
index 00000000000..15f9feb1057
--- /dev/null
+++ b/packages/web-app-files/tests/unit/App.spec.ts
@@ -0,0 +1,33 @@
+import App from '../../src/App.vue'
+import {
+  defaultComponentMocks,
+  defaultPlugins,
+  RouteLocation,
+  shallowMount
+} from '@opencloud-eu/web-test-helpers'
+import { mock } from 'vitest-mock-extended'
+
+describe('Files App', () => {
+  it('does not add the routed view wrapper to the tab order', () => {
+    const { wrapper } = getWrapper()
+    const filesWrapper = wrapper.find('.files-wrapper')
+    expect(filesWrapper.exists()).toBeTruthy()
+    expect(filesWrapper.attributes('tabindex')).toBeUndefined()
+  })
+})
+
+function getWrapper() {
+  const mocks = defaultComponentMocks({
+    currentRoute: mock<RouteLocation>({ path: '/files/spaces/personal' })
+  })
+
+  return {
+    wrapper: shallowMount(App, {
+      global: {
+        plugins: [...defaultPlugins()],
+        mocks,
+        provide: mocks
+      }
+    })
+  }
+}

From 222af53e5254d28d62da97ceb1863669e93523b1 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Wed, 21 Oct 2026 16:23:25 +0200
Subject: [PATCH 04/16] revert: drop the search combobox changes

---
 .../OcSearchBar/OcSearchBar.spec.ts           |  14 ---
 .../components/OcSearchBar/OcSearchBar.vue    |  11 +-
 .../web-app-search/src/portals/SearchBar.vue  | 118 ++++--------------
 .../tests/unit/portals/SearchBar.spec.ts      |  91 +-------------
 .../objects/app-files/resource/search.ts      |   2 +-
 .../objects/app-files/search/actions.ts       |   2 +-
 6 files changed, 31 insertions(+), 207 deletions(-)

diff --git a/packages/design-system/src/components/OcSearchBar/OcSearchBar.spec.ts b/packages/design-system/src/components/OcSearchBar/OcSearchBar.spec.ts
index 9f16a83e54d..6149720c6a6 100644
--- a/packages/design-system/src/components/OcSearchBar/OcSearchBar.spec.ts
+++ b/packages/design-system/src/components/OcSearchBar/OcSearchBar.spec.ts
@@ -138,20 +138,6 @@ describe('OcSearchBar', () => {
       const searchInput = wrapper.find(selectors.searchInput)
       expect(searchInput.attributes('placeholder')).toBe('Start typing..')
     })
-    it('should pass the input attributes to the input', () => {
-      const wrapper = getWrapper({
-        inputAttributes: {
-          role: 'combobox',
-          'aria-expanded': true,
-          'aria-activedescendant': 'option-1'
-        }
-      })
-      const searchInput = wrapper.find(selectors.searchInput)
-      expect(searchInput.attributes('role')).toBe('combobox')
-      expect(searchInput.attributes('aria-expanded')).toBe('true')
-      expect(searchInput.attributes('aria-activedescendant')).toBe('option-1')
-      expect(searchInput.attributes('aria-label')).toBe('Test search label')
-    })
     it('should emit input event on typing', async () => {
       const wrapper = getWrapper()
       const searchInput = wrapper.find(selectors.searchInput)
diff --git a/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue b/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
index e85cc2eeb77..dd9a151c135 100644
--- a/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
+++ b/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
@@ -6,7 +6,6 @@
   >
     <div class="flex-1 relative">
       <input
-        v-bind="inputAttributes"
         :id="inputId"
         v-model="model"
         :class="inputClass"
@@ -59,7 +58,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, InputHTMLAttributes, unref, useId, watch } from 'vue'
+import { computed, unref, useId, watch } from 'vue'
 import { useGettext } from 'vue3-gettext'
 import OcButton, { Props as OcButtonProps } from '../OcButton/OcButton.vue'
 import OcIcon from '../OcIcon/OcIcon.vue'
@@ -142,11 +141,6 @@ export interface Props {
    * @docs The handler for the cancel button.
    */
   cancelHandler?: () => void
-  /**
-   * @docs Additional attributes for the input element, e.g. `role`, `aria-expanded` and `aria-activedescendant` to make it a combobox.
-   * @default {}
-   */
-  inputAttributes?: InputHTMLAttributes
 }
 
 export interface Emits {
@@ -189,8 +183,7 @@ const {
   cancelButtonAppearance = 'raw',
   cancelButtonColorRole = 'secondary',
   isRounded = true,
-  cancelHandler = () => {},
-  inputAttributes = {}
+  cancelHandler = () => {}
 } = defineProps<Props>()
 
 const model = defineModel<string>({ default: '' })
diff --git a/packages/web-app-search/src/portals/SearchBar.vue b/packages/web-app-search/src/portals/SearchBar.vue
index 797451729dc..50b99769fdd 100644
--- a/packages/web-app-search/src/portals/SearchBar.vue
+++ b/packages/web-app-search/src/portals/SearchBar.vue
@@ -19,7 +19,6 @@
       cancel-button-appearance="raw-inverse"
       cancel-button-color-role="chrome"
       :cancel-handler="cancelSearch"
-      :input-attributes="searchInputAttributes"
       small
       class="mx-auto sm:mx-0 bg-role-chrome sm:bg-transparent w-[95vw] sm:w-2xs md:w-lg h-12 absolute inset-0 sm:relative invisible sm:visible z-90 sm:z-auto"
       @advanced-search="onKeyUpEnter"
@@ -66,8 +65,6 @@
       close-on-click
       enforce-drop-on-mobile
       :is-menu="false"
-      @show-drop="isPreviewOpen = true"
-      @hide-drop="isPreviewOpen = false"
     >
       <oc-list class="oc-list-divider p-2">
         <li
@@ -82,18 +79,12 @@
         </li>
         <template v-else>
           <li v-for="provider in displayProviders" :key="provider.id" class="provider">
-            <div role="grid" :aria-labelledby="getProviderNameId(provider)">
-              <div
-                role="row"
-                class="truncate flex justify-between text-role-on-surface-variant provider-details py-1 px-2 mb-1 text-xs"
+            <oc-list>
+              <li
+                class="truncate flex justify-between text-role-on-surface-variant provider-details py-1 px-2 text-xs"
               >
-                <span
-                  :id="getProviderNameId(provider)"
-                  role="gridcell"
-                  class="display-name"
-                  v-text="$gettext(provider.displayName)"
-                />
-                <span v-if="!!provider.listSearch" :id="getMoreResultsId(provider)" role="gridcell">
+                <span class="display-name" v-text="$gettext(provider.displayName)" />
+                <span v-if="!!provider.listSearch">
                   <router-link
                     class="more-results p-0"
                     :to="getSearchResultLocation(provider.id)"
@@ -104,35 +95,27 @@
                     <span>{{ getMoreResultsDetailsTextForProvider(provider) }}</span>
                   </router-link>
                 </span>
-              </div>
-              <div
-                v-for="(providerSearchResultValue, index) in getSearchResultForProvider(provider)
-                  .values"
+              </li>
+              <li
+                v-for="providerSearchResultValue in getSearchResultForProvider(provider).values"
                 :key="providerSearchResultValue.id"
-                role="row"
-                class="mb-1 last:mb-0"
+                :data-search-id="providerSearchResultValue.id"
+                :class="{
+                  'active bg-role-secondary-container': isPreviewElementActive(
+                    providerSearchResultValue.id
+                  )
+                }"
+                class="preview flex items-center py-1 px-2 text-sm min-h-10 [&.disabled]:opacity-70 [&.disabled]:grayscale-60 [&.disabled]:pointer-events-none hover:bg-role-surface-container"
               >
-                <div
-                  :id="getPreviewId(provider, index)"
-                  role="gridcell"
-                  :data-search-id="providerSearchResultValue.id"
-                  :class="{
-                    'active bg-role-secondary-container': isPreviewElementActive(
-                      providerSearchResultValue.id
-                    )
-                  }"
-                  class="preview flex items-center py-1 px-2 text-sm min-h-10 [&.disabled]:opacity-70 [&.disabled]:grayscale-60 [&.disabled]:pointer-events-none hover:bg-role-surface-container"
-                >
-                  <component
-                    :is="provider.previewSearch.component"
-                    class="preview-component"
-                    :provider="provider"
-                    :search-result="providerSearchResultValue"
-                    :term="term"
-                  />
-                </div>
-              </div>
-            </div>
+                <component
+                  :is="provider.previewSearch.component"
+                  class="preview-component"
+                  :provider="provider"
+                  :search-result="providerSearchResultValue"
+                  :term="term"
+                />
+              </li>
+            </oc-list>
           </li>
         </template>
       </oc-list>
@@ -169,8 +152,7 @@ import {
   useTemplateRef,
   watch,
   nextTick,
-  onMounted,
-  useId
+  onMounted
 } from 'vue'
 import { SearchLocationFilterConstants } from '@opencloud-eu/web-pkg'
 import { SearchBarFilter } from '@opencloud-eu/web-pkg'
@@ -200,8 +182,6 @@ const locationFilterId = ref(SearchLocationFilterConstants.allFiles)
 const optionsDropRef = useTemplateRef<ComponentPublicInstance<typeof OcDrop>>('optionsDropRef')
 const searchBarRef = useTemplateRef<HTMLElement>('searchBar')
 const activePreviewIndex = ref<number | null>(null)
-const isPreviewOpen = ref(false)
-const previewIdPrefix = `files-global-search-${useId()}`
 const term = ref('')
 const restoreSearchFromRoute = ref(false)
 const searchResults = ref<
@@ -445,7 +425,7 @@ onBeforeUnmount(() => {
 
 function getFocusableElements() {
   const elements = [document.querySelector('.more-results')]
-  elements.push(...Array.from(document.querySelectorAll('.preview[role="gridcell"]')))
+  elements.push(...Array.from(document.querySelectorAll('li.preview')))
   return elements as HTMLElement[]
 }
 
@@ -541,52 +521,6 @@ function getMoreResultsDetailsTextForProvider(provider: SearchProvider) {
   )
 }
 
-function getProviderNameId(provider: SearchProvider) {
-  return `${previewIdPrefix}-${provider.id}-name`
-}
-
-function getMoreResultsId(provider: SearchProvider) {
-  return `${previewIdPrefix}-${provider.id}-more-results`
-}
-
-function getPreviewId(provider: SearchProvider, index: number) {
-  return `${previewIdPrefix}-${provider.id}-${index}`
-}
-
-// ids of the cells the arrow keys move through, in the same order as getFocusableElements()
-const previewCellIds = computed(() => {
-  const moreResultsProvider = unref(displayProviders).find((provider) => !!provider.listSearch)
-  return [
-    moreResultsProvider ? getMoreResultsId(moreResultsProvider) : undefined,
-    ...unref(displayProviders).flatMap((provider) =>
-      getSearchResultForProvider(provider).values.map((_, index) => getPreviewId(provider, index))
-    )
-  ]
-})
-
-const activeDescendantId = computed(() => {
-  if (!unref(isPreviewOpen) || unref(loading) || unref(activePreviewIndex) === null) {
-    return undefined
-  }
-  return unref(previewCellIds)[unref(activePreviewIndex)]
-})
-
-// the input is a combobox whose popup is the preview drop, the arrow keys move a virtual focus
-// through the preview cells which aria-activedescendant exposes to assistive technologies
-const searchInputAttributes = computed(() => {
-  if (!unref(showDrop)) {
-    return {}
-  }
-  return {
-    role: 'combobox',
-    'aria-autocomplete': 'list' as const,
-    'aria-haspopup': 'grid' as const,
-    'aria-expanded': unref(isPreviewOpen),
-    'aria-controls': 'files-global-search-options',
-    'aria-activedescendant': unref(activeDescendantId)
-  }
-})
-
 function isPreviewElementActive(searchId: string) {
   const previewElements = getFocusableElements()
   const activeEl = previewElements?.[activePreviewIndex.value] as HTMLElement
diff --git a/packages/web-app-search/tests/unit/portals/SearchBar.spec.ts b/packages/web-app-search/tests/unit/portals/SearchBar.spec.ts
index 6a06c750c3e..536bfffd785 100644
--- a/packages/web-app-search/tests/unit/portals/SearchBar.spec.ts
+++ b/packages/web-app-search/tests/unit/portals/SearchBar.spec.ts
@@ -296,93 +296,6 @@ describe('Search Bar portal component', () => {
       expect.stringContaining('folder-id')
     )
   })
-  describe('combobox semantics', () => {
-    function emitPreviewDropEvent(
-      wrapper: ReturnType<typeof getMountedWrapper>['wrapper'],
-      event: 'showDrop' | 'hideDrop'
-    ) {
-      wrapper.findComponent({ ref: 'optionsDropRef' }).vm.$emit(event)
-      return nextTick()
-    }
-
-    test('marks the input as a combobox that controls the preview', async () => {
-      const { wrapper } = getMountedWrapper()
-      const input = wrapper.find(selectors.searchInput)
-      expect(input.attributes('role')).toBe('combobox')
-      expect(input.attributes('aria-haspopup')).toBe('grid')
-      expect(input.attributes('aria-autocomplete')).toBe('list')
-      expect(input.attributes('aria-controls')).toBe('files-global-search-options')
-      expect(input.attributes('aria-expanded')).toBe('false')
-
-      await emitPreviewDropEvent(wrapper, 'showDrop')
-      expect(input.attributes('aria-expanded')).toBe('true')
-
-      await emitPreviewDropEvent(wrapper, 'hideDrop')
-      expect(input.attributes('aria-expanded')).toBe('false')
-    })
-    test('renders the preview results as cells of a grid per provider', async () => {
-      const { wrapper } = getMountedWrapper()
-      wrapper.find(selectors.searchInput).setValue('albert')
-      await flushPromises()
-
-      const grids = wrapper.findAll('[role="grid"]')
-      expect(grids).toHaveLength(2)
-      grids.forEach((grid) => {
-        const rows = grid.findAll(':scope > [role="row"]')
-        expect(rows).toHaveLength(3)
-        rows.forEach((row) => {
-          expect(row.findAll(':scope > [role="gridcell"]').length).toBeGreaterThan(0)
-        })
-      })
-
-      const ids = wrapper.findAll('[role="gridcell"]').map((cell) => cell.attributes('id'))
-      expect(ids.every((id) => !!id)).toBe(true)
-      expect(new Set(ids).size).toBe(ids.length)
-      expect(wrapper.find('.more-results').element.closest('[role="gridcell"]')).not.toBeNull()
-      wrapper.findAll('.preview').forEach((preview) => {
-        expect(preview.attributes('role')).toBe('gridcell')
-      })
-    })
-    test('points aria-activedescendant to the preview cell highlighted with the arrow keys', async () => {
-      const { wrapper } = getMountedWrapper({ attachTo: document.body })
-      const input = wrapper.find(selectors.searchInput)
-      input.setValue('albert')
-      await flushPromises()
-      await emitPreviewDropEvent(wrapper, 'showDrop')
-      expect(input.attributes('aria-activedescendant')).toBeUndefined()
-
-      const moreResultsCellId = wrapper
-        .find('.more-results')
-        .element.closest('[role="gridcell"]').id
-      const previews = wrapper.findAll('.preview')
-
-      await input.trigger('keyup.down')
-      expect(input.attributes('aria-activedescendant')).toBe(moreResultsCellId)
-
-      await input.trigger('keyup.down')
-      expect(input.attributes('aria-activedescendant')).toBe(previews.at(0).attributes('id'))
-      expect(previews.at(0).classes()).toContain('active')
-
-      await input.trigger('keyup.down')
-      expect(input.attributes('aria-activedescendant')).toBe(previews.at(1).attributes('id'))
-      expect(previews.at(1).classes()).toContain('active')
-
-      await input.trigger('keyup.up')
-      expect(input.attributes('aria-activedescendant')).toBe(previews.at(0).attributes('id'))
-    })
-    test('removes aria-activedescendant when the preview gets hidden', async () => {
-      const { wrapper } = getMountedWrapper({ attachTo: document.body })
-      const input = wrapper.find(selectors.searchInput)
-      input.setValue('albert')
-      await flushPromises()
-      await emitPreviewDropEvent(wrapper, 'showDrop')
-      await input.trigger('keyup.down')
-      expect(input.attributes('aria-activedescendant')).toBeDefined()
-
-      await emitPreviewDropEvent(wrapper, 'hideDrop')
-      expect(input.attributes('aria-activedescendant')).toBeUndefined()
-    })
-  })
   describe('search location across views', () => {
     test('discards an in-flight preview from the previous scope', async () => {
       const { wrapper } = getMountedWrapper({
@@ -738,8 +651,7 @@ function getMountedWrapper({
   route = 'files-spaces-generic',
   store = {},
   term = '',
-  query = {} as Record<string, string>,
-  attachTo = undefined as HTMLElement | undefined
+  query = {} as Record<string, string>
 } = {}) {
   vi.mocked(useAvailableProviders).mockReturnValue(ref(providers))
 
@@ -761,7 +673,6 @@ function getMountedWrapper({
   }
 
   const wrapper = mount(SearchBar, {
-    attachTo,
     global: {
       plugins: [
         ...defaultPlugins({
diff --git a/tests/e2e/support/objects/app-files/resource/search.ts b/tests/e2e/support/objects/app-files/resource/search.ts
index 88509c6df7b..8a6b64fc442 100644
--- a/tests/e2e/support/objects/app-files/resource/search.ts
+++ b/tests/e2e/support/objects/app-files/resource/search.ts
@@ -10,7 +10,7 @@ const globalSearchDirFilterDropdown =
 const globalSearchBarFilterAllFiles = '//*[@data-test-id="all-files"]'
 const globalSearchBarFilterCurrentFolder = '//*[@data-test-id="current-folder"]'
 const searchList =
-  '//div[@id="files-global-search-options"]//div[@role="gridcell"][contains(@class,"preview")]//span[contains(@class,"oc-resource-name")]'
+  '//div[@id="files-global-search-options"]//li[contains(@class,"preview")]//span[contains(@class,"oc-resource-name")]'
 const globalSearchOptions = '#files-global-search-options'
 const loadingSpinner = '#files-global-search-options .loading'
 const searchListItem = '#files-global-search span[data-test-resource-name="%s"]'
diff --git a/tests/e2e/support/objects/app-files/search/actions.ts b/tests/e2e/support/objects/app-files/search/actions.ts
index 36985b34099..3f8e447e517 100644
--- a/tests/e2e/support/objects/app-files/search/actions.ts
+++ b/tests/e2e/support/objects/app-files/search/actions.ts
@@ -19,7 +19,7 @@ const locationSearchPanelSelector = '//*[@data-testid="search-bar-filter"]'
 const searchResultItemSelector =
   '//*[@data-test-resource-name="%s"]/ancestor::*[self::tr or contains(@class, "oc-tile-card")][1]'
 const searchPreviewItemSelector =
-  '//div[@id="files-global-search-options"]//*[@data-test-resource-name="%s"]/ancestor::div[@role="gridcell"][contains(@class, "preview")]'
+  '//div[@id="files-global-search-options"]//*[@data-test-resource-name="%s"]/ancestor::li[contains(@class, "preview")]'
 const foundContentSelector = '.search-highlights-content'
 const foundContentMatchSelector = '.search-highlights-content mark'
 const matchingTagSelector = '.search-highlights-tag'

From 937716791896b2f233db5e16fca6e2d35f3a689e Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Wed, 21 Oct 2026 19:12:39 +0200
Subject: [PATCH 05/16] fix: name the share invite input after its visible
 label

---
 .../InviteCollaborator/InviteCollaboratorForm.vue   |  2 +-
 .../InviteCollaboratorForm.spec.ts                  | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue
index 19cf0e34c8d..7d4bb4025f1 100644
--- a/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue
+++ b/packages/web-app-files/src/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.vue
@@ -32,7 +32,7 @@
           ({ open, search }: DropDownShouldOpenOptions) =>
             open && search.trim().length >= minSearchLength && !searchInProgress
         "
-        label=""
+        :label="label"
         :label-hidden="true"
         @search:input="onSearch"
         @update:model-value="resetFocusOnInvite"
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.spec.ts
index da3b564c5c7..9c910c0c52f 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.spec.ts
+++ b/packages/web-app-files/tests/unit/components/SideBar/Shares/Collaborators/InviteCollaborator/InviteCollaboratorForm.spec.ts
@@ -53,6 +53,14 @@ describe('InviteCollaboratorForm', () => {
     it.todo('renders an expiration datepicker component')
     it.todo('renders an hidden-announcer')
   })
+  describe('invite input', () => {
+    it('is named after the visible label', () => {
+      const { wrapper } = getWrapper({ shallow: false, props: { label: 'Share with people' } })
+      const combobox = wrapper.find('#new-collaborators-form .vs__dropdown-toggle')
+      expect(combobox.attributes('aria-label')).toContain('Share with people')
+      expect(wrapper.findAll('label').length).toBe(1)
+    })
+  })
   describe('share button', () => {
     it('is present', () => {
       const { wrapper } = getWrapper()
@@ -492,7 +500,8 @@ function getWrapper({
   openXchange = false,
   openXchangeContacts = [],
   canInviteGuests = true,
-  shallow = true
+  shallow = true,
+  props = {}
 }: {
   storageId?: string
   resource?: Resource
@@ -506,6 +515,7 @@ function getWrapper({
   openXchangeContacts?: Contact[]
   canInviteGuests?: boolean
   shallow?: boolean
+  props?: Record<string, unknown>
 } = {}) {
   const mocks = defaultComponentMocks({
     currentRoute: mock<RouteLocation>({ params: { storageId } })
@@ -523,6 +533,7 @@ function getWrapper({
     mocks,
     wrapper: mount(InviteCollaboratorForm, {
       shallow,
+      props,
       global: {
         plugins: [
           ...defaultPlugins({

From d3b37f171765aed80f7f36ed94a406f5df2b2084 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Wed, 21 Oct 2026 19:15:27 +0200
Subject: [PATCH 06/16] fix: expose required fields to assistive technologies

---
 .../src/components/OcColorInput/OcColorInput.spec.ts  | 11 +++++++++++
 .../src/components/OcColorInput/OcColorInput.vue      |  3 +++
 .../src/components/OcFileInput/OcFileInput.spec.ts    | 11 +++++++++++
 .../src/components/OcFileInput/OcFileInput.vue        |  3 +++
 .../src/components/OcSelect/OcSelect.spec.ts          | 10 ++++++++++
 .../src/components/OcSelect/OcSelect.vue              |  1 +
 .../src/components/OcTextInput/OcTextInput.spec.ts    |  8 ++++++++
 .../src/components/OcTextInput/OcTextInput.vue        |  3 +++
 .../web-pkg/src/components/CreateShortcutModal.vue    |  1 +
 .../web-pkg/src/components/ShortcutTargetInput.vue    |  1 +
 .../tests/unit/components/CreateShortcutModal.spec.ts |  5 +++++
 .../tests/unit/components/ShortcutTargetInput.spec.ts |  1 +
 12 files changed, 58 insertions(+)

diff --git a/packages/design-system/src/components/OcColorInput/OcColorInput.spec.ts b/packages/design-system/src/components/OcColorInput/OcColorInput.spec.ts
index a3729e90670..cbfc0ce6b10 100644
--- a/packages/design-system/src/components/OcColorInput/OcColorInput.spec.ts
+++ b/packages/design-system/src/components/OcColorInput/OcColorInput.spec.ts
@@ -29,6 +29,17 @@ describe('OcColorInput', () => {
     })
   })
 
+  describe('required mark', () => {
+    it('marks the input as required for assistive technologies', () => {
+      const wrapper = getWrapper({ requiredMark: true })
+      expect(wrapper.find('input').attributes('aria-required')).toBe('true')
+    })
+    it('does not mark the input as required without the mark', () => {
+      const wrapper = getWrapper()
+      expect(wrapper.find('input').attributes('aria-required')).toBeUndefined()
+    })
+  })
+
   describe('description message', () => {
     it('should be displayed below the input if given', () => {
       const wrapper = getWrapper({ descriptionMessage: 'description' })
diff --git a/packages/design-system/src/components/OcColorInput/OcColorInput.vue b/packages/design-system/src/components/OcColorInput/OcColorInput.vue
index 54b7e80507e..525d5977f33 100644
--- a/packages/design-system/src/components/OcColorInput/OcColorInput.vue
+++ b/packages/design-system/src/components/OcColorInput/OcColorInput.vue
@@ -175,6 +175,9 @@ const additionalAttributes = computed(() => {
   if (!!errorMessage || !!descriptionMessage) {
     additionalAttrs['aria-describedby'] = messageId.value
   }
+  if (requiredMark) {
+    additionalAttrs['aria-required'] = 'true'
+  }
   // note: we spread out the attrs we don't want to be present in the resulting object
   const { change, input, class: classes, ...attrs } = tmpAttrs
   return { ...attrs, ...additionalAttrs }
diff --git a/packages/design-system/src/components/OcFileInput/OcFileInput.spec.ts b/packages/design-system/src/components/OcFileInput/OcFileInput.spec.ts
index cfa18f3823c..dea73596c09 100644
--- a/packages/design-system/src/components/OcFileInput/OcFileInput.spec.ts
+++ b/packages/design-system/src/components/OcFileInput/OcFileInput.spec.ts
@@ -31,6 +31,17 @@ describe('OcFileInput', () => {
     })
   })
 
+  describe('required mark', () => {
+    it('marks the input as required for assistive technologies', () => {
+      const wrapper = getWrapper({ requiredMark: true })
+      expect(wrapper.find('input').attributes('aria-required')).toBe('true')
+    })
+    it('does not mark the input as required without the mark', () => {
+      const wrapper = getWrapper()
+      expect(wrapper.find('input').attributes('aria-required')).toBeUndefined()
+    })
+  })
+
   describe('description message', () => {
     it('should be displayed below the input if given', () => {
       const wrapper = getWrapper({ descriptionMessage: 'description' })
diff --git a/packages/design-system/src/components/OcFileInput/OcFileInput.vue b/packages/design-system/src/components/OcFileInput/OcFileInput.vue
index c75d9cad40a..d21e99fb3dc 100644
--- a/packages/design-system/src/components/OcFileInput/OcFileInput.vue
+++ b/packages/design-system/src/components/OcFileInput/OcFileInput.vue
@@ -235,6 +235,9 @@ const additionalAttributes = computed(() => {
   if (!!errorMessage || !!descriptionMessage) {
     additionalAttrs['aria-describedby'] = unref(messageId)
   }
+  if (requiredMark) {
+    additionalAttrs['aria-required'] = 'true'
+  }
 
   // note: we spread out the attrs we don't want to be present in the resulting object
   const { change, input, focus, class: classes, ...attrs } = tmpAttrs
diff --git a/packages/design-system/src/components/OcSelect/OcSelect.spec.ts b/packages/design-system/src/components/OcSelect/OcSelect.spec.ts
index e4ea96f4a2e..5ecedddfb13 100644
--- a/packages/design-system/src/components/OcSelect/OcSelect.spec.ts
+++ b/packages/design-system/src/components/OcSelect/OcSelect.spec.ts
@@ -100,6 +100,16 @@ describe('OcSelect', () => {
       expect(wrapper.find(selectors.deselectLockIcon).exists()).toBeTruthy()
     })
   })
+  describe('required mark', () => {
+    it('marks the search input as required for assistive technologies', () => {
+      const wrapper = getWrapper({ requiredMark: true })
+      expect(wrapper.find(selectors.searchInput).attributes('aria-required')).toBe('true')
+    })
+    it('does not mark the search input as required without the mark', () => {
+      const wrapper = getWrapper()
+      expect(wrapper.find(selectors.searchInput).attributes('aria-required')).toBeUndefined()
+    })
+  })
   describe('message', () => {
     it('displays an error message', () => {
       const wrapper = getWrapper({ errorMessage: 'foo' })
diff --git a/packages/design-system/src/components/OcSelect/OcSelect.vue b/packages/design-system/src/components/OcSelect/OcSelect.vue
index e241f669148..c22baed7d55 100644
--- a/packages/design-system/src/components/OcSelect/OcSelect.vue
+++ b/packages/design-system/src/components/OcSelect/OcSelect.vue
@@ -45,6 +45,7 @@
         <input
           class="vs__search"
           v-bind="attributes"
+          :aria-required="requiredMark ? 'true' : undefined"
           @input="emit('search:input', ($event.target as HTMLInputElement).value)"
           v-on="events"
         />
diff --git a/packages/design-system/src/components/OcTextInput/OcTextInput.spec.ts b/packages/design-system/src/components/OcTextInput/OcTextInput.spec.ts
index 178bd088734..8de98cd697e 100644
--- a/packages/design-system/src/components/OcTextInput/OcTextInput.spec.ts
+++ b/packages/design-system/src/components/OcTextInput/OcTextInput.spec.ts
@@ -359,5 +359,13 @@ describe('OcTextInput', () => {
       const wrapper = getShallowWrapper({ requiredMark: true })
       expect(wrapper.find('label span').text()).toContain('*')
     })
+    it('marks the input as required for assistive technologies', () => {
+      const wrapper = getShallowWrapper({ requiredMark: true })
+      expect(wrapper.find('input').attributes('aria-required')).toBe('true')
+    })
+    it('does not mark the input as required without the mark', () => {
+      const wrapper = getShallowWrapper()
+      expect(wrapper.find('input').attributes('aria-required')).toBeUndefined()
+    })
   })
 })
diff --git a/packages/design-system/src/components/OcTextInput/OcTextInput.vue b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
index 6b142b7fbfc..fc4f3a3927b 100644
--- a/packages/design-system/src/components/OcTextInput/OcTextInput.vue
+++ b/packages/design-system/src/components/OcTextInput/OcTextInput.vue
@@ -273,6 +273,9 @@ const additionalAttributes = computed(() => {
   if (defaultValue) {
     additionalAttrs['placeholder'] = defaultValue
   }
+  if (requiredMark) {
+    additionalAttrs['aria-required'] = 'true'
+  }
   if (type === 'password') {
     additionalAttrs['password-policy'] = passwordPolicy
     additionalAttrs['generate-password-method'] = generatePasswordMethod
diff --git a/packages/web-pkg/src/components/CreateShortcutModal.vue b/packages/web-pkg/src/components/CreateShortcutModal.vue
index 9596324a472..3133523748c 100644
--- a/packages/web-pkg/src/components/CreateShortcutModal.vue
+++ b/packages/web-pkg/src/components/CreateShortcutModal.vue
@@ -9,6 +9,7 @@
       id="create-shortcut-modal-filename-input"
       :model-value="inputFilename"
       :label="$gettext('Shortcut name')"
+      aria-required="true"
       class="w-full"
       :error-message="inputFileNameErrorMessage"
       :fix-message-line="true"
diff --git a/packages/web-pkg/src/components/ShortcutTargetInput.vue b/packages/web-pkg/src/components/ShortcutTargetInput.vue
index 888465db9e7..0422de61f81 100644
--- a/packages/web-pkg/src/components/ShortcutTargetInput.vue
+++ b/packages/web-pkg/src/components/ShortcutTargetInput.vue
@@ -5,6 +5,7 @@
     role="combobox"
     :aria-controls="listboxId"
     aria-autocomplete="list"
+    aria-required="true"
     :aria-activedescendant="activeOptionId"
     :placeholder="'example.org'"
     :label="$gettext('Webpage or file')"
diff --git a/packages/web-pkg/tests/unit/components/CreateShortcutModal.spec.ts b/packages/web-pkg/tests/unit/components/CreateShortcutModal.spec.ts
index 4ed5f28d8a9..8394b3343b7 100644
--- a/packages/web-pkg/tests/unit/components/CreateShortcutModal.spec.ts
+++ b/packages/web-pkg/tests/unit/components/CreateShortcutModal.spec.ts
@@ -17,6 +17,11 @@ describe('CreateShortcutModal', () => {
     expect(wrapper.emitted('update:confirmDisabled')).toEqual([[true]])
   })
 
+  it('marks the name input as required for assistive technologies', () => {
+    const { filename } = getWrapper()
+    expect(filename.attributes('aria-required')).toBe('true')
+  })
+
   it.each([
     { url: '  example.org  ', name: 'example.org' },
     { url: 'https://example.org/path?q=value#fragment', name: 'example.org' },
diff --git a/packages/web-pkg/tests/unit/components/ShortcutTargetInput.spec.ts b/packages/web-pkg/tests/unit/components/ShortcutTargetInput.spec.ts
index 5888bf4eed8..082e1400b47 100644
--- a/packages/web-pkg/tests/unit/components/ShortcutTargetInput.spec.ts
+++ b/packages/web-pkg/tests/unit/components/ShortcutTargetInput.spec.ts
@@ -186,6 +186,7 @@ describe('ShortcutTargetInput', () => {
     const listbox = wrapper.get('[role="listbox"]')
     expect(textInput.attributes('role')).toBe('combobox')
     expect(textInput.attributes('aria-autocomplete')).toBe('list')
+    expect(textInput.attributes('aria-required')).toBe('true')
     expect(textInput.attributes('aria-controls')).toBe(listbox.attributes('id'))
     expect(drop.attributes('popup-type')).toBe('listbox')
     await input('report')

From 322e717e36e1c7ac384a46563af5adeb424587c0 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Wed, 21 Oct 2026 19:17:25 +0200
Subject: [PATCH 07/16] fix: expose password policy state to assistive
 technologies

---
 .../__snapshots__/OcTextInput.spec.ts.snap    | 12 ++---
 .../OcTextInputPassword.spec.ts               | 48 +++++++++++++++++++
 .../OcTextInputPassword.vue                   | 35 +++++++++++++-
 3 files changed, 87 insertions(+), 8 deletions(-)

diff --git a/packages/design-system/src/components/OcTextInput/__snapshots__/OcTextInput.spec.ts.snap b/packages/design-system/src/components/OcTextInput/__snapshots__/OcTextInput.spec.ts.snap
index 2df76313724..06873ed0018 100644
--- a/packages/design-system/src/components/OcTextInput/__snapshots__/OcTextInput.spec.ts.snap
+++ b/packages/design-system/src/components/OcTextInput/__snapshots__/OcTextInput.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`OcTextInput > password input field > password policy > displays error s
   </label>
   <div class="relative">
     <!--v-if-->
-    <div class="oc-text-input-password-wrapper flex flex-row border rounded-sm border-role-outline"><input id="oc-textinput-20" aria-invalid="false" class="oc-text-input oc-input h-9 grow-2 border-0 focus:border-0 focus:outline-0" type="password"> <button type="button" aria-label="Show password" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-sm min-h-3 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-text-input-show-password-toggle px-2">
+    <div class="oc-text-input-password-wrapper flex flex-row border rounded-sm border-role-outline"><input id="oc-textinput-20" aria-invalid="true" class="oc-text-input oc-input h-9 grow-2 border-0 focus:border-0 focus:outline-0" type="password" aria-describedby="v-1"> <button type="button" aria-label="Show password" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-sm min-h-3 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-text-input-show-password-toggle px-2">
         <!--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/eye-fill.svg" unique-ids="false" transform-source="(svg) => {
 			if (__props.accessibleLabel !== &quot;&quot;) {
@@ -32,7 +32,7 @@ exports[`OcTextInput > password input field > password policy > displays error s
       <!--v-if-->
     </div>
     <teleport-stub defer="" to="#v-0">
-      <div class="flex flex-row flex-wrap text-sm pt-2 gap-x-2">
+      <div id="v-1" class="flex flex-row flex-wrap text-sm pt-2 gap-x-2">
         <div class="flex items-center oc-text-input-password-policy-rule"><span class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-4 mr-1"><svg data-testid="inline-svg-stub" src="icons/close-circle-fill.svg" unique-ids="false" transform-source="(svg) => {
 			if (__props.accessibleLabel !== &quot;&quot;) {
 				const title = document.createElement(&quot;title&quot;);
@@ -41,7 +41,7 @@ exports[`OcTextInput > password input field > password policy > displays error s
 				svg.insertBefore(title, svg.firstChild);
 			};
 			return svg;
-		}" aria-hidden="true" focusable="false" style="fill: var(--oc-role-error);" class="size-4"></svg></span> <span class="oc-text-input-danger">8+ letters</span>
+		}" aria-hidden="true" focusable="false" style="fill: var(--oc-role-error);" class="size-4"></svg></span> <span class="oc-text-input-danger">8+ letters</span> <span class="sr-only">Requirement not met</span>
           <!--v-if-->
         </div>
       </div>
@@ -59,7 +59,7 @@ exports[`OcTextInput > password input field > password policy > displays success
   </label>
   <div class="relative">
     <!--v-if-->
-    <div class="oc-text-input-password-wrapper flex flex-row border rounded-sm border-role-outline"><input id="oc-textinput-21" aria-invalid="false" class="oc-text-input oc-input h-9 grow-2 border-0 focus:border-0 focus:outline-0" type="password"> <button type="button" aria-label="Show password" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-sm min-h-3 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-text-input-show-password-toggle px-2">
+    <div class="oc-text-input-password-wrapper flex flex-row border rounded-sm border-role-outline"><input id="oc-textinput-21" aria-invalid="false" class="oc-text-input oc-input h-9 grow-2 border-0 focus:border-0 focus:outline-0" type="password" aria-describedby="v-1"> <button type="button" aria-label="Show password" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-sm min-h-3 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-text-input-show-password-toggle px-2">
         <!--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/eye-fill.svg" unique-ids="false" transform-source="(svg) => {
 			if (__props.accessibleLabel !== &quot;&quot;) {
@@ -85,7 +85,7 @@ exports[`OcTextInput > password input field > password policy > displays success
       <!--v-if-->
     </div>
     <teleport-stub defer="" to="#v-0">
-      <div class="flex flex-row flex-wrap text-sm pt-2 gap-x-2">
+      <div id="v-1" class="flex flex-row flex-wrap text-sm pt-2 gap-x-2">
         <div class="flex items-center oc-text-input-password-policy-rule"><span class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-4 mr-1"><svg data-testid="inline-svg-stub" src="icons/checkbox-circle-fill.svg" unique-ids="false" transform-source="(svg) => {
 			if (__props.accessibleLabel !== &quot;&quot;) {
 				const title = document.createElement(&quot;title&quot;);
@@ -94,7 +94,7 @@ exports[`OcTextInput > password input field > password policy > displays success
 				svg.insertBefore(title, svg.firstChild);
 			};
 			return svg;
-		}" aria-hidden="true" focusable="false" style="fill: var(--oc-role-on-surface);" class="size-4"></svg></span> <span class="">8+ letters</span>
+		}" aria-hidden="true" focusable="false" style="fill: var(--oc-role-on-surface);" class="size-4"></svg></span> <span class="">8+ letters</span> <span class="sr-only">Requirement met</span>
           <!--v-if-->
         </div>
       </div>
diff --git a/packages/design-system/src/components/OcTextInputPassword/OcTextInputPassword.spec.ts b/packages/design-system/src/components/OcTextInputPassword/OcTextInputPassword.spec.ts
index 235ee70d5ac..6fea408fea9 100644
--- a/packages/design-system/src/components/OcTextInputPassword/OcTextInputPassword.spec.ts
+++ b/packages/design-system/src/components/OcTextInputPassword/OcTextInputPassword.spec.ts
@@ -30,6 +30,54 @@ describe('OcTextInputPassword', () => {
     expect(classes).toContain('border-role-outline')
     expect(classes).not.toContain('border-role-error')
   })
+  describe('password policy', () => {
+    function getPolicyWrapper(value: string, verified: boolean, attrs = {}) {
+      const policy: PasswordPolicy = {
+        rules: [{}],
+        check: () => verified,
+        missing: () => ({
+          rules: [{ code: 'minLength', message: '%{param1}+ letters', format: [8], verified }]
+        })
+      }
+      return mount(OcTextInputPassword, {
+        props: { value, passwordPolicy: policy },
+        attrs,
+        global: { plugins: [...defaultPlugins()], stubs: { Teleport: true } }
+      })
+    }
+
+    it('describes the input with the policy rules and their state', () => {
+      const wrapper = getPolicyWrapper('ab', false, { 'aria-describedby': 'message-id' })
+      const rulesId = wrapper.find('.oc-text-input-password-policy-rule').element.parentElement.id
+      expect(rulesId).toBeTruthy()
+      expect(wrapper.find('input').attributes('aria-describedby')).toBe(`message-id ${rulesId}`)
+      expect(wrapper.find('.oc-text-input-password-policy-rule .sr-only').text()).toBe(
+        'Requirement not met'
+      )
+    })
+    it('keeps the policy rules when the described-by attribute changes', async () => {
+      const wrapper = getPolicyWrapper('ab', false)
+      const rulesId = wrapper.find('.oc-text-input-password-policy-rule').element.parentElement.id
+      expect(wrapper.find('input').attributes('aria-describedby')).toBe(rulesId)
+      await wrapper.setProps({ 'aria-describedby': 'message-id' } as any)
+      expect(wrapper.find('input').attributes('aria-describedby')).toBe(`message-id ${rulesId}`)
+    })
+    it('announces a met rule', () => {
+      const wrapper = getPolicyWrapper('abcdefghij', true)
+      expect(wrapper.find('.oc-text-input-password-policy-rule .sr-only').text()).toBe(
+        'Requirement met'
+      )
+      expect(wrapper.find('input').attributes('aria-invalid')).not.toBe('true')
+    })
+    it('marks the input invalid while a rule fails', () => {
+      const wrapper = getPolicyWrapper('ab', false, { 'aria-invalid': 'false' })
+      expect(wrapper.find('input').attributes('aria-invalid')).toBe('true')
+    })
+    it('does not mark an empty input invalid', () => {
+      const wrapper = getPolicyWrapper('', false, { 'aria-invalid': 'false' })
+      expect(wrapper.find('input').attributes('aria-invalid')).toBe('false')
+    })
+  })
 })
 
 const passwordPolicy: PasswordPolicy = {
diff --git a/packages/design-system/src/components/OcTextInputPassword/OcTextInputPassword.vue b/packages/design-system/src/components/OcTextInputPassword/OcTextInputPassword.vue
index d40cf6fd0a4..1085a660d0b 100644
--- a/packages/design-system/src/components/OcTextInputPassword/OcTextInputPassword.vue
+++ b/packages/design-system/src/components/OcTextInputPassword/OcTextInputPassword.vue
@@ -13,6 +13,8 @@
       ref="passwordInput"
       v-model="password"
       class="grow-2 border-0 focus:border-0 focus:outline-0"
+      :aria-describedby="getAriaDescribedBy()"
+      :aria-invalid="getAriaInvalid()"
       :type="showPassword ? 'text' : 'password'"
       :disabled="disabled"
       @focus="hasFocus = true"
@@ -53,7 +55,7 @@
     </oc-button>
   </div>
   <teleport v-if="showPasswordPolicyInformation" defer :to="`#${teleportId}`">
-    <div class="flex flex-row flex-wrap text-sm pt-2 gap-x-2">
+    <div :id="passwordPolicyId" class="flex flex-row flex-wrap text-sm pt-2 gap-x-2">
       <div
         v-for="(testedRule, index) in testedPasswordPolicy.rules"
         :key="index"
@@ -69,6 +71,12 @@
           :class="[{ 'oc-text-input-danger': !testedRule.verified }]"
           v-text="getPasswordPolicyRuleMessage(testedRule)"
         ></span>
+        <span
+          class="sr-only"
+          v-text="
+            testedRule.verified ? $gettext('Requirement met') : $gettext('Requirement not met')
+          "
+        />
         <oc-contextual-helper
           v-if="testedRule.helperMessage"
           :text="testedRule.helperMessage"
@@ -80,7 +88,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, unref, useTemplateRef, watch } from 'vue'
+import { computed, ref, unref, useAttrs, useId, useTemplateRef, watch } from 'vue'
 import OcIcon from '../OcIcon/OcIcon.vue'
 import OcButton from '../OcButton/OcButton.vue'
 import { useGettext } from 'vue3-gettext'
@@ -126,6 +134,29 @@ const testedPasswordPolicy = computed(() => {
   return passwordPolicy?.missing(unref(password))
 })
 
+// attrs are not reactive, so these are plain functions evaluated on every render
+const attrs = useAttrs()
+const passwordPolicyId = useId()
+
+function getAriaDescribedBy() {
+  const ids = [attrs['aria-describedby'] as string]
+  if (unref(showPasswordPolicyInformation)) {
+    ids.push(passwordPolicyId)
+  }
+  return ids.filter(Boolean).join(' ') || undefined
+}
+
+function getAriaInvalid() {
+  const policyFailed =
+    unref(showPasswordPolicyInformation) &&
+    !!unref(password) &&
+    unref(testedPasswordPolicy).rules.some((rule) => !rule.verified)
+  if (policyFailed) {
+    return 'true'
+  }
+  return attrs['aria-invalid'] as string
+}
+
 const getPasswordPolicyRuleMessage = (rule: PasswordPolicyRule) => {
   const paramObj: Record<string, string> = {}
 

From a5d97d64f26c614304b46bd52069907e3e19bf65 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Wed, 21 Oct 2026 19:19:03 +0200
Subject: [PATCH 08/16] fix: name notification preferences after their event

---
 .../src/pages/account/accountPreferences.vue  | 12 ++++-
 .../pages/account/accountPreferences.spec.ts  | 44 +++++++++++++++++++
 2 files changed, 54 insertions(+), 2 deletions(-)

diff --git a/packages/web-runtime/src/pages/account/accountPreferences.vue b/packages/web-runtime/src/pages/account/accountPreferences.vue
index 18c281e8707..ecbfb12fd37 100644
--- a/packages/web-runtime/src/pages/account/accountPreferences.vue
+++ b/packages/web-runtime/src/pages/account/accountPreferences.vue
@@ -121,7 +121,7 @@
                     (notificationsValues[option.id] as Record<string, boolean>)[choice.key]
                   "
                   size="large"
-                  :label="choice.displayValue"
+                  :label="getNotificationChoiceLabel(option.displayName, choice.displayValue)"
                   :label-hidden="!isTablet"
                   :disabled="choice.attribute === 'disabled'"
                   @update:model-value="
@@ -142,7 +142,7 @@
             <oc-table-td>{{ option.displayName }}</oc-table-td>
             <oc-table-td v-if="option.singleChoiceValue">
               <oc-select
-                :label="$gettext('Mail notification options')"
+                :label="option.displayName"
                 label-hidden
                 :model-value="emailNotificationsValues[option.id]"
                 :options="option.singleChoiceValue.options"
@@ -246,6 +246,14 @@ const emailNotificationsOptionsFields = computed(() => [
   { label: $gettext('Option value'), hidden: true }
 ])
 
+// the visible label on tablets is just the choice, the hidden one also names the event of its row
+function getNotificationChoiceLabel(event: string, choice: string) {
+  if (unref(isTablet)) {
+    return choice
+  }
+  return $gettext('%{event}: %{choice}', { event, choice })
+}
+
 const showEditPasswordModal = () => {
   dispatchModal({
     title: $gettext('Change password'),
diff --git a/packages/web-runtime/tests/unit/pages/account/accountPreferences.spec.ts b/packages/web-runtime/tests/unit/pages/account/accountPreferences.spec.ts
index 9bc64fe2744..1d9018d0dd7 100644
--- a/packages/web-runtime/tests/unit/pages/account/accountPreferences.spec.ts
+++ b/packages/web-runtime/tests/unit/pages/account/accountPreferences.spec.ts
@@ -19,6 +19,14 @@ import { User } from '@opencloud-eu/web-client/graph/generated'
 import { VueWrapper } from '@vue/test-utils'
 import { SpaceResource } from '@opencloud-eu/web-client'
 import { Capabilities } from '@opencloud-eu/web-client/ocs'
+import { computed } from 'vue'
+import { useNotificationsSettings } from '../../../../src/composables/notificationsSettings'
+
+vi.mock('../../../../src/composables/notificationsSettings', async (importOriginal) => {
+  const original =
+    await importOriginal<typeof import('../../../../src/composables/notificationsSettings')>()
+  return { ...original, useNotificationsSettings: vi.fn(original.useNotificationsSettings) }
+})
 
 const $route = {
   meta: {
@@ -54,6 +62,42 @@ describe('account preferences page', () => {
     })
   })
 
+  describe('Notifications section', () => {
+    it('names the checkboxes and the interval select after the event of their row', async () => {
+      vi.mocked(useNotificationsSettings).mockReturnValueOnce({
+        options: computed(() => [
+          mock<SettingsBundle['settings'][0]>({
+            id: 'share-created',
+            name: 'share-created',
+            displayName: 'Share Received',
+            multiChoiceCollectionValue: {
+              options: [{ key: 'in-app', displayValue: 'In-App', value: { boolValue: {} } }]
+            }
+          })
+        ]),
+        values: computed(() => ({ 'share-created': { 'in-app': true } })),
+        emailOptions: computed(() => [
+          mock<SettingsBundle['settings'][0]>({
+            id: 'interval',
+            name: 'interval',
+            displayName: 'Email sending interval',
+            singleChoiceValue: { options: [{ value: 'daily', displayValue: 'Daily' }] }
+          })
+        ]),
+        emailValues: computed(() => ({}))
+      })
+      const { wrapper } = getWrapper({
+        capabilities: { notifications: { configurable: true } } as any
+      })
+      await blockLoadingState(wrapper)
+
+      const checkbox = wrapper.find('.checkbox-cell-wrapper input')
+      expect(checkbox.attributes('aria-label')).toBe('Share Received: In-App')
+      const select = wrapper.findAll('.vs__dropdown-toggle').at(-1)
+      expect(select.attributes('aria-label')).toContain('Email sending interval')
+    })
+  })
+
   describe('Method "updateDisableEmailNotifications', () => {
     it('should show a message on success', async () => {
       const { wrapper, mocks } = getWrapper()

From abb0d41f4ab92e15da330e724d2300c942dcd319 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Wed, 21 Oct 2026 19:20:07 +0200
Subject: [PATCH 09/16] fix: keep the visible date and count as names of the
 versions buttons

---
 .../src/components/SideBar/Details/FileDetails.vue    |  8 +++++---
 .../components/SideBar/Details/FileDetails.spec.ts    | 11 +++++++++++
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
index a7b4d821843..4c21985eaa5 100644
--- a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
@@ -78,7 +78,7 @@
                 v-if="showVersions"
                 v-oc-tooltip="seeVersionsLabel"
                 appearance="raw"
-                :aria-label="seeVersionsLabel"
+                :aria-describedby="seeVersionsHintId"
                 no-hover
                 @click="openSideBarPanel('versions')"
               >
@@ -128,7 +128,7 @@
                 v-else
                 v-oc-tooltip="seeVersionsLabel"
                 appearance="raw"
-                :aria-label="seeVersionsLabel"
+                :aria-describedby="seeVersionsHintId"
                 no-hover
                 @click="openSideBarPanel('versions')"
               >
@@ -138,6 +138,7 @@
           </template>
           <custom-component-target :extension-point="fileSideBarFileDetailsTableExtensionPoint" />
         </dl>
+        <span :id="seeVersionsHintId" hidden v-text="seeVersionsLabel" />
       </div>
       <div v-if="hasTags" class="mt-2">
         <div class="inline-flex items-center text-sm mb-0.5">
@@ -158,7 +159,7 @@
 </template>
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import { computed, inject, Ref, ref, unref, watch } from 'vue'
+import { computed, inject, Ref, ref, unref, useId, watch } from 'vue'
 import {
   ImageDimension,
   ProcessorType,
@@ -356,6 +357,7 @@ const versionsPlaceholder = computed(() => unref(versionsLoading) && unref(stick
 const versionsRowVisible = computed(() =>
   unref(versionsLoading) ? unref(stickyShowVersions) : !!unref(showVersions)
 )
+const seeVersionsHintId = useId()
 const seeVersionsLabel = computed(() => {
   return $gettext('See all versions')
 })
diff --git a/packages/web-app-files/tests/unit/components/SideBar/Details/FileDetails.spec.ts b/packages/web-app-files/tests/unit/components/SideBar/Details/FileDetails.spec.ts
index ed40d89ecb7..fa2e1994ac8 100644
--- a/packages/web-app-files/tests/unit/components/SideBar/Details/FileDetails.spec.ts
+++ b/packages/web-app-files/tests/unit/components/SideBar/Details/FileDetails.spec.ts
@@ -180,6 +180,17 @@ describe('Details SideBar Panel', () => {
       await wrapper.vm.$nextTick()
       expect(wrapper.find(selectors.versionsInfo).exists()).toBeTruthy()
     })
+    it('keeps the visible date and count as the button names', async () => {
+      const resource = getResourceMock()
+      const { wrapper } = createWrapper({ resource, versions: ['1'] })
+      await wrapper.vm.$nextTick()
+      for (const selector of [selectors.timestamp, selectors.versionsInfo]) {
+        const button = wrapper.find(`${selector} button`)
+        expect(button.attributes('aria-label')).toBeUndefined()
+        const hint = wrapper.find(`#${button.attributes('aria-describedby')}`)
+        expect(hint.text()).toBe('See all versions')
+      }
+    })
     it('do not show for folders on a private page', () => {
       const resource = getResourceMock({ type: 'folder' })
       const { wrapper } = createWrapper({ resource, versions: ['1'] })

From 277df76849b8cc5152b9c78939ae3e39fba9cf12 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Wed, 21 Oct 2026 19:21:39 +0200
Subject: [PATCH 10/16] fix: name the image crop area and hide its decorative
 grid

---
 .../web-pkg/src/components/ImageCropper.vue   | 10 +++++--
 .../unit/components/ImageCropper.spec.ts      | 28 +++++++++++++++++++
 2 files changed, 35 insertions(+), 3 deletions(-)
 create mode 100644 packages/web-pkg/tests/unit/components/ImageCropper.spec.ts

diff --git a/packages/web-pkg/src/components/ImageCropper.vue b/packages/web-pkg/src/components/ImageCropper.vue
index 085c7744112..d2307ea71d1 100644
--- a/packages/web-pkg/src/components/ImageCropper.vue
+++ b/packages/web-pkg/src/components/ImageCropper.vue
@@ -17,6 +17,9 @@
         id="image-cropper-selection"
         ref="cropperSelectionRef"
         tabindex="0"
+        role="group"
+        :aria-label="$gettext('Crop area')"
+        :aria-describedby="hintId"
         data-custom-key-bindings-disabled="true"
         initial-coverage="0.8"
         :aspect-ratio="aspectRatio"
@@ -29,7 +32,7 @@
         ]"
         @change="onCropperSelectionChange"
       >
-        <cropper-grid role="grid" bordered covered />
+        <cropper-grid aria-hidden="true" bordered covered />
         <cropper-crosshair centered />
         <cropper-handle action="move" theme-color="rgba(255, 255, 255, 0.35)" />
         <cropper-handle theme-color="var(--color-role-outline)" action="n-resize" />
@@ -42,7 +45,7 @@
         <cropper-handle theme-color="var(--color-role-outline)" action="sw-resize" />
       </cropper-selection>
     </cropper-canvas>
-    <div class="text-sm text-role-on-surface-variant flex items-center mt-1">
+    <div :id="hintId" class="text-sm text-role-on-surface-variant flex items-center mt-1">
       <oc-icon class="mr-1" name="information" size-class="size-4" fill-type="line" />
       <span v-if="isMobile" v-text="$gettext('Pinch to zoom, drag to move')" />
       <span
@@ -59,7 +62,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, unref, watch } from 'vue'
+import { ref, unref, useId, watch } from 'vue'
 import { useCropperKeyboardActions } from '../composables'
 import 'cropperjs'
 import type {
@@ -91,6 +94,7 @@ const {
 
 const { $gettext } = useGettext()
 const { isMobile } = useIsMobile()
+const hintId = useId()
 const { setCropperInstance } = useCropperKeyboardActions()
 
 const cropperCanvasRef = ref<CropperCanvasType | null>(null)
diff --git a/packages/web-pkg/tests/unit/components/ImageCropper.spec.ts b/packages/web-pkg/tests/unit/components/ImageCropper.spec.ts
new file mode 100644
index 00000000000..96ab8413bf6
--- /dev/null
+++ b/packages/web-pkg/tests/unit/components/ImageCropper.spec.ts
@@ -0,0 +1,28 @@
+import { defaultPlugins, mount } from '@opencloud-eu/web-test-helpers'
+import ImageCropper from '../../../src/components/ImageCropper.vue'
+
+vi.mock('cropperjs', () => ({}))
+
+describe('ImageCropper', () => {
+  it('names the crop area and links it to the keyboard hint', () => {
+    const wrapper = getWrapper()
+    const selection = wrapper.find('#image-cropper-selection')
+    expect(selection.attributes('role')).toBe('group')
+    expect(selection.attributes('aria-label')).toBe('Crop area')
+    const hint = wrapper.find(`#${selection.attributes('aria-describedby')}`)
+    expect(hint.text()).toContain('Zoom via')
+  })
+  it('hides the decorative grid from assistive technologies', () => {
+    const wrapper = getWrapper()
+    const grid = wrapper.find('cropper-grid')
+    expect(grid.attributes('role')).toBeUndefined()
+    expect(grid.attributes('aria-hidden')).toBe('true')
+  })
+})
+
+function getWrapper() {
+  return mount(ImageCropper, {
+    props: { imageUrl: 'blob:image' },
+    global: { plugins: [...defaultPlugins()] }
+  })
+}

From 4c012a4cf56e2bef11cecd4626fed1962ec1efee Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Wed, 21 Oct 2026 19:26:31 +0200
Subject: [PATCH 11/16] fix: expose the pressed state of text editor toolbar
 toggles

---
 .../components/TextEditorToolbarItem.vue      |  1 +
 .../editor/composables/useEditorActions.ts    | 40 +++++--------------
 .../components/TextEditorToolbarItem.spec.ts  | 11 +++++
 .../composables/useEditorActions.spec.ts      | 15 +++----
 4 files changed, 28 insertions(+), 39 deletions(-)

diff --git a/packages/web-pkg/src/editor/components/TextEditorToolbarItem.vue b/packages/web-pkg/src/editor/components/TextEditorToolbarItem.vue
index adeb4a9581d..370d58535ae 100644
--- a/packages/web-pkg/src/editor/components/TextEditorToolbarItem.vue
+++ b/packages/web-pkg/src/editor/components/TextEditorToolbarItem.vue
@@ -124,6 +124,7 @@
     class="text-editor-toolbar-btn min-w-[38px] inline-flex items-center justify-center p-2"
     :class="rootClasses"
     :aria-label="item.title"
+    :aria-pressed="item.isActive ? isItemActive(item).toString() : undefined"
     :aria-hidden="measureOnly"
     :tabindex="measureOnly ? -1 : undefined"
     :data-item-id="item.id"
diff --git a/packages/web-pkg/src/editor/composables/useEditorActions.ts b/packages/web-pkg/src/editor/composables/useEditorActions.ts
index b7e714d65a9..60d3bc44c94 100644
--- a/packages/web-pkg/src/editor/composables/useEditorActions.ts
+++ b/packages/web-pkg/src/editor/composables/useEditorActions.ts
@@ -39,6 +39,7 @@ export interface EditorAction {
   slashCommandAction?: (ctx: { editor: Editor; range: Range }) => void
 
   // State management
+  // only set for actions with an on/off state, toolbar buttons expose it as aria-pressed
   isActive?: (editor: Editor) => boolean
   isEnabled?: (editor: Editor) => boolean
 
@@ -715,8 +716,7 @@ export function useEditorActions(state: TextEditorState) {
     slashCommandAction: ({ editor, range }) => {
       editor.chain().focus().deleteRange(range).run()
       dispatchImageModal(editor)
-    },
-    isActive: () => false
+    }
   })
 
   const imageUpload = (): EditorAction => ({
@@ -731,8 +731,7 @@ export function useEditorActions(state: TextEditorState) {
     slashCommandAction: ({ editor, range }) => {
       editor.chain().focus().deleteRange(range).run()
       insertImageFromFile(editor)
-    },
-    isActive: () => false
+    }
   })
 
   const imageCloud = (): EditorAction => ({
@@ -747,8 +746,7 @@ export function useEditorActions(state: TextEditorState) {
     slashCommandAction: ({ editor, range }) => {
       editor.chain().focus().deleteRange(range).run()
       openCloudImagePicker(editor)
-    },
-    isActive: () => false
+    }
   })
 
   const image = (): EditorAction => ({
@@ -757,12 +755,7 @@ export function useEditorActions(state: TextEditorState) {
     icon: 'image-line',
     keywords: ['image', 'picture', 'upload', 'url', 'cloud'],
     showInSlashCommands: false,
-    childActions: [
-      imageUpload(),
-      imageUrl(),
-      ...(unref(isPublicLinkContext) ? [] : [imageCloud()])
-    ],
-    isActive: () => false
+    childActions: [imageUpload(), imageUrl(), ...(unref(isPublicLinkContext) ? [] : [imageCloud()])]
   })
 
   const menuEmoji = (): EditorAction => ({
@@ -793,8 +786,7 @@ export function useEditorActions(state: TextEditorState) {
         editor.chain().focus().insertContent(selectedEmoji).run()
         closeMenu()
       }
-    }),
-    isActive: () => false
+    })
   })
 
   const menuSearchAndReplace = (): EditorAction => ({
@@ -855,8 +847,7 @@ export function useEditorActions(state: TextEditorState) {
     toolbarAction: (editor) => editor.chain().focus().setHorizontalRule().run(),
     slashCommandAction: ({ editor, range }) => {
       editor.chain().focus().deleteRange(range).setHorizontalRule().run()
-    },
-    isActive: () => false
+    }
   })
 
   // Frontmatter actions
@@ -915,8 +906,7 @@ export function useEditorActions(state: TextEditorState) {
         description: $gettext('3×3 table with header row'),
         icon: 'table-line',
         toolbarAction: (editor) =>
-          editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(),
-        isActive: () => false
+          editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()
       },
       {
         id: 'table-custom',
@@ -929,8 +919,7 @@ export function useEditorActions(state: TextEditorState) {
         menuComponentAttrs: (editor, closeMenu) => ({
           editor,
           closeMenu
-        }),
-        isActive: () => false
+        })
       }
     ],
     slashCommandAction: ({ editor, range }) => {
@@ -940,8 +929,7 @@ export function useEditorActions(state: TextEditorState) {
         .deleteRange(range)
         .insertTable({ rows: 3, cols: 3, withHeaderRow: true })
         .run()
-    },
-    isActive: () => false
+    }
   })
 
   const addRowBefore = (): EditorAction => ({
@@ -955,7 +943,6 @@ export function useEditorActions(state: TextEditorState) {
     slashCommandAction: ({ editor, range }) => {
       editor.chain().focus().deleteRange(range).addRowBefore().run()
     },
-    isActive: () => false,
     isEnabled: (editor) => editor.isActive('table')
   })
 
@@ -970,7 +957,6 @@ export function useEditorActions(state: TextEditorState) {
     slashCommandAction: ({ editor, range }) => {
       editor.chain().focus().deleteRange(range).addRowAfter().run()
     },
-    isActive: () => false,
     isEnabled: (editor) => editor.isActive('table')
   })
 
@@ -993,7 +979,6 @@ export function useEditorActions(state: TextEditorState) {
         editor.chain().focus().deleteTable().run()
       }
     },
-    isActive: () => false,
     isEnabled: (editor) => editor.isActive('table')
   })
 
@@ -1008,7 +993,6 @@ export function useEditorActions(state: TextEditorState) {
     slashCommandAction: ({ editor, range }) => {
       editor.chain().focus().deleteRange(range).addColumnBefore().run()
     },
-    isActive: () => false,
     isEnabled: (editor) => editor.isActive('table')
   })
 
@@ -1023,7 +1007,6 @@ export function useEditorActions(state: TextEditorState) {
     slashCommandAction: ({ editor, range }) => {
       editor.chain().focus().deleteRange(range).addColumnAfter().run()
     },
-    isActive: () => false,
     isEnabled: (editor) => editor.isActive('table')
   })
 
@@ -1046,7 +1029,6 @@ export function useEditorActions(state: TextEditorState) {
         editor.chain().focus().deleteTable().run()
       }
     },
-    isActive: () => false,
     isEnabled: (editor) => editor.isActive('table')
   })
 
@@ -1061,7 +1043,6 @@ export function useEditorActions(state: TextEditorState) {
     slashCommandAction: ({ editor, range }) => {
       editor.chain().focus().deleteRange(range).toggleHeaderRow().run()
     },
-    isActive: () => false,
     isEnabled: (editor) => editor.isActive('table')
   })
 
@@ -1076,7 +1057,6 @@ export function useEditorActions(state: TextEditorState) {
     slashCommandAction: ({ editor, range }) => {
       editor.chain().focus().deleteRange(range).deleteTable().run()
     },
-    isActive: () => false,
     isEnabled: (editor) => editor.isActive('table')
   })
 
diff --git a/packages/web-pkg/tests/unit/editor/components/TextEditorToolbarItem.spec.ts b/packages/web-pkg/tests/unit/editor/components/TextEditorToolbarItem.spec.ts
index 2e1ad90f361..9644afeb934 100644
--- a/packages/web-pkg/tests/unit/editor/components/TextEditorToolbarItem.spec.ts
+++ b/packages/web-pkg/tests/unit/editor/components/TextEditorToolbarItem.spec.ts
@@ -43,6 +43,17 @@ function mountItem(item: EditorAction) {
 }
 
 describe('TextEditorToolbarItem', () => {
+  describe('active state', () => {
+    it.each([true, false])('exposes the state of a toggle button (active: %s)', (active) => {
+      const wrapper = mountItem({ id: 'bold', title: 'Bold', icon: 'bold', isActive: () => active })
+      expect(wrapper.find('button').attributes('aria-pressed')).toBe(active.toString())
+    })
+    it('does not expose a state for a plain button', () => {
+      const wrapper = mountItem({ id: 'undo', title: 'Undo', icon: 'undo' })
+      expect(wrapper.find('button').attributes('aria-pressed')).toBeUndefined()
+    })
+  })
+
   it('titles the drop of a menu action, so the mobile bottom drawer has a header', () => {
     const wrapper = mountItem({
       id: 'image',
diff --git a/packages/web-pkg/tests/unit/editor/composables/useEditorActions.spec.ts b/packages/web-pkg/tests/unit/editor/composables/useEditorActions.spec.ts
index d1d94613b92..2a9bb361eb4 100644
--- a/packages/web-pkg/tests/unit/editor/composables/useEditorActions.spec.ts
+++ b/packages/web-pkg/tests/unit/editor/composables/useEditorActions.spec.ts
@@ -444,9 +444,8 @@ describe('useEditorActions', () => {
   })
 
   describe('horizontalRule', () => {
-    it('isActive always returns false', () => {
-      const editor = createMockEditor()
-      expect(actions.horizontalRule().isActive!(editor)).toBe(false)
+    it('has no on/off state', () => {
+      expect(actions.horizontalRule().isActive).toBeUndefined()
     })
   })
 
@@ -939,9 +938,8 @@ describe('useEditorActions', () => {
       expect(editor._chain.setImage).not.toHaveBeenCalled()
     })
 
-    it('isActive always returns false', () => {
-      const editor = createMockEditor()
-      expect(actions.imageUrl().isActive!(editor)).toBe(false)
+    it('has no on/off state', () => {
+      expect(actions.imageUrl().isActive).toBeUndefined()
     })
   })
 
@@ -1088,9 +1086,8 @@ describe('useEditorActions', () => {
       expect(mockInput.click).toHaveBeenCalled()
     })
 
-    it('isActive always returns false', () => {
-      const editor = createMockEditor()
-      expect(actions.imageUpload().isActive!(editor)).toBe(false)
+    it('has no on/off state', () => {
+      expect(actions.imageUpload().isActive).toBeUndefined()
     })
   })
 

From ea967ec13783e0b5db887bca6a9cbfcb77cd65a0 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Wed, 21 Oct 2026 19:27:41 +0200
Subject: [PATCH 12/16] fix: expose the state and filter name of filter chips

---
 .../OcFilterChip/OcFilterChip.spec.ts         | 22 +++++++++++++++++++
 .../components/OcFilterChip/OcFilterChip.vue  | 16 +++++++++++++-
 .../components/Filters/ItemFilterInline.vue   |  1 +
 .../Filters/ItemFilterInline.spec.ts          |  8 +++++++
 4 files changed, 46 insertions(+), 1 deletion(-)

diff --git a/packages/design-system/src/components/OcFilterChip/OcFilterChip.spec.ts b/packages/design-system/src/components/OcFilterChip/OcFilterChip.spec.ts
index f940a110ac7..e2bf11a99ef 100644
--- a/packages/design-system/src/components/OcFilterChip/OcFilterChip.spec.ts
+++ b/packages/design-system/src/components/OcFilterChip/OcFilterChip.spec.ts
@@ -25,11 +25,33 @@ describe('OcFilterChip', () => {
     await wrapper.find(selectors.clearBtn).trigger('click')
     expect(wrapper.emitted('clearFilter')).toBeTruthy()
   })
+  describe('accessible names', () => {
+    it('names the chip after the filter and its selection', () => {
+      const { wrapper } = getWrapper({ props: { selectedItemNames: ['Einstein', 'Marie'] } })
+      expect(wrapper.find(selectors.filterChipBtn).attributes('aria-label')).toBe(
+        'Users: Einstein +1'
+      )
+    })
+    it('keeps the visible label as name without a selection', () => {
+      const { wrapper } = getWrapper()
+      expect(wrapper.find(selectors.filterChipBtn).attributes('aria-label')).toBeUndefined()
+    })
+    it('names the clear button after the filter', () => {
+      const { wrapper } = getWrapper({ props: { selectedItemNames: ['Einstein'] } })
+      expect(wrapper.find(selectors.clearBtn).attributes('aria-label')).toBe('Clear filter Users')
+    })
+  })
   describe('isToggle is true', () => {
     it('does not render a dropdown', () => {
       const { wrapper } = getWrapper({ props: { isToggle: true } })
       expect(wrapper.find(selectors.filterChipDrop).exists()).toBeFalsy()
     })
+    it.each([true, false])('exposes the toggle state as pressed (%s)', (isToggleActive) => {
+      const { wrapper } = getWrapper({ props: { isToggle: true, isToggleActive } })
+      expect(wrapper.find(selectors.filterChipBtn).attributes('aria-pressed')).toBe(
+        isToggleActive.toString()
+      )
+    })
     it('marks filter as active when isToggleActive is true', () => {
       const { wrapper } = getWrapper({ props: { isToggle: true, isToggleActive: true } })
       expect(wrapper.find(selectors.filterChipBtnActive).exists()).toBeTruthy()
diff --git a/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue b/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
index a6dd3ab842a..56088903b39 100644
--- a/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
+++ b/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
@@ -15,6 +15,8 @@
       :color-role="buttonColorRole"
       :no-hover="filterActive || !hasActiveState"
       :size="size"
+      :aria-pressed="isToggle ? isToggleActive.toString() : undefined"
+      :aria-label="selectionLabel"
       @click="isToggle ? emit('toggleFilter') : false"
     >
       <oc-icon
@@ -59,7 +61,7 @@
       class="oc-filter-chip-clear px-1 rounded-l-none rounded-r-md h-[32px] not-[.oc-filter-chip-toggle_.oc-filter-chip-clear]:ml-[1px] focus:z-90"
       appearance="filled"
       color-role="secondaryContainer"
-      :aria-label="$gettext('Clear filter')"
+      :aria-label="$gettext('Clear filter %{filterLabel}', { filterLabel })"
       :no-hover="filterActive"
       @click="emit('clearFilter')"
     >
@@ -171,6 +173,18 @@ const filterActive = computed(() => {
   return !!selectedItemNames.length
 })
 
+// names the chip after the filter as well, because the visible label is replaced by the selection
+const selectionLabel = computed(() => {
+  if (!selectedItemNames.length) {
+    return undefined
+  }
+  const selection =
+    selectedItemNames.length > 1
+      ? `${selectedItemNames[0]} +${selectedItemNames.length - 1}`
+      : selectedItemNames[0]
+  return `${filterLabel}: ${selection}`
+})
+
 const hideDrop = () => {
   unref(dropRef)?.hide()
 }
diff --git a/packages/web-pkg/src/components/Filters/ItemFilterInline.vue b/packages/web-pkg/src/components/Filters/ItemFilterInline.vue
index f896eff5ca6..d3baf0e7cbd 100644
--- a/packages/web-pkg/src/components/Filters/ItemFilterInline.vue
+++ b/packages/web-pkg/src/components/Filters/ItemFilterInline.vue
@@ -15,6 +15,7 @@
         :appearance="activeOption === option.name ? 'filled' : 'raw-inverse'"
         :color-role="activeOption === option.name ? 'secondaryContainer' : 'surface'"
         :no-hover="activeOption === option.name"
+        :aria-pressed="(activeOption === option.name).toString()"
         @click="toggleFilter(option)"
       >
         <span class="truncate item-inline-filter-option-label" v-text="option.label" />
diff --git a/packages/web-pkg/tests/unit/components/Filters/ItemFilterInline.spec.ts b/packages/web-pkg/tests/unit/components/Filters/ItemFilterInline.spec.ts
index d7664263df2..10e6af27706 100644
--- a/packages/web-pkg/tests/unit/components/Filters/ItemFilterInline.spec.ts
+++ b/packages/web-pkg/tests/unit/components/Filters/ItemFilterInline.spec.ts
@@ -63,6 +63,14 @@ describe('ItemFilterInline', () => {
       await wrapper.vm.$nextTick()
       expect(wrapper.find(selectors.selectedOptionLabel).text()).toEqual(initialQuery)
     })
+    it('exposes the active option as pressed', async () => {
+      const initialQuery = filterOptions[1].name
+      const { wrapper } = getWrapper({ initialQuery, props: { filterOptions } })
+      await wrapper.vm.$nextTick()
+      const options = wrapper.findAll(selectors.filterOption)
+      expect(options.at(0).attributes('aria-pressed')).toBe('false')
+      expect(options.at(1).attributes('aria-pressed')).toBe('true')
+    })
     it('resets the active option when the query param is removed from the route', async () => {
       const currentRoute = reactive({
         query: { q_InlineFilter: filterOptions[1].name } as Record<string, string>

From b3deea4f3b5f5b5e771d39934f9fdea046915275 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Wed, 21 Oct 2026 19:28:25 +0200
Subject: [PATCH 13/16] fix: hide the decorative empty state illustration

---
 .../src/components/NoContentMessage.vue       |  7 +++++--
 .../unit/components/NoContentMessage.spec.ts  | 19 +++++++++++++++++--
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/packages/web-pkg/src/components/NoContentMessage.vue b/packages/web-pkg/src/components/NoContentMessage.vue
index 2147e4441ca..091689b023b 100644
--- a/packages/web-pkg/src/components/NoContentMessage.vue
+++ b/packages/web-pkg/src/components/NoContentMessage.vue
@@ -1,13 +1,14 @@
 <template>
   <div class="no-content-message flex flex-col justify-center items-center text-center">
     <component
-      :is="imgSrc?.toLowerCase().endsWith('.svg') ? InlineSvg : 'oc-image'"
+      :is="isSvg ? InlineSvg : 'oc-image'"
       v-if="imgSrc"
       :src="imgSrcWithVersion"
       class="mb-4 no-content-message-image"
       width="120"
       height="120"
-      :alt="$gettext('No content image')"
+      :alt="isSvg ? undefined : ''"
+      aria-hidden="true"
     />
     <oc-icon
       v-if="icon"
@@ -44,6 +45,8 @@ const {
   imgSrc?: string
 }>()
 
+const isSvg = computed(() => imgSrc?.toLowerCase().endsWith('.svg'))
+
 const imgSrcWithVersion = computed(() => {
   if (!imgSrc) {
     return imgSrc
diff --git a/packages/web-pkg/tests/unit/components/NoContentMessage.spec.ts b/packages/web-pkg/tests/unit/components/NoContentMessage.spec.ts
index 9641632027f..024561af158 100644
--- a/packages/web-pkg/tests/unit/components/NoContentMessage.spec.ts
+++ b/packages/web-pkg/tests/unit/components/NoContentMessage.spec.ts
@@ -12,6 +12,21 @@ describe('NoContentMessage', () => {
     })
   })
 
+  describe('image', () => {
+    it('hides a decorative svg illustration from assistive technologies', () => {
+      const { wrapper } = getWrapper({}, { imgSrc: 'empty.svg' })
+      const image = wrapper.find('.no-content-message-image')
+      expect(image.attributes('aria-hidden')).toBe('true')
+      expect(image.attributes('alt')).toBeUndefined()
+    })
+    it('hides a decorative image illustration from assistive technologies', () => {
+      const { wrapper } = getWrapper({}, { imgSrc: 'empty.png' })
+      const image = wrapper.find('.no-content-message-image')
+      expect(image.attributes('aria-hidden')).toBe('true')
+      expect(image.attributes('alt')).toBe('')
+    })
+  })
+
   describe('named slots', () => {
     it('should render slot html for message', () => {
       const { wrapper } = getWrapper({
@@ -44,11 +59,11 @@ describe('NoContentMessage', () => {
   })
 })
 
-function getWrapper(slots = {}) {
+function getWrapper(slots = {}, props = {}) {
   return {
     wrapper: shallowMount(NoContentMessage, {
       slots: slots,
-      props: { icon: 'mdi-test-icon' },
+      props: { icon: 'mdi-test-icon', ...props },
       global: {
         plugins: [...defaultPlugins()]
       }

From e2cb305eac5253cacc33ae03dcf3f00b4f23b325 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Wed, 21 Oct 2026 19:32:17 +0200
Subject: [PATCH 14/16] fix: do not render the hidden search button

---
 .../src/components/OcSearchBar/OcSearchBar.spec.ts  | 13 ++++++++++---
 .../src/components/OcSearchBar/OcSearchBar.vue      |  2 +-
 .../views/trash/__snapshots__/Overview.spec.ts.snap |  5 +----
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/design-system/src/components/OcSearchBar/OcSearchBar.spec.ts b/packages/design-system/src/components/OcSearchBar/OcSearchBar.spec.ts
index 6149720c6a6..018d7ec65d5 100644
--- a/packages/design-system/src/components/OcSearchBar/OcSearchBar.spec.ts
+++ b/packages/design-system/src/components/OcSearchBar/OcSearchBar.spec.ts
@@ -104,10 +104,17 @@ describe('OcSearchBar', () => {
     })
   })
   describe('button hidden prop', () => {
-    it('should add invisible class to search button if enabled', () => {
+    it('should not render the search button if enabled', () => {
       const wrapper = getWrapper({ buttonHidden: true })
-      const searchButtonWrapper = wrapper.find(selectors.searchButtonWrapper)
-      expect(searchButtonWrapper.attributes('class')).toContain('sr-only')
+      expect(wrapper.find(selectors.searchButtonWrapper).exists()).toBeFalsy()
+      expect(wrapper.find(selectors.searchButton).exists()).toBeFalsy()
+    })
+    it('should still search on enter if enabled', async () => {
+      const wrapper = getWrapper({ buttonHidden: true })
+      const input = wrapper.find(selectors.searchInput)
+      await input.setValue('query')
+      await input.trigger('keydown.enter')
+      expect(wrapper.emitted('search')).toEqual([['query']])
     })
     it('should add button class to input if disabled', () => {
       const wrapper = getWrapper({ buttonHidden: false })
diff --git a/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue b/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
index dd9a151c135..ed56aa6d980 100644
--- a/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
+++ b/packages/design-system/src/components/OcSearchBar/OcSearchBar.vue
@@ -33,7 +33,7 @@
         />
       </oc-button>
     </div>
-    <div class="oc-search-button-wrapper" :class="{ 'sr-only': buttonHidden }">
+    <div v-if="!buttonHidden" class="oc-search-button-wrapper">
       <oc-button
         class="oc-search-button z-0 ml-4 rounded-l-none transform-[translateX(-1px)]"
         appearance="filled"
diff --git a/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap b/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
index a9d24caccdb..058c833e13e 100644
--- a/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
+++ b/packages/web-app-files/tests/unit/views/trash/__snapshots__/Overview.spec.ts.snap
@@ -20,10 +20,7 @@ exports[`TrashOverview > view states > should render trash list 1`] = `
 		}" aria-hidden="true" focusable="false" class="size-4"></svg></span>
               <oc-spinner-stub data-v-8440503a="" arialabel="Loading results" size="medium" style="display: none;"></oc-spinner-stub>
             </button></div>
-          <div data-v-8440503a="" class="oc-search-button-wrapper sr-only"><button data-v-8440503a="" type="button" disabled="" class="oc-button-secondary oc-button-filled oc-button-secondary-filled gap-2 justify-center text-base min-h-4 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-search-button z-0 ml-4 rounded-l-none transform-[translateX(-1px)]">
-              <!--v-if-->
-              <!-- @slot Content of the button --> Search
-            </button></div>
+          <!--v-if-->
           <!--v-if-->
         </div>
       </div>

From 2ea15321dd44e16b833768a9f82b46cb2ee64c32 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Wed, 21 Oct 2026 19:37:27 +0200
Subject: [PATCH 15/16] fix: reference the password policy via its teleport
 target

---
 .../__snapshots__/OcTextInput.spec.ts.snap         |  8 ++++----
 .../OcTextInputPassword.spec.ts                    | 11 ++++-------
 .../OcTextInputPassword/OcTextInputPassword.vue    | 14 +++++++-------
 3 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/packages/design-system/src/components/OcTextInput/__snapshots__/OcTextInput.spec.ts.snap b/packages/design-system/src/components/OcTextInput/__snapshots__/OcTextInput.spec.ts.snap
index 06873ed0018..6a6a9929673 100644
--- a/packages/design-system/src/components/OcTextInput/__snapshots__/OcTextInput.spec.ts.snap
+++ b/packages/design-system/src/components/OcTextInput/__snapshots__/OcTextInput.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`OcTextInput > password input field > password policy > displays error s
   </label>
   <div class="relative">
     <!--v-if-->
-    <div class="oc-text-input-password-wrapper flex flex-row border rounded-sm border-role-outline"><input id="oc-textinput-20" aria-invalid="true" class="oc-text-input oc-input h-9 grow-2 border-0 focus:border-0 focus:outline-0" type="password" aria-describedby="v-1"> <button type="button" aria-label="Show password" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-sm min-h-3 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-text-input-show-password-toggle px-2">
+    <div class="oc-text-input-password-wrapper flex flex-row border rounded-sm border-role-outline"><input id="oc-textinput-20" aria-invalid="true" class="oc-text-input oc-input h-9 grow-2 border-0 focus:border-0 focus:outline-0" type="password" aria-describedby="v-0"> <button type="button" aria-label="Show password" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-sm min-h-3 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-text-input-show-password-toggle px-2">
         <!--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/eye-fill.svg" unique-ids="false" transform-source="(svg) => {
 			if (__props.accessibleLabel !== &quot;&quot;) {
@@ -32,7 +32,7 @@ exports[`OcTextInput > password input field > password policy > displays error s
       <!--v-if-->
     </div>
     <teleport-stub defer="" to="#v-0">
-      <div id="v-1" class="flex flex-row flex-wrap text-sm pt-2 gap-x-2">
+      <div class="flex flex-row flex-wrap text-sm pt-2 gap-x-2">
         <div class="flex items-center oc-text-input-password-policy-rule"><span class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-4 mr-1"><svg data-testid="inline-svg-stub" src="icons/close-circle-fill.svg" unique-ids="false" transform-source="(svg) => {
 			if (__props.accessibleLabel !== &quot;&quot;) {
 				const title = document.createElement(&quot;title&quot;);
@@ -59,7 +59,7 @@ exports[`OcTextInput > password input field > password policy > displays success
   </label>
   <div class="relative">
     <!--v-if-->
-    <div class="oc-text-input-password-wrapper flex flex-row border rounded-sm border-role-outline"><input id="oc-textinput-21" aria-invalid="false" class="oc-text-input oc-input h-9 grow-2 border-0 focus:border-0 focus:outline-0" type="password" aria-describedby="v-1"> <button type="button" aria-label="Show password" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-sm min-h-3 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-text-input-show-password-toggle px-2">
+    <div class="oc-text-input-password-wrapper flex flex-row border rounded-sm border-role-outline"><input id="oc-textinput-21" aria-invalid="false" class="oc-text-input oc-input h-9 grow-2 border-0 focus:border-0 focus:outline-0" type="password" aria-describedby="v-0"> <button type="button" aria-label="Show password" class="oc-button-secondary oc-button-raw oc-button-secondary-raw gap-2 justify-center text-sm min-h-3 oc-button cursor-pointer disabled:opacity-60 disabled:cursor-default oc-text-input-show-password-toggle px-2">
         <!--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/eye-fill.svg" unique-ids="false" transform-source="(svg) => {
 			if (__props.accessibleLabel !== &quot;&quot;) {
@@ -85,7 +85,7 @@ exports[`OcTextInput > password input field > password policy > displays success
       <!--v-if-->
     </div>
     <teleport-stub defer="" to="#v-0">
-      <div id="v-1" class="flex flex-row flex-wrap text-sm pt-2 gap-x-2">
+      <div class="flex flex-row flex-wrap text-sm pt-2 gap-x-2">
         <div class="flex items-center oc-text-input-password-policy-rule"><span class="oc-icon box-content inline-block align-baseline [&amp;_svg]:block size-4 mr-1"><svg data-testid="inline-svg-stub" src="icons/checkbox-circle-fill.svg" unique-ids="false" transform-source="(svg) => {
 			if (__props.accessibleLabel !== &quot;&quot;) {
 				const title = document.createElement(&quot;title&quot;);
diff --git a/packages/design-system/src/components/OcTextInputPassword/OcTextInputPassword.spec.ts b/packages/design-system/src/components/OcTextInputPassword/OcTextInputPassword.spec.ts
index 6fea408fea9..c081f7ea30c 100644
--- a/packages/design-system/src/components/OcTextInputPassword/OcTextInputPassword.spec.ts
+++ b/packages/design-system/src/components/OcTextInputPassword/OcTextInputPassword.spec.ts
@@ -40,7 +40,7 @@ describe('OcTextInputPassword', () => {
         })
       }
       return mount(OcTextInputPassword, {
-        props: { value, passwordPolicy: policy },
+        props: { value, passwordPolicy: policy, teleportId: 'policy-rules' },
         attrs,
         global: { plugins: [...defaultPlugins()], stubs: { Teleport: true } }
       })
@@ -48,19 +48,16 @@ describe('OcTextInputPassword', () => {
 
     it('describes the input with the policy rules and their state', () => {
       const wrapper = getPolicyWrapper('ab', false, { 'aria-describedby': 'message-id' })
-      const rulesId = wrapper.find('.oc-text-input-password-policy-rule').element.parentElement.id
-      expect(rulesId).toBeTruthy()
-      expect(wrapper.find('input').attributes('aria-describedby')).toBe(`message-id ${rulesId}`)
+      expect(wrapper.find('input').attributes('aria-describedby')).toBe('message-id policy-rules')
       expect(wrapper.find('.oc-text-input-password-policy-rule .sr-only').text()).toBe(
         'Requirement not met'
       )
     })
     it('keeps the policy rules when the described-by attribute changes', async () => {
       const wrapper = getPolicyWrapper('ab', false)
-      const rulesId = wrapper.find('.oc-text-input-password-policy-rule').element.parentElement.id
-      expect(wrapper.find('input').attributes('aria-describedby')).toBe(rulesId)
+      expect(wrapper.find('input').attributes('aria-describedby')).toBe('policy-rules')
       await wrapper.setProps({ 'aria-describedby': 'message-id' } as any)
-      expect(wrapper.find('input').attributes('aria-describedby')).toBe(`message-id ${rulesId}`)
+      expect(wrapper.find('input').attributes('aria-describedby')).toBe('message-id policy-rules')
     })
     it('announces a met rule', () => {
       const wrapper = getPolicyWrapper('abcdefghij', true)
diff --git a/packages/design-system/src/components/OcTextInputPassword/OcTextInputPassword.vue b/packages/design-system/src/components/OcTextInputPassword/OcTextInputPassword.vue
index 1085a660d0b..3e3f37ffc0e 100644
--- a/packages/design-system/src/components/OcTextInputPassword/OcTextInputPassword.vue
+++ b/packages/design-system/src/components/OcTextInputPassword/OcTextInputPassword.vue
@@ -55,7 +55,7 @@
     </oc-button>
   </div>
   <teleport v-if="showPasswordPolicyInformation" defer :to="`#${teleportId}`">
-    <div :id="passwordPolicyId" class="flex flex-row flex-wrap text-sm pt-2 gap-x-2">
+    <div class="flex flex-row flex-wrap text-sm pt-2 gap-x-2">
       <div
         v-for="(testedRule, index) in testedPasswordPolicy.rules"
         :key="index"
@@ -88,7 +88,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, unref, useAttrs, useId, useTemplateRef, watch } from 'vue'
+import { computed, HTMLAttributes, ref, unref, useAttrs, useTemplateRef, watch } from 'vue'
 import OcIcon from '../OcIcon/OcIcon.vue'
 import OcButton from '../OcButton/OcButton.vue'
 import { useGettext } from 'vue3-gettext'
@@ -136,17 +136,17 @@ const testedPasswordPolicy = computed(() => {
 
 // attrs are not reactive, so these are plain functions evaluated on every render
 const attrs = useAttrs()
-const passwordPolicyId = useId()
 
 function getAriaDescribedBy() {
   const ids = [attrs['aria-describedby'] as string]
-  if (unref(showPasswordPolicyInformation)) {
-    ids.push(passwordPolicyId)
+  // the teleport target only holds the policy rules
+  if (unref(showPasswordPolicyInformation) && teleportId) {
+    ids.push(teleportId)
   }
   return ids.filter(Boolean).join(' ') || undefined
 }
 
-function getAriaInvalid() {
+function getAriaInvalid(): HTMLAttributes['aria-invalid'] {
   const policyFailed =
     unref(showPasswordPolicyInformation) &&
     !!unref(password) &&
@@ -154,7 +154,7 @@ function getAriaInvalid() {
   if (policyFailed) {
     return 'true'
   }
-  return attrs['aria-invalid'] as string
+  return attrs['aria-invalid'] as HTMLAttributes['aria-invalid']
 }
 
 const getPasswordPolicyRuleMessage = (rule: PasswordPolicyRule) => {

From d8f2e5e2db2ab7a144a22d97c594afec74c5b83b Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Wed, 21 Oct 2026 19:57:27 +0200
Subject: [PATCH 16/16] fix: make the filter chip name translatable

---
 .../components/OcFilterChip/OcFilterChip.spec.ts  | 15 +++++++++++++++
 .../src/components/OcFilterChip/OcFilterChip.vue  |  5 ++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/packages/design-system/src/components/OcFilterChip/OcFilterChip.spec.ts b/packages/design-system/src/components/OcFilterChip/OcFilterChip.spec.ts
index e2bf11a99ef..bdb04d76a3f 100644
--- a/packages/design-system/src/components/OcFilterChip/OcFilterChip.spec.ts
+++ b/packages/design-system/src/components/OcFilterChip/OcFilterChip.spec.ts
@@ -1,5 +1,11 @@
 import { defaultPlugins, mount } from '@opencloud-eu/web-test-helpers'
 import OcFilterChip from './OcFilterChip.vue'
+import { useGettext } from 'vue3-gettext'
+
+vi.mock('vue3-gettext', async (importOriginal) => {
+  const original = await importOriginal<typeof import('vue3-gettext')>()
+  return { ...original, useGettext: vi.fn(original.useGettext) }
+})
 
 const selectors = {
   filterChipBtn: '.oc-filter-chip-button',
@@ -32,6 +38,15 @@ describe('OcFilterChip', () => {
         'Users: Einstein +1'
       )
     })
+    it('translates the chip name', () => {
+      const $gettext = vi.fn((msg: string) => msg)
+      vi.mocked(useGettext).mockReturnValueOnce({ $gettext } as any)
+      getWrapper({ props: { selectedItemNames: ['Einstein'] } })
+      expect($gettext).toHaveBeenCalledWith('%{filter}: %{selection}', {
+        filter: 'Users',
+        selection: 'Einstein'
+      })
+    })
     it('keeps the visible label as name without a selection', () => {
       const { wrapper } = getWrapper()
       expect(wrapper.find(selectors.filterChipBtn).attributes('aria-label')).toBeUndefined()
diff --git a/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue b/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
index 56088903b39..5ca1c7acc75 100644
--- a/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
+++ b/packages/design-system/src/components/OcFilterChip/OcFilterChip.vue
@@ -72,6 +72,7 @@
 
 <script setup lang="ts">
 import { computed, unref, useTemplateRef } from 'vue'
+import { useGettext } from 'vue3-gettext'
 import { uniqueId } from '../../helpers'
 import OcDrop from '../OcDrop/OcDrop.vue'
 
@@ -161,6 +162,8 @@ const {
 const emit = defineEmits<Emits>()
 defineSlots<Slot>()
 
+const { $gettext } = useGettext()
+
 const dropRef = useTemplateRef<typeof OcDrop>('dropRef')
 
 const filterActive = computed(() => {
@@ -182,7 +185,7 @@ const selectionLabel = computed(() => {
     selectedItemNames.length > 1
       ? `${selectedItemNames[0]} +${selectedItemNames.length - 1}`
       : selectedItemNames[0]
-  return `${filterLabel}: ${selection}`
+  return $gettext('%{filter}: %{selection}', { filter: filterLabel, selection })
 })
 
 const hideDrop = () => {