From 64bc1e89b08b66eee4b2bc162ab0957417effa7e Mon Sep 17 00:00:00 2001
From: Kitty Giraudel <kitty.giraudel@gmail.com>
Date: Thu, 11 Aug 2022 10:18:53 +0200
Subject: [PATCH 1/5] =?UTF-8?q?Properly=20nest=20nested=20dialogs=E2=80=99?=
 =?UTF-8?q?=20DOM=20tree?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 cypress/fixtures/nested-dialogs.html | 29 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 15 deletions(-)

diff --git a/cypress/fixtures/nested-dialogs.html b/cypress/fixtures/nested-dialogs.html
index 3400d871..964b58b4 100644
--- a/cypress/fixtures/nested-dialogs.html
+++ b/cypress/fixtures/nested-dialogs.html
@@ -21,28 +21,27 @@ <h1>Tests — Nested dialogs</h1>
       <h1 id="dialog-title-1">Dialog 1</h1>
       <button class="link-like" data-a11y-dialog-show="dialog-2">Open dialog 2</button>
     </div>
-  </div>
 
-  <div class="dialog" data-a11y-dialog="dialog-2" aria-hidden="true" aria-labelledby="dialog-title-2">
-    <div class="dialog-overlay" data-a11y-dialog-hide></div>
-    <div role="document" class="dialog-content">
-      <button data-a11y-dialog-hide class="dialog-close" aria-label="Close this dialog window">&times;</button>
+    <div class="dialog" data-a11y-dialog="dialog-2" aria-hidden="true" aria-labelledby="dialog-title-2">
+      <div class="dialog-overlay" data-a11y-dialog-hide></div>
+      <div role="document" class="dialog-content">
+        <button data-a11y-dialog-hide class="dialog-close" aria-label="Close this dialog window">&times;</button>
 
-      <h1 id="dialog-title-2">Dialog 2</h1>
-      <button class="link-like" data-a11y-dialog-show="dialog-3">Open dialog 3</button>
-    </div>
-  </div>
+        <h1 id="dialog-title-2">Dialog 2</h1>
+        <button class="link-like" data-a11y-dialog-show="dialog-3">Open dialog 3</button>
+      </div>
 
-  <div class="dialog" data-a11y-dialog="dialog-3" aria-hidden="true" aria-labelledby="dialog-title-3">
-    <div class="dialog-overlay" data-a11y-dialog-hide></div>
-    <div role="document" class="dialog-content">
-      <button data-a11y-dialog-hide class="dialog-close" aria-label="Close this dialog window">&times;</button>
+      <div class="dialog" data-a11y-dialog="dialog-3" aria-hidden="true" aria-labelledby="dialog-title-3">
+        <div class="dialog-overlay" data-a11y-dialog-hide></div>
+        <div role="document" class="dialog-content">
+          <button data-a11y-dialog-hide class="dialog-close" aria-label="Close this dialog window">&times;</button>
 
-      <h1 id="dialog-title-3">Dialog 3</h1>
+          <h1 id="dialog-title-3">Dialog 3</h1>
+        </div>
+      </div>
     </div>
   </div>
 
-
   <script src="./a11y-dialog.js"></script>
 </body>
 

From a237152d7eb9b21ab54b5262475bd825a1e3f3ea Mon Sep 17 00:00:00 2001
From: Kitty Giraudel <kitty.giraudel@gmail.com>
Date: Thu, 11 Aug 2022 10:19:18 +0200
Subject: [PATCH 2/5] Add a missing z-index declaration to dialogs

---
 cypress/fixtures/styles.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/cypress/fixtures/styles.css b/cypress/fixtures/styles.css
index 49d0878d..ecbbebbf 100644
--- a/cypress/fixtures/styles.css
+++ b/cypress/fixtures/styles.css
@@ -33,6 +33,7 @@ dialog[open] {
   left: 0;
   bottom: 0;
   right: 0;
+  z-index: 2;
 }
 
 .dialog {

From 0a8cc6c73558c598f51daccbdad72f1d6190022a Mon Sep 17 00:00:00 2001
From: Kitty Giraudel <kitty.giraudel@gmail.com>
Date: Thu, 11 Aug 2022 10:20:41 +0200
Subject: [PATCH 3/5] Bring back nested dialogs escape hatch in keydown
 listener

---
 src/a11y-dialog.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/a11y-dialog.ts b/src/a11y-dialog.ts
index 6044913d..0c449afc 100644
--- a/src/a11y-dialog.ts
+++ b/src/a11y-dialog.ts
@@ -160,6 +160,12 @@ export default class A11yDialog {
    * (namely ESC and TAB)
    */
   private bindKeypress = (event: KeyboardEvent) => {
+    // This is an escape hatch in case there are nested open dialogs, so that
+    // only the top most dialog gets interacted with
+    if (document.activeElement?.closest('[aria-modal="true"]') !== this.$el) {
+      return
+    }
+
     // If the dialog is shown and the ESC key is pressed, prevent any further
     // effects from the ESC key and hide the dialog, unless its role is
     // `alertdialog`, which should be modal

From 7d64b7720f856021f3071732a56fa91c471f3bf1 Mon Sep 17 00:00:00 2001
From: Kitty Giraudel <kitty.giraudel@gmail.com>
Date: Thu, 11 Aug 2022 10:21:15 +0200
Subject: [PATCH 4/5] Adjust selector matching for closers to account for
 nested dialogs

---
 src/a11y-dialog.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/a11y-dialog.ts b/src/a11y-dialog.ts
index 0c449afc..235edd53 100644
--- a/src/a11y-dialog.ts
+++ b/src/a11y-dialog.ts
@@ -147,9 +147,9 @@ export default class A11yDialog {
     }
 
     if (
-      target.matches(
-        `[data-a11y-dialog="${this.id}"] [data-a11y-dialog-hide], #${this.id} [data-a11y-dialog-hide], [data-a11y-dialog-hide="${this.id}"]`
-      )
+      target.matches(`[data-a11y-dialog-hide="${this.id}"]`) ||
+      (target.matches('[data-a11y-dialog-hide]') &&
+        target.closest('[aria-modal="true"]') === this.$el)
     ) {
       this.hide(event)
     }

From a1565c3274bf48df29c30021e45eeae4a7727498 Mon Sep 17 00:00:00 2001
From: Kitty Giraudel <kitty.giraudel@gmail.com>
Date: Thu, 11 Aug 2022 10:21:24 +0200
Subject: [PATCH 5/5] Update nested dialogs tests

---
 cypress/e2e/nestedDialogs.cy.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/cypress/e2e/nestedDialogs.cy.js b/cypress/e2e/nestedDialogs.cy.js
index 23c5e521..2ff44c07 100644
--- a/cypress/e2e/nestedDialogs.cy.js
+++ b/cypress/e2e/nestedDialogs.cy.js
@@ -13,15 +13,15 @@ describe('Nested dialogs', () => {
   })
 
   it('should close only the top most dialog when pressing ESC', () => {
-    cy.get('body').trigger('keydown', { key: 'Escape', keyCode: 27, which: 27 })
+    cy.realPress('Escape')
     cy.get('[data-a11y-dialog="dialog-2"]').then(shouldBeVisible)
     cy.get('[data-a11y-dialog="dialog-3"]').then(shouldBeHidden)
   })
 
   it('should close only the top most dialog when clicking the backdrop', () => {
-    cy.get('body').trigger('keydown', { key: 'Escape', keyCode: 27, which: 27 })
     cy.get('[data-a11y-dialog="dialog-2"]')
       .find('.dialog-overlay')
+      .first()
       .click({ force: true })
     cy.get('[data-a11y-dialog="dialog-1"]').then(shouldBeVisible)
     cy.get('[data-a11y-dialog="dialog-2"]').then(shouldBeHidden)