Bootstrap: Custom control checkbox doesn't get focus in Safari browser with Tab button.

[osukono]

Custom control checkbox doesn't get focus in Safari browser with Tab button.
When I select the input field and click the Tab button the focus goes to the browser's navigation bar instead of following checkbox.

https://codepen.io/osukono/pen/eyPbeG

Mac OS Version 10.13.2
Safari Version 11.0.2

[patrickhlauke]

Works fine for me. Make sure you have System Preferences > Keyboard > Shortcuts "Full Keyboard Access: In windows and dialogs, press Tab to move keyboard focus between:" set to "All controls". By default Safari (or rather, macOS) only tabs between text inputs and lists. (i.e. this isn't a bootstrap issue - even without any bootstrap classes/code, you can't tab to vanilla checkboxes or radio buttons in Safari unless that system preference is set)

[mdo]

Should we add a note about this to the docs somewhere?

[patrickhlauke]

No, this is about "how people use Safari on macOS". nothing to do with bootstrap, nor should it be our responsibility to teach macOS users how to enable keyboard support.

[mdo]

Yeah, I understand that. It's less about teaching users how to enable this and more calling out to developers that build with Bootstrap that this behavior exists on Macs. I didn't find out until a few years ago. We have other notes in our browsers/devices section, so wanted to double check. This one's on the edge for me on whether it's worth calling out, but I defer to you. <3

[patrickhlauke]

If it was something that happened mostly because of Bootstrap's specific approach, I'd be inclined to agree. But as this applies even to vanilla web development on Mac, I'm less inclined I'm afraid ;)