feat(Select): add aria-invalid and aria-describedby

Accessibility properties added to the correct states
kiwicom · Jan 5, 2023 · eb49bb4 · eb49bb4
1 parent 33f4bb6
commit eb49bb4
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 3 deletions.
diff --git a/packages/orbit-components/src/Select/__tests__/Select.test.tsx b/packages/orbit-components/src/Select/__tests__/Select.test.tsx
@@ -57,6 +57,7 @@ describe("Select", () => {
     expect(select).toHaveAttribute("data-state", "ok");
     expect(select).toHaveAttribute("data-recording-ignore");
     expect(select).toHaveAttribute("name", name);
+    expect(select).not.toBeInvalid();
     expect(screen.getByLabelText(label)).toBeInTheDocument();
     expect(screen.getByText(placeholder)).toBeInTheDocument();
 
@@ -82,16 +83,37 @@ describe("Select", () => {
   });
 
   it("should have error message", async () => {
-    render(<Select error="error" readOnly options={[{ value: "1", label: "One" }]} />);
+    render(
+      <Select
+        dataTest="error-select"
+        error="error"
+        readOnly
+        options={[{ value: "1", label: "One" }]}
+      />,
+    );
+    const select = screen.getByTestId("error-select");
+
     userEvent.tab();
     expect(screen.getByText("error")).toBeInTheDocument();
+    expect(select).toBeInvalid();
+    expect(select).toHaveDescription("error");
     await act(async () => {});
   });
 
   it("should have help message", async () => {
-    render(<Select help="help" readOnly options={[{ value: "1", label: "One" }]} />);
+    render(
+      <Select
+        dataTest="help-select"
+        help="help"
+        readOnly
+        options={[{ value: "1", label: "One" }]}
+      />,
+    );
+    const select = screen.getByTestId("help-select");
+
     userEvent.tab();
     expect(screen.getByText("help")).toBeInTheDocument();
+    expect(select).toHaveDescription("help");
     await act(async () => {});
   });
 

diff --git a/packages/orbit-components/src/Select/index.tsx b/packages/orbit-components/src/Select/index.tsx
@@ -14,6 +14,7 @@ import getFieldDataState from "../common/getFieldDataState";
 import useErrorTooltip from "../ErrorFormTooltip/hooks/useErrorTooltip";
 import formElementFocus from "../InputField/helpers/formElementFocus";
 import mq from "../utils/mediaQuery";
+import useRandomId from "../hooks/useRandomId";
 import type { Props } from "./types";
 
 const getSelectSize = ({ theme, size }: { theme: Theme; size: Size }) => {
@@ -42,6 +43,8 @@ interface StyledSelectType extends Partial<Props>, DataAttrs {
   children: React.ReactNode;
   error?: React.ReactNode;
   filled: boolean;
+  ariaDescribedby?: string;
+  ariaInvalid?: boolean;
 }
 
 const StyledSelect = styled(
@@ -62,6 +65,8 @@ const StyledSelect = styled(
         id,
         dataAttrs,
         readOnly,
+        ariaDescribedby,
+        ariaInvalid,
       },
       ref,
     ) => (
@@ -80,6 +85,8 @@ const StyledSelect = styled(
         name={name}
         tabIndex={tabIndex ? Number(tabIndex) : undefined}
         ref={ref}
+        aria-describedby={ariaDescribedby}
+        aria-invalid={ariaInvalid}
         {...dataAttrs}
       >
         {children}
@@ -287,6 +294,9 @@ const Select = React.forwardRef<HTMLSelectElement, Props>((props, ref) => {
   } = props;
   const filled = !(value == null || value === "");
 
+  const forID = useRandomId();
+  const selectId = id || forID;
+
   const {
     tooltipShown,
     tooltipShownHover,
@@ -339,11 +349,13 @@ const Select = React.forwardRef<HTMLSelectElement, Props>((props, ref) => {
           filled={filled}
           customValueText={customValueText}
           tabIndex={tabIndex ? Number(tabIndex) : undefined}
-          id={id}
+          id={selectId}
           readOnly={readOnly}
           required={required}
           ref={ref}
           dataAttrs={dataAttrs}
+          ariaDescribedby={shown ? `${selectId}-feedback` : undefined}
+          ariaInvalid={error ? true : undefined}
         >
           {placeholder && (
             <option label={placeholder.toString()} value="">
@@ -366,6 +378,7 @@ const Select = React.forwardRef<HTMLSelectElement, Props>((props, ref) => {
       </SelectContainer>
       {!insideInputGroup && (
         <ErrorFormTooltip
+          id={`${selectId}-feedback`}
           help={help}
           error={error}
           inputSize={size}