fix(ui-buttons): fix tabindex=0 added unnecessarly to Buttons

This is added by the browser for interactive element
Also fix builds failing due to missing import in Breadcrumb

INSTUI-4499

Author: matyasf

package-lock.json

@@ -41,6 +41,7 @@
     "@instructure/ui-react-utils": "10.15.1",
     "@instructure/ui-testable": "10.15.1",
     "@instructure/ui-truncate-text": "10.15.1",
+    "@instructure/ui-tooltip": "10.15.1",
     "@instructure/ui-utils": "10.15.1",
     "@instructure/ui-view": "10.15.1",
     "prop-types": "^15.8.1"

packages/ui-breadcrumb/package.json

@@ -17,6 +17,7 @@
     { "path": "../ui-react-utils/tsconfig.build.json" },
     { "path": "../ui-testable/tsconfig.build.json" },
     { "path": "../ui-truncate-text/tsconfig.build.json" },
+    { "path": "../ui-tooltip/tsconfig.build.json" },
     { "path": "../ui-utils/tsconfig.build.json" },
     { "path": "../ui-view/tsconfig.build.json" },
     { "path": "../ui-axe-check/tsconfig.build.json" },

packages/ui-breadcrumb/tsconfig.build.json

@@ -126,6 +126,27 @@ describe('<BaseButton/>', () => {
     expect(button).toHaveAttribute('tabIndex', '0')
   })
 
+  it('should not set tabIndex="0" when the element has it by default', () => {
+    const onClick = vi.fn()
+
+    render(
+      <>
+        <BaseButton as="button" onClick={onClick}>
+          Hello Button
+        </BaseButton>
+        <BaseButton onClick={onClick} href="example.html">
+          Hello link
+        </BaseButton>
+      </>
+    )
+    const button = screen.getByRole('button', { name: 'Hello Button' })
+    expect(button).toBeInTheDocument()
+    expect(button).not.toHaveAttribute('tabIndex')
+    const link = screen.getByRole('link', { name: 'Hello link' })
+    expect(link).toBeInTheDocument()
+    expect(link).not.toHaveAttribute('tabIndex')
+  })
+
   it('should pass down the type prop to the button element', async () => {
     const onClick = vi.fn()
     render(
@@ -163,7 +184,7 @@ describe('<BaseButton/>', () => {
     expect(document.activeElement).toBe(button)
   })
 
-  it('should provide an  elementRef prop', async () => {
+  it('should provide an elementRef prop', async () => {
     const elementRef = vi.fn()
     render(<BaseButton elementRef={elementRef}>Hello World</BaseButton>)
 

packages/ui-buttons/src/BaseButton/__new-tests__/BaseButton.test.tsx

@@ -255,12 +255,37 @@ class BaseButton extends Component<BaseButtonProps> {
       ...props
     } = this.props
 
-    const { isDisabled, isEnabled, isReadOnly } = this
-
+    const { isDisabled, isEnabled, isReadOnly, elementType } = this
+    // only add 0 tabIndex value if it doesn't have it by default, see
+    // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
+    let needsZeroTabIndex = true
+    if (typeof elementType == 'string') {
+      if (
+        [
+          'button',
+          'frame',
+          'iframe',
+          'input',
+          'object',
+          'select',
+          'textarea',
+          'summary'
+        ].includes(elementType)
+      ) {
+        needsZeroTabIndex = false
+      }
+      if (href && (elementType === 'a' || elementType === 'area')) {
+        needsZeroTabIndex = false
+      }
+    }
+    let tabIndexValue = tabIndex
+    if (onClick && as && needsZeroTabIndex) {
+      tabIndexValue = tabIndex || 0
+    }
     return (
       <View
         {...passthroughProps(props)}
-        as={this.elementType}
+        as={elementType}
         focusColor={this.focusColor}
         position="relative"
         display={display}
@@ -277,7 +302,7 @@ class BaseButton extends Component<BaseButtonProps> {
         onClick={this.handleClick}
         onKeyDown={this.handleKeyDown}
         role={onClick && as !== 'button' ? 'button' : undefined}
-        tabIndex={onClick && as ? tabIndex || 0 : tabIndex}
+        tabIndex={tabIndexValue}
         disabled={isDisabled || isReadOnly}
         css={isEnabled ? styles?.baseButton : null}
         focusRingBorderRadius={String(