fix(search): update search landmark labeling to use aria-labelledby (#22347)

kennylam · web-flow · commit 37dff96938e3 · 2026-06-01T16:45:51.000Z
* fix(search): update search to use aria-labelledby

* chore(story): update story search label

* chore(jest): update snapshots
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -537,7 +537,7 @@ exports[`DataTable behaves as expected selection should render and match snapsho
         class="cds--toolbar-content"
       >
         <div
-          aria-label="Filter table"
+          aria-labelledby="custom-id-search"
           class="cds--search cds--toolbar-search-container-persistent"
           role="search"
         >
@@ -987,7 +987,7 @@ exports[`DataTable renders as expected - Component API should render and match s
         class="cds--toolbar-content"
       >
         <div
-          aria-label="Filter table"
+          aria-labelledby="custom-id-search"
           class="cds--search cds--toolbar-search-container-persistent"
           role="search"
         >
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarSearch-test.js.snap
@@ -3,7 +3,7 @@
 exports[`TableToolbarSearch renders as expected - Component API should render 1`] = `
 <div>
   <div
-    aria-label="Filter table"
+    aria-labelledby="custom-id-search"
     class="cds--search custom-class cds--toolbar-search-container-expandable"
     role="search"
   >
diff --git a/packages/react/src/components/Search/Search-test.js b/packages/react/src/components/Search/Search-test.js
@@ -21,6 +21,30 @@ const contentScenarios = [
 
 describe('Search', () => {
   describe('renders as expected - Component API', () => {
+    it('should label the search landmark using labelText via aria-labelledby', () => {
+      render(<Search labelText="Search A" />);
+
+      expect(
+        screen.getByRole('search', { name: 'Search A' })
+      ).toBeInTheDocument();
+    });
+
+    it('should give each search landmark a unique accessible name when labelText differs', () => {
+      render(
+        <>
+          <Search labelText="Search A" />
+          <Search labelText="Search B" />
+        </>
+      );
+
+      expect(
+        screen.getByRole('search', { name: 'Search A' })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole('search', { name: 'Search B' })
+      ).toBeInTheDocument();
+    });
+
     it('should spread extra props onto the input element', () => {
       render(<Search labelText="test-search" data-testid="test-id" />);
 
diff --git a/packages/react/src/components/Search/Search.stories.js b/packages/react/src/components/Search/Search.stories.js
@@ -21,7 +21,7 @@ export default {
     closeButtonLabelText: 'Clear search input',
     disabled: false,
     defaultWidth: 800,
-    labelText: 'Search',
+    labelText: 'Site search',
     placeholder: 'Placeholder text',
     size: 'md',
     type: 'search',
diff --git a/packages/react/src/components/Search/Search.tsx b/packages/react/src/components/Search/Search.tsx
@@ -282,7 +282,7 @@ const Search = React.forwardRef<HTMLInputElement, SearchProps>(
       );
 
     return (
-      <div role="search" aria-label={placeholder} className={searchClasses}>
+      <div role="search" aria-labelledby={searchId} className={searchClasses}>
         {magnifierWithTooltip}
         {/* the magnifier is used in ExpandableSearch as a click target to expand,
       however, it does not need a keyboard event bc the input element gets focus on keyboard nav and expands that way*/}

Original file line number	Diff line number	Diff line change
@@ -537,7 +537,7 @@ exports[`DataTable behaves as expected selection should render and match snapsho
`537`	`537`	`class="cds--toolbar-content"`
`538`	`538`	`>`
`539`	`539`	`<div`
`540`		`- aria-label="Filter table"`
	`540`	`+ aria-labelledby="custom-id-search"`
`541`	`541`	`class="cds--search cds--toolbar-search-container-persistent"`
`542`	`542`	`role="search"`
`543`	`543`	`>`
@@ -987,7 +987,7 @@ exports[`DataTable renders as expected - Component API should render and match s
`987`	`987`	`class="cds--toolbar-content"`
`988`	`988`	`>`
`989`	`989`	`<div`
`990`		`- aria-label="Filter table"`
	`990`	`+ aria-labelledby="custom-id-search"`
`991`	`991`	`class="cds--search cds--toolbar-search-container-persistent"`
`992`	`992`	`role="search"`
`993`	`993`	`>`
Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@`
`3`	`3`	exports[`TableToolbarSearch renders as expected - Component API should render 1`] = `
`4`	`4`	`<div>`
`5`	`5`	`<div`
`6`		`- aria-label="Filter table"`
	`6`	`+ aria-labelledby="custom-id-search"`
`7`	`7`	`class="cds--search custom-class cds--toolbar-search-container-expandable"`
`8`	`8`	`role="search"`
`9`	`9`	`>`