From 345279626b3a05fc48210af5c63f47ce0463204f Mon Sep 17 00:00:00 2001 From: Tamas Kovacs Date: Thu, 5 Jun 2025 10:53:03 +0200 Subject: [PATCH] fix(ui-buttons): make Button have a focus ring in Safari INSTUI-4527 --- packages/ui-buttons/src/BaseButton/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/ui-buttons/src/BaseButton/index.tsx b/packages/ui-buttons/src/BaseButton/index.tsx index 0b4049e99d..f8de2a8b7b 100644 --- a/packages/ui-buttons/src/BaseButton/index.tsx +++ b/packages/ui-buttons/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' @@ -278,7 +279,8 @@ class BaseButton extends Component { } } 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 (