tabs: use type button by default (#572)

reach · May 11, 2020 · e17d904 · e17d904
2 parents a7d444a + aa82a1c
commit e17d904
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 0 deletions.
diff --git a/packages/tabs/__tests__/tabs.test.tsx b/packages/tabs/__tests__/tabs.test.tsx
@@ -13,6 +13,46 @@ import {
 } from "@reach/tabs";
 
 describe("<Tabs />", () => {
+  describe("rendering", () => {
+    it("sets the button type to button by default", () => {
+      const { getByText } = render(
+        <div>
+          <Tabs>
+            <TabList>
+              <Tab>Tab 1</Tab>
+            </TabList>
+            <TabPanels>
+              <TabPanel>
+                <p>Panel 1</p>
+              </TabPanel>
+            </TabPanels>
+          </Tabs>
+        </div>
+      );
+
+      expect(getByText("Tab 1")).toHaveAttribute("type", "button");
+    });
+
+    it("allows a custom button type", () => {
+      const { getByText } = render(
+        <div>
+          <Tabs>
+            <TabList>
+              <Tab type="submit">Tab 1</Tab>
+            </TabList>
+            <TabPanels>
+              <TabPanel>
+                <p>Panel 1</p>
+              </TabPanel>
+            </TabPanels>
+          </Tabs>
+        </div>
+      );
+
+      expect(getByText("Tab 1")).toHaveAttribute("type", "submit");
+    });
+  });
+
   describe("a11y", () => {
     it("should not have basic a11y issues", async () => {
       const { container } = render(

diff --git a/packages/tabs/src/index.tsx b/packages/tabs/src/index.tsx
@@ -455,6 +455,8 @@ export const Tab = forwardRefWithAs<
     context: TabsDescendantsContext,
     disabled: !!disabled,
   });
+  const htmlType =
+    Comp === "button" && props.type == null ? "button" : props.type;
 
   const isSelected = index === selectedIndex;
 
@@ -507,6 +509,7 @@ export const Tab = forwardRefWithAs<
       onClick={onSelect}
       onFocus={handleFocus}
       onBlur={handleBlur}
+      type={htmlType}
     >
       {children}
     </Comp>