feat(SeatLegend): add aria-label string prop

kiwicom · Nov 19, 2024 · 3f7da74 · 3f7da74
1 parent 1483f4c
commit 3f7da74
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 8 deletions.
diff --git a/packages/orbit-components/src/Seat/README.md b/packages/orbit-components/src/Seat/README.md
@@ -34,11 +34,13 @@ Table below contains all types of the props available in Seat component.
 
 Table below contains all types of the props available in Seat/SeatLegend component.
 
-| Name     | Type                  | Default   | Description                         |
-| :------- | :-------------------- | :-------- | :---------------------------------- |
-| dataTest | `string`              |           | Optional prop for testing purposes. |
-| type     | [`enum`](#modal-enum) | `default` | Visual type of SeatLegend           |
-| label    | `string`              |           | Label text inside of a SeatLegend   |
+| Name       | Type                  | Default   | Description                                                                           |
+| :--------- | :-------------------- | :-------- | :------------------------------------------------------------------------------------ |
+| dataTest   | `string`              |           | Optional prop for testing purposes.                                                   |
+| id         | `string`              |           | `id` of the element.                                                                  |
+| type       | [`enum`](#modal-enum) | `default` | Visual type of the rendered seat icon.                                                |
+| label      | `string`              |           | Label text to be displayed next to the seat icon.                                     |
+| aria-label | `string`              |           | Adds `aria-label` attribute to the rendered SVG element. Announced by screen readers. |
 
 ### enum
 

diff --git a/packages/orbit-components/src/Seat/Seat.stories.tsx b/packages/orbit-components/src/Seat/Seat.stories.tsx
@@ -66,7 +66,7 @@ export const Playground: Story = {
   },
 };
 
-export const Legend: Story = {
+export const Legend: StoryObj<typeof SeatLegend> = {
   render: args => <SeatLegend {...args} />,
 
   parameters: {
@@ -78,5 +78,6 @@ export const Legend: Story = {
 
   args: {
     label: "Extra legroom ($ 5.99 – $ 12.98)",
+    "aria-label": "Available seat",
   },
 };
diff --git a/packages/orbit-components/src/Seat/components/SeatLegend/index.tsx b/packages/orbit-components/src/Seat/components/SeatLegend/index.tsx
@@ -8,10 +8,17 @@ import Text from "../../../Text";
 import { TYPES } from "../../consts";
 import type { Props } from "./types";
 
-const SeatLegend = ({ type = TYPES.DEFAULT, label, dataTest }: Props) => {
+const SeatLegend = ({ type = TYPES.DEFAULT, label, dataTest, "aria-label": ariaLabel }: Props) => {
   return (
     <Stack inline align="center" spacing="200">
-      <svg width="16" height="20" viewBox="0 0 16 20" fill="none" data-test={dataTest}>
+      <svg
+        width="16"
+        height="20"
+        viewBox="0 0 16 20"
+        fill="none"
+        data-test={dataTest}
+        aria-label={ariaLabel}
+      >
         <path
           className={cx(
             type === TYPES.LEGROOM && "fill-blue-light-active",

diff --git a/packages/orbit-components/src/Seat/components/SeatLegend/types.d.ts b/packages/orbit-components/src/Seat/components/SeatLegend/types.d.ts
@@ -10,4 +10,5 @@ type Type = "default" | "legroom" | "unavailable";
 export interface Props extends Common.Globals {
   readonly type?: Type;
   readonly label?: React.ReactNode;
+  readonly "aria-label"?: string;
 }