Feat/add aria required for screen readers

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 && <option value="">{placeholder}</option>}
         {options.map((option) => {

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")}
       />
       <InputError id={errorId}>
         {errorMessages?.find((err) => err.code === error)?.text ?? error}

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(
+        <Select
+          name="select"
+          options={[]}
+          label="Test Label"
+          formId="formId"
+          errorMessages={[{ code: "required", text: "error" }]}
+        />,
+      );
+      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(
+        <Select
+          name="select"
+          options={[]}
+          label="Test Label"
+          formId="formId"
+          errorMessages={undefined}
+        />,
+      );
+      const element = screen.getByRole("combobox");
+      expect(element).toHaveAttribute("aria-required", "false");
+    });
+  });
 });

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(
+        <Textarea
+          name="test"
+          errorMessages={[{ code: "required", text: "error" }]}
+          formId="formId"
+        />,
+      );
+      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(
+        <Textarea name="test" errorMessages={undefined} formId="formId" />,
+      );
+      const element = screen.getByRole("textbox");
+      expect(element).toHaveAttribute("aria-required", "false");
+    });
+  });
 });