feat(IllustrationPrimitive): add role prop to improve accessibility

Author: sarkaaa

packages/orbit-components/src/primitives/IllustrationPrimitive/README.md

@@ -20,14 +20,15 @@ As with every primitive, you should have a good reason to use `IllustrationPrimi
 
 Table below contains all types of the props available in IllustrationPrimitive component.
 
-| Name     | Type                         | Default    | Description                                                                                                                 |
-| :------- | :--------------------------- | :--------- | :-------------------------------------------------------------------------------------------------------------------------- |
-| alt      | `string`                     |            | Optional property for passing own `alt` attribute to the DOM image element. By default, the `name` of illustration is used. |
-| dataTest | `string`                     |            | Optional prop for testing purposes.                                                                                         |
-| id       | `string`                     |            | Set `id` for IllustrationPrimitive                                                                                          |
-| **name** | `string`                     |            | Name for the displayed illustrationPrimitive.                                                                               |
-| size     | [`enum`](#enum)              | `"medium"` | The size of the IllustrationPrimitive.                                                                                      |
-| margin   | `string \| number \| Object` |            | Utility property to set margin.                                                                                             |
+| Name     | Type                         | Default          | Description                                                                                                      |
+| :------- | :--------------------------- | :--------------- | :--------------------------------------------------------------------------------------------------------------- |
+| alt      | `string`                     |                  | Optional property for passing own `alt` attribute to the DOM image element. By default, an empty string is used. |
+| dataTest | `string`                     |                  | Optional prop for testing purposes.                                                                              |
+| id       | `string`                     |                  | Set `id` for IllustrationPrimitive                                                                               |
+| **name** | `string`                     |                  | Name for the displayed illustrationPrimitive.                                                                    |
+| size     | [`enum`](#enum)              | `"medium"`       | The size of the IllustrationPrimitive.                                                                           |
+| margin   | `string \| number \| Object` |                  | Utility property to set margin.                                                                                  |
+| role     | `img\|presentation`          | `"presentation"` | Optional property for a role attribute.                                                                          |
 
 ### enum
 

packages/orbit-components/src/primitives/IllustrationPrimitive/__tests__/index.test.tsx

@@ -21,7 +21,7 @@ describe("IllustrationPrimitive", () => {
       />,
     );
 
-    const img = screen.getByRole("img");
+    const img = screen.getByRole("presentation");
 
     expect(img).toHaveStyle({ maxHeight: "90px" });
     expect(screen.getByAltText("Alternative text")).toBeInTheDocument();
@@ -36,8 +36,8 @@ describe("IllustrationPrimitive", () => {
     screen.getByAltText("");
   });
 
-  it("should have name in alt", () => {
-    render(<IllustrationPrimitive name="Accommodation" />);
-    screen.getByAltText("Accommodation");
+  it("should have alt filled in", () => {
+    render(<IllustrationPrimitive name="Accommodation" alt="Accommodation illustration" />);
+    screen.getByAltText("Accommodation illustration");
   });
 });

packages/orbit-components/src/primitives/IllustrationPrimitive/index.tsx

@@ -39,6 +39,7 @@ const baseURL = "//images.kiwi.com";
 const IllustrationPrimitive = ({
   name,
   alt,
+  role = "presentation",
   margin,
   size = SIZE_OPTIONS.MEDIUM,
   dataTest,
@@ -63,10 +64,11 @@ const IllustrationPrimitive = ({
       srcSet={`${baseURL}/illustrations/0x${
         height * 2
       }/${illustrationPath} 2x, ${baseURL}/illustrations/0x${height * 3}/${illustrationPath} 3x`}
-      alt={typeof alt === "string" ? alt : name}
+      alt={alt}
       data-test={dataTest}
       id={id}
       style={cssVars}
+      role={role}
     />
   );
 };

packages/orbit-components/src/primitives/IllustrationPrimitive/types.d.ts

@@ -7,9 +7,11 @@ import type * as Common from "../../common/types";
 
 export type Size = "extraSmall" | "small" | "medium" | "large" | "display";
 
+// Interface content is fetched from /src/Illustration/TYPESCRIPT_TEMPLATE.template
 export interface Props extends Common.Globals, Common.SpaceAfter {
   readonly size?: Size;
   readonly name: string;
   readonly margin?: React.CSSProperties["margin"] | Common.ObjectProperty;
   readonly alt?: string;
+  readonly role?: "img" | "presentation";
 }

packages/orbit-components/src/primitives/Primitives.stories.tsx

@@ -64,6 +64,8 @@ export const IllustrationPrimitive: Story = {
     size: SIZE_OPTIONS.MEDIUM,
     spaceAfter: SPACINGS_AFTER.SMALL,
     name: "Accommodation",
+    alt: "Accommodation illustration",
+    role: "presentation",
   },
 
   argTypes: {
@@ -85,6 +87,12 @@ export const IllustrationPrimitive: Story = {
         type: "select",
       },
     },
+    role: {
+      options: ["img", "presentation"],
+      control: {
+        type: "select",
+      },
+    },
   },
 };
 
@@ -150,7 +158,6 @@ export const ButtonPrimitive: Story = {
     },
     loading: false,
     padding: "0 10px 0 10px",
-    role: "",
     spaceAfter: SPACINGS_AFTER.SMALL,
     submit: false,
     title: "Button title",