Fix "An input component must either have a 'aria-label' attribute..." error when a <label> is present

.changeset/forty-cougars-tease.md

@@ -0,0 +1,5 @@
+---
+"@orbit-ui/components": patch
+---
+
+Update message about accessibility on input elements

packages/components/src/number-input/src/NumberInput.tsx

@@ -202,7 +202,7 @@ export function InnerNumberInput(props: InnerNumberInputProps) {
     } = 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.");
+        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);

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,44 @@ 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(
+        <Field>
+            <Label>Label</Label>
+            <NumberInput />
+        </Field>
+    );
+
+    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();
+});
+

packages/components/src/text-area/src/TextArea.tsx

@@ -140,7 +140,7 @@ export function InnerTextArea(props: InnerTextAreaProps) {
     } = 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.");
+        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);

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,44 @@ 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(
+        <Field>
+            <Label>Label</Label>
+            <TextArea />
+        </Field>
+    );
+
+    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();
+});

packages/components/src/text-input/src/TextInput.tsx

@@ -97,7 +97,7 @@ export function InnerTextInput(props: InnerTextInputProps) {
     } = 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.");
+        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);

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,45 @@ 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(
+        <Field>
+            <Label>Label</Label>
+            <TextInput />
+        </Field>
+    );
+
+    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();
+});
+