From 0feb6771386e5c944fbdc1ed9510e35c3a09c600 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tommy=20Jos=C3=A9povic?= <tommy.josepovic@gsoft.com>
Date: Tue, 5 Sep 2023 16:56:09 -0400
Subject: [PATCH 1/5] Remove accessibility warning when a label element is
 present

---
 .../src/number-input/src/NumberInput.tsx      | 14 +++--
 .../tests/jest/NumberInput.test.tsx           | 55 +++++++++++++++++++
 .../components/src/shared/src/assertions.ts   |  2 +-
 .../components/src/text-area/src/TextArea.tsx | 14 +++--
 .../text-area/tests/jest/TextArea.test.tsx    | 55 +++++++++++++++++++
 .../src/text-input/src/TextInput.tsx          | 18 +++---
 .../text-input/tests/jest/TextInput.test.tsx  | 55 +++++++++++++++++++
 7 files changed, 195 insertions(+), 18 deletions(-)

diff --git a/packages/components/src/number-input/src/NumberInput.tsx b/packages/components/src/number-input/src/NumberInput.tsx
index f422a54db..5e76a7999 100644
--- a/packages/components/src/number-input/src/NumberInput.tsx
+++ b/packages/components/src/number-input/src/NumberInput.tsx
@@ -1,6 +1,6 @@
 import { AbstractInputProps, adaptInputStylingProps, useInput, useInputIcon, useInputSpinner } from "../../input";
 import { Box, BoxProps } from "../../box";
-import { ChangeEvent, ComponentProps, FocusEvent, FocusEventHandler, MouseEvent, ReactElement, Ref, SyntheticEvent, forwardRef, useCallback, useMemo } from "react";
+import { ChangeEvent, ComponentProps, FocusEvent, FocusEventHandler, MouseEvent, ReactElement, Ref, SyntheticEvent, forwardRef, useCallback, useEffect, useMemo } from "react";
 import { Div, HtmlButton } from "../../html";
 import {
     OmitInternalProps,
@@ -201,10 +201,6 @@ export function InnerNumberInput(props: InnerNumberInputProps) {
         ...rest
     } = adaptInputStylingProps(props, contextualProps);
 
-    if (isNil(ariaLabel) && isNil(ariaLabelledBy) && isNil(placeholder)) {
-        console.error("An input component must either have an \"aria-label\" attribute, an \"aria-labelledby\" attribute or a \"placeholder\" attribute.");
-    }
-
     const fluidValue = useResponsiveValue(fluid);
 
     const [inputValueRef, setInputValue] = useRefState("");
@@ -335,6 +331,14 @@ export function InnerNumberInput(props: InnerNumberInputProps) {
         value: inputValueRef.current
     });
 
+    useEffect(() => {
+        const input = inputRef.current;
+
+        if (isNil(ariaLabel) && isNil(ariaLabelledBy) && isNil(placeholder) && isNilOrEmpty(input.labels)) {
+            console.error("An input component must either have a <label> element, a \"aria-label\" attribute, an \"aria-labelledby\" attribute or a \"placeholder\" attribute.");
+        }
+    });
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const numericInputValue = useMemo(() => toNumber(inputValueRef.current), [inputValueRef.current]);
 
diff --git a/packages/components/src/number-input/tests/jest/NumberInput.test.tsx b/packages/components/src/number-input/tests/jest/NumberInput.test.tsx
index 4b2011ba3..5fa0ae2ee 100644
--- a/packages/components/src/number-input/tests/jest/NumberInput.test.tsx
+++ b/packages/components/src/number-input/tests/jest/NumberInput.test.tsx
@@ -1,9 +1,14 @@
 import { Field, Label } from "@components/field";
 import { act, screen, waitFor, renderWithTheme } from "@test-utils";
 import { NumberInput } from "@components/number-input";
+import { Text } from "@components/typography";
 import { createRef } from "react";
 import userEvent from "@testing-library/user-event";
 
+afterEach(() => {
+    jest.clearAllMocks();
+});
+
 // ***** Behaviors *****
 
 test("accept numbers", async () => {
@@ -574,3 +579,53 @@ test("set ref once", async () => {
 
     await waitFor(() => expect(handler).toHaveBeenCalledTimes(1));
 });
+
+// ***** Accessibility *****
+
+test("logs an error when label is missing", async () => {
+    const spy = jest.spyOn(console, "error");
+
+    renderWithTheme(<NumberInput />);
+
+    expect(spy).toHaveBeenCalled();
+});
+
+test("does not log an error when a label is present", async () => {
+    const spy = jest.spyOn(console, "error");
+
+    renderWithTheme(
+        <Label>
+            Label
+            <NumberInput />
+        </Label>
+    );
+
+    expect(spy).not.toHaveBeenCalled();
+
+    renderWithTheme(
+        <>
+            <Label htmlFor="test">Label</Label>
+            <NumberInput id="test" />
+        </>
+    );
+
+    expect(spy).not.toHaveBeenCalled();
+
+    renderWithTheme(<NumberInput id="test" aria-label="Label" />);
+
+    expect(spy).not.toHaveBeenCalled();
+
+    renderWithTheme(<NumberInput id="test" placeholder="Label" />);
+
+    expect(spy).not.toHaveBeenCalled();
+
+    renderWithTheme(
+        <>
+            <Text id="label">Label</Text>
+            <NumberInput aria-labelledby="label" />
+        </>
+    );
+
+    expect(spy).not.toHaveBeenCalled();
+});
+
diff --git a/packages/components/src/shared/src/assertions.ts b/packages/components/src/shared/src/assertions.ts
index 5ae2a6719..b26ad3a8b 100644
--- a/packages/components/src/shared/src/assertions.ts
+++ b/packages/components/src/shared/src/assertions.ts
@@ -15,7 +15,7 @@ export function isNil(value: any): value is null | undefined {
 }
 
 export function isNilOrEmpty(value: any) {
-    return isNil(value) || value === "";
+    return isNil(value) || value.length === 0;
 }
 
 export function isString(value: any): value is string {
diff --git a/packages/components/src/text-area/src/TextArea.tsx b/packages/components/src/text-area/src/TextArea.tsx
index eecb7cb0b..41541665c 100644
--- a/packages/components/src/text-area/src/TextArea.tsx
+++ b/packages/components/src/text-area/src/TextArea.tsx
@@ -1,7 +1,7 @@
 import { AbstractInputProps, adaptInputStylingProps, useInput, useInputButton, useInputHasFocus, useInputSpinner } from "../../input";
 import { Box, BoxProps } from "../../box";
 import { ChangeEvent, ComponentProps, ReactElement, forwardRef, useCallback, useEffect, useMemo, useState } from "react";
-import { OmitInternalProps, cssModule, getBodyElement, isNil, mergeProps, useChainedEventCallback, useControllableState, useIsomorphicLayoutEffect } from "../../shared";
+import { OmitInternalProps, cssModule, getBodyElement, isNil, isNilOrEmpty, mergeProps, useChainedEventCallback, useControllableState, useIsomorphicLayoutEffect } from "../../shared";
 import { ResponsiveProp, useResponsiveValue } from "../../styling";
 import { useFieldInputProps } from "../../field";
 
@@ -139,10 +139,6 @@ export function InnerTextArea(props: InnerTextAreaProps) {
         ...rest
     } = adaptInputStylingProps(props, fieldProps);
 
-    if (isNil(ariaLabel) && isNil(ariaLabelledBy) && isNil(placeholder)) {
-        console.error("An input component must either have an \"aria-label\" attribute, an \"aria-labelledby\" attribute or a \"placeholder\" attribute.");
-    }
-
     const fluidValue = useResponsiveValue(fluid);
 
     const [inputValue, setValue] = useControllableState(value, defaultValue, "");
@@ -178,6 +174,14 @@ export function InnerTextArea(props: InnerTextAreaProps) {
         value: inputValue
     });
 
+    useEffect(() => {
+        const input = inputRef.current;
+
+        if (isNil(ariaLabel) && isNil(ariaLabelledBy) && isNil(placeholder) && isNilOrEmpty(input.labels)) {
+            console.error("An input component must either have a <label> element, a \"aria-label\" attribute, an \"aria-labelledby\" attribute or a \"placeholder\" attribute.");
+        }
+    });
+
     const lineHeight = useCalculateLineHeight(inputRef.current);
 
     const adjustRows = useCallback(() => {
diff --git a/packages/components/src/text-area/tests/jest/TextArea.test.tsx b/packages/components/src/text-area/tests/jest/TextArea.test.tsx
index da8cb0149..daddefe7b 100644
--- a/packages/components/src/text-area/tests/jest/TextArea.test.tsx
+++ b/packages/components/src/text-area/tests/jest/TextArea.test.tsx
@@ -2,9 +2,14 @@ import { Field, Label } from "@components/field";
 import { act, screen, waitFor, renderWithTheme } from "@test-utils";
 
 import { TextArea } from "@components/text-area";
+import { Text } from "@components/typography";
 import { createRef } from "react";
 import userEvent from "@testing-library/user-event";
 
+afterEach(() => {
+    jest.clearAllMocks();
+});
+
 // ***** Behaviors *****
 
 Object.defineProperty(document, "fonts", {
@@ -147,3 +152,53 @@ test("set ref once", async () => {
 
     await waitFor(() => expect(handler).toHaveBeenCalledTimes(1));
 });
+
+
+// ***** Accessibility *****
+
+test("logs an error when label is missing", async () => {
+    const spy = jest.spyOn(console, "error");
+
+    renderWithTheme(<TextArea />);
+
+    expect(spy).toHaveBeenCalled();
+});
+
+test("does not log an error when a label is present", async () => {
+    const spy = jest.spyOn(console, "error");
+
+    renderWithTheme(
+        <Label>
+            Label
+            <TextArea />
+        </Label>
+    );
+
+    expect(spy).not.toHaveBeenCalled();
+
+    renderWithTheme(
+        <>
+            <Label htmlFor="test">Label</Label>
+            <TextArea id="test" />
+        </>
+    );
+
+    expect(spy).not.toHaveBeenCalled();
+
+    renderWithTheme(<TextArea id="test" aria-label="Label" />);
+
+    expect(spy).not.toHaveBeenCalled();
+
+    renderWithTheme(<TextArea id="test" placeholder="Label" />);
+
+    expect(spy).not.toHaveBeenCalled();
+
+    renderWithTheme(
+        <>
+            <Text id="label">Label</Text>
+            <TextArea aria-labelledby="label" />
+        </>
+    );
+
+    expect(spy).not.toHaveBeenCalled();
+});
\ No newline at end of file
diff --git a/packages/components/src/text-input/src/TextInput.tsx b/packages/components/src/text-input/src/TextInput.tsx
index a1a2d63bf..d95f6882a 100644
--- a/packages/components/src/text-input/src/TextInput.tsx
+++ b/packages/components/src/text-input/src/TextInput.tsx
@@ -1,8 +1,8 @@
 import { AbstractInputProps, adaptInputStylingProps, useInput, useInputButton, useInputHasFocus, useInputIcon, useInputSpinner } from "../../input";
 import { Box, BoxProps } from "../../box";
-import { ChangeEvent, ComponentProps, ElementType, ReactElement, forwardRef } from "react";
+import { ChangeEvent, ComponentProps, ElementType, ReactElement, forwardRef, useEffect } from "react";
 import { ClearInputGroupContext, useInputGroupTextInputProps } from "../../input-group";
-import { OmitInternalProps, cssModule, isNil, mergeProps, omitProps, useChainedEventCallback, useControllableState } from "../../shared";
+import { OmitInternalProps, cssModule, isNil, isNilOrEmpty, mergeProps, omitProps, useChainedEventCallback, useControllableState } from "../../shared";
 import { ResponsiveProp, useResponsiveValue } from "../../styling";
 import { useFieldInputProps } from "../../field";
 import { useToolbarProps } from "../../toolbar";
@@ -96,10 +96,6 @@ export function InnerTextInput(props: InnerTextInputProps) {
         ...rest
     } = adaptInputStylingProps(props, contextProps);
 
-    if (isNil(ariaLabel) && isNil(ariaLabelledBy) && isNil(placeholder)) {
-        console.error("An input component must either have an \"aria-label\" attribute, an \"aria-labelledby\" attribute or a \"placeholder\" attribute.");
-    }
-
     const fluidValue = useResponsiveValue(fluid);
 
     const [inputValue, setValue] = useControllableState(value, defaultValue, "");
@@ -114,7 +110,7 @@ export function InnerTextInput(props: InnerTextInputProps) {
         }
     });
 
-    const { inputProps, wrapperProps } = useInput({
+    const { inputProps, inputRef, wrapperProps } = useInput({
         active,
         autoFocus,
         cssModule: "o-ui-text-input",
@@ -134,6 +130,14 @@ export function InnerTextInput(props: InnerTextInputProps) {
         value: inputValue
     });
 
+    useEffect(() => {
+        const input = inputRef.current;
+
+        if (isNil(ariaLabel) && isNil(ariaLabelledBy) && isNil(placeholder) && isNilOrEmpty(input.labels)) {
+            console.error("An input component must either have a <label> element, a \"aria-label\" attribute, an \"aria-labelledby\" attribute or a \"placeholder\" attribute.");
+        }
+    });
+
     const { hasFocus, inputProps: inputFocusProps } = useInputHasFocus();
 
     const iconMarkup = useInputIcon(icon, { disabled });
diff --git a/packages/components/src/text-input/tests/jest/TextInput.test.tsx b/packages/components/src/text-input/tests/jest/TextInput.test.tsx
index c208f2769..bc75a221e 100644
--- a/packages/components/src/text-input/tests/jest/TextInput.test.tsx
+++ b/packages/components/src/text-input/tests/jest/TextInput.test.tsx
@@ -4,6 +4,11 @@ import { screen, waitFor, renderWithTheme } from "@test-utils";
 import { TextInput } from "@components/text-input";
 import { createRef } from "react";
 import userEvent from "@testing-library/user-event";
+import { Text } from "@components/typography";
+
+afterEach(() => {
+    jest.clearAllMocks();
+});
 
 test("when a className is provided, render the className on the input element", async () => {
     renderWithTheme(
@@ -187,3 +192,53 @@ test("set ref once", async () => {
 
     await waitFor(() => expect(handler).toHaveBeenCalledTimes(1));
 });
+
+// ***** Accessibility *****
+
+test("logs an error when label is missing", async () => {
+    const spy = jest.spyOn(console, "error");
+
+    renderWithTheme(<TextInput />);
+
+    expect(spy).toHaveBeenCalled();
+});
+
+test("does not log an error when a label is present", async () => {
+    const spy = jest.spyOn(console, "error");
+
+    renderWithTheme(
+        <Label>
+            Label
+            <TextInput />
+        </Label>
+    );
+
+    expect(spy).not.toHaveBeenCalled();
+
+    renderWithTheme(
+        <>
+            <Label htmlFor="test">Label</Label>
+            <TextInput id="test" />
+        </>
+    );
+
+    expect(spy).not.toHaveBeenCalled();
+
+    renderWithTheme(<TextInput id="test" aria-label="Label" />);
+
+    expect(spy).not.toHaveBeenCalled();
+
+    renderWithTheme(<TextInput id="test" placeholder="Label" />);
+
+    expect(spy).not.toHaveBeenCalled();
+
+    renderWithTheme(
+        <>
+            <Text id="label">Label</Text>
+            <TextInput aria-labelledby="label" />
+        </>
+    );
+
+    expect(spy).not.toHaveBeenCalled();
+});
+

From a29cff67136f0768329cd9968c80addfe06e25e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tommy=20Jos=C3=A9povic?= <tommy.josepovic@gsoft.com>
Date: Tue, 5 Sep 2023 16:57:39 -0400
Subject: [PATCH 2/5] Add changeset

---
 .changeset/forty-cougars-tease.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/forty-cougars-tease.md

diff --git a/.changeset/forty-cougars-tease.md b/.changeset/forty-cougars-tease.md
new file mode 100644
index 000000000..11792af11
--- /dev/null
+++ b/.changeset/forty-cougars-tease.md
@@ -0,0 +1,5 @@
+---
+"@orbit-ui/components": patch
+---
+
+Remove warning about accessibility on input elements when a label is present

From fa5066dc9a14c259727d28bc5d55a23bee33e40b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tommy=20Jos=C3=A9povic?= <tommy.josepovic@gsoft.com>
Date: Wed, 6 Sep 2023 09:44:58 -0400
Subject: [PATCH 3/5] Add more tests

---
 .../src/number-input/tests/jest/NumberInput.test.tsx     | 9 +++++++++
 .../src/text-area/tests/jest/TextArea.test.tsx           | 9 +++++++++
 .../src/text-input/tests/jest/TextInput.test.tsx         | 9 +++++++++
 3 files changed, 27 insertions(+)

diff --git a/packages/components/src/number-input/tests/jest/NumberInput.test.tsx b/packages/components/src/number-input/tests/jest/NumberInput.test.tsx
index 5fa0ae2ee..438840c27 100644
--- a/packages/components/src/number-input/tests/jest/NumberInput.test.tsx
+++ b/packages/components/src/number-input/tests/jest/NumberInput.test.tsx
@@ -611,6 +611,15 @@ test("does not log an error when a label is present", async () => {
 
     expect(spy).not.toHaveBeenCalled();
 
+    renderWithTheme(
+        <Field>
+            <Label>Label</Label>
+            <NumberInput />
+        </Field>
+    );
+
+    expect(spy).not.toHaveBeenCalled();
+
     renderWithTheme(<NumberInput id="test" aria-label="Label" />);
 
     expect(spy).not.toHaveBeenCalled();
diff --git a/packages/components/src/text-area/tests/jest/TextArea.test.tsx b/packages/components/src/text-area/tests/jest/TextArea.test.tsx
index daddefe7b..64dcdb47b 100644
--- a/packages/components/src/text-area/tests/jest/TextArea.test.tsx
+++ b/packages/components/src/text-area/tests/jest/TextArea.test.tsx
@@ -185,6 +185,15 @@ test("does not log an error when a label is present", async () => {
 
     expect(spy).not.toHaveBeenCalled();
 
+    renderWithTheme(
+        <Field>
+            <Label>Label</Label>
+            <TextArea />
+        </Field>
+    );
+
+    expect(spy).not.toHaveBeenCalled();
+
     renderWithTheme(<TextArea id="test" aria-label="Label" />);
 
     expect(spy).not.toHaveBeenCalled();
diff --git a/packages/components/src/text-input/tests/jest/TextInput.test.tsx b/packages/components/src/text-input/tests/jest/TextInput.test.tsx
index bc75a221e..39d8b70b9 100644
--- a/packages/components/src/text-input/tests/jest/TextInput.test.tsx
+++ b/packages/components/src/text-input/tests/jest/TextInput.test.tsx
@@ -215,6 +215,15 @@ test("does not log an error when a label is present", async () => {
 
     expect(spy).not.toHaveBeenCalled();
 
+    renderWithTheme(
+        <Field>
+            <Label>Label</Label>
+            <TextInput />
+        </Field>
+    );
+
+    expect(spy).not.toHaveBeenCalled();
+
     renderWithTheme(
         <>
             <Label htmlFor="test">Label</Label>

From d5eaab89fa4b014c2f2b8d0c9f07f50f5671b006 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tommy=20Jos=C3=A9povic?= <tommy.josepovic@gsoft.com>
Date: Wed, 6 Sep 2023 11:03:14 -0400
Subject: [PATCH 4/5] Revert label check

---
 .changeset/forty-cougars-tease.md              |  2 +-
 .../src/number-input/src/NumberInput.tsx       | 12 ++++--------
 .../tests/jest/NumberInput.test.tsx            | 18 ------------------
 .../components/src/shared/src/assertions.ts    |  2 +-
 .../components/src/text-area/src/TextArea.tsx  | 12 ++++--------
 .../src/text-area/tests/jest/TextArea.test.tsx | 18 ------------------
 .../src/text-input/src/TextInput.tsx           | 12 ++++--------
 .../text-input/tests/jest/TextInput.test.tsx   | 17 -----------------
 8 files changed, 14 insertions(+), 79 deletions(-)

diff --git a/.changeset/forty-cougars-tease.md b/.changeset/forty-cougars-tease.md
index 11792af11..102d12ea2 100644
--- a/.changeset/forty-cougars-tease.md
+++ b/.changeset/forty-cougars-tease.md
@@ -2,4 +2,4 @@
 "@orbit-ui/components": patch
 ---
 
-Remove warning about accessibility on input elements when a label is present
+Update message about accessibility on input elements
diff --git a/packages/components/src/number-input/src/NumberInput.tsx b/packages/components/src/number-input/src/NumberInput.tsx
index 5e76a7999..5d60dbe67 100644
--- a/packages/components/src/number-input/src/NumberInput.tsx
+++ b/packages/components/src/number-input/src/NumberInput.tsx
@@ -201,6 +201,10 @@ export function InnerNumberInput(props: InnerNumberInputProps) {
         ...rest
     } = adaptInputStylingProps(props, contextualProps);
 
+    if (isNil(ariaLabel) && isNil(ariaLabelledBy) && isNil(placeholder)) {
+        console.error("An input component must either be wrapped inside a `<Field>` component with a `<Label>`, have an \"aria-label\" attribute, an \"aria-labelledby\" attribute or a \"placeholder\" attribute.");
+    }
+
     const fluidValue = useResponsiveValue(fluid);
 
     const [inputValueRef, setInputValue] = useRefState("");
@@ -331,14 +335,6 @@ export function InnerNumberInput(props: InnerNumberInputProps) {
         value: inputValueRef.current
     });
 
-    useEffect(() => {
-        const input = inputRef.current;
-
-        if (isNil(ariaLabel) && isNil(ariaLabelledBy) && isNil(placeholder) && isNilOrEmpty(input.labels)) {
-            console.error("An input component must either have a <label> element, a \"aria-label\" attribute, an \"aria-labelledby\" attribute or a \"placeholder\" attribute.");
-        }
-    });
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const numericInputValue = useMemo(() => toNumber(inputValueRef.current), [inputValueRef.current]);
 
diff --git a/packages/components/src/number-input/tests/jest/NumberInput.test.tsx b/packages/components/src/number-input/tests/jest/NumberInput.test.tsx
index 438840c27..527efaf2e 100644
--- a/packages/components/src/number-input/tests/jest/NumberInput.test.tsx
+++ b/packages/components/src/number-input/tests/jest/NumberInput.test.tsx
@@ -593,24 +593,6 @@ test("logs an error when label is missing", async () => {
 test("does not log an error when a label is present", async () => {
     const spy = jest.spyOn(console, "error");
 
-    renderWithTheme(
-        <Label>
-            Label
-            <NumberInput />
-        </Label>
-    );
-
-    expect(spy).not.toHaveBeenCalled();
-
-    renderWithTheme(
-        <>
-            <Label htmlFor="test">Label</Label>
-            <NumberInput id="test" />
-        </>
-    );
-
-    expect(spy).not.toHaveBeenCalled();
-
     renderWithTheme(
         <Field>
             <Label>Label</Label>
diff --git a/packages/components/src/shared/src/assertions.ts b/packages/components/src/shared/src/assertions.ts
index b26ad3a8b..5ae2a6719 100644
--- a/packages/components/src/shared/src/assertions.ts
+++ b/packages/components/src/shared/src/assertions.ts
@@ -15,7 +15,7 @@ export function isNil(value: any): value is null | undefined {
 }
 
 export function isNilOrEmpty(value: any) {
-    return isNil(value) || value.length === 0;
+    return isNil(value) || value === "";
 }
 
 export function isString(value: any): value is string {
diff --git a/packages/components/src/text-area/src/TextArea.tsx b/packages/components/src/text-area/src/TextArea.tsx
index 41541665c..3bdd4f5a5 100644
--- a/packages/components/src/text-area/src/TextArea.tsx
+++ b/packages/components/src/text-area/src/TextArea.tsx
@@ -139,6 +139,10 @@ export function InnerTextArea(props: InnerTextAreaProps) {
         ...rest
     } = adaptInputStylingProps(props, fieldProps);
 
+    if (isNil(ariaLabel) && isNil(ariaLabelledBy) && isNil(placeholder)) {
+        console.error("An input component must either be wrapped inside a `<Field>` component with a `<Label>`, have an \"aria-label\" attribute, an \"aria-labelledby\" attribute or a \"placeholder\" attribute.");
+    }
+
     const fluidValue = useResponsiveValue(fluid);
 
     const [inputValue, setValue] = useControllableState(value, defaultValue, "");
@@ -174,14 +178,6 @@ export function InnerTextArea(props: InnerTextAreaProps) {
         value: inputValue
     });
 
-    useEffect(() => {
-        const input = inputRef.current;
-
-        if (isNil(ariaLabel) && isNil(ariaLabelledBy) && isNil(placeholder) && isNilOrEmpty(input.labels)) {
-            console.error("An input component must either have a <label> element, a \"aria-label\" attribute, an \"aria-labelledby\" attribute or a \"placeholder\" attribute.");
-        }
-    });
-
     const lineHeight = useCalculateLineHeight(inputRef.current);
 
     const adjustRows = useCallback(() => {
diff --git a/packages/components/src/text-area/tests/jest/TextArea.test.tsx b/packages/components/src/text-area/tests/jest/TextArea.test.tsx
index 64dcdb47b..e85a420c7 100644
--- a/packages/components/src/text-area/tests/jest/TextArea.test.tsx
+++ b/packages/components/src/text-area/tests/jest/TextArea.test.tsx
@@ -167,24 +167,6 @@ test("logs an error when label is missing", async () => {
 test("does not log an error when a label is present", async () => {
     const spy = jest.spyOn(console, "error");
 
-    renderWithTheme(
-        <Label>
-            Label
-            <TextArea />
-        </Label>
-    );
-
-    expect(spy).not.toHaveBeenCalled();
-
-    renderWithTheme(
-        <>
-            <Label htmlFor="test">Label</Label>
-            <TextArea id="test" />
-        </>
-    );
-
-    expect(spy).not.toHaveBeenCalled();
-
     renderWithTheme(
         <Field>
             <Label>Label</Label>
diff --git a/packages/components/src/text-input/src/TextInput.tsx b/packages/components/src/text-input/src/TextInput.tsx
index d95f6882a..f36e93aab 100644
--- a/packages/components/src/text-input/src/TextInput.tsx
+++ b/packages/components/src/text-input/src/TextInput.tsx
@@ -96,6 +96,10 @@ export function InnerTextInput(props: InnerTextInputProps) {
         ...rest
     } = adaptInputStylingProps(props, contextProps);
 
+    if (isNil(ariaLabel) && isNil(ariaLabelledBy) && isNil(placeholder)) {
+        console.error("An input component must either be wrapped inside a `<Field>` component with a `<Label>`, have an \"aria-label\" attribute, an \"aria-labelledby\" attribute or a \"placeholder\" attribute.");
+    }
+
     const fluidValue = useResponsiveValue(fluid);
 
     const [inputValue, setValue] = useControllableState(value, defaultValue, "");
@@ -130,14 +134,6 @@ export function InnerTextInput(props: InnerTextInputProps) {
         value: inputValue
     });
 
-    useEffect(() => {
-        const input = inputRef.current;
-
-        if (isNil(ariaLabel) && isNil(ariaLabelledBy) && isNil(placeholder) && isNilOrEmpty(input.labels)) {
-            console.error("An input component must either have a <label> element, a \"aria-label\" attribute, an \"aria-labelledby\" attribute or a \"placeholder\" attribute.");
-        }
-    });
-
     const { hasFocus, inputProps: inputFocusProps } = useInputHasFocus();
 
     const iconMarkup = useInputIcon(icon, { disabled });
diff --git a/packages/components/src/text-input/tests/jest/TextInput.test.tsx b/packages/components/src/text-input/tests/jest/TextInput.test.tsx
index 39d8b70b9..eb48d2264 100644
--- a/packages/components/src/text-input/tests/jest/TextInput.test.tsx
+++ b/packages/components/src/text-input/tests/jest/TextInput.test.tsx
@@ -206,15 +206,6 @@ test("logs an error when label is missing", async () => {
 test("does not log an error when a label is present", async () => {
     const spy = jest.spyOn(console, "error");
 
-    renderWithTheme(
-        <Label>
-            Label
-            <TextInput />
-        </Label>
-    );
-
-    expect(spy).not.toHaveBeenCalled();
-
     renderWithTheme(
         <Field>
             <Label>Label</Label>
@@ -224,14 +215,6 @@ test("does not log an error when a label is present", async () => {
 
     expect(spy).not.toHaveBeenCalled();
 
-    renderWithTheme(
-        <>
-            <Label htmlFor="test">Label</Label>
-            <TextInput id="test" />
-        </>
-    );
-
-    expect(spy).not.toHaveBeenCalled();
 
     renderWithTheme(<TextInput id="test" aria-label="Label" />);
 

From 871a9a3bc562e90b2bab78307b5be2099369d55a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tommy=20Jos=C3=A9povic?= <tommy.josepovic@gsoft.com>
Date: Wed, 6 Sep 2023 11:05:53 -0400
Subject: [PATCH 5/5] Remove unused imports

---
 packages/components/src/number-input/src/NumberInput.tsx | 2 +-
 packages/components/src/text-area/src/TextArea.tsx       | 2 +-
 packages/components/src/text-input/src/TextInput.tsx     | 6 +++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/number-input/src/NumberInput.tsx b/packages/components/src/number-input/src/NumberInput.tsx
index 5d60dbe67..8b98814db 100644
--- a/packages/components/src/number-input/src/NumberInput.tsx
+++ b/packages/components/src/number-input/src/NumberInput.tsx
@@ -1,6 +1,6 @@
 import { AbstractInputProps, adaptInputStylingProps, useInput, useInputIcon, useInputSpinner } from "../../input";
 import { Box, BoxProps } from "../../box";
-import { ChangeEvent, ComponentProps, FocusEvent, FocusEventHandler, MouseEvent, ReactElement, Ref, SyntheticEvent, forwardRef, useCallback, useEffect, useMemo } from "react";
+import { ChangeEvent, ComponentProps, FocusEvent, FocusEventHandler, MouseEvent, ReactElement, Ref, SyntheticEvent, forwardRef, useCallback, useMemo } from "react";
 import { Div, HtmlButton } from "../../html";
 import {
     OmitInternalProps,
diff --git a/packages/components/src/text-area/src/TextArea.tsx b/packages/components/src/text-area/src/TextArea.tsx
index 3bdd4f5a5..c78648b3b 100644
--- a/packages/components/src/text-area/src/TextArea.tsx
+++ b/packages/components/src/text-area/src/TextArea.tsx
@@ -1,7 +1,7 @@
 import { AbstractInputProps, adaptInputStylingProps, useInput, useInputButton, useInputHasFocus, useInputSpinner } from "../../input";
 import { Box, BoxProps } from "../../box";
 import { ChangeEvent, ComponentProps, ReactElement, forwardRef, useCallback, useEffect, useMemo, useState } from "react";
-import { OmitInternalProps, cssModule, getBodyElement, isNil, isNilOrEmpty, mergeProps, useChainedEventCallback, useControllableState, useIsomorphicLayoutEffect } from "../../shared";
+import { OmitInternalProps, cssModule, getBodyElement, isNil, mergeProps, useChainedEventCallback, useControllableState, useIsomorphicLayoutEffect } from "../../shared";
 import { ResponsiveProp, useResponsiveValue } from "../../styling";
 import { useFieldInputProps } from "../../field";
 
diff --git a/packages/components/src/text-input/src/TextInput.tsx b/packages/components/src/text-input/src/TextInput.tsx
index f36e93aab..3b09dad41 100644
--- a/packages/components/src/text-input/src/TextInput.tsx
+++ b/packages/components/src/text-input/src/TextInput.tsx
@@ -1,8 +1,8 @@
 import { AbstractInputProps, adaptInputStylingProps, useInput, useInputButton, useInputHasFocus, useInputIcon, useInputSpinner } from "../../input";
 import { Box, BoxProps } from "../../box";
-import { ChangeEvent, ComponentProps, ElementType, ReactElement, forwardRef, useEffect } from "react";
+import { ChangeEvent, ComponentProps, ElementType, ReactElement, forwardRef } from "react";
 import { ClearInputGroupContext, useInputGroupTextInputProps } from "../../input-group";
-import { OmitInternalProps, cssModule, isNil, isNilOrEmpty, mergeProps, omitProps, useChainedEventCallback, useControllableState } from "../../shared";
+import { OmitInternalProps, cssModule, isNil, mergeProps, omitProps, useChainedEventCallback, useControllableState } from "../../shared";
 import { ResponsiveProp, useResponsiveValue } from "../../styling";
 import { useFieldInputProps } from "../../field";
 import { useToolbarProps } from "../../toolbar";
@@ -114,7 +114,7 @@ export function InnerTextInput(props: InnerTextInputProps) {
         }
     });
 
-    const { inputProps, inputRef, wrapperProps } = useInput({
+    const { inputProps, wrapperProps } = useInput({
         active,
         autoFocus,
         cssModule: "o-ui-text-input",