feat(ui): add accessibility story for Select component

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>
This commit is contained in:
MT Lewis
2025-09-01 15:38:43 +01:00
parent 89da341a14
commit a01ea6da30
@@ -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>
),
};