From 89da341a141d657d641df693e1721e23edfa4dc1 Mon Sep 17 00:00:00 2001
From: MT Lewis <mtlewis@users.noreply.github.com>
Date: Mon, 1 Sep 2025 15:28:07 +0100
Subject: [PATCH 1/2] fix(ui): attach aria-label and aria-labelledby props to
 Select component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Select component was accepting aria-label and aria-labelledby props
but not forwarding them to the underlying AriaSelect element, making
them ineffective for accessibility. This fix ensures these props are
properly attached to the rendered element.

🤖 Generated with [Claude Code](https://claude.ai/code)

Signed-off-by: MT Lewis <mtlewis@users.noreply.github.com>
Co-Authored-By: Claude <noreply@anthropic.com>
---
 .changeset/fix-select-aria-props.md          | 5 +++++
 packages/ui/src/components/Select/Select.tsx | 2 ++
 2 files changed, 7 insertions(+)
 create mode 100644 .changeset/fix-select-aria-props.md

diff --git a/.changeset/fix-select-aria-props.md b/.changeset/fix-select-aria-props.md
new file mode 100644
index 0000000000..66bb1de3ad
--- /dev/null
+++ b/.changeset/fix-select-aria-props.md
@@ -0,0 +1,5 @@
+---
+'@backstage/ui': patch
+---
+
+Fix Select component to properly attach aria-label and aria-labelledby props to the rendered element for improved accessibility.
diff --git a/packages/ui/src/components/Select/Select.tsx b/packages/ui/src/components/Select/Select.tsx
index c63e8964ab..f38311b117 100644
--- a/packages/ui/src/components/Select/Select.tsx
+++ b/packages/ui/src/components/Select/Select.tsx
@@ -70,6 +70,8 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
       className={clsx(classNames.root, className)}
       {...dataAttributes}
       ref={ref}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
       {...rest}
     >
       <FieldLabel

From a01ea6da304347c19268736f8dfe0b01d4b4bbfd Mon Sep 17 00:00:00 2001
From: MT Lewis <mtlewis@users.noreply.github.com>
Date: Mon, 1 Sep 2025 15:38:43 +0100
Subject: [PATCH 2/2] feat(ui): add accessibility story for Select component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add story demonstrating aria-label and aria-labelledby props to showcase
the accessibility fix for the Select component.

🤖 Generated with [Claude Code](https://claude.ai/code)

Signed-off-by: MT Lewis <mtlewis@users.noreply.github.com>
Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../src/components/Select/Select.stories.tsx  | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/packages/ui/src/components/Select/Select.stories.tsx b/packages/ui/src/components/Select/Select.stories.tsx
index 5ca84d10f6..5c3ed242dc 100644
--- a/packages/ui/src/components/Select/Select.stories.tsx
+++ b/packages/ui/src/components/Select/Select.stories.tsx
@@ -328,3 +328,34 @@ export const WithLongNamesAndPadding: Story = {
     ),
   ],
 };
+
+export const WithAccessibilityProps: Story = {
+  args: {
+    ...Default.args,
+  },
+  render: args => (
+    <Flex direction="column" gap="4">
+      <div>
+        <h3 style={{ marginBottom: 8 }}>With aria-label</h3>
+        <Select
+          {...args}
+          aria-label="Choose font family"
+          placeholder="Select a font family"
+          name="font-aria"
+        />
+      </div>
+      <div>
+        <h3 style={{ marginBottom: 8 }}>With aria-labelledby</h3>
+        <div id="font-label" style={{ marginBottom: 8, fontWeight: 600 }}>
+          Font Family Selection
+        </div>
+        <Select
+          {...args}
+          aria-labelledby="font-label"
+          placeholder="Select a font family"
+          name="font-labelledby"
+        />
+      </div>
+    </Flex>
+  ),
+};