fix: Correct issue where components that output DOM button w/o type="button" inadvetedly submit HTML forms (#2096)

Updates the following components to explicitly include `type="button"` to prevent accidentily triggering form submission:

- ButtonItem
- IconButton
- ListItem (MenuItem & TreeItem come along for the ride here)
- Tab

Author: Luke Bowerman

packages/components/src/Button/ButtonItem.tsx

@@ -99,7 +99,9 @@ const ButtonLayout = forwardRef(
 
 ButtonLayout.displayName = 'ButtonLayout'
 
-const ButtonOuter = styled.button<ButtonItemProps>`
+const ButtonOuter = styled.button.attrs(({ type = 'button' }) => ({
+  type,
+}))<ButtonItemProps>`
   ${(props) =>
     props.focusVisible &&
     `box-shadow: 0 0 0.5px 1px ${props.theme.colors.keyFocus}`}

packages/components/src/Button/IconButton.tsx

@@ -119,9 +119,13 @@ export interface IconButtonProps
   tooltipTextAlign?: Property.TextAlign
 }
 
-export const IconButtonStyle = styled.button.withConfig({
-  shouldForwardProp,
-})<IconButtonProps>`
+export const IconButtonStyle = styled.button
+  .withConfig({
+    shouldForwardProp,
+  })
+  .attrs(({ type = 'button' }) => ({
+    type,
+  }))<IconButtonProps>`
   ${({ focusVisible }) => buttonCSS('neutral', focusVisible)}
   height: auto;
 `

packages/components/src/Button/__snapshots__/ButtonGroup.test.tsx.snap

@@ -107,20 +107,23 @@ exports[`ButtonGroup controlled 1`] = `
   <button
     aria-pressed="false"
     class="ButtonItem__ButtonOuter-sc-22szay-0 c2 c3"
+    type="button"
     value="Apples"
   >
     Apples
   </button>
   <button
     aria-pressed="false"
     class="ButtonItem__ButtonOuter-sc-22szay-0 c2 c3"
+    type="button"
     value="Oranges"
   >
     Oranges
   </button>
   <button
     aria-pressed="true"
     class="ButtonItem__ButtonOuter-sc-22szay-0 c2 c3"
+    type="button"
     value="Bananas"
   >
     Bananas

packages/components/src/Button/__snapshots__/ButtonToggle.test.tsx.snap

@@ -146,20 +146,23 @@ exports[`ButtonToggle controlled 1`] = `
   <button
     aria-pressed="false"
     class="ButtonItem__ButtonOuter-sc-22szay-0 c2 c3"
+    type="button"
     value="Apples"
   >
     Apples
   </button>
   <button
     aria-pressed="false"
     class="ButtonItem__ButtonOuter-sc-22szay-0 c2 c3"
+    type="button"
     value="Oranges"
   >
     Oranges
   </button>
   <button
     aria-pressed="true"
     class="ButtonItem__ButtonOuter-sc-22szay-0 c2 c3"
+    type="button"
     value="Bananas"
   >
     Bananas

packages/components/src/List/ListItem.tsx

@@ -119,8 +119,9 @@ export const ListItemLabel = styled.div
   .withConfig<ListItemLabelProps>({
     shouldForwardProp: (prop) => prop !== 'itemRole',
   })
-  .attrs<ListItemLabelProps>(({ disabled, itemRole }) => ({
+  .attrs<ListItemLabelProps>(({ disabled, itemRole = 'button' }) => ({
     as: !disabled && itemRole === 'link' ? 'a' : 'button',
+    type: itemRole === 'button' || disabled ? 'button' : undefined,
   }))<ListItemLabelProps>``
 
 const ListItemInternal = forwardRef(

packages/components/src/Tabs/Tab.tsx

@@ -51,7 +51,11 @@ export interface TabProps
   onSelect?: () => void
 }
 
-const TabStyle = styled.button.withConfig({ shouldForwardProp })<TabProps>`
+const TabStyle = styled.button
+  .withConfig({ shouldForwardProp })
+  .attrs(({ type = 'button' }) => ({
+    type,
+  }))<TabProps>`
   ${reset}
   ${layout}
   ${padding}

packages/components/src/Tabs/__snapshots__/Tabs.test.tsx.snap

@@ -49,6 +49,7 @@ exports[`focus behavior Tab Focus: does not render focus ring after click 1`] =
   id="tab-0"
   role="tab"
   tabindex="-1"
+  type="button"
 >
   tab1
 </button>
@@ -104,6 +105,7 @@ exports[`focus behavior Tab Focus: renders focus ring for keyboard navigation 1`
   id="tab-1"
   role="tab"
   tabindex="-1"
+  type="button"
 >
   tab2
 </button>