Nested dialogs

Nesting dialogs is a questionable design pattern that is not referenced anywhere in the HTML 5.2 Dialog specification. Therefore it is actively discouraged in favour of clearer interface design.

That being said, it is supported by the library, under the following conditions:

• Dialogs should live next to each other in the DOM, not within one another.
• The targets argument of the constructor or value of the data-a11y-dialog attribute of every dialog should not include the other dialogs, only the main content container(s). For instance:

<div id="main">
  <!-- The main content container -->
</div>
<div id="dialog-1" data-a11y-dialog="#main">
  <!-- Dialog 1 content + a button to open dialog 2 -->
</div>
<div id="dialog-2" data-a11y-dialog="#main">
  <!-- Dialog 2 content + a button to open dialog 3 -->
</div>
<div id="dialog-3" data-a11y-dialog="#main">
  <!-- Dialog 3 content -->
</div>

Pressing ESC or clicking the backdrop will only close the top-most dialog, while the other remain untouched. It essentially makes it possible to stack dialogs on top of each other, then closing them one at a time.

There is an example in the cypress/fixtures directory of the repository, as well as an associated test in cypress/integration. The original feature request by Renato de Leão remains in issue #80.