fix: error overlay hijacking application focus (safari) (#53693)

### What?
When Safari is in the background and HMR triggers a full page reload,
Safari hijacks application focus.

### Why?
Having a `role="dialog"` is correctly prompting Safari to autofocus the
first focusable element (the close button). However, Safari's behavior
seems to also bring the application to the foreground when a background
focus event occurs.

### How?
This only adds the role when the document is focused. 

#### Before

https://github.com/vercel/next.js/assets/1939140/9d2cce52-c6ee-4d49-9262-03620efad86c

#### After

https://github.com/vercel/next.js/assets/1939140/dc7d337c-b621-49e9-9a17-03b5d8b5c3f4

Confirmed voiceover behavior still appears to be correct
<img width="1371" alt="CleanShot 2023-08-07 at 12 14 34@2x"
src="https://github.com/vercel/next.js/assets/1939140/e53acfbc-cf6b-4d74-8b83-cf98edb2c2ab">

slack x-ref:
https://vercel.slack.com/archives/C03KAR5DCKC/p1691264077313599

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: ztanner

packages/next-swc/crates/next-core/js/src/overlay/internal/components/Dialog/Dialog.tsx

@@ -19,6 +19,11 @@ export function Dialog({
   ...props
 }: DialogProps) {
   const [dialog, setDialog] = React.useState<HTMLDivElement | null>(null)
+  const [role, setRole] = React.useState<string | undefined>(
+    typeof document !== 'undefined' && document.hasFocus()
+      ? 'dialog'
+      : undefined
+  )
   const onDialog = React.useCallback(
     (node: React.SetStateAction<HTMLDivElement | null>) => {
       setDialog(node)
@@ -55,16 +60,27 @@ export function Dialog({
       }
     }
 
+    function handleFocus() {
+      // safari will force itself as the active application when a background page triggers any sort of autofocus
+      // this is a workaround to only set the dialog role if the document has focus
+      setRole(document.hasFocus() ? 'dialog' : undefined)
+    }
+
     shadowRoot.addEventListener('keydown', handler as EventListener)
-    return () =>
+    window.addEventListener('focus', handleFocus)
+    window.addEventListener('blur', handleFocus)
+    return () => {
       shadowRoot.removeEventListener('keydown', handler as EventListener)
+      window.removeEventListener('focus', handleFocus)
+      window.removeEventListener('blur', handleFocus)
+    }
   }, [dialog])
 
   return (
     <div
       ref={onDialog}
       tabIndex={-1}
-      role="dialog"
+      role={role}
       aria-labelledby={props['aria-labelledby']}
       aria-describedby={props['aria-describedby']}
       aria-modal="true"

packages/next/src/client/components/react-dev-overlay/internal/components/Dialog/Dialog.tsx

@@ -16,6 +16,11 @@ const Dialog: React.FC<DialogProps> = function Dialog({
   ...props
 }) {
   const [dialog, setDialog] = React.useState<HTMLDivElement | null>(null)
+  const [role, setRole] = React.useState<string | undefined>(
+    typeof document !== 'undefined' && document.hasFocus()
+      ? 'dialog'
+      : undefined
+  )
   const onDialog = React.useCallback((node: HTMLDivElement | null) => {
     setDialog(node)
   }, [])
@@ -48,17 +53,28 @@ const Dialog: React.FC<DialogProps> = function Dialog({
       }
     }
 
+    function handleFocus() {
+      // safari will force itself as the active application when a background page triggers any sort of autofocus
+      // this is a workaround to only set the dialog role if the document has focus
+      setRole(document.hasFocus() ? 'dialog' : undefined)
+    }
+
     shadowRoot.addEventListener('keydown', handler as EventListener)
-    return () =>
+    window.addEventListener('focus', handleFocus)
+    window.addEventListener('blur', handleFocus)
+    return () => {
       shadowRoot.removeEventListener('keydown', handler as EventListener)
+      window.removeEventListener('focus', handleFocus)
+      window.removeEventListener('blur', handleFocus)
+    }
   }, [dialog])
 
   return (
     <div
       ref={onDialog}
       data-nextjs-dialog
       tabIndex={-1}
-      role="dialog"
+      role={role}
       aria-labelledby={props['aria-labelledby']}
       aria-describedby={props['aria-describedby']}
       aria-modal="true"

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

@@ -16,6 +16,11 @@ const Dialog: React.FC<DialogProps> = function Dialog({
   ...props
 }) {
   const [dialog, setDialog] = React.useState<HTMLDivElement | null>(null)
+  const [role, setRole] = React.useState<string | undefined>(
+    typeof document !== 'undefined' && document.hasFocus()
+      ? 'dialog'
+      : undefined
+  )
   const onDialog = React.useCallback((node: HTMLDivElement | null) => {
     setDialog(node)
   }, [])
@@ -48,17 +53,28 @@ const Dialog: React.FC<DialogProps> = function Dialog({
       }
     }
 
+    function handleFocus() {
+      // safari will force itself as the active application when a background page triggers any sort of autofocus
+      // this is a workaround to only set the dialog role if the document has focus
+      setRole(document.hasFocus() ? 'dialog' : undefined)
+    }
+
     shadowRoot.addEventListener('keydown', handler as EventListener)
-    return () =>
+    window.addEventListener('focus', handleFocus)
+    window.addEventListener('blur', handleFocus)
+    return () => {
       shadowRoot.removeEventListener('keydown', handler as EventListener)
+      window.removeEventListener('focus', handleFocus)
+      window.removeEventListener('blur', handleFocus)
+    }
   }, [dialog])
 
   return (
     <div
       ref={onDialog}
       data-nextjs-dialog
       tabIndex={-1}
-      role="dialog"
+      role={role}
       aria-labelledby={props['aria-labelledby']}
       aria-describedby={props['aria-describedby']}
       aria-modal="true"

test/development/client-dev-overlay/index.test.ts

@@ -72,4 +72,12 @@ describe('client-dev-overlay', () => {
       return exists ? 'found' : 'success'
     }, 'success')
   })
+
+  it('should have a role of "dialog" if the page is focused', async () => {
+    await check(async () => {
+      return (await elementExistsInNextJSPortalShadowDOM('[role="dialog"]'))
+        ? 'exists'
+        : 'missing'
+    }, 'exists')
+  })
 })