chore: add aria-label, aria-labelledby attributes and values to compo…

…nents in Storybook
kiwicom · Dec 17, 2024 · 8c6f89a · 8c6f89a
1 parent 160ba28
commit 8c6f89a
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/packages/orbit-components/src/NavigationBar/NavigationBar.stories.tsx b/packages/orbit-components/src/NavigationBar/NavigationBar.stories.tsx
@@ -55,9 +55,13 @@ export const NavigationBarComponent: Story = {
           Flights
         </ButtonLink>
         <Stack direction="row" spacing="100" justify="end" shrink>
-          <ButtonLink iconLeft={<StarFull />} type="secondary" />
-          <ButtonLink iconLeft={<QuestionCircle />} type="secondary" />
-          <ButtonLink iconLeft={<AccountCircle />} type="secondary" />
+          <ButtonLink aria-label="Favourites" iconLeft={<StarFull />} type="secondary" />
+          <ButtonLink
+            aria-label="Questions and Answers"
+            iconLeft={<QuestionCircle />}
+            type="secondary"
+          />
+          <ButtonLink aria-label="Account" iconLeft={<AccountCircle />} type="secondary" />
         </Stack>
       </Stack>
     </NavigationBar>

diff --git a/packages/orbit-components/src/Popover/Popover.stories.tsx b/packages/orbit-components/src/Popover/Popover.stories.tsx
@@ -33,6 +33,9 @@ const listChoiceContent = Array.from({ length: 3 }, (_, idx) => (
 
 const selects = (
   <Stack direction="column">
+    <h2 id="passengers" className="sr-only">
+      Passengers
+    </h2>
     <Stack flex shrink align="center" justify="between">
       <Stack inline direction="column" spacing="none">
         <Text>Adult</Text>
@@ -70,6 +73,8 @@ const meta: Meta<typeof Popover> = {
   args: {
     onOpen: action("open"),
     onClose: action("close"),
+    ariaLabel: "Passengers select",
+    ariaLabelledby: "passengers",
   },
 
   parameters: {
@@ -123,6 +128,8 @@ export const Placement: Story = {
         "renderTimeout",
         "onOpen",
         "onClose",
+        "ariaLabel",
+        "ariaLabelledby",
       ],
     },
   },
@@ -160,6 +167,8 @@ export const OpenedByProp: Story = {
         "renderTimeout",
         "onOpen",
         "onClose",
+        "ariaLabel",
+        "ariaLabelledby",
       ],
     },
   },
@@ -188,6 +197,8 @@ export const Overlapped: Story = {
         "renderTimeout",
         "onOpen",
         "onClose",
+        "ariaLabel",
+        "ariaLabelledby",
       ],
     },
   },
@@ -283,6 +294,8 @@ export const ScrollingPage: Story = {
         "onOpen",
         "onClose",
         "labelClose",
+        "ariaLabel",
+        "ariaLabelledby",
       ],
     },
   },