After trying to debug the issue for a few minutes, I finally noticed that tab wasn’t working anywhere, not just my component. This was both a relief (it wasn’t me!) and a mystery. How could tab not work?
A quick Google search for “Safari tab order” lead me to this StackOverflow question and answer: Safari ignoring tabindex.
As it turns out, Safari does not enable tab highlighting by default. To turn it on:
- Go to “Preferences”
- Select the “Advanced” tab
- Check “Press Tab to highlight each item on a webpage”
With that setting enabled, tab worked as I expected. Thanks
While you’re fiddling with settings, the A11y Project has a guide for enabling browser keyboard navigation on macOS that is worth checking out.
Setting you computer up for accessibility testing makes it that much easier to ensure that you’re building a product that will work for everyone.