From 43c80bd9a00cb568fb7866a0e1652e40c5e0d429 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sofia=20Sj=C3=B6blad?= <ssjoblad@spotify.com>
Date: Fri, 19 Sep 2025 10:17:06 +0200
Subject: [PATCH] fix(ui): improve ButtonIcon accessibility in SearchField
 stories
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Sofia Sjöblad <ssjoblad@spotify.com>
---
 .../SearchField/SearchField.stories.tsx        | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/SearchField/SearchField.stories.tsx b/packages/ui/src/components/SearchField/SearchField.stories.tsx
index 845b15c1b7..a811d2a451 100644
--- a/packages/ui/src/components/SearchField/SearchField.stories.tsx
+++ b/packages/ui/src/components/SearchField/SearchField.stories.tsx
@@ -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>