Disable the accessibility outline for non-keyboard uses

Right now Chakra adds an outline (actually a box-shadow) to elements that receive focus, even when they are focused by clicking the mouse. For example:

This is to aid in keyboard accessibility, but it shouldn’t happen when navigating via a mouse—check how popular websites handle this, including GitHub.

It looks like this was somehow integrated in 1.0 but the solution in https://github.com/chakra-ui/chakra-ui/issues/2016#issuecomment-691674038 leads to a broken link.

This behavior has been brought up before (eg. https://github.com/chakra-ui/chakra-ui/issues/2016, https://github.com/chakra-ui/chakra-ui/issues/708, https://github.com/chakra-ui/chakra-ui/issues/574) and the response has been to read this Medium article and implement it. But this is something that 100% of users would need to do to, so it should be fixed in Chakra instead by default.

The current behavior in Chakra is actually encouraging devs to solve it incorrectly, using something like box-shadow: none !important regardless of navigation style (eg. https://github.com/chakra-ui/chakra-ui/issues/708, https://github.com/chakra-ui/chakra-ui/issues/668), and is actually going to result in worse accessibility.

[ianstormtaylor]

@spykr thank you! I was trying to figure out where that was documented.

However I disagree that “100% of users would need to do [this]”, I think it’s purely a personal preference. Hiding focus outlines still makes your site less accessible even if it’s only for non-keyboard users.

I don’t think that’s a good idea for two reasons:

1. Based on browsing pretty much every popular site, no one does what Chakra does with outlines for non-keyboard navigation. So it’s clearly not a popular choice, and those sites have taken accessibility into account.

2. Based on the existing issues in this repo, the “fix” people will use for this is to disable the outlines entirely, way worse for accessibility. (You can try to fight this with documentation, but many won’t find it and will just use the nuclear option.)

I really do think that the existing default Chakra has chosen actually hurts accessibility more than helps it.

And it looks like the :focus-visible selector is supported in Chrome, Edge, and Firefox now so this is something that should be baked into Chakra by default, instead of requiring an extra package. (The external package is still a good idea for polyfilling non-supporting browsers like Safari.)

[ianstormtaylor]

^ I don’t think this bot is configured correctly to make Chakra better.