fix(UnderlinePanels): add explicit type="button" to UnderlinePanels

.changeset/selfish-carpets-breathe.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Update tab in UnderlinePanels to set explicit type

.eslintrc.js

@@ -61,6 +61,7 @@ module.exports = {
   // rules which apply to JS, TS, etc.
   rules: {
     'no-shadow': 'off',
+    'react/button-has-type': 'error',
     'react/prop-types': 'off',
     'react/display-name': 'off',
     'react-hooks/exhaustive-deps': 'error',

packages/react/src/ActionList/ActionList.features.stories.tsx

@@ -637,7 +637,11 @@ export const InsideOverlay = () => {
       open={open}
       onOpen={toggle}
       onClose={toggle}
-      renderAnchor={props => <button {...props}>toggle overlay</button>}
+      renderAnchor={props => (
+        <button type="button" {...props}>
+          toggle overlay
+        </button>
+      )}
     >
       <ActionList>
         <ActionList.Item>

packages/react/src/ActionList/ActionList.test.tsx

@@ -465,7 +465,9 @@ describe('ActionList', () => {
 
       return (
         <FeatureFlags flags={{primer_react_action_list_item_as_button: false}}>
-          <button onClick={focusRef}>Prompt</button>
+          <button type="button" onClick={focusRef}>
+            Prompt
+          </button>
           <ActionList>
             <ActionList.Item ref={ref}>Item 1</ActionList.Item>
             <ActionList.Item>Item 2</ActionList.Item>

packages/react/src/TreeView/TreeView.test.tsx

@@ -249,7 +249,7 @@ describe('Markup', () => {
     const user = userEvent.setup({delay: null})
     const {getByRole} = renderWithTheme(
       <div>
-        <button>Focusable element</button>
+        <button type="button">Focusable element</button>
         <TreeView aria-label="Test tree">
           <TreeView.Item id="item-1">Item 1</TreeView.Item>
           <TreeView.Item id="item-2" current>
@@ -277,7 +277,7 @@ describe('Markup', () => {
     const user = userEvent.setup({delay: null})
     const {getByRole} = renderWithTheme(
       <div>
-        <button>Focusable element</button>
+        <button type="button">Focusable element</button>
         <TreeView aria-label="Test tree">
           <TreeView.Item id="item-1">
             Item 1
@@ -318,13 +318,13 @@ describe('Markup', () => {
           <TreeView.Item id="item-1">Item 1</TreeView.Item>
           <TreeView.Item id="item-2">
             Item 2
-            <button id="item-2-button" tabIndex={-1} aria-hidden>
+            <button id="item-2-button" tabIndex={-1} aria-hidden type="button">
               Link in Item 2
             </button>
           </TreeView.Item>
           <TreeView.Item id="item-3">Item 3</TreeView.Item>
         </TreeView>
-        <button>Focusable element</button>
+        <button type="button">Focusable element</button>
       </div>,
     )
 
@@ -1359,7 +1359,9 @@ describe('Asyncronous loading', () => {
       return (
         <div>
           {/* Mimic the completion of async loading by clicking the button */}
-          <button onClick={() => setState('done')}>Done</button>
+          <button type="button" onClick={() => setState('done')}>
+            Done
+          </button>
           <TreeView aria-label="Test tree">
             <TreeView.Item id="parent" defaultExpanded>
               Parent

packages/react/src/UnderlineNav/UnderlineNav.test.tsx

@@ -67,7 +67,7 @@ const ResponsiveUnderlineNav = ({
           </UnderlineNav.Item>
         ))}
       </UnderlineNav>
-      {displayExtraEl && <button>Custom button</button>}
+      {displayExtraEl && <button type="button">Custom button</button>}
     </div>
   )
 }

packages/react/src/__tests__/Dialog.test.tsx

@@ -61,7 +61,7 @@ const DialogWithCustomFocusRef = () => {
         <Dialog.Header id="header">Title</Dialog.Header>
         <Box p={3}>
           <Text fontFamily="sans-serif">Some content</Text>
-          <button data-testid="inner-button" ref={buttonRef}>
+          <button type="button" data-testid="inner-button" ref={buttonRef}>
             hi
           </button>
         </Box>
@@ -90,7 +90,7 @@ const DialogWithCustomFocusRefAndReturnFocusRef = () => {
           <Dialog.Header id="header">Title</Dialog.Header>
           <Box p={3}>
             <Text fontFamily="sans-serif">Some content</Text>
-            <button data-testid="inner-button" ref={buttonRef}>
+            <button type="button" data-testid="inner-button" ref={buttonRef}>
               hi
             </button>
           </Box>

packages/react/src/__tests__/TextInputWithTokens.test.tsx

@@ -317,7 +317,9 @@ describe('TextInputWithTokens', () => {
           onTokenRemove={onRemoveMock}
           visibleTokenCount={visibleTokenCount}
         />
-        <button id="focusableOutsideComponent">Focus me</button>
+        <button type="button" id="focusableOutsideComponent">
+          Focus me
+        </button>
       </>,
     )
     const inputNode = getByLabelText('Tokens')
@@ -373,7 +375,9 @@ describe('TextInputWithTokens', () => {
           onTokenRemove={onRemoveMock}
           visibleTokenCount={visibleTokenCount}
         />
-        <button id="focusableOutsideComponent">Focus me</button>
+        <button type="button" id="focusableOutsideComponent">
+          Focus me
+        </button>
       </>,
     )
     const inputNode = getByLabelText('Tokens')

packages/react/src/__tests__/ThemeProvider.test.tsx

@@ -203,7 +203,9 @@ it('updates when colorMode prop changes', async () => {
     return (
       <ThemeProvider theme={exampleTheme} colorMode={colorMode}>
         <Text color="text">{colorMode}</Text>
-        <button onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>Toggle</button>
+        <button type="button" onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>
+          Toggle
+        </button>
       </ThemeProvider>
     )
   }
@@ -229,7 +231,9 @@ it('updates when dayScheme prop changes', async () => {
     return (
       <ThemeProvider theme={exampleTheme} dayScheme={dayScheme}>
         <Text color="text">{dayScheme}</Text>
-        <button onClick={() => setDayScheme(dayScheme === 'light' ? 'dark_dimmed' : 'light')}>Toggle</button>
+        <button type="button" onClick={() => setDayScheme(dayScheme === 'light' ? 'dark_dimmed' : 'light')}>
+          Toggle
+        </button>
       </ThemeProvider>
     )
   }
@@ -255,7 +259,9 @@ it('updates when nightScheme prop changes', async () => {
     return (
       <ThemeProvider theme={exampleTheme} colorMode="night" nightScheme={nightScheme}>
         <Text color="text">{nightScheme}</Text>
-        <button onClick={() => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')}>Toggle</button>
+        <button type="button" onClick={() => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')}>
+          Toggle
+        </button>
       </ThemeProvider>
     )
   }
@@ -280,7 +286,9 @@ it('inherits colorMode from parent', async () => {
     const [colorMode, setcolorMode] = React.useState<'day' | 'night'>('day')
     return (
       <ThemeProvider theme={exampleTheme} colorMode={colorMode}>
-        <button onClick={() => setcolorMode(colorMode === 'day' ? 'night' : 'day')}>Toggle</button>
+        <button type="button" onClick={() => setcolorMode(colorMode === 'day' ? 'night' : 'day')}>
+          Toggle
+        </button>
         <ThemeProvider>
           <Text color="text">{colorMode}</Text>
         </ThemeProvider>
@@ -304,7 +312,9 @@ it('inherits dayScheme from parent', async () => {
     const [dayScheme, setDayScheme] = React.useState('light')
     return (
       <ThemeProvider theme={exampleTheme} colorMode="night" dayScheme={dayScheme}>
-        <button onClick={() => setDayScheme(dayScheme === 'light' ? 'dark_dimmed' : 'light')}>Toggle</button>
+        <button type="button" onClick={() => setDayScheme(dayScheme === 'light' ? 'dark_dimmed' : 'light')}>
+          Toggle
+        </button>
         <ThemeProvider colorMode="day">
           <Text color="text">{dayScheme}</Text>
         </ThemeProvider>
@@ -328,7 +338,9 @@ it('inherits nightScheme from parent', async () => {
     const [nightScheme, setNightScheme] = React.useState('dark')
     return (
       <ThemeProvider theme={exampleTheme} colorMode="day" nightScheme={nightScheme}>
-        <button onClick={() => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')}>Toggle</button>
+        <button type="button" onClick={() => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')}>
+          Toggle
+        </button>
         <ThemeProvider colorMode="night">
           <Text color="text">{nightScheme}</Text>
         </ThemeProvider>
@@ -351,7 +363,11 @@ describe('setColorMode', () => {
 
     function ToggleMode() {
       const {colorMode, setColorMode} = useTheme()
-      return <button onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>Toggle</button>
+      return (
+        <button type="button" onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>
+          Toggle
+        </button>
+      )
     }
 
     render(
@@ -377,7 +393,11 @@ describe('setDayScheme', () => {
 
     function ToggleDayScheme() {
       const {dayScheme, setDayScheme} = useTheme()
-      return <button onClick={() => setDayScheme(dayScheme === 'light' ? 'dark' : 'light')}>Toggle</button>
+      return (
+        <button type="button" onClick={() => setDayScheme(dayScheme === 'light' ? 'dark' : 'light')}>
+          Toggle
+        </button>
+      )
     }
 
     render(
@@ -403,7 +423,11 @@ describe('setNightScheme', () => {
 
     function ToggleNightScheme() {
       const {nightScheme, setNightScheme} = useTheme()
-      return <button onClick={() => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')}>Toggle</button>
+      return (
+        <button type="button" onClick={() => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')}>
+          Toggle
+        </button>
+      )
     }
 
     render(
@@ -429,7 +453,11 @@ describe('useColorSchemeVar', () => {
 
     function ToggleMode() {
       const {colorMode, setColorMode} = useTheme()
-      return <button onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>Toggle</button>
+      return (
+        <button type="button" onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>
+          Toggle
+        </button>
+      )
     }
 
     function CustomBg() {
@@ -464,7 +492,11 @@ describe('useColorSchemeVar', () => {
 
     function ToggleMode() {
       const {colorMode, setColorMode} = useTheme()
-      return <button onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>Toggle</button>
+      return (
+        <button type="button" onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>
+          Toggle
+        </button>
+      )
     }
 
     function CustomBg() {

packages/react/src/__tests__/hooks/useMenuInitialFocus.test.tsx

@@ -12,15 +12,15 @@ const Component = () => {
 
   return (
     <>
-      <button ref={anchorRef} onClick={() => onOpen()} onKeyDown={() => onOpen()}>
+      <button ref={anchorRef} type="button" onClick={() => onOpen()} onKeyDown={() => onOpen()}>
         open container
       </button>
       {open && (
         <div ref={containerRef}>
           <span>not focusable</span>
-          <button>first focusable element</button>
-          <button>second focusable element</button>
-          <button>third focusable element</button>
+          <button type="button">first focusable element</button>
+          <button type="button">second focusable element</button>
+          <button type="button">third focusable element</button>
           <span>not focusable</span>
         </div>
       )}

packages/react/src/__tests__/hooks/useMnemonics.test.tsx

@@ -21,12 +21,22 @@ const Fixture = ({
       <div ref={refNotAttached ? undefined : containerRef} data-testid="container">
         {hasInput && <input autoFocus type="text" placeholder="Filter options" />}
         {hasTextarea && <textarea autoFocus placeholder="Filter options" />}
-        <button onKeyDown={onSelect}>button 1</button>
-        <button onKeyDown={onSelect}>Button 2</button>
-        <button onKeyDown={onSelect}>third button</button>
-        <button disabled>fourth button is disabled</button>
-        <button onKeyDown={onSelect}>button 5</button>
-        <button onKeyDown={onSelect} aria-keyshortcuts="6 E">
+        <button type="button" onKeyDown={onSelect}>
+          button 1
+        </button>
+        <button type="button" onKeyDown={onSelect}>
+          Button 2
+        </button>
+        <button type="button" onKeyDown={onSelect}>
+          third button
+        </button>
+        <button type="button" disabled>
+          fourth button is disabled
+        </button>
+        <button type="button" onKeyDown={onSelect}>
+          button 5
+        </button>
+        <button type="button" onKeyDown={onSelect} aria-keyshortcuts="6 E">
           button 6
         </button>
         <span>not focusable</span>

packages/react/src/__tests__/hooks/useOnOutsideClick.test.tsx

@@ -13,8 +13,12 @@ const Component = ({callback}: ComponentProps) => {
   useOnOutsideClick({ignoreClickRefs: [secondButton], containerRef, onClickOutside: callback})
   return (
     <div>
-      <button ref={outerButton}>button</button>
-      <button ref={secondButton}>button two</button>
+      <button ref={outerButton} type="button">
+        button
+      </button>
+      <button ref={secondButton} type="button">
+        button two
+      </button>
       <div ref={containerRef}>content</div>
     </div>
   )

packages/react/src/__tests__/hooks/useOpenAndCloseFocus.test.tsx

@@ -9,10 +9,14 @@ const Component = () => {
   useOpenAndCloseFocus({containerRef, initialFocusRef: noButtonRef, returnFocusRef})
   return (
     <>
-      <button ref={returnFocusRef}>trigger</button>
+      <button type="button" ref={returnFocusRef}>
+        trigger
+      </button>
       <div ref={containerRef}>
-        <button>yes</button>
-        <button ref={noButtonRef}>no</button>
+        <button type="button">yes</button>
+        <button ref={noButtonRef} type="button">
+          no
+        </button>
       </div>
     </>
   )
@@ -24,10 +28,12 @@ const ComponentTwo = () => {
   useOpenAndCloseFocus({containerRef, returnFocusRef: buttonRef})
   return (
     <>
-      <button ref={buttonRef}>button trigger</button>
+      <button ref={buttonRef} type="button">
+        button trigger
+      </button>
       <div ref={containerRef}>
-        <button>yes</button>
-        <button>no</button>
+        <button type="button">yes</button>
+        <button type="button">no</button>
       </div>
     </>
   )

packages/react/src/experimental/InlineAutocomplete/InlineAutocomplete.test.tsx

@@ -109,7 +109,7 @@ const UncontrolledInlineAutocomplete = ({
           <Textarea />
         </InlineAutocomplete>
       </FormControl>
-      <button>Button</button> {/* gives us another focuseable element to tab to */}
+      <button type="button">Button</button> {/* gives us another focuseable element to tab to */}
       <div id="__primerPortalRoot__" />
     </ThemeProvider>
   )

packages/react/src/experimental/MarkdownViewer/MarkdownViewer.test.tsx

@@ -194,6 +194,7 @@ text after list`
         return (
           <>
             <button
+              type="button"
               onClick={() => {
                 setMarkdown(`${markdown}
 - [ ] item 3

packages/react/src/experimental/UnderlinePanels/UnderlinePanels.tsx

@@ -177,6 +177,7 @@ const Tab: FC<TabProps> = ({'aria-selected': ariaSelected, sx: sxProp = defaultS
     tabIndex={ariaSelected ? 0 : -1}
     aria-selected={ariaSelected}
     sx={sxProp}
+    type="button"
     {...props}
   />
 )