[Fast Refresh] Unlock Focus on Disabled Element (#12425)

packages/react-dev-overlay/src/internal/components/LeftRightDialogHeader/LeftRightDialogHeader.tsx

@@ -74,12 +74,37 @@ const LeftRightDialogHeader: React.FC<LeftRightDialogHeaderProps> = function Lef
     }
   }, [close, nav, next, previous])
 
+  // Unlock focus for browsers like Firefox, that break all user focus if the
+  // currently focused item becomes disabled.
+  React.useEffect(() => {
+    if (nav == null) {
+      return
+    }
+
+    const root = nav.getRootNode()
+    // Always true, but we do this for TypeScript:
+    if (root instanceof ShadowRoot) {
+      const a = root.activeElement
+
+      if (previous == null) {
+        if (a === buttonLeft.current) {
+          buttonLeft.current.blur()
+        }
+      } else if (next == null) {
+        if (a === buttonRight.current) {
+          buttonRight.current.blur()
+        }
+      }
+    }
+  }, [nav, next, previous])
+
   return (
     <div data-nextjs-dialog-left-right className={className}>
       <nav ref={onNav}>
         <button
           ref={buttonLeft}
           type="button"
+          disabled={previous == null ? true : undefined}
           aria-disabled={previous == null ? true : undefined}
           onClick={previous ?? undefined}
         >
@@ -88,6 +113,7 @@ const LeftRightDialogHeader: React.FC<LeftRightDialogHeaderProps> = function Lef
         <button
           ref={buttonRight}
           type="button"
+          disabled={next == null ? true : undefined}
           aria-disabled={next == null ? true : undefined}
           onClick={next ?? undefined}
         >

packages/react-dev-overlay/src/internal/components/LeftRightDialogHeader/styles.ts

@@ -21,7 +21,7 @@ const styles = css`
   [data-nextjs-dialog-left-right] > nav > button:hover {
     background-color: rgba(230, 0, 0, 0.2);
   }
-  [data-nextjs-dialog-left-right] > nav > button[aria-disabled] {
+  [data-nextjs-dialog-left-right] > nav > button:disabled {
     background-color: rgba(230, 0, 0, 0.1);
     color: rgba(230, 0, 0, 0.2);
     cursor: not-allowed;