diff --git a/.changeset/light-cups-melt.md b/.changeset/light-cups-melt.md new file mode 100644 index 0000000000..c91924e40b --- /dev/null +++ b/.changeset/light-cups-melt.md @@ -0,0 +1,5 @@ +--- +"@heroui/input": patch +--- + +fix `Input` accessibility label duplication (#5150) diff --git a/packages/components/input/__tests__/input.test.tsx b/packages/components/input/__tests__/input.test.tsx index 8493de8191..d9642699ff 100644 --- a/packages/components/input/__tests__/input.test.tsx +++ b/packages/components/input/__tests__/input.test.tsx @@ -86,7 +86,37 @@ describe("Input", () => { const labelId = container.querySelector("label")?.id; const labelledBy = container.querySelector("input")?.getAttribute("aria-labelledby"); - expect(labelledBy?.includes(labelId as string)).toBeTruthy(); + expect(labelledBy).toBe(labelId); + }); + + it("should be labelled by placeholder when no label is provided", () => { + const {getByRole} = render(); + + expect(getByRole("textbox", {name: "test input"})).toBeInTheDocument(); + }); + + it("should be labelled by aria-label when no label is provided", () => { + const {getByRole} = render(); + + expect(getByRole("textbox", {name: "test input"})).toBeInTheDocument(); + }); + + it("should be labelled by label when label is provided", () => { + const {getByRole} = render(); + + expect(getByRole("textbox", {name: "test input"})).toBeInTheDocument(); + }); + + it("should be labelled by label and aria-label when both label and aria-label are provided", () => { + const {getByRole} = render(); + + expect(getByRole("textbox", {name: "test input test input"})).toBeInTheDocument(); + }); + + it("should be labelled by label when both label and placeholder are provided", () => { + const {getByRole} = render(); + + expect(getByRole("textbox", {name: "test input"})).toBeInTheDocument(); }); it("should have the correct type attribute", () => { diff --git a/packages/components/input/src/use-input.ts b/packages/components/input/src/use-input.ts index 33f57abd0c..cefe5fcdb6 100644 --- a/packages/components/input/src/use-input.ts +++ b/packages/components/input/src/use-input.ts @@ -190,11 +190,9 @@ export function useInput