Merge pull request #31037 from backstage/fix/select-aria-props

ui: include `aria-` props on `Select` component

.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.

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>
+  ),
+};

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