feat(CountryFlag): add role prop for accessibility customization

Co-Authored-By: Jozef Képesi <[email protected]>
kiwicom · Dec 19, 2024 · d7afe05 · d7afe05
1 parent 16f1f8a
commit d7afe05
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 1 deletion.
diff --git a/packages/orbit-components/src/CountryFlag/README.md b/packages/orbit-components/src/CountryFlag/README.md
@@ -22,6 +22,7 @@ Table below contains all types of the props available in CountryFlag component.
 | dataTest | `string`        |               | Optional prop for testing purposes.  |
 | id       | `string`        |               | Set `id` for `CountryFlag`           |
 | name     | `string`        |               | The name for the flag.               |
+| role     | `string`        | `"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
@@ -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();
+  });
 });
diff --git 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}
       />
       <div className="rounded-50 shadow-country-flag absolute inset-0 block size-full" />
     </div>

diff --git a/packages/orbit-components/src/CountryFlag/types.d.ts b/packages/orbit-components/src/CountryFlag/types.d.ts
@@ -9,4 +9,5 @@ export interface Props extends Common.Globals {
   readonly code?: string;
   readonly name?: string;
   readonly size?: Size;
+  readonly role?: string;
 }