Prototype a version relying on ‘CloseWatcher’

package.json

@@ -17,13 +17,21 @@
     },
     "./*": "./*"
   },
-  "keywords": ["modal", "dialog", "accessibility", "a11y", "focus"],
+  "keywords": [
+    "modal",
+    "dialog",
+    "accessibility",
+    "a11y",
+    "focus"
+  ],
   "author": "Kitty Giraudel (https://kittygiraudel.com)",
   "repository": {
     "type": "git",
     "url": "https://github.com/KittyGiraudel/a11y-dialog"
   },
-  "files": ["dist/*"],
+  "files": [
+    "dist/*"
+  ],
   "scripts": {
     "build": "rollup -c",
     "serve": "npx serve cypress/fixtures -p 5000",
@@ -42,6 +50,7 @@
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-terser": "^0.4.0",
     "@rollup/plugin-typescript": "^11.0.0",
+    "@types/dom-close-watcher": "^1.0.0",
     "cypress": "^13.7.1",
     "cypress-real-events": "^1.7.6",
     "husky": "^9.0.11",

src/a11y-dialog.ts

@@ -5,6 +5,8 @@ export type A11yDialogInstance = InstanceType<typeof A11yDialog>
 
 const SCOPE = 'data-a11y-dialog'
 
+let closeWatcher: CloseWatcher | null = null
+
 export default class A11yDialog {
   private $el: HTMLElement
   private id: string
@@ -48,7 +50,8 @@ export default class A11yDialog {
     if (destroyEvent.defaultPrevented) return this
 
     // Hide the dialog to avoid destroying an open instance
-    this.hide()
+    if (closeWatcher) closeWatcher.requestClose()
+    else this.hide()
 
     // Remove the click event delegates for our openers and closers
     document.removeEventListener('click', this.handleTriggerClicks, true)
@@ -74,6 +77,16 @@ export default class A11yDialog {
     // If the event was prevented, do not continue with the normal behavior
     if (showEvent.defaultPrevented) return this
 
+    // When opening the dialog, create a new `CloseWatcher` instance, and listen
+    // for a close event to call our `.hide(..)` method and nuking the close
+    // watcher once it’s been consumed
+    if (typeof CloseWatcher !== 'undefined') {
+      closeWatcher = new CloseWatcher()
+      closeWatcher.onclose = event => {
+        this.hide(event)
+      }
+    }
+
     // Keep a reference to the currently focused element to be able to restore
     // it later
     this.shown = true
@@ -204,7 +217,10 @@ export default class A11yDialog {
     // boundaries
     // See: https://github.com/KittyGiraudel/a11y-dialog/issues/712
     if (opener) this.show(event)
-    if (explicitCloser || implicitCloser) this.hide(event)
+    if (explicitCloser || implicitCloser) {
+      if (closeWatcher) closeWatcher.requestClose()
+      else this.hide(event)
+    }
   }
 
   /**
@@ -242,7 +258,8 @@ export default class A11yDialog {
       !hasOpenPopover
     ) {
       event.preventDefault()
-      this.hide(event)
+      if (closeWatcher) closeWatcher.requestClose()
+      else this.hide(event)
     }
 
     // If the dialog is shown and the TAB key is pressed, make sure the focus