feat(CountryFlag): add role prop for accessibility customization

Co-Authored-By: Jozef Képesi <[email protected]>

Author: 2 people

packages/orbit-components/src/CountryFlag/CountryFlag.stories.tsx

@@ -16,6 +16,7 @@ const meta: Meta<typeof CountryFlag> = {
     name: "Country",
     code: CODES.ANYWHERE,
     size: SIZES.SMALL,
+    role: "img",
   },
 
   argTypes: {
@@ -31,6 +32,12 @@ const meta: Meta<typeof CountryFlag> = {
         type: "select",
       },
     },
+    role: {
+      options: ["img", "presentation", "none"],
+      control: {
+        type: "select",
+      },
+    },
   },
 };
 

packages/orbit-components/src/CountryFlag/README.md

@@ -16,13 +16,14 @@ After adding import into your project you can use it simply like:
 
 Table below contains all types of the props available in CountryFlag component.
 
-| Name     | Type            | Default       | Description                          |
-| :------- | :-------------- | :------------ | :----------------------------------- |
-| code     | [`enum`](#enum) | `"undefined"` | Code for the displayed country flag. |
-| dataTest | `string`        |               | Optional prop for testing purposes.  |
-| id       | `string`        |               | Set `id` for `CountryFlag`           |
-| name     | `string`        |               | The name for the flag.               |
-| size     | [`enum`](#enum) | `"medium"`    | The size of the CountryFlag.         |
+| Name     | Type                                             | Default       | Description                          |
+| :------- | :----------------------------------------------- | :------------ | :----------------------------------- |
+| code     | [`enum`](#enum)                                  | `"undefined"` | Code for the displayed country flag. |
+| dataTest | `string`                                         |               | Optional prop for testing purposes.  |
+| id       | `string`                                         |               | Set `id` for `CountryFlag`           |
+| name     | `string`                                         |               | The name for the flag.               |
+| role     | `React.HTMLAttributes<HTMLImageElement>["role"]` | `"img"`       | ARIA role for the flag image.        |
+| size     | [`enum`](#enum)                                  | `"medium"`    | The size of the CountryFlag.         |
 
 ### enum
 

packages/orbit-components/src/CountryFlag/__tests__/index.test.tsx

@@ -81,4 +81,9 @@ describe("CountryFlag", () => {
     );
     expect(wrapper).toHaveStyle({ width: "16px", height: "9px" });
   });
+
+  it("should support custom role", () => {
+    render(<CountryFlag code="us" name="United States" role="presentation" />);
+    expect(screen.getByRole("presentation")).toBeInTheDocument();
+  });
 });

packages/orbit-components/src/CountryFlag/index.tsx

@@ -17,7 +17,7 @@ function getCountryProps(code?: string, name?: string) {
   return { code: countryCode, name: countryName };
 }
 
-const CountryFlag = ({ dataTest, size = SIZES.MEDIUM, id, ...props }: Props) => {
+const CountryFlag = ({ dataTest, size = SIZES.MEDIUM, id, role = "img", ...props }: Props) => {
   const { code, name } = getCountryProps(props.code, props.name);
 
   const width = SIZE_WIDTHS[size];
@@ -40,6 +40,7 @@ const CountryFlag = ({ dataTest, size = SIZES.MEDIUM, id, ...props }: Props) =>
         data-test={dataTest}
         src={src}
         srcSet={srcSet}
+        role={role}
       />
       <div className="rounded-50 shadow-country-flag absolute inset-0 block size-full" />
     </div>

packages/orbit-components/src/CountryFlag/types.d.ts

@@ -1,6 +1,8 @@
 // Type definitions for @kiwicom/orbit-components
 // Project: http://github.com/kiwicom/orbit
 
+import type * as React from "react";
+
 import type * as Common from "../common/types";
 
 export type Size = "small" | "medium";
@@ -9,4 +11,5 @@ export interface Props extends Common.Globals {
   readonly code?: string;
   readonly name?: string;
   readonly size?: Size;
+  readonly role?: React.HTMLAttributes<HTMLImageElement>["role"];
 }