[useFocusVisible] Make public

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Make the following helper public:

https://github.com/mui-org/material-ui/blob/a8acbad5a92dc4c8b672be8fca83049dd8df68de/packages/material-ui/src/utils/useIsFocusVisible.js#L118

Examples 🌈

I would propose this API:

function Example() {
  const { focusVisible, ref, onFocus, onBlur } = useFocusVisible();

  return (
    <button
      ref={ref}
      onFocus={onFocus}
      onBlur={onBlur}
      style={{
        outline: focusVisible ? '2px solid dodgerblue' : 'none',
      }}
    >
      Test
    </button>
  );
}

Motivation 🔦

:focus-visible has become an essential tool for our components. However, it seems that developers won’t be able to use the built-in API before a year or two years: https://caniuse.com/#search=focus visible.

An alternative approach would be to apply the class name globally as https://github.com/WICG/focus-visible does. However, it’s probably not a gap we want to fill, the previous project already solve the pain point. The main advantage of exposing this hook is that we know folks building design UI might need it, plus we already need it, exposing it comes with little downsides: we only have to pay the upfront cost of documenting it and polishing the API.

Benchmark

• https://gestalt.netlify.app/useFocusVisible
• https://react-spectrum.adobe.com/react-aria/useFocusRing.html
• https://zendeskgarden.github.io/react-containers/storybook/?path=/docs/focusvisible-container--container#usefocusvisible

[eps1lon]

Don’t just make things public. They add maintenance burden and remove freedom. If nobody is asking then we shouldn’t ever make something public.

[eps1lon]

@ryancogswell Sounds like you were using :focus-visible for something that it wasn’t intended to solve.

So I’m not against making it public because of your specific issue but because of the general problem: Any public code requires 10x the work to document properly since there will always be users who misuse it.

It doesn’t make sense to make it public as a hook since that implies for many that it is behavioral in nature which :focus-visible isn’t. Closing since we already have the “waiting for upvotes” label. If you need a polyfill use the “official” one just like we do: https://github.com/WICG/focus-visible