fix(ui-buttons): make Button have a focus ring in Safari

[ToMESSKa]

INSTUI-4527

ISSUE:

• In Safari, the same BaseButton or Button component doesn't show a focus ring, whereas the ring does appear in Chrome and other browsers - this is due to a missing 0 tabindex, which Safari needs
• Modal trigger button does not have a focus ring after closing the Modal due to this

TEST PLAN:

• make sure you have the latest Safari version
• open BaseButton and Button pages in Safari
• the first few examples should get a focus ring when they are clicked on - unlike in the latest InstUI release in Safari
• they should have a tabIndex=0 in Safari but not in other browsers
• open the first example of Modal in Safari, after closing it, the Modal should have a focus ring - unlike in the latest InstUI release in Safari

[Copilot]

Pull Request Overview

This PR addresses the focus ring issue for BaseButton in Safari by adding a condition for Safari detection and updating the tabindex logic.

• Adds a Safari-specific condition using utils.isSafari()
• Updates tabindex assignment to ensure focusability in Safari

Comments suppressed due to low confidence (1)

packages/ui-buttons/src/BaseButton/index.tsx:283

• [nitpick] The condition for applying a default tabindex in Safari may override an explicitly provided tabindex. Consider checking if tabindex is undefined before defaulting to 0 to ensure custom tabindex values are respected.

if ((onClick && as && needsZeroTabIndex) || (utils.isSafari() && as)) {

[github-actions]

PR Preview Action v1.6.1
Preview removed because the pull request was closed.
2025-06-06 08:01 UTC

[matyasf]

please dont use * imports, they might break in Vite and also increase bundle size (because it always imports everything)

[ToMESSKa]

Thanks, i fixed this