[Dialog] Pressing escape key inside of dialog when footer exists in Safari scrolls to the last focusable element on the page

🐛 Bug report

Test setup

• Use Safari browser
• Reach dialog with text input inside of it
• <footer> tag exists on page

Current Behavior

Right now when you open the dialog (before you make any user action on the dialog) press the escape key and it jumps to the bottom of the screen

Expected behavior

I feel as though this is an undesirable effect and should react the same as when a footer doesn’t exist. This may be due to safari behaviour

Reproducible example

Could not use code sandbox as it didn’t show the issue since the virtual browser is not safari based. Using this simple reproducible code in any scenario should be sufficient as long as you open the page in safari.

import React from "react";
import Dialog from "@reach/dialog";

export default function DialogExample() {
  const [showDialog, setShowDialog] = React.useState(false);
  const open = () => setShowDialog(true);
  const close = () => setShowDialog(false);
  return (
    <div>
      <button onClick={open}>Open Dialog</button>
      <Dialog isOpen={showDialog} onDismiss={close}>
        <input />
      </Dialog>
      <div style={{ height: "200vh" }}></div>
      <footer>footer</footer>
    </div>
  );
}

Suggested solution(s)

Maybe it’s possible to block escape key default event?

Additional context

N/A

Your environment

Software	Name(s)	Version
Reach Package	@reach/dialog	0.13.2
React		17.0.1
Browser	safari	14.0.3
Assistive tech
Node		v12.18.4
npm/yarn	yarn	1.22.10
Operating System	MacOS Big Sur	11.2

[theKashey]

Hello there, my very own project suffering from this issue. The issue appears when focus lock was opened with no prior activeElement, in this case it returns a focus to the body, which causes this effect.

Reproducible on Desktop and Mobile Safari. Strangely working fine in Browser Stack environment.

[theKashey]

Pinned tab and will take a look