When I put a focusable element in the shadow DOM, OSX Safari doesn't include it in the tab sequence (unlike all other browsers). The button is visible, clickable but not accessible for keyboard users. Is this a known bug? Is there a way to handle it besides making the component tabbable and forwarding focus (which seems kind of gross)?
Here's what a minimal example looks like in Safari's console
<div class="host">
Shadow Content (Open)
<button>Click me</button>
</div>
I created this example by calling .attachShadow({"mode": "open"}) on div.host then setting its .shadowRoot.innerHTML to "<button>Click me</button>"
I'm having this issue in components I created. I tested the example above in Chrome and the button is included in the tab sequence as expected.
Safari doesn't enable tab navigation by default, it must be enabled via preferences.
Tab highlights the next text field or pop-up menu. Tab also highlights buttons and other controls if “All controls” is selected in the Shortcuts pane of the Keyboard pane of System Preferences.
Option-Tab highlights the same items as Tab plus all other clickable items.
To swap the behavior of Tab and Option-Tab, turn on “Press Tab to highlight each item on a webpage” in the Advanced pane of Safari preferences.
https://support.apple.com/guide/safari/keyboard-and-other-shortcuts-cpsh003/mac