@instructure/ui-buttons 10.15.1 → 10.15.2-snapshot-0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.15.2-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.15.1...v10.15.2-snapshot-0) (2025-04-04)
+
+
+### Bug Fixes
+
+* **ui-buttons:** fix tabindex=0 added unnecessarly to Buttons ([a9a68a4](https://github.com/instructure/instructure-ui/commit/a9a68a447d04e6c5509e0ce785745cdcaea73c54))
+
+
+
+
+
 ## [10.15.1](https://github.com/instructure/instructure-ui/compare/v10.15.0...v10.15.1) (2025-04-03)
 
 **Note:** Version bump only for package @instructure/ui-buttons

package/es/BaseButton/__new-tests__/BaseButton.test.js

@@ -105,6 +105,26 @@ describe('<BaseButton/>', () => {
     expect(button).toBeInTheDocument();
     expect(button).toHaveAttribute('tabIndex', '0');
   });
+  it('should not set tabIndex="0" when the element has it by default', () => {
+    const onClick = vi.fn();
+    render(/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BaseButton, {
+      as: "button",
+      onClick: onClick
+    }, "Hello Button"), /*#__PURE__*/React.createElement(BaseButton, {
+      onClick: onClick,
+      href: "example.html"
+    }, "Hello link")));
+    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(/*#__PURE__*/React.createElement(BaseButton, {
@@ -137,7 +157,7 @@ describe('<BaseButton/>', () => {
     button.focus();
     expect(document.activeElement).toBe(button);
   });
-  it('should provide an  elementRef prop', async () => {
+  it('should provide an elementRef prop', async () => {
     const elementRef = vi.fn();
     render(/*#__PURE__*/React.createElement(BaseButton, {
       elementRef: elementRef

package/es/BaseButton/index.js

@@ -208,9 +208,25 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
       props = _objectWithoutProperties(_this$props7, _excluded);
     const isDisabled = this.isDisabled,
       isEnabled = this.isEnabled,
-      isReadOnly = this.isReadOnly;
+      isReadOnly = this.isReadOnly,
+      elementType = this.elementType;
+    // 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 jsx(View, Object.assign({}, passthroughProps(props), {
-      as: this.elementType,
+      as: elementType,
       focusColor: this.focusColor,
       position: "relative",
       display: display,
@@ -227,7 +243,7 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
       onClick: this.handleClick,
       onKeyDown: this.handleKeyDown,
       role: onClick && as !== 'button' ? 'button' : void 0,
-      tabIndex: onClick && as ? tabIndex || 0 : tabIndex,
+      tabIndex: tabIndexValue,
       disabled: isDisabled || isReadOnly,
       css: isEnabled ? styles === null || styles === void 0 ? void 0 : styles.baseButton : null,
       focusRingBorderRadius: String(styles === null || styles === void 0 ? void 0 : (_styles$content = styles.content) === null || _styles$content === void 0 ? void 0 : _styles$content.borderRadius)

package/lib/BaseButton/__new-tests__/BaseButton.test.js

@@ -107,6 +107,26 @@ describe('<BaseButton/>', () => {
     expect(button).toBeInTheDocument();
     expect(button).toHaveAttribute('tabIndex', '0');
   });
+  it('should not set tabIndex="0" when the element has it by default', () => {
+    const onClick = _vitest.vi.fn();
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.BaseButton, {
+      as: "button",
+      onClick: onClick
+    }, "Hello Button"), /*#__PURE__*/_react.default.createElement(_index.BaseButton, {
+      onClick: onClick,
+      href: "example.html"
+    }, "Hello link")));
+    const button = _react2.screen.getByRole('button', {
+      name: 'Hello Button'
+    });
+    expect(button).toBeInTheDocument();
+    expect(button).not.toHaveAttribute('tabIndex');
+    const link = _react2.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 = _vitest.vi.fn();
     (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.BaseButton, {
@@ -139,7 +159,7 @@ describe('<BaseButton/>', () => {
     button.focus();
     expect(document.activeElement).toBe(button);
   });
-  it('should provide an  elementRef prop', async () => {
+  it('should provide an elementRef prop', async () => {
     const elementRef = _vitest.vi.fn();
     (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.BaseButton, {
       elementRef: elementRef

package/lib/BaseButton/index.js

@@ -218,9 +218,25 @@ let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyle)(_styles.de
       props = (0, _objectWithoutProperties2.default)(_this$props7, _excluded);
     const isDisabled = this.isDisabled,
       isEnabled = this.isEnabled,
-      isReadOnly = this.isReadOnly;
+      isReadOnly = this.isReadOnly,
+      elementType = this.elementType;
+    // 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 (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
-      as: this.elementType,
+      as: elementType,
       focusColor: this.focusColor,
       position: "relative",
       display: display,
@@ -237,7 +253,7 @@ let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyle)(_styles.de
       onClick: this.handleClick,
       onKeyDown: this.handleKeyDown,
       role: onClick && as !== 'button' ? 'button' : void 0,
-      tabIndex: onClick && as ? tabIndex || 0 : tabIndex,
+      tabIndex: tabIndexValue,
       disabled: isDisabled || isReadOnly,
       css: isEnabled ? styles === null || styles === void 0 ? void 0 : styles.baseButton : null,
       focusRingBorderRadius: String(styles === null || styles === void 0 ? void 0 : (_styles$content = styles.content) === null || _styles$content === void 0 ? void 0 : _styles$content.borderRadius)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-buttons",
-  "version": "10.15.1",
+  "version": "10.15.2-snapshot-0",
   "description": "Accessible button components",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,10 +23,10 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.15.1",
-    "@instructure/ui-babel-preset": "10.15.1",
-    "@instructure/ui-test-utils": "10.15.1",
-    "@instructure/ui-themes": "10.15.1",
+    "@instructure/ui-axe-check": "10.15.2-snapshot-0",
+    "@instructure/ui-babel-preset": "10.15.2-snapshot-0",
+    "@instructure/ui-test-utils": "10.15.2-snapshot-0",
+    "@instructure/ui-themes": "10.15.2-snapshot-0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -34,21 +34,21 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/console": "10.15.1",
-    "@instructure/emotion": "10.15.1",
-    "@instructure/shared-types": "10.15.1",
-    "@instructure/ui-a11y-content": "10.15.1",
-    "@instructure/ui-a11y-utils": "10.15.1",
-    "@instructure/ui-color-utils": "10.15.1",
-    "@instructure/ui-dom-utils": "10.15.1",
-    "@instructure/ui-icons": "10.15.1",
-    "@instructure/ui-position": "10.15.1",
-    "@instructure/ui-prop-types": "10.15.1",
-    "@instructure/ui-react-utils": "10.15.1",
-    "@instructure/ui-testable": "10.15.1",
-    "@instructure/ui-tooltip": "10.15.1",
-    "@instructure/ui-utils": "10.15.1",
-    "@instructure/ui-view": "10.15.1",
+    "@instructure/console": "10.15.2-snapshot-0",
+    "@instructure/emotion": "10.15.2-snapshot-0",
+    "@instructure/shared-types": "10.15.2-snapshot-0",
+    "@instructure/ui-a11y-content": "10.15.2-snapshot-0",
+    "@instructure/ui-a11y-utils": "10.15.2-snapshot-0",
+    "@instructure/ui-color-utils": "10.15.2-snapshot-0",
+    "@instructure/ui-dom-utils": "10.15.2-snapshot-0",
+    "@instructure/ui-icons": "10.15.2-snapshot-0",
+    "@instructure/ui-position": "10.15.2-snapshot-0",
+    "@instructure/ui-prop-types": "10.15.2-snapshot-0",
+    "@instructure/ui-react-utils": "10.15.2-snapshot-0",
+    "@instructure/ui-testable": "10.15.2-snapshot-0",
+    "@instructure/ui-tooltip": "10.15.2-snapshot-0",
+    "@instructure/ui-utils": "10.15.2-snapshot-0",
+    "@instructure/ui-view": "10.15.2-snapshot-0",
     "keycode": "^2",
     "prop-types": "^15.8.1"
   },

package/src/BaseButton/__new-tests__/BaseButton.test.tsx

@@ -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>)
 

package/src/BaseButton/index.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(