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

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

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/packages/orbit-components/src/Textarea/__tests__/index.test.tsx b/packages/orbit-components/src/Textarea/__tests__/index.test.tsx
@@ -44,6 +44,7 @@ describe("Textarea", () => {
     expect(textarea).toHaveAttribute("maxlength", maxLength.toString());
     expect(textarea).toHaveAttribute("rows", "4");
     expect(textarea).toHaveAttribute("name", name);
+    expect(textarea).not.toBeInvalid();
     expect(textarea.parentElement).toHaveStyle({ marginBottom: "12px" });
     expect(textarea).toHaveStyle({ padding: "12px" });
 
@@ -64,9 +65,13 @@ describe("Textarea", () => {
 
   it("should have error", async () => {
     render(<Textarea error="error" size="small" />);
+    const textarea = screen.getByRole("textbox");
+
     userEvent.tab();
     expect(screen.getByText("error")).toBeInTheDocument();
-    expect(screen.getByRole("textbox")).toHaveStyle({ padding: "8px 12px" });
+    expect(textarea).toHaveStyle({ padding: "8px 12px" });
+    expect(textarea).toBeInvalid();
+    expect(textarea).toHaveDescription("error");
     // Needs to flush async `floating-ui` hooks
     // https://github.com/floating-ui/floating-ui/issues/1520
     await act(async () => {});

diff --git a/packages/orbit-components/src/Textarea/index.tsx b/packages/orbit-components/src/Textarea/index.tsx
@@ -13,6 +13,7 @@ import useErrorTooltip from "../ErrorFormTooltip/hooks/useErrorTooltip";
 import getFieldDataState from "../common/getFieldDataState";
 import mq from "../utils/mediaQuery";
 import type { Props } from "./types";
+import useRandomId from "../hooks/useRandomId";
 
 const Field = styled.label<{ fullHeight?: boolean; spaceAfter?: Common.SpaceAfterSizes }>`
   font-family: ${({ theme }) => theme.orbit.fontFamily};
@@ -145,6 +146,9 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, Props>((props, ref) => {
     required,
   }: Props = props;
 
+  const forID = useRandomId();
+  const inputId = id || forID;
+
   const {
     tooltipShown,
     tooltipShownHover,
@@ -178,7 +182,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, Props>((props, ref) => {
         data-state={getFieldDataState(!!error)}
         data-test={dataTest}
         aria-required={!!required}
-        id={id}
+        id={inputId}
         name={name}
         value={value}
         size={size}
@@ -195,8 +199,11 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, Props>((props, ref) => {
         tabIndex={tabIndex ? Number(tabIndex) : undefined}
         readOnly={readOnly}
         ref={ref}
+        aria-describedby={shown ? `${inputId}-feedback` : undefined}
+        aria-invalid={error ? true : undefined}
       />
       <ErrorFormTooltip
+        id={`${inputId}-feedback`}
         help={help}
         inputSize={size}
         helpClosable={helpClosable}