From 4fb15d223ea63f38b7bdec1f1637be32a85b2706 Mon Sep 17 00:00:00 2001
From: Johan Persson <johanopersson@gmail.com>
Date: Thu, 15 Jan 2026 15:32:10 +0100
Subject: [PATCH] fix(ui): add missing aria-label to SearchField components

Add aria-label attributes to SearchField components to fix
accessibility warnings from React Aria.

- Select: add aria-label to SearchField using searchPlaceholder
- MenuAutocomplete: add aria-label to RASearchField, remove
  redundant aria-label from RAInput
- MenuAutocompleteListbox: same as MenuAutocomplete

Per React Aria docs, aria-label should be on SearchField, not
the child Input.

Signed-off-by: Johan Persson <johanopersson@gmail.com>
---
 .changeset/bumpy-carrots-stare.md                   | 7 +++++++
 packages/ui/src/components/Menu/Menu.tsx            | 4 ++--
 packages/ui/src/components/Select/SelectContent.tsx | 1 +
 3 files changed, 10 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/bumpy-carrots-stare.md

diff --git a/.changeset/bumpy-carrots-stare.md b/.changeset/bumpy-carrots-stare.md
new file mode 100644
index 0000000000..9b3c39fcf1
--- /dev/null
+++ b/.changeset/bumpy-carrots-stare.md
@@ -0,0 +1,7 @@
+---
+'@backstage/ui': patch
+---
+
+Added missing `aria-label` attributes to `SearchField` components in `Select`, `MenuAutocomplete`, and `MenuAutocompleteListbox` to fix accessibility warnings.
+
+Affected components: Select, MenuAutocomplete, MenuAutocompleteListbox
diff --git a/packages/ui/src/components/Menu/Menu.tsx b/packages/ui/src/components/Menu/Menu.tsx
index 12048776be..75cdbe5e21 100644
--- a/packages/ui/src/components/Menu/Menu.tsx
+++ b/packages/ui/src/components/Menu/Menu.tsx
@@ -255,13 +255,13 @@ export const MenuAutocomplete = (props: MenuAutocompleteProps<object>) => {
               classNames.searchField,
               styles[classNames.searchField],
             )}
+            aria-label={props.placeholder || 'Search'}
           >
             <RAInput
               className={clsx(
                 classNames.searchFieldInput,
                 styles[classNames.searchFieldInput],
               )}
-              aria-label="Search"
               placeholder={props.placeholder || 'Search...'}
             />
             <RAButton
@@ -334,13 +334,13 @@ export const MenuAutocompleteListbox = (
             classNames.searchField,
             styles[classNames.searchField],
           )}
+          aria-label={props.placeholder || 'Search'}
         >
           <RAInput
             className={clsx(
               classNames.searchFieldInput,
               styles[classNames.searchFieldInput],
             )}
-            aria-label="Search"
             placeholder={props.placeholder || 'Search...'}
           />
           <RAButton
diff --git a/packages/ui/src/components/Select/SelectContent.tsx b/packages/ui/src/components/Select/SelectContent.tsx
index 7f63ad2a0a..b14acb3c48 100644
--- a/packages/ui/src/components/Select/SelectContent.tsx
+++ b/packages/ui/src/components/Select/SelectContent.tsx
@@ -55,6 +55,7 @@ export function SelectContent({
           classNames.searchWrapper,
           styles[classNames.searchWrapper],
         )}
+        aria-label={searchPlaceholder}
       >
         <Input
           placeholder={searchPlaceholder}