Merge branch 'master' into pagination-v1

.github/workflows/test.yml

@@ -0,0 +1,38 @@
+name: Test
+
+on:
+  push:
+    branches:
+      - "*"
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Setup Node
+        uses: actions/setup-node@v1
+        with:
+          node-version: "12.x"
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - uses: actions/cache@v2
+        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: install deps
+        run: yarn
+      - name: Test
+        run: yarn test

.huskyrc.json

@@ -1,6 +1,6 @@
 {
   "hooks": {
-    "pre-commit": "lint-staged",
+    "pre-commit": "yarn test && lint-staged",
     "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
   }
 }

jest.setup.js

@@ -3,11 +3,12 @@ const {
   printReceived,
   printExpected,
 } = require("jest-matcher-utils");
+const { toHaveNoViolations: axeMatchers } = require("jest-axe");
 const matchers = require("@testing-library/jest-dom/matchers");
 
 // Consider [aria-activedescendant="${id}"] #${id} as the focused element.
 function toHaveFocus(element) {
-  const result = matchers.toHaveFocus(element);
+  const result = matchers.toHaveFocus.call(this, element);
   const { activeElement } = element.ownerDocument;
   const activeId =
     activeElement && activeElement.getAttribute("aria-activedescendant");
@@ -19,7 +20,7 @@ function toHaveFocus(element) {
         return [
           matcherHint(`${this.isNot ? ".not" : ""}.toHaveFocus`, "element", ""),
           "",
-          "Expected",
+          "Expected:",
           `  ${printExpected(element)}`,
           "Received:",
           `  ${printReceived(element.ownerDocument.getElementById(activeId))}`,
@@ -30,4 +31,4 @@ function toHaveFocus(element) {
   };
 }
 
-expect.extend({ ...matchers, toHaveFocus });
+expect.extend({ ...matchers, ...axeMatchers, toHaveFocus });

package.json

@@ -58,6 +58,7 @@
     "@types/react": "16.9.49",
     "@types/react-dom": "16.9.8",
     "@types/react-transition-group": "4.4.0",
+    "@types/testing-library__jest-dom": "^5.9.2",
     "@types/uuid": "8.3.0",
     "@typescript-eslint/eslint-plugin": "4.1.0",
     "@typescript-eslint/parser": "4.1.0",

src/accordion/__tests__/Accordion.test.tsx

@@ -0,0 +1,170 @@
+import * as React from "react";
+import { render, press } from "reakit-test-utils";
+
+import {
+  AccordionPanel,
+  AccordionItem,
+  AccordionTrigger,
+  useAccordionState,
+} from "..";
+import { axe } from "jest-axe";
+
+const AccordionComponent = (props: any) => {
+  const state = useAccordionState(props);
+
+  return (
+    <div>
+      <AccordionItem {...state}>
+        <h3>
+          <AccordionTrigger {...state}>Trigger 1</AccordionTrigger>
+        </h3>
+        <AccordionPanel {...state}>Panel 1</AccordionPanel>
+      </AccordionItem>
+      <AccordionItem id="accordion-2" {...state}>
+        <h3>
+          <AccordionTrigger {...state}>Trigger 2</AccordionTrigger>
+        </h3>
+        <AccordionPanel {...state}>Panel 2</AccordionPanel>
+      </AccordionItem>
+      <AccordionItem {...state}>
+        <h3>
+          <AccordionTrigger {...state}>Trigger 3</AccordionTrigger>
+        </h3>
+        <AccordionPanel {...state}>Panel 3</AccordionPanel>
+      </AccordionItem>
+    </div>
+  );
+};
+
+test("Accordion should have proper keyboard navigation", () => {
+  const { getByText: text } = render(<AccordionComponent />);
+
+  press.Tab();
+  expect(text("Trigger 1")).toHaveFocus();
+  press.ArrowDown();
+  expect(text("Trigger 2")).toHaveFocus();
+  press.ArrowDown();
+  expect(text("Trigger 3")).toHaveFocus();
+  press.ArrowDown();
+  expect(text("Trigger 1")).toHaveFocus();
+  press.ArrowUp();
+  expect(text("Trigger 3")).toHaveFocus();
+  press.ArrowUp();
+  expect(text("Trigger 2")).toHaveFocus();
+});
+
+test("Accordion should have proper keyboard navigation (loop: false)", () => {
+  const { getByText: text } = render(<AccordionComponent loop={false} />);
+
+  press.Tab();
+  expect(text("Trigger 1")).toHaveFocus();
+  press.ArrowDown();
+  expect(text("Trigger 2")).toHaveFocus();
+  press.ArrowDown();
+  expect(text("Trigger 3")).toHaveFocus();
+  press.ArrowDown();
+  expect(text("Trigger 3")).toHaveFocus();
+  press.ArrowUp();
+  expect(text("Trigger 2")).toHaveFocus();
+  press.ArrowUp();
+  expect(text("Trigger 1")).toHaveFocus();
+});
+
+[true, false].forEach(toggle => {
+  test(`Accordion allowToggle: ${toggle}`, () => {
+    const { getByText: text } = render(
+      <AccordionComponent allowToggle={toggle} />,
+    );
+
+    press.Tab();
+    press.Enter();
+    expect(text("Trigger 1")).toHaveFocus();
+    expect(text("Panel 1")).toBeVisible();
+
+    if (toggle) {
+      // if allowToggle is true then pressing again will close it
+      press.Enter();
+      expect(text("Panel 1")).not.toBeVisible();
+    } else {
+      // if allowToggle is false then pressing again will close it
+      press.Enter();
+      expect(text("Panel 1")).toBeVisible();
+    }
+  });
+});
+
+test("Accordion should open/close properly with AllowMultiple: false", () => {
+  const { getByText: text } = render(<AccordionComponent />);
+
+  press.Tab();
+  expect(text("Trigger 1")).toHaveFocus();
+
+  expect(text("Panel 1")).not.toBeVisible();
+  press.Enter();
+  expect(text("Panel 1")).toBeVisible();
+
+  // go to next panel
+  press.ArrowDown();
+  expect(text("Panel 2")).not.toBeVisible();
+  press.Enter();
+  expect(text("Panel 2")).toBeVisible();
+
+  // panel 1 should be closed now if allowMultiple: false
+  expect(text("Panel 1")).not.toBeVisible();
+});
+
+test("Accordion should open/close properly with AllowMultiple: true", () => {
+  const { getByText: text } = render(
+    <AccordionComponent allowMultiple={true} />,
+  );
+
+  press.Tab();
+  expect(text("Trigger 1")).toHaveFocus();
+
+  expect(text("Panel 1")).not.toBeVisible();
+  press.Enter();
+  expect(text("Panel 1")).toBeVisible();
+
+  // go to next panel
+  press.ArrowDown();
+  press.Enter();
+  expect(text("Panel 2")).toBeVisible();
+
+  // panel 1 should be visible since allowmultiple is true
+  expect(text("Panel 1")).toBeVisible();
+});
+
+test("Accordion should have proper default active", () => {
+  const { getByText: text } = render(
+    <AccordionComponent defaultActiveId="accordion-2" />,
+  );
+
+  press.Tab();
+  expect(text("Panel 1")).not.toBeVisible();
+  expect(text("Panel 2")).toBeVisible();
+});
+
+test("Accordion manual: false", () => {
+  const { getByText: text } = render(<AccordionComponent manual={false} />);
+
+  press.Tab();
+  expect(text("Trigger 1")).toHaveFocus();
+  expect(text("Panel 1")).toBeVisible();
+
+  // go to next panel
+  press.ArrowDown();
+  expect(text("Trigger 2")).toHaveFocus();
+  expect(text("Panel 2")).toBeVisible();
+
+  // go to next panel
+  press.ArrowDown();
+  expect(text("Trigger 3")).toHaveFocus();
+  expect(text("Panel 3")).toBeVisible();
+});
+
+test("Accordion renders with no a11y violations", async () => {
+  const { container } = render(<AccordionComponent />);
+  const results = await axe(container);
+
+  expect(results).toHaveNoViolations();
+});

src/number-input/NumberInput.ts

@@ -106,7 +106,10 @@ export const useNumberInput = createHook<
      * @see https://www.w3.org/TR/wai-aria-practices-1.1/#wai-aria-roles-states-and-properties-18
      * @see https://www.w3.org/TR/wai-aria-1.1/#aria-valuetext
      */
-    const ariaValueText = getAriaValueText?.(value) ?? String(value);
+    const ariaValueText =
+      value === null || value === ""
+        ? undefined
+        : getAriaValueText?.(value) ?? String(value);
 
     /**
      * The `onChange` handler filters out any character typed