Cannot select text without focusable container when Dialog is open

[nerdyman]

🐛 Bug report

Current behavior

As discussed in discussions/805.

Unable to select text when a dialog is open when the text is not in a focusable container.

Steps to reproduce the bug

This is the demo code from the Reakit site:

import { Button } from "reakit/Button";
import { useDialogState, Dialog, DialogDisclosure } from "reakit/Dialog";

function Example() {
  const dialog = useDialogState();
  return (
    <>
      <p>Hello Joe!</p>
      <DialogDisclosure {...dialog}>Open dialog</DialogDisclosure>
      <Dialog {...dialog} tabIndex={0} aria-label="Welcome" hideOnClickOutside={false} modal={false}>
        <Button onClick={dialog.hide}>Close</Button>
      </Dialog>
    </>
  );
}

Reakit website:

CodeSandbox https://rxk92.csb.app/ :

Expected behavior

Should be able to select text.

Possible solutions

Add tabIndex={-1} to the text or a parent of the text.

Environment

Please, run the command below inside your project directory.

System:
    OS: Linux 5.9 Arch Linux
    CPU: (8) x64 Intel(R) Core(TM) i7-4770K CPU @ 3.50GHz
    Memory: 2.74 GB / 31.30 GB
    Container: Yes
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 12.19.1 - ~/.nvm/versions/node/v12.19.1/bin/node
    Yarn: 1.22.10 - /usr/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v12.19.1/bin/npm
  Browsers:
    Brave Browser: unknown
  npmPackages:
    react: 16.10.0 => 16.10.0 
    react-dev-utils: 8.0.0 => 8.0.0
    react-dom: 16.10.0 => 16.10.0 
    reakit: 1.3.0 => 1.3.0