Accessible Modal Dialog Experiments

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.

• Focus the Heading in a Dialog with No Dialog Role
• Focus the Heading in a Dialog with Role Dialog, Containing a Div with Role Document, and Dialog Named via ARIA Labelledby
• Focus the Heading in a Dialog with Role Dialog, No Document Role, Dialog Named via ARIA Labelledby, Dialog container is aria-modal="true"
• Focus the Heading in a Dialog with Role Dialog, No Document Role, and No ARIA-Labelledby Referencing the Heading
• Focus the Container in a Dialog with Role Dialog and Containing a Div with Role Document, Dialog Named via ARIA Labelledby
• Focus the Container in a Dialog with Role Dialog and No Document Role, Dialog Named via ARIA Labelledby
• Focus the Container with Role Document in a Dialog with Role Dialog
• Focus the Container in a Dialog with Role Dialog, No Document Role, and the Dialog Named via ARIA Label
• Focus the Container in a Dialog with Role Dialog, No Document Role, Dialog Named via ARIA Labelledby, Dialog ARIA Modal, and Page Not Inert
• Focus the Container in a Dialog with Role Dialog, No Document Role, Dialog Named via ARIA Labelledby, Dialog ARIA Modal, and Page Not Hidden
• Focus the Container in a Dialog with Role Dialog, No Document Role, Dialog Named via ARIA Labelledby, Dialog ARIA Modal, and Page Neither Hidden Nor Inert
• Open a native HTML dialog, if implemented in browser
  • set autofocus attribute on dialog element
  • set autofocus attribute on the close button
  • set autofocus attribute on the second input
  • disable all but the close button
  • make all interactive elements in dialog disabled
  • give dialog a name via aria-label
  • inject some buttons to test default focus on open

Shim in a break tag at top of DOM

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 changed.