Tab focus not working in Safari?
While doing some cross-browser testing in Safari, I noted that tab was not working as expected. I was looking at a focus-managed component, so my first thought was that I had done something in my JavaScript that did not work in Safari.
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 graphicdivine!
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.
Happy tabbing!