From 6c6e44e9f25c7919deffbaf8e58a6cfcdc33a222 Mon Sep 17 00:00:00 2001
From: Airike Jaska <95303654+airikej@users.noreply.github.com>
Date: Wed, 29 Jul 2026 09:04:43 +0300
Subject: [PATCH 1/2] fix(search): stop using placeholder as Search region name
 #57

---
 src/tedi/components/form/search/search.spec.tsx | 12 ++++++++++++
 src/tedi/components/form/search/search.tsx      |  7 +++++--
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/tedi/components/form/search/search.spec.tsx b/src/tedi/components/form/search/search.spec.tsx
index f1dee1bc9..d468d5da6 100644
--- a/src/tedi/components/form/search/search.spec.tsx
+++ b/src/tedi/components/form/search/search.spec.tsx
@@ -25,6 +25,18 @@ describe('Search component', () => {
     expect(input).toBeInTheDocument();
   });
 
+  it('does not name the search region with the placeholder (avoids double announcement)', () => {
+    render(<Search {...defaultProps} placeholder="Search by name or keyword" />);
+    const region = screen.getByRole('search');
+    expect(region).toHaveAttribute('aria-label', 'search');
+    expect(region.getAttribute('aria-label')).not.toBe('Search by name or keyword');
+  });
+
+  it('uses the provided ariaLabel as the search region name', () => {
+    render(<Search {...defaultProps} ariaLabel="Search products" />);
+    expect(screen.getByRole('search')).toHaveAttribute('aria-label', 'Search products');
+  });
+
   it('calls onSearch when the search button is clicked', () => {
     render(<Search {...defaultProps} button={{ children: 'Search' }} />);
     const button = screen.getByRole('button', { name: /search/i });
diff --git a/src/tedi/components/form/search/search.tsx b/src/tedi/components/form/search/search.tsx
index 7de2cfdad..484be3024 100644
--- a/src/tedi/components/form/search/search.tsx
+++ b/src/tedi/components/form/search/search.tsx
@@ -73,8 +73,11 @@ export const Search = forwardRef<TextFieldForwardRef, SearchProps>(
       ...(button ? {} : { icon: resolvedSearchIcon }),
     };
 
-    const defaultAriaLabel = placeholder || getLabel('search');
-    const searchAriaLabel = ariaLabel ?? defaultAriaLabel;
+    // Name the search landmark with the generic "search" label rather than the
+    // placeholder. The input already surfaces the placeholder, so reusing it as
+    // the region name makes screen readers announce it twice. Consumers should
+    // set `ariaLabel` to give the region a distinct name (e.g. "Search products").
+    const searchAriaLabel = ariaLabel ?? getLabel('search');
 
     return (
       <div

From 6074c71b359435f571f8b16f842885630ac75a3b Mon Sep 17 00:00:00 2001
From: Airike Jaska <95303654+airikej@users.noreply.github.com>
Date: Wed, 29 Jul 2026 10:25:27 +0300
Subject: [PATCH 2/2] fix(search): cr fixes #57

---
 src/tedi/components/form/search/search.spec.tsx | 5 +++++
 src/tedi/components/form/search/search.tsx      | 4 +++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/tedi/components/form/search/search.spec.tsx b/src/tedi/components/form/search/search.spec.tsx
index d468d5da6..8d3710e31 100644
--- a/src/tedi/components/form/search/search.spec.tsx
+++ b/src/tedi/components/form/search/search.spec.tsx
@@ -37,6 +37,11 @@ describe('Search component', () => {
     expect(screen.getByRole('search')).toHaveAttribute('aria-label', 'Search products');
   });
 
+  it('falls back to the generic label when ariaLabel is an empty string', () => {
+    render(<Search {...defaultProps} ariaLabel="" />);
+    expect(screen.getByRole('search')).toHaveAttribute('aria-label', 'search');
+  });
+
   it('calls onSearch when the search button is clicked', () => {
     render(<Search {...defaultProps} button={{ children: 'Search' }} />);
     const button = screen.getByRole('button', { name: /search/i });
diff --git a/src/tedi/components/form/search/search.tsx b/src/tedi/components/form/search/search.tsx
index 484be3024..16bee3a08 100644
--- a/src/tedi/components/form/search/search.tsx
+++ b/src/tedi/components/form/search/search.tsx
@@ -77,7 +77,9 @@ export const Search = forwardRef<TextFieldForwardRef, SearchProps>(
     // placeholder. The input already surfaces the placeholder, so reusing it as
     // the region name makes screen readers announce it twice. Consumers should
     // set `ariaLabel` to give the region a distinct name (e.g. "Search products").
-    const searchAriaLabel = ariaLabel ?? getLabel('search');
+    // `||` (not `??`) so an empty-string `ariaLabel` also falls back — otherwise
+    // the landmark would render with an empty accessible name.
+    const searchAriaLabel = ariaLabel || getLabel('search');
 
     return (
       <div