[useIsFocusVisible] Remove focus-visible if focus is re-targetted

[eps1lon]

BREAKING CHANGE

-  const { isFocusVisible, onBlurVisible, ref: focusVisibleRef } = useIsFocusVisible();
+  const {
+    isFocusVisibleRef,
+    onBlur: handleBlurVisible,
+    onFocus: handleFocusVisible,
+    ref: focusVisibleRef,
+  } = useIsFocusVisible();

  const handleFocus = (event) => {
-    if (isFocusVisible(event)) {
+    handleFocusVisible(event);
+    if (isFocusVisibleRef.current === true) {
      setFocusVisible(true);
    }

-    if (focusVisible !== false) {
+    handleBlurVisible(event);
+    if (isFocusVisibleRef.current === false) {
      setFocusVisible(false);
-      onBlurVisible();
    }

Observed this bug a couple of times but wasn't able to understand/reproduce it. Saw it again in #22062 but this time reproducible:

1. goto https://deploy-preview-22062--material-ui.netlify.app/components/trap-focus/#example
2. click "open" to open the TrapFocus
3. reset focus

the focus marker is still focus-visible but focus is on the the focus trap. Only every second click removes the focus-visible style:

Added a test that mimics TrapFocus to prevent future regression.

[mui-pr-bot]

Details of bundle changes

Generated by 🚫 dangerJS against d3eb864

[eps1lon]

Argos failure makes sense. It displayed all items as focus-visible but not it only displayes the last one as focus-visible. I'm pushing a visual change that will create a diff regardless of this bug fix. The diff due to this bug fix is visible in https://www.argos-ci.com/mui-org/material-ui/builds/2968

Though this test revealed another bug that I'll try to fix. It's less