diff --git a/__tests__/components/header/HeaderSearchModal.test.tsx b/__tests__/components/header/HeaderSearchModal.test.tsx index 6027f1da32..2598498a7d 100644 --- a/__tests__/components/header/HeaderSearchModal.test.tsx +++ b/__tests__/components/header/HeaderSearchModal.test.tsx @@ -80,6 +80,15 @@ describe("HeaderSearchModal", () => { jest.clearAllMocks(); }); + it("associates the search input with an accessible label", () => { + setup(); + expect( + screen.getByRole("textbox", { + name: "Search", + }) + ).toBeInTheDocument(); + }); + it("calls onClose when escape is pressed", () => { const { onClose } = setup(); escapeCb(); @@ -88,7 +97,7 @@ describe("HeaderSearchModal", () => { it("renders search results when query returns items", () => { setup(); - const input = screen.getByRole("textbox"); + const input = screen.getByRole("textbox", { name: "Search" }); fireEvent.change(input, { target: { value: "abc" } }); expect(screen.getByTestId("item")).toBeInTheDocument(); }); @@ -101,7 +110,7 @@ describe("HeaderSearchModal", () => { it("navigates on enter key", () => { const { push } = setup(); - const input = screen.getByRole("textbox"); + const input = screen.getByRole("textbox", { name: "Search" }); fireEvent.change(input, { target: { value: "alice" } }); enterCb(); expect(push).toHaveBeenCalled(); diff --git a/components/header/header-search/HeaderSearchModal.tsx b/components/header/header-search/HeaderSearchModal.tsx index 3a486e716a..72e8f90f8d 100644 --- a/components/header/header-search/HeaderSearchModal.tsx +++ b/components/header/header-search/HeaderSearchModal.tsx @@ -283,8 +283,12 @@ export default function HeaderSearchModal({ clipRule="evenodd" /> +