Do we want to get rid of the blue focus rings?

[critocrito]

At least on Chrome we have those blue focus rings around buttons and form elements. They are important for keyboard navigation but I find them horrific to look at.

What I usually do is to disable them and only once a user tabs I turn them on. This would look something like that:

/* In the CSS file we disable the focus rings */
body:not(.user-is-tabbing) button:focus,
body:not(.user-is-tabbing) input:focus,
body:not(.user-is-tabbing) select:focus,
body:not(.user-is-tabbing) textarea:focus {
  outline: none;
}

// In the React root we look out for the first tab event.
const App = () => {
  const [firstTabHandled, setFirstTabHandled] = useState(false);

  // enable form focus rings when tabbing
  useEffect(() => {
    if (firstTabHandled) return;

    const handleFirstTab = (ev: KeyboardEvent) => {
      // the "I am a keyboard user" key
      if (ev.key === "Tab") {
        document.body.classList.add("user-is-tabbing");
        window.removeEventListener("keydown", handleFirstTab);
      }
    };

    window.addEventListener("keydown", handleFirstTab);
    setFirstTabHandled(true);

    return () => window.removeEventListener("keydown", handleFirstTab);
  }, [firstTabHandled]);

  return <div />;
}

@aeluteia, @ana0 how do you feel about that? Shall we implement that?

[ana0]

I think this would be nice to do!