From 89242d2bac3bd90db4811ce3ec75e4e48289122a Mon Sep 17 00:00:00 2001
From: Brent Passmore <bpmore@users.noreply.github.com>
Date: Mon, 7 Sep 2026 16:10:53 -0500
Subject: [PATCH 1/3] [6.x] Fix listing search label and empty table header
 cells

The listing search field was hardcoded to "Search entries" and to a fixed
id, so the asset browser and users listing told screen reader users they
were searching entries, and two listings on one page produced duplicate
ids. The select and actions header cells rendered empty.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013YZV7JD2cyMHSeSu2fUXCK
---
 .../js/components/assets/Browser/Browser.vue  |  2 +-
 resources/js/components/assets/Selector.vue   |  2 +-
 resources/js/components/ui/Listing/Search.vue | 12 +++-
 .../js/components/ui/Listing/TableHead.vue    |  5 +-
 .../js/tests/components/ListingSearch.test.js | 59 +++++++++++++++++++
 5 files changed, 74 insertions(+), 6 deletions(-)
 create mode 100644 resources/js/tests/components/ListingSearch.test.js

diff --git a/resources/js/components/assets/Browser/Browser.vue b/resources/js/components/assets/Browser/Browser.vue
index 775094b79c3..b130c9defe0 100644
--- a/resources/js/components/assets/Browser/Browser.vue
+++ b/resources/js/components/assets/Browser/Browser.vue
@@ -84,7 +84,7 @@
 
                             <div class="flex items-center gap-2 sm:gap-3 py-3 relative overflow-clip st-overflow-clip-margin">
                                 <div class="flex flex-1 items-center gap-2 sm:gap-3">
-                                    <ListingSearch />
+                                    <ListingSearch label="Search assets" />
                                     <ListingFilters @filters-updated="filtersUpdated" />
                                 </div>
                                 <ListingCustomizeColumns v-if="mode === 'table'" />
diff --git a/resources/js/components/assets/Selector.vue b/resources/js/components/assets/Selector.vue
index ef93aeb5b7b..37fdb5ee901 100644
--- a/resources/js/components/assets/Selector.vue
+++ b/resources/js/components/assets/Selector.vue
@@ -47,7 +47,7 @@
                         <template #header="{ canUpload, openFileBrowser, canCreateFolders, startCreatingFolder, mode, modeChanged }">
                             <div class="flex items-center gap-2 sm:gap-3 mb-4">
                                 <div class="flex flex-1 items-center gap-2 sm:gap-3">
-                                    <Search ref="search" />
+                                    <Search ref="search" label="Search assets" />
                                 </div>
 
                                 <Button v-if="canUpload" :text="__('Upload')" icon="upload" @click="openFileBrowser" />
diff --git a/resources/js/components/ui/Listing/Search.vue b/resources/js/components/ui/Listing/Search.vue
index 3bae2bbcac4..66d33110d73 100644
--- a/resources/js/components/ui/Listing/Search.vue
+++ b/resources/js/components/ui/Listing/Search.vue
@@ -2,8 +2,14 @@
 import { injectListingContext } from '../Listing/Listing.vue';
 import { Input } from '@ui';
 import debounce from '@/util/debounce.js';
-import { useTemplateRef } from 'vue';
+import { useId, useTemplateRef } from 'vue';
 
+defineProps({
+    /** Accessible label for the search field. Pass the listing's own noun, e.g. "Search assets". */
+    label: { type: String, default: null },
+});
+
+const id = useId();
 const { activeFilterBadgeCount, searchQuery, setSearchQuery, reorderable } = injectListingContext();
 const searchQueryUpdated = debounce((value) => setSearchQuery(value), 300);
 
@@ -15,12 +21,12 @@ defineExpose({ focus });
 
 <template>
     <div class="flex-1 max-w-sm" :class="{ 'max-w-60!': activeFilterBadgeCount > 2 }">
-        <label for="listings-search" class="sr-only">{{ __('Search entries') }}</label>
+        <label :for="id" class="sr-only">{{ label ? __(label) : __('Search') }}</label>
         <Input
             :focus="true"
             ref="input"
             icon="magnifying-glass"
-            id="listings-search"
+            :id="id"
             variant="light"
             clearable
             :placeholder="__('Search...')"
diff --git a/resources/js/components/ui/Listing/TableHead.vue b/resources/js/components/ui/Listing/TableHead.vue
index 2eaf7b28a61..63bbbb023bd 100644
--- a/resources/js/components/ui/Listing/TableHead.vue
+++ b/resources/js/components/ui/Listing/TableHead.vue
@@ -28,13 +28,16 @@ const hasVisibleHeader = computed(() => {
                 scope="col"
             >
                 <ToggleAll v-if="allowsSelections && allowsMultipleSelections" />
+                <span v-else class="sr-only">{{ reorderable ? __('Reorder') : __('Select') }}</span>
             </th>
             <HeaderCell v-for="column in visibleColumns" :key="column.field" :column :data-column="column.field" />
             <!-- <th class="type-column" v-if="type">
                 <template v-if="type === 'entries'">{{ __('Collection') }}</template>
                 <template v-if="type === 'terms'">{{ __('Taxonomy') }}</template>
             </th> -->
-            <th scope="col" class="actions-column" v-if="hasActions" />
+            <th scope="col" class="actions-column" v-if="hasActions">
+                <span class="sr-only">{{ __('Actions') }}</span>
+            </th>
         </tr>
     </thead>
 
diff --git a/resources/js/tests/components/ListingSearch.test.js b/resources/js/tests/components/ListingSearch.test.js
new file mode 100644
index 00000000000..3bb8b9a8a9b
--- /dev/null
+++ b/resources/js/tests/components/ListingSearch.test.js
@@ -0,0 +1,59 @@
+import { mount } from '@vue/test-utils';
+import { expect, test } from 'vitest';
+import { h } from 'vue';
+import * as Globals from '@/bootstrap/globals';
+import Listing from '@/components/ui/Listing/Listing.vue';
+import Search from '@/components/ui/Listing/Search.vue';
+import TableHead from '@/components/ui/Listing/TableHead.vue';
+
+Object.keys(Globals).forEach((fn) => (window[fn] = Globals[fn]));
+
+window.Statamic = {
+    $config: { get: () => undefined },
+    $progress: { loading: () => {}, complete: () => {} },
+    $preferences: { get: () => undefined },
+    $events: { $on: () => {}, $off: () => {}, $emit: () => {} },
+};
+
+const mountInListing = (child, listingProps = {}) =>
+    mount(Listing, { props: { items: [], ...listingProps }, slots: { default: () => child } });
+
+test('the search label defaults to a listing-agnostic string', () => {
+    const wrapper = mountInListing(h(Search));
+
+    expect(wrapper.find('label').text()).toBe('Search');
+});
+
+test('the search label can be set per listing', () => {
+    const wrapper = mountInListing(h(Search, { label: 'Search assets' }));
+
+    expect(wrapper.find('label').text()).toBe('Search assets');
+});
+
+test('the search label is associated with the input', () => {
+    const wrapper = mountInListing(h(Search));
+    const id = wrapper.find('input').attributes('id');
+
+    expect(id).toBeTruthy();
+    expect(wrapper.find('label').attributes('for')).toBe(id);
+});
+
+test('two search fields in the same listing do not share an id', () => {
+    const wrapper = mountInListing(h('div', [h(Search), h(Search)]));
+    const [a, b] = wrapper.findAll('input').map((input) => input.attributes('id'));
+
+    expect(a).toBeTruthy();
+    expect(b).toBeTruthy();
+    expect(a).not.toBe(b);
+});
+
+test('the actions header cell has an accessible name', () => {
+    const wrapper = mountInListing(h(TableHead), {
+        columns: [{ field: 'title', label: 'Title' }],
+        actionUrl: '/cp/collections/pages/actions',
+    });
+    const actionsHeader = wrapper.find('th.actions-column');
+
+    expect(actionsHeader.exists()).toBe(true);
+    expect(actionsHeader.text()).toBe('Actions');
+});

From b2fbafc46ce183c347bc7ea73468a6294a3c680f Mon Sep 17 00:00:00 2001
From: Brent Passmore <bpmore@users.noreply.github.com>
Date: Mon, 7 Sep 2026 21:05:23 -0500
Subject: [PATCH 2/3] Translate the search label at the call site

Follows the CP convention: call sites pass an already-translated string
and the component renders it as given. Search.vue was running __() on the
prop, so once the call sites used __() the string would be translated twice.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013YZV7JD2cyMHSeSu2fUXCK
---
 resources/js/components/assets/Browser/Browser.vue  | 2 +-
 resources/js/components/assets/Selector.vue         | 2 +-
 resources/js/components/ui/Listing/Search.vue       | 4 ++--
 resources/js/tests/components/ListingSearch.test.js | 2 ++
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/assets/Browser/Browser.vue b/resources/js/components/assets/Browser/Browser.vue
index b130c9defe0..d603d716b71 100644
--- a/resources/js/components/assets/Browser/Browser.vue
+++ b/resources/js/components/assets/Browser/Browser.vue
@@ -84,7 +84,7 @@
 
                             <div class="flex items-center gap-2 sm:gap-3 py-3 relative overflow-clip st-overflow-clip-margin">
                                 <div class="flex flex-1 items-center gap-2 sm:gap-3">
-                                    <ListingSearch label="Search assets" />
+                                    <ListingSearch :label="__('Search assets')" />
                                     <ListingFilters @filters-updated="filtersUpdated" />
                                 </div>
                                 <ListingCustomizeColumns v-if="mode === 'table'" />
diff --git a/resources/js/components/assets/Selector.vue b/resources/js/components/assets/Selector.vue
index 37fdb5ee901..73bda146574 100644
--- a/resources/js/components/assets/Selector.vue
+++ b/resources/js/components/assets/Selector.vue
@@ -47,7 +47,7 @@
                         <template #header="{ canUpload, openFileBrowser, canCreateFolders, startCreatingFolder, mode, modeChanged }">
                             <div class="flex items-center gap-2 sm:gap-3 mb-4">
                                 <div class="flex flex-1 items-center gap-2 sm:gap-3">
-                                    <Search ref="search" label="Search assets" />
+                                    <Search ref="search" :label="__('Search assets')" />
                                 </div>
 
                                 <Button v-if="canUpload" :text="__('Upload')" icon="upload" @click="openFileBrowser" />
diff --git a/resources/js/components/ui/Listing/Search.vue b/resources/js/components/ui/Listing/Search.vue
index 66d33110d73..dd09a989aaf 100644
--- a/resources/js/components/ui/Listing/Search.vue
+++ b/resources/js/components/ui/Listing/Search.vue
@@ -5,7 +5,7 @@ import debounce from '@/util/debounce.js';
 import { useId, useTemplateRef } from 'vue';
 
 defineProps({
-    /** Accessible label for the search field. Pass the listing's own noun, e.g. "Search assets". */
+    /** Accessible label for the search field. Already translated, e.g. `:label="__('Search assets')"`. */
     label: { type: String, default: null },
 });
 
@@ -21,7 +21,7 @@ defineExpose({ focus });
 
 <template>
     <div class="flex-1 max-w-sm" :class="{ 'max-w-60!': activeFilterBadgeCount > 2 }">
-        <label :for="id" class="sr-only">{{ label ? __(label) : __('Search') }}</label>
+        <label :for="id" class="sr-only">{{ label || __('Search') }}</label>
         <Input
             :focus="true"
             ref="input"
diff --git a/resources/js/tests/components/ListingSearch.test.js b/resources/js/tests/components/ListingSearch.test.js
index 3bb8b9a8a9b..62638f33c55 100644
--- a/resources/js/tests/components/ListingSearch.test.js
+++ b/resources/js/tests/components/ListingSearch.test.js
@@ -25,6 +25,8 @@ test('the search label defaults to a listing-agnostic string', () => {
 });
 
 test('the search label can be set per listing', () => {
+    // Labels are translated at the call site, e.g. :label="__('Search assets')",
+    // so the component renders the string it is given without translating again.
     const wrapper = mountInListing(h(Search, { label: 'Search assets' }));
 
     expect(wrapper.find('label').text()).toBe('Search assets');

From 7a42fc6f98b4133631ff77aedea8fc64b040a4fe Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Fri, 11 Sep 2026 17:10:34 -0400
Subject: [PATCH 3/3] nitpick. double translate is fine, we do it all over the
 place.

---
 resources/js/components/ui/Listing/Search.vue       | 4 ++--
 resources/js/tests/components/ListingSearch.test.js | 2 --
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/ui/Listing/Search.vue b/resources/js/components/ui/Listing/Search.vue
index dd09a989aaf..66d33110d73 100644
--- a/resources/js/components/ui/Listing/Search.vue
+++ b/resources/js/components/ui/Listing/Search.vue
@@ -5,7 +5,7 @@ import debounce from '@/util/debounce.js';
 import { useId, useTemplateRef } from 'vue';
 
 defineProps({
-    /** Accessible label for the search field. Already translated, e.g. `:label="__('Search assets')"`. */
+    /** Accessible label for the search field. Pass the listing's own noun, e.g. "Search assets". */
     label: { type: String, default: null },
 });
 
@@ -21,7 +21,7 @@ defineExpose({ focus });
 
 <template>
     <div class="flex-1 max-w-sm" :class="{ 'max-w-60!': activeFilterBadgeCount > 2 }">
-        <label :for="id" class="sr-only">{{ label || __('Search') }}</label>
+        <label :for="id" class="sr-only">{{ label ? __(label) : __('Search') }}</label>
         <Input
             :focus="true"
             ref="input"
diff --git a/resources/js/tests/components/ListingSearch.test.js b/resources/js/tests/components/ListingSearch.test.js
index 62638f33c55..3bb8b9a8a9b 100644
--- a/resources/js/tests/components/ListingSearch.test.js
+++ b/resources/js/tests/components/ListingSearch.test.js
@@ -25,8 +25,6 @@ test('the search label defaults to a listing-agnostic string', () => {
 });
 
 test('the search label can be set per listing', () => {
-    // Labels are translated at the call site, e.g. :label="__('Search assets')",
-    // so the component renders the string it is given without translating again.
     const wrapper = mountInListing(h(Search, { label: 'Search assets' }));
 
     expect(wrapper.find('label').text()).toBe('Search assets');