feat(Seat): add aria-labelledby string prop

It receives a string of id(s)
kiwicom · Nov 19, 2024 · 1483f4c · 1483f4c
1 parent 290bf21
commit 1483f4c
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 10 deletions.
diff --git a/packages/orbit-components/src/Seat/README.md b/packages/orbit-components/src/Seat/README.md
@@ -16,8 +16,19 @@ After adding import into your project you can use it simply like:
 
 Table below contains all types of the props available in Seat component.
 
-| title | `string` | | Adds title title to svg element. Announced by screen readers. |
-| description | `string` | | Adds description to svg element. Announced by screen readers. |
+| Name            | Type                    | Default   | Description                                                          |
+| :-------------- | :---------------------- | :-------- | :------------------------------------------------------------------- |
+| dataTest        | `string`                |           | Optional prop for testing purposes.                                  |
+| id              | `string`                |           | `id` of the element.                                                 |
+| size            | [`enum`](#modal-enum)   | `medium`  | Size of Seat component.                                              |
+| type            | [`enum`](#modal-enum)   | `default` | Visual type of Seat. If `unavailable`, the element becomes disabled. |
+| price           | `string`                |           | Price of Seat. Displayed as text underneath the svg.                 |
+| label           | `string`                |           | Label text inside of a Seat. Not announced by **screen readers**.    |
+| selected        | `boolean`               |           | Displays Seat as selected.                                           |
+| onClick         | `() => void \| Promise` |           | Function for handling onClick event.                                 |
+| aria-labelledby | `string`                |           | Id(s) of elements that announce the component to screen readers.     |
+| title           | `string`                |           | Adds title title to svg element. Announced by screen readers.        |
+| description     | `string`                |           | Adds description to svg element. Announced by screen readers.        |
 
 ## SeatLegend
 

diff --git a/packages/orbit-components/src/Seat/Seat.stories.tsx b/packages/orbit-components/src/Seat/Seat.stories.tsx
@@ -14,7 +14,7 @@ const meta: Meta<typeof Seat> = {
   parameters: {
     info: "Seat components stories. Visit Orbit.Kiwi for more detailed guidelines.",
     controls: {
-      exclude: ["onClick"],
+      exclude: ["onClick", "aria-labelledby"],
     },
   },
 
@@ -40,7 +40,7 @@ type Story = StoryObj<typeof Seat>;
 export const Default: Story = {
   parameters: {
     controls: {
-      exclude: ["type", "size", "title", "description", "selected", "onClick"],
+      exclude: ["aria-labelledby", "type", "size", "selected"],
     },
   },
 };
@@ -72,7 +72,7 @@ export const Legend: Story = {
   parameters: {
     info: "SeatLegend component. Check Orbit.Kiwi for more detailed guidelines.",
     controls: {
-      exclude: ["size", "title", "description", "selected", "onClick"],
+      exclude: ["size", "selected", "aria-labelledby"],
     },
   },
 

diff --git a/packages/orbit-components/src/Seat/index.tsx b/packages/orbit-components/src/Seat/index.tsx
@@ -24,10 +24,11 @@ const Seat = ({
   label,
   title,
   description,
+  "aria-labelledby": ariaLabelledBy = "",
 }: Props) => {
   const randomId = useRandomIdSeed();
-  const titleId = randomId("title");
-  const descrId = randomId("descr");
+  const titleId = title ? randomId("title") : "";
+  const descrId = description ? randomId("descr") : "";
   const clickable = type !== TYPES.UNAVAILABLE;
 
   return (
@@ -46,12 +47,12 @@ const Seat = ({
       >
         <svg
           viewBox={size === SIZE_OPTIONS.SMALL ? "0 0 32 36" : "0 0 46 46"}
-          aria-labelledby={`${titleId} ${descrId}`}
+          aria-labelledby={`${[ariaLabelledBy, titleId, descrId].join(" ").trim()}` || undefined}
           fill="none"
           role="img"
         >
-          <title id={titleId}>{title}</title>
-          <desc id={descrId}>{description}</desc>
+          {title && <title id={titleId}>{title}</title>}
+          {description && <desc id={descrId}>{description}</desc>}
 
           {size === SIZE_OPTIONS.SMALL ? (
             <SeatSmall type={type} selected={selected} label={label} />

diff --git a/packages/orbit-components/src/Seat/types.d.ts b/packages/orbit-components/src/Seat/types.d.ts
@@ -19,6 +19,7 @@ export interface Props extends Common.Globals {
   readonly size?: Size;
   readonly title?: string;
   readonly description?: string;
+  readonly "aria-labelledby"?: string;
   readonly onClick?: Common.Callback;
   readonly selected?: boolean;
   readonly label?: React.ReactNode;