Re-implement accessible dialogs

[lyzadanger]

This ticket serves as a container for tasks related to making our modals and dialogs more accessible and usable. This may turn into a project at some point. This issue is not actionable at this time as written.

---

The Dialog component added here: #75 was copied over from previous implementation in the client (which came from lms).

Tasks

• Capturing and managing focus
• The logic for determining aria-describedby to see if we can find something a little less fragile-feeling
• The logic for generating element IDs to make sure there aren't potential collisions

Disabling scrolling

Consider disabling scrolling on window.document when modal is open.

One possible implementation:
https://github.com/hypothesis/client/blob/6cae566ee5ae5d2dd88aa00954ea0f6a69dfb530/src/annotator/components/NotebookModal.js#L55-L78

Disallowing click-elsewhere or esc-to-close

There are cases when we use a Modal component in which it shouldn't be possible to close the modal without choosing an adventure (i.e. clicking a button).

"Cancel" may still be valid, and may still close the modal. But in some cases, it's problematic to have clicks outside of the modal component close the modal—e.g. in certain LMS contexts—or it's "too easy" to accidentally close a modal. And/or the close button (X) is misleading or distracting.

Before we do this, we need to look into proper focus-trapping (see Keyboard Support section of https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html).

One implementation approach that's been looked at here involves updating the useElementShouldClose hook to be configurable.

Initial focus to...?

Might be helpful to set initial focus on an action button of some sort?