fix(modal): no longer loses focus trap after clicking inside the component

* restores changes reverted by #6483
* bumps focus-trap dep

Author: jcfranco

package-lock.json

@@ -74,7 +74,7 @@
     "@stencil/core": "2.20.0",
     "@types/color": "3.0.3",
     "color": "4.2.3",
-    "focus-trap": "7.2.0",
+    "focus-trap": "7.3.1",
     "form-request-submit-polyfill": "2.0.0",
     "lodash-es": "4.17.21",
     "sortablejs": "1.15.0"

package.json

@@ -389,6 +389,47 @@ describe("calcite-modal accessibility checks", () => {
     expect(await isElementFocused(page, `#${button1Id}`)).toBe(true);
   });
 
+  it("traps focus within the modal when user clicks inside the modal", async () => {
+    const page = await newE2EPage();
+    await page.setContent(
+      html`
+        <calcite-modal aria-labelledby="modal-title" close-button-disabled open>
+          <div slot="header" id="modal-title">Modal title</div>
+          <div slot="content">
+            <p>Modal content.</p>
+            <calcite-button icon-start="plus" id="plus" round></calcite-button>
+          </div>
+          <calcite-button slot="back" color="neutral" width="full">Back</calcite-button>
+          <calcite-button slot="secondary" width="full" appearance="outline">Cancel</calcite-button>
+          <calcite-button slot="primary" width="full">Save</calcite-button>
+        </calcite-modal>
+      `
+    );
+    await skipAnimations(page);
+
+    const contentEl = await page.find(`div[slot="content"]`);
+    const backButtonEl = await page.find(`calcite-button[slot="back"]`);
+
+    await page.keyboard.press("Tab");
+    expect(await isElementFocused(page, `#plus`)).toBe(true);
+
+    await page.keyboard.press("Tab");
+    expect(await isElementFocused(page, `[slot="back"]`)).toBe(true);
+
+    await page.keyboard.press("Tab");
+    expect(await isElementFocused(page, `[slot="secondary"]`)).toBe(true);
+
+    await page.keyboard.press("Tab");
+    expect(await isElementFocused(page, `[slot="primary"]`)).toBe(true);
+
+    await contentEl.click();
+    await page.waitForChanges();
+    await backButtonEl.click();
+    await page.waitForChanges();
+
+    expect(await isElementFocused(page, `[slot="back"]`)).toBe(true);
+  });
+
   describe("setFocus", () => {
     const createModalHTML = (contentHTML?: string, attrs?: string) =>
       `<calcite-modal open ${attrs}>${contentHTML}</calcite-modal>`;

src/components/modal/modal.e2e.ts

@@ -734,4 +734,48 @@ describe("calcite-popover", () => {
         shadowFocusTargetSelector: `.${CSS.closeButton}`
       }));
   });
+
+  it("should focus input element in the page with popover when user click", async () => {
+    // refer to https://github.com/Esri/calcite-components/issues/5993 for context
+    const page = await newE2EPage();
+    await page.setContent(html` <calcite-shell content-behind>
+        <calcite-shell-panel slot="panel-end">
+          <calcite-label>
+            value
+            <calcite-input-number value="0" min="0" max="10" id="shell-input"></calcite-input-number>
+          </calcite-label>
+          <calcite-button id="button">open popover</calcite-button>
+        </calcite-shell-panel>
+      </calcite-shell>
+
+      <calcite-popover reference-element="button">
+        <calcite-panel heading="popover panel header" closable="true" style="height: 400px">
+          <calcite-input-number value="5" min="0" max="10" id="popover-input"></calcite-input-number>
+        </calcite-panel>
+      </calcite-popover>`);
+
+    const popover = await page.find("calcite-popover");
+    expect(await popover.getProperty("open")).toBe(false);
+
+    const referenceElement = await page.find("calcite-button#button");
+    await referenceElement.click();
+    await page.waitForChanges();
+    expect(await popover.getProperty("open")).toBe(true);
+
+    const inputElInPopover = await page.find("calcite-input-number#popover-input");
+    await inputElInPopover.click();
+    expect(await page.evaluate(() => document.activeElement.id)).toBe("popover-input");
+
+    await page.keyboard.press("Backspace");
+    await page.keyboard.type("12345");
+    expect(await inputElInPopover.getProperty("value")).toBe("12345");
+
+    const inputElInShell = await page.find("calcite-input-number#shell-input");
+    await inputElInShell.click();
+    expect(await page.evaluate(() => document.activeElement.id)).toBe("shell-input");
+
+    await page.keyboard.press("Backspace");
+    await page.keyboard.type("12345");
+    expect(await inputElInShell.getProperty("value")).toBe("12345");
+  });
 });

src/components/popover/popover.e2e.ts

@@ -12,7 +12,6 @@ describe("focusTrapComponent", () => {
 
     connectFocusTrap(fakeComponent);
 
-    expect(fakeComponent.focusTrapEl.tabIndex).toBe(-1);
     expect(fakeComponent.focusTrap).toBeDefined();
     expect(fakeComponent.focusTrap.active).toBe(false);
 
@@ -34,14 +33,4 @@ describe("focusTrapComponent", () => {
     deactivateFocusTrap(fakeComponent);
     expect(deactivateSpy).toHaveBeenCalledTimes(1);
   });
-
-  it("focusTrapEl with tabIndex`", () => {
-    const fakeComponent = {} as any;
-    fakeComponent.focusTrapEl = document.createElement("div");
-    fakeComponent.focusTrapEl.tabIndex = 0;
-
-    connectFocusTrap(fakeComponent);
-    expect(fakeComponent.focusTrapEl.tabIndex).toBe(0);
-    expect(fakeComponent.focusTrap).toBeDefined();
-  });
 });

src/utils/focusTrapComponent.spec.ts

@@ -42,12 +42,11 @@ export function connectFocusTrap(component: FocusTrapComponent): void {
     return;
   }
 
-  if (focusTrapEl.tabIndex == null) {
-    focusTrapEl.tabIndex = -1;
-  }
-
   const focusTrapOptions: FocusTrapOptions = {
-    clickOutsideDeactivates: true,
+    allowOutsideClick: true,
+    clickOutsideDeactivates: (event: MouseEvent | TouchEvent) => {
+      return !event.composedPath().find((el) => (el as HTMLElement) === focusTrapEl);
+    },
     document: focusTrapEl.ownerDocument,
     escapeDeactivates: false,
     fallbackFocus: focusTrapEl,