@instructure/ui-buttons 10.19.1 → 10.19.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.19.2-snapshot-0](https://github.com/instructure/instructure-ui/compare/v10.19.1...v10.19.2-snapshot-0) (2025-06-06)
+
+
+### Bug Fixes
+
+* **ui-buttons:** make Button have a focus ring in Safari ([54118ac](https://github.com/instructure/instructure-ui/commit/54118ac22f3745c7b34f4da9d1c857951c63f8df))
+
+
+
+
+
 ## [10.19.1](https://github.com/instructure/instructure-ui/compare/v10.19.0...v10.19.1) (2025-06-05)
 
 **Note:** Version bump only for package @instructure/ui-buttons

package/es/BaseButton/index.js

@@ -32,6 +32,7 @@ import { getElementType, getInteraction, passthroughProps, callRenderProp } from
 import { isActiveElement } from '@instructure/ui-dom-utils';
 import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
 import { View } from '@instructure/ui-view';
+import { isSafari } from '@instructure/ui-utils';
 import { withStyle } from '@instructure/emotion';
 import generateStyles from './styles';
 import generateComponentTheme from './theme';
@@ -227,7 +228,8 @@ let BaseButton = (_dec = withStyle(generateStyles, generateComponentTheme), _dec
       }
     }
     let tabIndexValue = tabIndex;
-    if (onClick && as && needsZeroTabIndex) {
+    // In Safari, a button cannot get focus unless it has an explicit 0 tabindex
+    if (onClick && as && needsZeroTabIndex || isSafari() && as) {
       tabIndexValue = tabIndex || 0;
     }
     return _jsx(View, {

package/lib/BaseButton/index.js

@@ -16,6 +16,7 @@ var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js
 var _isActiveElement = require("@instructure/ui-dom-utils/lib/isActiveElement.js");
 var _hasVisibleChildren = require("@instructure/ui-a11y-utils/lib/hasVisibleChildren.js");
 var _View = require("@instructure/ui-view/lib/View");
+var _uiUtils = require("@instructure/ui-utils");
 var _emotion = require("@instructure/emotion");
 var _styles = _interopRequireDefault(require("./styles"));
 var _theme = _interopRequireDefault(require("./theme"));
@@ -236,7 +237,8 @@ let BaseButton = exports.BaseButton = (_dec = (0, _emotion.withStyle)(_styles.de
       }
     }
     let tabIndexValue = tabIndex;
-    if (onClick && as && needsZeroTabIndex) {
+    // In Safari, a button cannot get focus unless it has an explicit 0 tabindex
+    if (onClick && as && needsZeroTabIndex || (0, _uiUtils.isSafari)() && as) {
       tabIndexValue = tabIndex || 0;
     }
     return (0, _jsxRuntime.jsx)(_View.View, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-buttons",
-  "version": "10.19.1",
+  "version": "10.19.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.19.1",
-    "@instructure/ui-babel-preset": "10.19.1",
-    "@instructure/ui-test-utils": "10.19.1",
-    "@instructure/ui-themes": "10.19.1",
+    "@instructure/ui-axe-check": "10.19.2-snapshot-0",
+    "@instructure/ui-babel-preset": "10.19.2-snapshot-0",
+    "@instructure/ui-test-utils": "10.19.2-snapshot-0",
+    "@instructure/ui-themes": "10.19.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.19.1",
-    "@instructure/emotion": "10.19.1",
-    "@instructure/shared-types": "10.19.1",
-    "@instructure/ui-a11y-content": "10.19.1",
-    "@instructure/ui-a11y-utils": "10.19.1",
-    "@instructure/ui-color-utils": "10.19.1",
-    "@instructure/ui-dom-utils": "10.19.1",
-    "@instructure/ui-icons": "10.19.1",
-    "@instructure/ui-position": "10.19.1",
-    "@instructure/ui-prop-types": "10.19.1",
-    "@instructure/ui-react-utils": "10.19.1",
-    "@instructure/ui-testable": "10.19.1",
-    "@instructure/ui-tooltip": "10.19.1",
-    "@instructure/ui-utils": "10.19.1",
-    "@instructure/ui-view": "10.19.1",
+    "@instructure/console": "10.19.2-snapshot-0",
+    "@instructure/emotion": "10.19.2-snapshot-0",
+    "@instructure/shared-types": "10.19.2-snapshot-0",
+    "@instructure/ui-a11y-content": "10.19.2-snapshot-0",
+    "@instructure/ui-a11y-utils": "10.19.2-snapshot-0",
+    "@instructure/ui-color-utils": "10.19.2-snapshot-0",
+    "@instructure/ui-dom-utils": "10.19.2-snapshot-0",
+    "@instructure/ui-icons": "10.19.2-snapshot-0",
+    "@instructure/ui-position": "10.19.2-snapshot-0",
+    "@instructure/ui-prop-types": "10.19.2-snapshot-0",
+    "@instructure/ui-react-utils": "10.19.2-snapshot-0",
+    "@instructure/ui-testable": "10.19.2-snapshot-0",
+    "@instructure/ui-tooltip": "10.19.2-snapshot-0",
+    "@instructure/ui-utils": "10.19.2-snapshot-0",
+    "@instructure/ui-view": "10.19.2-snapshot-0",
     "keycode": "^2",
     "prop-types": "^15.8.1"
   },

package/src/BaseButton/index.tsx

@@ -36,6 +36,7 @@ import { isActiveElement } from '@instructure/ui-dom-utils'
 import { hasVisibleChildren } from '@instructure/ui-a11y-utils'
 import { View } from '@instructure/ui-view'
 import type { ViewProps } from '@instructure/ui-view'
+import { isSafari } from '@instructure/ui-utils'
 
 import { withStyle } from '@instructure/emotion'
 
@@ -279,7 +280,8 @@ class BaseButton extends Component<BaseButtonProps> {
       }
     }
     let tabIndexValue = tabIndex
-    if (onClick && as && needsZeroTabIndex) {
+    // In Safari, a button cannot get focus unless it has an explicit 0 tabindex
+    if ((onClick && as && needsZeroTabIndex) || (isSafari() && as)) {
       tabIndexValue = tabIndex || 0
     }
     return (