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