diff --git a/app/components/inputs/Select.tsx b/app/components/inputs/Select.tsx index 255fbb5cc..873fdb618 100644 --- a/app/components/inputs/Select.tsx +++ b/app/components/inputs/Select.tsx @@ -47,6 +47,7 @@ const Select = ({ aria-invalid={error !== undefined} aria-describedby={error && errorId} aria-errormessage={error && errorId} + aria-required={!!errorMessages?.find((err) => err.code === "required")} > {placeholder && } {options.map((option) => { diff --git a/app/components/inputs/Textarea.tsx b/app/components/inputs/Textarea.tsx index e85389382..645d96682 100644 --- a/app/components/inputs/Textarea.tsx +++ b/app/components/inputs/Textarea.tsx @@ -75,6 +75,7 @@ const Textarea = ({ aria-invalid={error !== undefined} aria-describedby={error && errorId} aria-errormessage={error && errorId} + aria-required={!!errorMessages?.find((err) => err.code === "required")} /> {errorMessages?.find((err) => err.code === error)?.text ?? error} diff --git a/app/components/inputs/__test__/Select.test.tsx b/app/components/inputs/__test__/Select.test.tsx index e1b7ae179..6fdb0c6b7 100644 --- a/app/components/inputs/__test__/Select.test.tsx +++ b/app/components/inputs/__test__/Select.test.tsx @@ -1,4 +1,4 @@ -import { render } from "@testing-library/react"; +import { render, screen } from "@testing-library/react"; import * as remixValidatedForm from "remix-validated-form"; import type { SelectProps } from "../Select"; import Select from "../Select"; @@ -57,4 +57,34 @@ describe("Select", () => { ); }, ); + + describe("Select field with aria-required attribute", () => { + it("has aria-required attribute set to true if errorMessages contain inputRequired", () => { + render( + , + ); + const element = screen.getByRole("combobox"); + expect(element).toHaveAttribute("aria-required", "false"); + }); + }); }); diff --git a/app/components/inputs/__test__/Textarea.test.tsx b/app/components/inputs/__test__/Textarea.test.tsx index 6dbd37858..1e5f48d3d 100644 --- a/app/components/inputs/__test__/Textarea.test.tsx +++ b/app/components/inputs/__test__/Textarea.test.tsx @@ -186,4 +186,26 @@ describe("Textarea component", () => { expect(textarea.getAttribute("maxLength")).toBe(maxLength.toString()); }); + + describe("Textarea field with aria-required attribute", () => { + it("has aria-required attribute set to true if errorMessages contain inputRequired", () => { + render( +