a11y tests

packages/combobox/__tests__/__snapshots__/combobox.test.tsx.snap

@@ -18,6 +18,7 @@ exports[`<Combobox /> should match the snapshot: after text input 1`] = `
         <input
           aria-autocomplete="both"
           aria-controls="listbox--holy-smokes"
+          aria-label="cool search"
           data-reach-combobox-input=""
           data-testid="input"
           name="awesome"
@@ -389,6 +390,7 @@ exports[`<Combobox /> should match the snapshot: before text input 1`] = `
         <input
           aria-autocomplete="both"
           aria-controls="listbox--holy-smokes"
+          aria-label="cool search"
           data-reach-combobox-input=""
           data-testid="input"
           name="awesome"

packages/combobox/__tests__/combobox.test.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { render, act, withMarkup } from "$test/utils";
+// import { axe } from "jest-axe";
 import userEvent from "@testing-library/user-event";
 import {
   Combobox,
@@ -16,6 +17,14 @@ describe("<Combobox />", () => {
     jest.useFakeTimers();
   });
 
+  // TODO: Fails: ARIA attributes must conform to valid values (aria-valid-attr-value)
+  // it("should not have basic a11y issues", async () => {
+  //   const { container } = render(<BasicCombobox />);
+  //   const results = await axe(container);
+  //   expect(results).toHaveNoViolations();
+  //   cleanup();
+  // });
+
   it("should match the snapshot", () => {
     let { baseElement, getByTestId, getByRole } = render(<BasicCombobox />);
     let input = getByTestId("input");
@@ -52,6 +61,7 @@ function BasicCombobox() {
       <h2>Clientside Search</h2>
       <Combobox id="holy-smokes">
         <ComboboxInput
+          aria-label="cool search"
           data-testid="input"
           name="awesome"
           onChange={handleChange}

packages/tooltip/__tests__/tooltip.test.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { render, fireEvent, act } from "$test/utils";
+//import { axe } from "jest-axe";
 import Tooltip, { LEAVE_TIMEOUT, MOUSE_REST_TIMEOUT } from "@reach/tooltip";
 
 const { keyDown, mouseOver, mouseLeave, focus, blur } = fireEvent;
@@ -9,6 +10,18 @@ describe("<Tooltip />", () => {
     jest.useFakeTimers();
   });
 
+  // See dialog test for notes
+  // it("should not have basic a11y issues", async () => {
+  //   const { container } = render(
+  //     <Tooltip label="Content">
+  //       <button>Trigger</button>
+  //     </Tooltip>
+  //   );
+  //   const results = await axe(container);
+  //   expect(results).toHaveNoViolations();
+  //   cleanup();
+  // });
+
   it("shows/hides on hover", () => {
     const { baseElement, getByText } = render(
       <Tooltip label="Content">

packages/visually-hidden/__tests__/visually-hidden.test.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { render, cleanup } from "$test/utils";
+import { axe } from "jest-axe";
+import VisuallyHidden from "@reach/visually-hidden";
+
+describe("<VisuallyHidden />", () => {
+  it("should not have basic a11y issues", async () => {
+    const { container } = render(
+      <button onClick={() => void null}>
+        <VisuallyHidden>Click Me</VisuallyHidden>
+        <span aria-hidden>👏</span>
+      </button>
+    );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+});