Merge branch 'develop' of github.com:reach/reach-ui into develop

reach · Apr 20, 2022 · b1ec37d · b1ec37d
2 parents 4123068 + eabc38f
commit b1ec37d
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 9 deletions.
diff --git a/packages/listbox/src/machine.ts b/packages/listbox/src/machine.ts
@@ -228,7 +228,9 @@ function submitForm(data: ListboxStateData, event: any) {
   // sucker.
   let { hiddenInput } = event.refs;
   if (hiddenInput && hiddenInput.form) {
-    let submitButton = hiddenInput.form.querySelector("button,[type='submit']");
+    let submitButton = hiddenInput.form.querySelector(
+      "button:not([type]),[type='submit']"
+    );
     submitButton && (submitButton as any).click();
   }
 }

diff --git a/packages/tabs/__tests__/tabs.test.tsx b/packages/tabs/__tests__/tabs.test.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { render, fireEvent } from "$test/utils";
+import { render, fireEvent, userEvent } from "$test/utils";
 import styled from "styled-components";
 import {
   Tabs,
@@ -464,7 +464,7 @@ describe("<Tabs />", () => {
     });
 
     it("focuses the correct tab with manual keyboard navigation", () => {
-      const { getByRole } = render(
+      const { getByRole, getByText } = render(
         <div>
           <Tabs keyboardActivation={TabsKeyboardActivation.Manual}>
             <TabList>
@@ -491,10 +491,31 @@ describe("<Tabs />", () => {
 
       expect(tabList).toBeTruthy();
 
-      // TODO: Fails, but works in the browser. Figure out why and fix it.
-      // fireEvent.click(getByText("Tab 1"));
-      // fireEvent.keyDown(tabList, { key: "ArrowRight", code: 39 });
-      // expect(getByText("Tab 2")).toHaveFocus();
+      userEvent.click(getByText("Tab 1"));
+
+      fireEvent.keyDown(tabList, { key: "ArrowRight", code: 39 });
+      expect(getByText("Tab 2")).toHaveFocus();
+      expect(getByText("Panel 1")).toBeVisible();
+      expect(getByText("Panel 2")).not.toBeVisible();
+
+      fireEvent.keyDown(tabList, { key: "ArrowRight", code: 39 });
+      expect(getByText("Tab 3")).toHaveFocus();
+
+      fireEvent.keyDown(tabList, { key: "ArrowRight", code: 39 });
+      expect(getByText("Tab 1")).toHaveFocus();
+
+      fireEvent.keyDown(tabList, { key: "ArrowLeft", code: 37 });
+      expect(getByText("Tab 3")).toHaveFocus();
+
+      fireEvent.keyDown(tabList, { key: "ArrowLeft", code: 37 });
+      fireEvent.keyDown(tabList, { key: "ArrowLeft", code: 37 });
+      expect(getByText("Tab 1")).toHaveFocus();
+
+      fireEvent.keyDown(tabList, { key: "End", code: 35 });
+      expect(getByText("Tab 3")).toHaveFocus();
+
+      fireEvent.keyDown(tabList, { key: "Home", code: 36 });
+      expect(getByText("Tab 1")).toHaveFocus();
     });
 
     it("correctly calls focus and blur events on Tab component", () => {

diff --git a/website/src/pages/alert-dialog.mdx b/website/src/pages/alert-dialog.mdx
@@ -11,7 +11,7 @@ import { TOC, TOCList, TOCLink } from "../components/TOC";
 <TOC>
   <TOCList>
     <TOCLink href="#alertdialog">AlertDialog</TOCLink>
-    <TOCLink href="#alertdialogcontent">AlertDialogContent</TOCLink>
+    <TOCLink href="#alertdialoglabel">AlertDialogLabel</TOCLink>
     <TOCLink href="#alertdialogdescription">AlertDialogDescription</TOCLink>
     <TOCLink href="#alertdialogoverlay">AlertDialogOverlay</TOCLink>
     <TOCLink href="#alertdialogcontent">AlertDialogContent</TOCLink>

diff --git a/website/src/pages/checkbox.mdx b/website/src/pages/checkbox.mdx
@@ -431,7 +431,7 @@ Please see the [styling guide](/styling).
 | [`disabled`](#customcheckbox-disabled)             | `boolean`                    | false    |
 | [`name`](#customcheckbox-name)                     | `string`                     | false    |
 | [`onChange`](#customcheckbox-onchange)             | `func`                       | false    |
-| [`value`](#customcheckbox-value)                   | `string | number`            | false    |
+| [`value`](#customcheckbox-value)                   | `string \| number`           | false    |
 
 ##### CustomCheckbox `span` props