Dialogs in Safari can lose focus indication when "Open Dialog" button clicked rather than tabbed to and Enter

[mc2]

Describe the bug

Dialog controls should get focus indication if tabbable. In Safari, focus indication sometimes doesn't show, usually (but not always) using mouse to "Open Dialog" Using keyboard to "click" the "Open Dialog" button seems to always show focus indication of tabbable controls. See steps to reproduce.

To Reproduce

Steps to reproduce the behavior:

1. Open Safari (Version 17.3.1 (19617.2.4.11.12), no extensions)
2. Go to https://shoelace.style/components/dialog
3. Click on first 'Open Dialog' button (Using mouse, connected to mac mini)
4. Hit tab key.
5. [Error] Expect a blue focus indicator around "x" close button
6. Hit space key.
7. Dialog closes.
8. Tab to make first 'Open Dialog" button focused.
9. Hit enter or space key to open dialog.
10. Hit tab key.
11. [Success] Expect a blue focus indicator around "x" close button.
12. Click on Dialog (not on a button) with mouse.
13. Hit tab key.
14. [Error] Expect a blue focus indicator around "x" close button or "Close" button

Demo

Use the CodePen button in the first example in Safari browser, same behavior.

Screenshots

Browser / OS

• OS: Mac 14.3.1 (23D60)
• Browser: Safari
• Browser version: Version 17.3.1 (19617.2.4.11.12), no extensions

Additional information

Will try to reproduce using Mac laptop and touchpad.

[claviska]

Now that I'm on a desktop computer, I can confirm we've indeed lost focus styles in Safari (even when pressing Option + Tab).

@KonnorRogers any chance this is related to #1813?

[KonnorRogers]

@claviska yes, it has to do with our programmatic calls to ".focus()"

I've had a bug filed against WebKit for this for a while

https://bugs.webkit.org/show_bug.cgi?id=258987

https://bugs.webkit.org/show_bug.cgi?id=246591