Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Only show outlines when user is keyboard navigating

See original GitHub issue

Feature request

Is your feature request related to a problem? Please describe.

Let me preface this by saying I’m a huge proponent of accessibility across the web. However, aesthetically, it can be nice to hide some of it until it is needed.

Describe the solution you’d like

I’d like some sort of prop or setting to prevent focus outlines from showing up until the user has specifically navigated using their keyboard.

Describe alternatives you’ve considered

Alternatives would be to leave it as is (obviously), but there aren’t any direct alternatives that would satisfy this feature request as far as I can tell.

Additional context

I currently implement a solution that resembles this:

First, have a Provider which wraps keyboard nav listeners (<kbd>Tab</kbd>). These enable and disable a isKeyboardNavigating boolean depending on whether the user has pressed tab or clicked last. The provider provides the boolean for whether the user is tabbing, as well as a manual way to set it (for example if something like a menu is open where nav is by arrow keys rather than just Tab).

Second, change the theme value for outline whenever the user is not keyboard navigating to 'none'.

// This sits inside of the parent wrapper (in this case `_app.tsx` in a Next.js app)
function Theme({ children }: PropsWithChildren<{}>) {
  const { isKeyboardNavigating } = useKeyboardNav();

  // Override theme.shadows.outline with 'none' when user is not keyboard navigating.
  const customTheme = useMemo(
    () => ({
      ...theme,
      shadows: {
        ...theme.shadows,
        outline: isKeyboardNavigating ? theme.shadows.outline : 'none',
      },
    }),
    [keyboard],
  );

  return (
    <ChakraProvider theme={customTheme}>
      <CSSReset />
      {children}
    </ChakraProvider>
  );
}