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", "true");
+ });
+
+ it("has aria-required attribute set to false if errorMessages do not 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(
+ ,
+ );
+ const element = screen.getByRole("textbox");
+ expect(element).toHaveAttribute("aria-required", "true");
+ });
+
+ it("has aria-required attribute set to false if errorMessages do not contain inputRequired", () => {
+ render(
+ ,
+ );
+ const element = screen.getByRole("textbox");
+ expect(element).toHaveAttribute("aria-required", "false");
+ });
+ });
});