feat(accessibility): sr for error for autosuggest (#2139)

* add current state

* undo changes in noOptionsMessage

* undo changes in autoSuggest

* add comment to explain necessity of custom props for cutom input

* add test for aria-describedy for autosuggest

Author: judithmh

app/components/inputs/autoSuggestInput/__test__/AutoSuggestInput.test.tsx

@@ -13,8 +13,8 @@ const mockedValidate = vi.fn();
 const COMPONENT_NAME = "test-autoSuggestInput";
 const PLACEHOLDER_MOCK = "Test Placeholder";
 
-beforeEach(() => {
-  vi.mocked(useField).mockReturnValue({
+function getMockUseFieldReturnValue() {
+  return {
     getInputProps: vi.fn().mockReturnValue({
       id: COMPONENT_NAME,
       placeholder: PLACEHOLDER_MOCK,
@@ -39,7 +39,11 @@ beforeEach(() => {
     clearError: vi.fn(),
     reset: vi.fn(),
     validate: mockedValidate,
-  });
+  };
+}
+
+beforeEach(() => {
+  vi.mocked(useField).mockReturnValue(getMockUseFieldReturnValue());
 
   vi.spyOn(useDataListOptions, "default").mockReturnValue(
     getDataListOptions("airports"),
@@ -269,4 +273,27 @@ describe("AutoSuggestInput", () => {
     await user.tab();
     expect(input).not.toHaveFocus();
   });
+
+  it("adds aria-describedby to the input when there's an error", () => {
+    const mockField = getMockUseFieldReturnValue();
+    mockField.error.mockReturnValue("required");
+
+    vi.mocked(useField).mockReturnValue(mockField);
+    const { getByRole } = render(
+      <AutoSuggestInput
+        name={COMPONENT_NAME}
+        placeholder="placeholder"
+        dataList="airports"
+        errorMessages={[{ code: "required", text: "Field is required" }]}
+        isDisabled={false}
+      />,
+    );
+
+    const input = getByRole("combobox");
+
+    expect(input).toHaveAttribute(
+      "aria-describedby",
+      `${COMPONENT_NAME}-error`,
+    );
+  });
 });

app/components/inputs/autoSuggestInput/customComponents/CustomInput.tsx

@@ -1,22 +1,39 @@
-import { components, type InputProps } from "react-select";
+import {
+  components,
+  type InputProps,
+  type Props,
+  type GroupBase,
+} from "react-select";
 import type { DataListOptions } from "~/services/dataListOptions/getDataListOptions";
 import { INPUT_CHAR_LIMIT } from "~/services/validation/inputlimits";
 
-const CustomInput = (props: InputProps<DataListOptions, false>) => (
-  <components.Input
-    // avoid to clear the previous auto suggestion input when press enter
-    // this cannot be tested, thus manually tested with device(s)
-    onKeyDown={(e) => {
-      if (e.key === "Enter" && !props.selectProps.menuIsOpen) {
-        e.preventDefault();
-      }
-    }}
-    {...props}
-    maxLength={INPUT_CHAR_LIMIT}
-    aria-required={props.selectProps.className?.includes(
-      "auto-suggest-input-required",
-    )}
-  />
-);
+//Will become obsolete with the next version bump: https://github.com/JedWatson/react-select/pull/6016
+type CustomSelectProps = Props<
+  DataListOptions,
+  false,
+  GroupBase<DataListOptions>
+> & {
+  "aria-describedby": string;
+};
 
+const CustomInput = (props: InputProps<DataListOptions, false>) => {
+  const selectProps = props.selectProps as CustomSelectProps;
+  return (
+    <components.Input
+      // avoid to clear the previous auto suggestion input when press enter
+      // this cannot be tested, thus manually tested with device(s)
+      onKeyDown={(e) => {
+        if (e.key === "Enter" && !props.selectProps.menuIsOpen) {
+          e.preventDefault();
+        }
+      }}
+      {...props}
+      maxLength={INPUT_CHAR_LIMIT}
+      aria-describedby={selectProps["aria-describedby"]}
+      aria-required={props.selectProps.className?.includes(
+        "auto-suggest-input-required",
+      )}
+    />
+  );
+};
 export default CustomInput;