diff --git a/packages/tabs/__tests__/tabs.test.tsx b/packages/tabs/__tests__/tabs.test.tsx index 7ead0ac97..3ee45273e 100644 --- a/packages/tabs/__tests__/tabs.test.tsx +++ b/packages/tabs/__tests__/tabs.test.tsx @@ -13,6 +13,46 @@ import { } from "@reach/tabs"; describe("", () => { + describe("rendering", () => { + it("sets the button type to button by default", () => { + const { getByText } = render( +
+ + + Tab 1 + + + +

Panel 1

+
+
+
+
+ ); + + expect(getByText("Tab 1")).toHaveAttribute("type", "button"); + }); + + it("allows a custom button type", () => { + const { getByText } = render( +
+ + + Tab 1 + + + +

Panel 1

+
+
+
+
+ ); + + 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 index 427f50e3e..dc81a158d 100644 --- 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}