From 5f4d464d313ec342e7efa8e63a26cca1618bfe5a Mon Sep 17 00:00:00 2001
From: Andrey Morozov <amje@yandex-team.ru>
Date: Mon, 17 Jun 2024 17:32:26 +0300
Subject: [PATCH] chore: fix a11y issues in stories

---
 .../__stories__/ArrowToggle.stories.tsx            | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/ArrowToggle/__stories__/ArrowToggle.stories.tsx b/src/components/ArrowToggle/__stories__/ArrowToggle.stories.tsx
index 1a37548845..41e2976ccc 100644
--- a/src/components/ArrowToggle/__stories__/ArrowToggle.stories.tsx
+++ b/src/components/ArrowToggle/__stories__/ArrowToggle.stories.tsx
@@ -47,9 +47,15 @@ export const Interactive: StoryFn<ArrowToggleProps> = (args) => {
     const direction = directions[directionIndex % directions.length];
 
     return (
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-        <span onClick={() => setDirectionIndex(directionIndex + 1)} style={{cursor: 'pointer'}}>
-            <ArrowToggle {...args} size={32} direction={direction} /> <h3>{direction}</h3>
-        </span>
+        <div>
+            <button
+                onClick={() => setDirectionIndex(directionIndex + 1)}
+                style={{cursor: 'pointer'}}
+                aria-label="Arrow"
+            >
+                <ArrowToggle {...args} size={32} direction={direction} />
+            </button>
+            <h3>{direction}</h3>
+        </div>
     );
 };