Experiments with approaches to targeting a dialog and variations on the structure of the dialog.
Dialog behaviors conform to ARIA
Authoring Practices for modal dialog. Implementations of the structure of the dialog vary according
to descriptions in the buttons — where the dialog is either a simple div, a div with a role of dialog,
or a div with role of dialog containing a div with role of document; and where we throw focus to the heading
in the div, to the wrapping dialog div, or wrapping document div. The penultimate three dialogs have the
aria-modal attribute set to true and test whether aria-modal can be used to prune the accessibility tree
and/or make the page under the dialog inert. The final dialog is a test of the HTML 5.1 dialog element.
Why do this last thing? To test if anything breaks with NVDA's reading of the focused element in the dialog.
An issue in the NVDA GIT repo suggests a bug in
some versions of NVDA, where the NVDA accessibility focus is unaware that browser programmatic focus has