paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 50 Packages Projects Releases Wiki Activity

fix(ui): improve ButtonIcon accessibility in SearchField stories

Browse Source 
Signed-off-by: Sofia Sjöblad <ssjoblad@spotify.com>
This commit is contained in:
Sofia Sjöblad
2025-09-19 10:17:06 +02:00
parent 4c1d163c87
commit 43c80bd9a0
1 changed files with 16 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/components/SearchField/SearchField.stories.tsx
+16 -2
View File
@@ -187,12 +187,14 @@ export const InHeader: Story = {
customActions={
<>
<ButtonIcon
aria-label="Cactus icon button"
icon={<RiCactusLine />}
size="small"
variant="secondary"
/>
<SearchField {...args} size="small" />
<ButtonIcon
aria-label="Cactus icon button"
icon={<RiCactusLine />}
size="small"
variant="secondary"
@@ -222,12 +224,14 @@ export const StartCollapsedInHeader: Story = {
customActions={
<>
<ButtonIcon
aria-label="Cactus icon button"
icon={<RiCactusLine />}
size="small"
variant="secondary"
/>
<SearchField {...args} size="small" />
<ButtonIcon
aria-label="Cactus icon button"
icon={<RiCactusLine />}
size="small"
variant="secondary"
@@ -246,12 +250,22 @@ export const StartCollapsedWithButtons: Story = {
render: args => (
<Flex direction="row" gap="2" style={{ width: '100%', maxWidth: '600px' }}>
<SearchField {...args} size="small" />
<ButtonIcon icon={<RiCactusLine />} size="small" variant="secondary" />
<ButtonIcon
aria-label="Cactus icon button"
icon={<RiCactusLine />}
size="small"
variant="secondary"
/>
<Button size="small" variant="secondary">
Hello world
</Button>
<SearchField {...args} size="medium" />
<ButtonIcon icon={<RiCactusLine />} size="medium" variant="secondary" />
<ButtonIcon
aria-label="Cactus icon button"
icon={<RiCactusLine />}
size="medium"
variant="secondary"
/>
<Button size="medium" variant="secondary">
Hello world
</Button>