rsnext/packages/react-dev-overlay
Zack Tanner ee15b3be5d
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>
2023-08-08 21:45:03 +02:00
..
src fix: error overlay hijacking application focus (safari) (#53693) 2023-08-08 21:45:03 +02:00
types Port error overlay hydration error to pages directory (#46677) 2023-03-06 19:40:25 -08:00
package.json v13.4.14-canary.1 2023-08-08 14:11:47 +00:00
README.md [Fast Refresh] Redesigned Runtime Error Experience (#12222) 2020-04-30 10:50:25 -04:00
tsconfig.json Port error overlay hydration error to pages directory (#46677) 2023-03-06 19:40:25 -08:00

@next/react-dev-overlay

A development-only overlay for developing React applications.