diff --git a/packages/orbit-components/src/CountryFlag/CountryFlag.stories.tsx b/packages/orbit-components/src/CountryFlag/CountryFlag.stories.tsx index 39ac02994e..9fe2c3c1f4 100644 --- a/packages/orbit-components/src/CountryFlag/CountryFlag.stories.tsx +++ b/packages/orbit-components/src/CountryFlag/CountryFlag.stories.tsx @@ -16,6 +16,7 @@ const meta: Meta = { name: "Country", code: CODES.ANYWHERE, size: SIZES.SMALL, + role: "img", }, argTypes: { @@ -31,6 +32,12 @@ const meta: Meta = { type: "select", }, }, + role: { + options: ["img", "presentation", "none"], + control: { + type: "select", + }, + }, }, }; diff --git a/packages/orbit-components/src/CountryFlag/README.md b/packages/orbit-components/src/CountryFlag/README.md index 8ca159df50..f472c14101 100644 --- a/packages/orbit-components/src/CountryFlag/README.md +++ b/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["role"]` | `"img"` | ARIA role for the flag image. | +| size | [`enum`](#enum) | `"medium"` | The size of the CountryFlag. | ### enum diff --git a/packages/orbit-components/src/CountryFlag/__tests__/index.test.tsx b/packages/orbit-components/src/CountryFlag/__tests__/index.test.tsx index 8e62e194bd..0fd25f7581 100644 --- a/packages/orbit-components/src/CountryFlag/__tests__/index.test.tsx +++ b/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(); + expect(screen.getByRole("presentation")).toBeInTheDocument(); + }); }); diff --git a/packages/orbit-components/src/CountryFlag/index.tsx b/packages/orbit-components/src/CountryFlag/index.tsx index b6f4587228..ac244d360c 100644 --- a/packages/orbit-components/src/CountryFlag/index.tsx +++ b/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} />
diff --git a/packages/orbit-components/src/CountryFlag/types.d.ts b/packages/orbit-components/src/CountryFlag/types.d.ts index eef4496139..028b57a7e9 100644 --- a/packages/orbit-components/src/CountryFlag/types.d.ts +++ b/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["role"]; }