refactor(modal): Update modal to use focus-trap module.

package.json

@@ -70,11 +70,11 @@
     "url": "git+https://github.com/Esri/calcite-components.git"
   },
   "dependencies": {
-    "@a11y/focus-trap": "1.0.5",
     "@floating-ui/dom": "1.0.3",
     "@stencil/core": "2.18.1",
     "@types/color": "3.0.3",
     "color": "4.2.3",
+    "focus-trap": "7.0.0",
     "form-request-submit-polyfill": "2.0.0",
     "lodash-es": "4.17.21",
     "sortablejs": "1.15.0"

src/components/modal/modal.e2e.ts

@@ -1,7 +1,7 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { focusable, renders, slots, hidden } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
-import { CSS, SLOTS } from "./resources";
+import { CSS, SLOTS, ANIMATION_TIMEOUT } from "./resources";
 import { newProgrammaticE2EPage, skipAnimations } from "../../tests/utils";
 
 describe("calcite-modal properties", () => {
@@ -235,7 +235,8 @@ describe("calcite-modal accessibility checks", () => {
   });
 
   describe("setFocus", () => {
-    const createModalHTML = (contentHTML?: string) => `<calcite-modal active>${contentHTML}</calcite-modal>`;
+    const createModalHTML = (contentHTML?: string, attrs?: string) =>
+      `<calcite-modal active ${attrs}>${contentHTML}</calcite-modal>`;
 
     const closeButtonFocusId = "close-button";
     const closeButtonTargetSelector = ".close";
@@ -244,17 +245,18 @@ describe("calcite-modal accessibility checks", () => {
     const focusableContentHTML = html`<h3 slot="header">Title</h3>
       <p slot="content">This is the content <button class=${focusableContentTargetClass}>test</button></p>`;
 
-    it("focuses focusable content by default", async () =>
+    it("focuses close button by default", async () =>
       focusable(createModalHTML(focusableContentHTML), {
-        focusTargetSelector: `.${focusableContentTargetClass}`
-      }));
-
-    it("focuses close button if there is no focusable content", async () =>
-      focusable(createModalHTML(), {
         focusId: closeButtonFocusId,
         shadowFocusTargetSelector: closeButtonTargetSelector
       }));
 
+    it("focuses content if there is no close button", async () =>
+      focusable(createModalHTML(focusableContentHTML, "disable-close-button"), {
+        focusTargetSelector: `.${focusableContentTargetClass}`,
+        delay: ANIMATION_TIMEOUT
+      }));
+
     it.skip("can focus close button directly", async () =>
       focusable(createModalHTML(focusableContentHTML), {
         focusId: closeButtonFocusId,

src/components/modal/modal.tsx

@@ -12,16 +12,7 @@ import {
   VNode,
   Watch
 } from "@stencil/core";
-import {
-  ensureId,
-  FocusableElement,
-  focusElement,
-  getSlotted,
-  isCalciteFocusable
-} from "../../utils/dom";
-
-import { queryShadowRoot } from "@a11y/focus-trap/shadow";
-import { isFocusable, isHidden } from "@a11y/focus-trap/focusable";
+import { ensureId, focusElement, getSlotted } from "../../utils/dom";
 import { Scale } from "../interfaces";
 import { ModalBackgroundColor } from "./interfaces";
 import { CSS, ICONS, SLOTS, TEXT } from "./resources";
@@ -36,14 +27,13 @@ import {
   connectOpenCloseComponent,
   disconnectOpenCloseComponent
 } from "../../utils/openCloseComponent";
-
-const isFocusableExtended = (el: FocusableElement): boolean => {
-  return isCalciteFocusable(el) || isFocusable(el);
-};
-
-const getFocusableElements = (el: HTMLElement | ShadowRoot): HTMLElement[] => {
-  return queryShadowRoot(el, isHidden, isFocusableExtended);
-};
+import {
+  FocusTrapComponent,
+  FocusTrap,
+  connectFocusTrap,
+  activateFocusTrap,
+  deactivateFocusTrap
+} from "../../utils/focusTrapComponent";
 
 /**
  * @slot header - A slot for adding header text.
@@ -58,7 +48,7 @@ const getFocusableElements = (el: HTMLElement | ShadowRoot): HTMLElement[] => {
   styleUrl: "modal.scss",
   shadow: true
 })
-export class Modal implements ConditionalSlotComponent, OpenCloseComponent {
+export class Modal implements ConditionalSlotComponent, OpenCloseComponent, FocusTrapComponent {
   //--------------------------------------------------------------------------
   //
   //  Element
@@ -156,6 +146,7 @@ export class Modal implements ConditionalSlotComponent, OpenCloseComponent {
     this.mutationObserver?.disconnect();
     disconnectConditionalSlotComponent(this);
     disconnectOpenCloseComponent(this);
+    deactivateFocusTrap(this);
   }
 
   render(): VNode {
@@ -175,7 +166,6 @@ export class Modal implements ConditionalSlotComponent, OpenCloseComponent {
           }}
           ref={this.setTransitionEl}
         >
-          <div data-focus-fence onFocus={this.focusLastElement} tabindex="0" />
           <div class={CSS.header}>
             {this.renderCloseButton()}
             <header class={CSS.title}>
@@ -193,7 +183,6 @@ export class Modal implements ConditionalSlotComponent, OpenCloseComponent {
             <slot name={SLOTS.content} />
           </div>
           {this.renderFooter()}
-          <div data-focus-fence onFocus={this.focusFirstElement} tabindex="0" />
         </div>
       </Host>
     );
@@ -286,14 +275,16 @@ export class Modal implements ConditionalSlotComponent, OpenCloseComponent {
     this.updateFooterVisibility()
   );
 
-  previousActiveElement: HTMLElement;
-
   titleId: string;
 
   openTransitionProp = "opacity";
 
   transitionEl: HTMLDivElement;
 
+  focusTrap: FocusTrap;
+
+  focusTrapEl: HTMLDivElement;
+
   //--------------------------------------------------------------------------
   //
   //  Event Listeners
@@ -355,11 +346,13 @@ export class Modal implements ConditionalSlotComponent, OpenCloseComponent {
    */
   @Method()
   async setFocus(focusId?: "close-button"): Promise<void> {
-    const closeButton = this.closeButtonEl;
+    const { closeButtonEl } = this;
 
-    return focusElement(
-      focusId === "close-button" ? closeButton : getFocusableElements(this.el)[0] || closeButton
-    );
+    if (closeButtonEl && focusId === "close-button") {
+      return focusElement(closeButtonEl);
+    }
+
+    activateFocusTrap(this);
   }
 
   /**
@@ -386,9 +379,11 @@ export class Modal implements ConditionalSlotComponent, OpenCloseComponent {
   //
   //--------------------------------------------------------------------------
 
-  private setTransitionEl = (el): void => {
+  private setTransitionEl = (el: HTMLDivElement): void => {
     this.transitionEl = el;
     connectOpenCloseComponent(this);
+    this.focusTrapEl = el;
+    connectFocusTrap(this);
   };
 
   onBeforeOpen(): void {
@@ -409,6 +404,7 @@ export class Modal implements ConditionalSlotComponent, OpenCloseComponent {
   onClose(): void {
     this.transitionEl.classList.remove(CSS.closingIdle, CSS.closingActive);
     this.calciteModalClose.emit();
+    deactivateFocusTrap(this);
   }
 
   @Watch("active")
@@ -431,11 +427,11 @@ export class Modal implements ConditionalSlotComponent, OpenCloseComponent {
   private openEnd = (): void => {
     this.setFocus();
     this.el.removeEventListener("calciteModalOpen", this.openEnd);
+    activateFocusTrap(this);
   };
 
   /** Open the modal */
   private openModal() {
-    this.previousActiveElement = document.activeElement as HTMLElement;
     this.el.addEventListener("calciteModalOpen", this.openEnd);
     this.open = true;
     this.isOpen = true;
@@ -461,26 +457,10 @@ export class Modal implements ConditionalSlotComponent, OpenCloseComponent {
     return this.beforeClose(this.el).then(() => {
       this.open = false;
       this.isOpen = false;
-      focusElement(this.previousActiveElement);
       this.removeOverflowHiddenClass();
     });
   };
 
-  focusFirstElement = (): void => {
-    focusElement(this.disableCloseButton ? getFocusableElements(this.el)[0] : this.closeButtonEl);
-  };
-
-  focusLastElement = (): void => {
-    const focusableElements = getFocusableElements(this.el).filter(
-      (el) => !el.getAttribute("data-focus-fence")
-    );
-    if (focusableElements.length > 0) {
-      focusElement(focusableElements[focusableElements.length - 1]);
-    } else {
-      focusElement(this.closeButtonEl);
-    }
-  };
-
   private removeOverflowHiddenClass(): void {
     document.documentElement.classList.remove(CSS.overflowHidden);
   }

src/components/modal/resources.ts

@@ -34,3 +34,5 @@ export const SLOTS = {
 export const TEXT = {
   close: "Close"
 };
+
+export const ANIMATION_TIMEOUT = 300;

src/tests/commonTests.ts

@@ -196,6 +196,11 @@ interface FocusableOptions {
    * selector used to assert the focused shadow DOM element
    */
   shadowFocusTargetSelector?: string;
+
+  /**
+   * Used to delay setFocus call in ms.
+   */
+  delay?: number;
 }
 
 /**
@@ -210,6 +215,10 @@ export async function focusable(componentTagOrHTML: TagOrHTML, options?: Focusab
   const element = await page.find(tag);
   const focusTargetSelector = options?.focusTargetSelector || tag;
 
+  if (options?.delay) {
+    await page.waitForTimeout(options.delay);
+  }
+
   await element.callMethod("setFocus", options?.focusId); // assumes element is FocusableElement
 
   if (options?.shadowFocusTargetSelector) {