Revert "Add aria-invalid and aria-describedby to form components (#3706…

…)" This reverts commit 8a29fe6.
kiwicom · Jan 5, 2023 · a7be870 · a7be870
1 parent 8a29fe6
commit a7be870
Show file tree

Hide file tree

Showing 6 changed files with 7 additions and 75 deletions.
diff --git a/packages/orbit-components/src/InputField/__tests__/index.test.tsx b/packages/orbit-components/src/InputField/__tests__/index.test.tsx
@@ -59,7 +59,6 @@ describe("InputField", () => {
     expect(input).toHaveAttribute("data-recording-ignore");
     expect(input).toHaveAttribute("id", "id");
     expect(input).toHaveAttribute("data-state", "ok");
-    expect(input).not.toBeInvalid();
     expect(screen.getByTestId("test")).toBeInTheDocument();
     expect(screen.getByTestId("prefix")).toBeInTheDocument();
     expect(screen.getByTestId("suffix")).toBeInTheDocument();
@@ -143,12 +142,10 @@ describe("InputField", () => {
       expect(input).toHaveAttribute("min", "1");
       expect(input).toHaveAttribute("max", "5");
       expect(input).toHaveAttribute("data-state", "error");
-      expect(input).toBeInvalid();
 
       userEvent.tab();
       expect(screen.queryByTestId("help")).not.toBeInTheDocument();
       expect(screen.getByTestId("error")).toBeInTheDocument();
-      expect(input).toHaveDescription("Something went wrong.");
       // 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/InputField/index.tsx b/packages/orbit-components/src/InputField/index.tsx
@@ -255,26 +255,12 @@ interface StyledInputProps extends Partial<Props> {
   autoCorrect: string;
   autoCapitalize: string;
   ariaLabelledby?: string;
-  ariaDescribedby?: string;
-  ariaInvalid?: boolean;
 }
 
 export const Input = styled(
   React.forwardRef<HTMLInputElement, StyledInputProps>(
     (
-      {
-        type,
-        size,
-        error,
-        help,
-        inlineLabel,
-        dataAttrs,
-        required,
-        ariaLabelledby,
-        ariaDescribedby,
-        ariaInvalid,
-        ...props
-      },
+      { type, size, error, help, inlineLabel, dataAttrs, required, ariaLabelledby, ...props },
       ref,
     ) => {
       return (
@@ -289,8 +275,6 @@ export const Input = styled(
           aria-required={required}
           // in case when there is no label
           aria-labelledby={ariaLabelledby}
-          aria-describedby={ariaDescribedby}
-          aria-invalid={ariaInvalid}
         />
       );
     },
@@ -517,8 +501,6 @@ const InputField = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
             ref={ref}
             tabIndex={tabIndex}
             ariaLabelledby={!label ? inputId : undefined}
-            ariaDescribedby={shown ? `${inputId}-feedback` : undefined}
-            ariaInvalid={error ? true : undefined}
             inlineLabel={inlineLabel}
             readOnly={readOnly}
             autoCapitalize="off"
@@ -535,7 +517,7 @@ const InputField = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
         {!insideInputGroup && (
           <ErrorFormTooltip
             help={help}
-            id={`${inputId}-feedback`}
+            id={inputId}
             shown={shown}
             helpClosable={helpClosable}
             onShown={setTooltipShown}

diff --git a/packages/orbit-components/src/Select/__tests__/Select.test.tsx b/packages/orbit-components/src/Select/__tests__/Select.test.tsx
@@ -57,7 +57,6 @@ 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();
 
@@ -83,37 +82,16 @@ describe("Select", () => {
   });
 
   it("should have error message", async () => {
-    render(
-      <Select
-        dataTest="error-select"
-        error="error"
-        readOnly
-        options={[{ value: "1", label: "One" }]}
-      />,
-    );
-    const select = screen.getByTestId("error-select");
-
+    render(<Select error="error" readOnly options={[{ value: "1", label: "One" }]} />);
     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
-        dataTest="help-select"
-        help="help"
-        readOnly
-        options={[{ value: "1", label: "One" }]}
-      />,
-    );
-    const select = screen.getByTestId("help-select");
-
+    render(<Select help="help" readOnly options={[{ value: "1", label: "One" }]} />);
     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,7 +14,6 @@ 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 }) => {
@@ -43,8 +42,6 @@ interface StyledSelectType extends Partial<Props>, DataAttrs {
   children: React.ReactNode;
   error?: React.ReactNode;
   filled: boolean;
-  ariaDescribedby?: string;
-  ariaInvalid?: boolean;
 }
 
 const StyledSelect = styled(
@@ -65,8 +62,6 @@ const StyledSelect = styled(
         id,
         dataAttrs,
         readOnly,
-        ariaDescribedby,
-        ariaInvalid,
       },
       ref,
     ) => (
@@ -85,8 +80,6 @@ const StyledSelect = styled(
         name={name}
         tabIndex={tabIndex ? Number(tabIndex) : undefined}
         ref={ref}
-        aria-describedby={ariaDescribedby}
-        aria-invalid={ariaInvalid}
         {...dataAttrs}
       >
         {children}
@@ -294,9 +287,6 @@ const Select = React.forwardRef<HTMLSelectElement, Props>((props, ref) => {
   } = props;
   const filled = !(value == null || value === "");
 
-  const forID = useRandomId();
-  const selectId = id || forID;
-
   const {
     tooltipShown,
     tooltipShownHover,
@@ -349,13 +339,11 @@ const Select = React.forwardRef<HTMLSelectElement, Props>((props, ref) => {
           filled={filled}
           customValueText={customValueText}
           tabIndex={tabIndex ? Number(tabIndex) : undefined}
-          id={selectId}
+          id={id}
           readOnly={readOnly}
           required={required}
           ref={ref}
           dataAttrs={dataAttrs}
-          ariaDescribedby={shown ? `${selectId}-feedback` : undefined}
-          ariaInvalid={error ? true : undefined}
         >
           {placeholder && (
             <option label={placeholder.toString()} value="">
@@ -378,7 +366,6 @@ const Select = React.forwardRef<HTMLSelectElement, Props>((props, ref) => {
       </SelectContainer>
       {!insideInputGroup && (
         <ErrorFormTooltip
-          id={`${selectId}-feedback`}
           help={help}
           error={error}
           inputSize={size}

diff --git a/packages/orbit-components/src/Textarea/__tests__/index.test.tsx b/packages/orbit-components/src/Textarea/__tests__/index.test.tsx
@@ -44,7 +44,6 @@ 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" });
 
@@ -65,13 +64,9 @@ 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(textarea).toHaveStyle({ padding: "8px 12px" });
-    expect(textarea).toBeInvalid();
-    expect(textarea).toHaveDescription("error");
+    expect(screen.getByRole("textbox")).toHaveStyle({ padding: "8px 12px" });
     // 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,7 +13,6 @@ 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};
@@ -146,9 +145,6 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, Props>((props, ref) => {
     required,
   }: Props = props;
 
-  const forID = useRandomId();
-  const inputId = id || forID;
-
   const {
     tooltipShown,
     tooltipShownHover,
@@ -182,7 +178,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, Props>((props, ref) => {
         data-state={getFieldDataState(!!error)}
         data-test={dataTest}
         aria-required={!!required}
-        id={inputId}
+        id={id}
         name={name}
         value={value}
         size={size}
@@ -199,11 +195,8 @@ 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}