Use close watcher when supported in place of escape key handlers

change/@microsoft-fast-foundation-82cb2686-8df8-4bdc-a688-f0dab9cb1651.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Use close watcher when supported in place of escape key handlers",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "luke@warlow.dev",
+  "dependentChangeType": "patch"
+}

packages/web-components/fast-foundation/src/close-watcher.d.ts

@@ -0,0 +1,19 @@
+interface CloseWatcher extends EventTarget {
+    new (options?: CloseWatcherOptions): CloseWatcher;
+    requestClose(): void;
+    close(): void;
+    destroy(): void;
+
+    oncancel: (event: Event) => any | null;
+    onclose: (event: Event) => any | null;
+}
+
+declare const CloseWatcher: CloseWatcher;
+
+interface CloseWatcherOptions {
+    signal: AbortSignal;
+}
+
+declare interface Window {
+    CloseWatcher?: CloseWatcher;
+}

packages/web-components/fast-foundation/src/dialog/dialog.ts

@@ -103,6 +103,8 @@ export class FASTDialog extends FASTElement {
      */
     private notifier: Notifier;
 
+    private closeWatcher: CloseWatcher | null = null;
+
     /**
      * @internal
      */
@@ -119,6 +121,11 @@ export class FASTDialog extends FASTElement {
      */
     public show(): void {
         this.hidden = false;
+        if ("CloseWatcher" in window) {
+            this.closeWatcher?.destroy();
+            this.closeWatcher = new CloseWatcher();
+            this.closeWatcher.onclose = () => this.hide();
+        }
     }
 
     /**
@@ -128,6 +135,7 @@ export class FASTDialog extends FASTElement {
      */
     public hide(): void {
         this.hidden = true;
+        this.closeWatcher?.destroy();
         // implement `<dialog>` interface
         this.$emit("close");
     }
@@ -152,6 +160,7 @@ export class FASTDialog extends FASTElement {
 
         // remove keydown event listener
         document.removeEventListener("keydown", this.handleDocumentKeydown);
+        this.closeWatcher?.destroy();
 
         // if we are trapping focus remove the focusin listener
         this.updateTrapFocus(false);
@@ -176,8 +185,10 @@ export class FASTDialog extends FASTElement {
         if (!e.defaultPrevented && !this.hidden) {
             switch (e.key) {
                 case keyEscape:
-                    this.dismiss();
-                    e.preventDefault();
+                    if (!this.closeWatcher) {
+                        this.dismiss();
+                        e.preventDefault();
+                    }
                     break;
 
                 case keyTab:

packages/web-components/fast-foundation/src/picker/picker.ts

@@ -445,6 +445,8 @@ export class FASTPicker extends FormAssociatedPicker {
     private inputElementView: HTMLView | null = null;
     private behaviorOrchestrator: ViewBehaviorOrchestrator | null = null;
 
+    private closeWatcher: CloseWatcher | null = null;
+
     /**
      * @internal
      */
@@ -558,6 +560,9 @@ export class FASTPicker extends FormAssociatedPicker {
 
         if (open && this.getRootActiveElement() === this.inputElement) {
             this.flyoutOpen = open;
+            this.closeWatcher?.destroy();
+            this.closeWatcher = new CloseWatcher();
+            this.closeWatcher.onclose = () => this.toggleFlyout(false);
             Updates.enqueue(() => {
                 if (this.menuElement !== undefined) {
                     this.setFocusedOption(0);
@@ -570,6 +575,7 @@ export class FASTPicker extends FormAssociatedPicker {
 
         this.flyoutOpen = false;
         this.disableMenu();
+        this.closeWatcher?.destroy();
         return;
     }
 
@@ -660,6 +666,9 @@ export class FASTPicker extends FormAssociatedPicker {
             }
 
             case keyEscape: {
+                if (this.closeWatcher) {
+                    return true;
+                }
                 this.toggleFlyout(false);
                 return false;
             }

packages/web-components/fast-foundation/src/select/select.ts

@@ -57,6 +57,8 @@ export class FASTSelect extends FormAssociatedSelect {
     @attr({ attribute: "open", mode: "boolean" })
     public open: boolean = false;
 
+    private closeWatcher: CloseWatcher | null = null;
+
     /**
      * Sets focus and synchronizes ARIA attributes when the open property changes.
      *
@@ -78,10 +80,16 @@ export class FASTSelect extends FormAssociatedSelect {
             this.focusAndScrollOptionIntoView();
             this.indexWhenOpened = this.selectedIndex;
 
+            this.closeWatcher?.destroy();
+            this.closeWatcher = new CloseWatcher();
+            this.closeWatcher.onclose = () => (this.open = false);
+
             // focus is directed to the element when `open` is changed programmatically
             Updates.enqueue(() => this.focus());
 
             return;
+        } else {
+            this.closeWatcher?.destroy();
         }
 
         this.cleanup?.();
@@ -523,7 +531,7 @@ export class FASTSelect extends FormAssociatedSelect {
             }
 
             case keyEscape: {
-                if (this.collapsible && this.open) {
+                if (this.collapsible && this.open && !this.closeWatcher) {
                     e.preventDefault();
                     this.open = false;
                 }

packages/web-components/fast-foundation/src/tooltip/tooltip.ts

@@ -89,6 +89,8 @@ export class FASTTooltip extends FASTElement {
     @observable
     private controlledVisibility: boolean = false;
 
+    private closeWatcher: CloseWatcher | null = null;
+
     /**
      * Switches between controlled and uncontrolled visibility.
      *
@@ -311,7 +313,9 @@ export class FASTTooltip extends FASTElement {
         this.addEventListener("mouseout", this.mouseoutAnchorHandler);
         this.addEventListener("mouseover", this.mouseoverAnchorHandler);
 
-        document.addEventListener("keydown", this.keydownDocumentHandler);
+        if (!("CloseWatcher" in window)) {
+            document.addEventListener("keydown", this.keydownDocumentHandler);
+        }
     }
 
     public connectedCallback(): void {
@@ -337,6 +341,7 @@ export class FASTTooltip extends FASTElement {
     public hideTooltip(): void {
         this._visible = false;
         this.cleanup?.();
+        this.closeWatcher?.destroy();
     }
 
     /**
@@ -446,5 +451,8 @@ export class FASTTooltip extends FASTElement {
     private showTooltip(): void {
         this._visible = true;
         Updates.enqueue(() => this.setPositioning());
+        this.closeWatcher?.destroy();
+        this.closeWatcher = new CloseWatcher();
+        this.closeWatcher.onclose = () => this.dismiss();
     }
 }