@internetarchive/modal-manager 2.0.3 → 2.0.4-alpha-webdev7960.1

package/dist/test/modal-manager.test.js

@@ -1,275 +1,310 @@
-import { __awaiter } from "tslib";
-import { fixture, expect, oneEvent, elementUpdated } from '@open-wc/testing';
-import { html } from 'lit';
-import '../src/modal-manager';
-import { ModalConfig } from '../src/modal-config';
-import { ModalManagerMode } from '../src/modal-manager-mode';
-import { getTabbableElements } from '../src/shoelace/tabbable';
-describe('Modal Manager', () => {
-    it('defaults to closed', () => __awaiter(void 0, void 0, void 0, function* () {
+import { __awaiter } from "tslib";
+import { fixture, expect, oneEvent, elementUpdated, nextFrame, } from '@open-wc/testing';
+import { html } from 'lit';
+import '../src/modal-manager';
+import { ModalConfig } from '../src/modal-config';
+import { ModalManagerMode } from '../src/modal-manager-mode';
+import { getTabbableElements } from '../src/shoelace/tabbable';
+describe('Modal Manager', () => {
+    it('defaults to closed', () => __awaiter(void 0, void 0, void 0, function* () {
         const el = (yield fixture(html `
       <modal-manager></modal-manager>
-    `));
-        expect(el.mode).to.equal('closed');
-    }));
-    it('can be closed by calling closeModal', () => __awaiter(void 0, void 0, void 0, function* () {
+    `));
+        expect(el.mode).to.equal('closed');
+    }));
+    it('can be closed by calling closeModal', () => __awaiter(void 0, void 0, void 0, function* () {
         const el = (yield fixture(html `
       <modal-manager .mode=${ModalManagerMode.Open}></modal-manager>
-    `));
-        el.customModalContent = 'foo';
-        yield elementUpdated(el);
-        expect(el.customModalContent).to.equal('foo');
-        el.closeModal();
-        yield elementUpdated(el);
-        expect(el.mode).to.equal('closed');
-        expect(el.customModalContent).to.equal(undefined);
-    }));
-    it('can be closed by clicking on the backdrop', () => __awaiter(void 0, void 0, void 0, function* () {
-        var _a;
+    `));
+        el.customModalContent = 'foo';
+        yield elementUpdated(el);
+        expect(el.customModalContent).to.equal('foo');
+        el.closeModal();
+        yield elementUpdated(el);
+        expect(el.mode).to.equal('closed');
+        expect(el.customModalContent).to.equal(undefined);
+    }));
+    it('can be closed by clicking on the backdrop', () => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
         const el = (yield fixture(html `
       <modal-manager .mode=${ModalManagerMode.Open}></modal-manager>
-    `));
-        const backdrop = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.backdrop');
-        const clickEvent = new MouseEvent('click');
-        backdrop === null || backdrop === void 0 ? void 0 : backdrop.dispatchEvent(clickEvent);
-        yield elementUpdated(el);
-        expect(el.mode).to.equal('closed');
-    }));
-    it('emits a modeChanged event when opening', () => __awaiter(void 0, void 0, void 0, function* () {
+    `));
+        const backdrop = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.backdrop');
+        const clickEvent = new MouseEvent('click');
+        backdrop === null || backdrop === void 0 ? void 0 : backdrop.dispatchEvent(clickEvent);
+        yield elementUpdated(el);
+        expect(el.mode).to.equal('closed');
+    }));
+    it('emits a modeChanged event when opening', () => __awaiter(void 0, void 0, void 0, function* () {
         const el = (yield fixture(html `
       <modal-manager></modal-manager>
-    `));
-        const config = new ModalConfig();
-        setTimeout(() => {
-            el.showModal({ config });
-        });
-        const response = yield oneEvent(el, 'modeChanged', false);
-        expect(response.detail.mode).to.equal(ModalManagerMode.Open);
-    }));
-    it('emits a modeChanged event when closing', () => __awaiter(void 0, void 0, void 0, function* () {
+    `));
+        const config = new ModalConfig();
+        setTimeout(() => {
+            el.showModal({ config });
+        });
+        const response = yield oneEvent(el, 'modeChanged', false);
+        expect(response.detail.mode).to.equal(ModalManagerMode.Open);
+    }));
+    it('emits a modeChanged event when closing', () => __awaiter(void 0, void 0, void 0, function* () {
         const el = (yield fixture(html `
       <modal-manager></modal-manager>
-    `));
-        const config = new ModalConfig();
-        el.showModal({ config });
-        yield elementUpdated(el);
-        setTimeout(() => {
-            el.closeModal();
-        });
-        const response = yield oneEvent(el, 'modeChanged', false);
-        expect(response.detail.mode).to.equal(ModalManagerMode.Closed);
-    }));
-    it('can show a modal', () => __awaiter(void 0, void 0, void 0, function* () {
+    `));
+        const config = new ModalConfig();
+        el.showModal({ config });
+        yield elementUpdated(el);
+        setTimeout(() => {
+            el.closeModal();
+        });
+        const response = yield oneEvent(el, 'modeChanged', false);
+        expect(response.detail.mode).to.equal(ModalManagerMode.Closed);
+    }));
+    it('can show a modal', () => __awaiter(void 0, void 0, void 0, function* () {
         const el = (yield fixture(html `
       <modal-manager></modal-manager>
-    `));
-        const config = new ModalConfig();
-        el.showModal({ config });
-        yield elementUpdated(el);
-        expect(el.mode).to.equal(ModalManagerMode.Open);
-    }));
-    it('sets the --containerHeight CSS property when the window resizes', () => __awaiter(void 0, void 0, void 0, function* () {
+    `));
+        const config = new ModalConfig();
+        el.showModal({ config });
+        yield elementUpdated(el);
+        expect(el.mode).to.equal(ModalManagerMode.Open);
+    }));
+    it('sets the --containerHeight CSS property when the window resizes', () => __awaiter(void 0, void 0, void 0, function* () {
         const el = (yield fixture(html `
       <modal-manager></modal-manager>
-    `));
-        const config = new ModalConfig();
-        el.showModal({ config });
-        yield elementUpdated(el);
-        const event = new Event('resize');
-        const propBefore = el.style.getPropertyValue('--containerHeight');
-        expect(propBefore).to.equal('');
-        window.dispatchEvent(event);
-        yield elementUpdated(el);
-        const propAfter = el.style.getPropertyValue('--containerHeight');
-        expect(propAfter).to.not.equal('');
-    }));
-    it('calls the userClosedModalCallback when the user taps the backdrop', () => __awaiter(void 0, void 0, void 0, function* () {
-        var _b;
+    `));
+        const config = new ModalConfig();
+        el.showModal({ config });
+        yield elementUpdated(el);
+        const event = new Event('resize');
+        const propBefore = el.style.getPropertyValue('--containerHeight');
+        expect(propBefore).to.equal('');
+        window.dispatchEvent(event);
+        yield elementUpdated(el);
+        const propAfter = el.style.getPropertyValue('--containerHeight');
+        expect(propAfter).to.not.equal('');
+    }));
+    it('calls the userClosedModalCallback when the user taps the backdrop', () => __awaiter(void 0, void 0, void 0, function* () {
+        var _b;
         const el = (yield fixture(html `
       <modal-manager></modal-manager>
-    `));
-        const config = new ModalConfig();
-        let callbackCalled = false;
-        const callback = () => {
-            callbackCalled = true;
-        };
-        el.showModal({
-            config,
-            userClosedModalCallback: callback,
-        });
-        yield elementUpdated(el);
-        const backdrop = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.backdrop');
-        const clickEvent = new MouseEvent('click');
-        backdrop === null || backdrop === void 0 ? void 0 : backdrop.dispatchEvent(clickEvent);
-        yield elementUpdated(el);
-        expect(callbackCalled).to.equal(true);
-    }));
-    it('does not call the userClosedModalCallback when the modal just closes', () => __awaiter(void 0, void 0, void 0, function* () {
+    `));
+        const config = new ModalConfig();
+        let callbackCalled = false;
+        const callback = () => {
+            callbackCalled = true;
+        };
+        el.showModal({
+            config,
+            userClosedModalCallback: callback,
+        });
+        yield elementUpdated(el);
+        const backdrop = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.backdrop');
+        const clickEvent = new MouseEvent('click');
+        backdrop === null || backdrop === void 0 ? void 0 : backdrop.dispatchEvent(clickEvent);
+        yield elementUpdated(el);
+        expect(callbackCalled).to.equal(true);
+    }));
+    it('does not call the userClosedModalCallback when the modal just closes', () => __awaiter(void 0, void 0, void 0, function* () {
         const el = (yield fixture(html `
       <modal-manager></modal-manager>
-    `));
-        const config = new ModalConfig();
-        let callbackCalled = false;
-        const callback = () => {
-            callbackCalled = true;
-        };
-        el.showModal({
-            config,
-            userClosedModalCallback: callback,
-        });
-        yield elementUpdated(el);
-        el.closeModal();
-        yield elementUpdated(el);
-        expect(callbackCalled).to.equal(false);
-    }));
-    it('calls the userPressedLeftNavButtonCallback when the user clicks the left nav button', () => __awaiter(void 0, void 0, void 0, function* () {
-        var _c;
+    `));
+        const config = new ModalConfig();
+        let callbackCalled = false;
+        const callback = () => {
+            callbackCalled = true;
+        };
+        el.showModal({
+            config,
+            userClosedModalCallback: callback,
+        });
+        yield elementUpdated(el);
+        el.closeModal();
+        yield elementUpdated(el);
+        expect(callbackCalled).to.equal(false);
+    }));
+    it('calls the userPressedLeftNavButtonCallback when the user clicks the left nav button', () => __awaiter(void 0, void 0, void 0, function* () {
+        var _c;
         const el = (yield fixture(html `
       <modal-manager></modal-manager>
-    `));
-        const config = new ModalConfig();
-        config.showLeftNavButton = true;
-        let callbackCalled = false;
-        const callback = () => {
-            callbackCalled = true;
-        };
-        el.showModal({
-            config,
-            userPressedLeftNavButtonCallback: callback,
-        });
-        yield elementUpdated(el);
-        const modalTemplate = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('modal-template');
-        expect(modalTemplate).to.exist;
-        modalTemplate === null || modalTemplate === void 0 ? void 0 : modalTemplate.dispatchEvent(new Event('leftNavButtonPressed'));
-        yield elementUpdated(el);
-        expect(callbackCalled).to.equal(true);
-    }));
-    it('mode is set to closed when close button is pressed', () => __awaiter(void 0, void 0, void 0, function* () {
-        var _d, _e;
+    `));
+        const config = new ModalConfig();
+        config.showLeftNavButton = true;
+        let callbackCalled = false;
+        const callback = () => {
+            callbackCalled = true;
+        };
+        el.showModal({
+            config,
+            userPressedLeftNavButtonCallback: callback,
+        });
+        yield elementUpdated(el);
+        const modalTemplate = (_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('modal-template');
+        expect(modalTemplate).to.exist;
+        modalTemplate === null || modalTemplate === void 0 ? void 0 : modalTemplate.dispatchEvent(new Event('leftNavButtonPressed'));
+        yield elementUpdated(el);
+        expect(callbackCalled).to.equal(true);
+    }));
+    it('mode is set to closed when close button is pressed', () => __awaiter(void 0, void 0, void 0, function* () {
+        var _d, _e;
         const el = (yield fixture(html `
       <modal-manager></modal-manager>
-    `));
-        const config = new ModalConfig();
-        el.showModal({ config });
-        yield elementUpdated(el);
-        expect(el.mode).to.equal('open');
-        const modal = (_d = el.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('modal-template');
-        const closeButton = (_e = modal === null || modal === void 0 ? void 0 : modal.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('.close-button');
-        const clickEvent = new MouseEvent('click');
-        closeButton === null || closeButton === void 0 ? void 0 : closeButton.dispatchEvent(clickEvent);
-        yield elementUpdated(el);
-        expect(el.mode).to.equal('closed');
-    }));
-    it('mode is set to closed when close button gets spacebar pressed', () => __awaiter(void 0, void 0, void 0, function* () {
-        var _f, _g;
+    `));
+        const config = new ModalConfig();
+        el.showModal({ config });
+        yield elementUpdated(el);
+        expect(el.mode).to.equal('open');
+        const modal = (_d = el.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('modal-template');
+        const closeButton = (_e = modal === null || modal === void 0 ? void 0 : modal.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('.close-button');
+        const clickEvent = new MouseEvent('click');
+        closeButton === null || closeButton === void 0 ? void 0 : closeButton.dispatchEvent(clickEvent);
+        yield elementUpdated(el);
+        expect(el.mode).to.equal('closed');
+    }));
+    it('mode is set to closed when close button gets spacebar pressed', () => __awaiter(void 0, void 0, void 0, function* () {
+        var _f, _g;
         const el = (yield fixture(html `
       <modal-manager></modal-manager>
-    `));
-        const config = new ModalConfig();
-        el.showModal({ config });
-        yield elementUpdated(el);
-        expect(el.mode).to.equal('open');
-        const modal = (_f = el.shadowRoot) === null || _f === void 0 ? void 0 : _f.querySelector('modal-template');
-        const closeButton = (_g = modal === null || modal === void 0 ? void 0 : modal.shadowRoot) === null || _g === void 0 ? void 0 : _g.querySelector('.close-button');
-        // Close with keyboard
-        const spacebarEvent = new KeyboardEvent('keydown', { key: ' ' });
-        closeButton === null || closeButton === void 0 ? void 0 : closeButton.dispatchEvent(spacebarEvent);
-        yield elementUpdated(el);
-        expect(el.mode).to.equal('closed');
-    }));
-    it('mode remains open when close button gets non-button keypress', () => __awaiter(void 0, void 0, void 0, function* () {
-        var _h, _j;
+    `));
+        const config = new ModalConfig();
+        el.showModal({ config });
+        yield elementUpdated(el);
+        expect(el.mode).to.equal('open');
+        const modal = (_f = el.shadowRoot) === null || _f === void 0 ? void 0 : _f.querySelector('modal-template');
+        const closeButton = (_g = modal === null || modal === void 0 ? void 0 : modal.shadowRoot) === null || _g === void 0 ? void 0 : _g.querySelector('.close-button');
+        // Close with keyboard
+        const spacebarEvent = new KeyboardEvent('keydown', { key: ' ' });
+        closeButton === null || closeButton === void 0 ? void 0 : closeButton.dispatchEvent(spacebarEvent);
+        yield elementUpdated(el);
+        expect(el.mode).to.equal('closed');
+    }));
+    it('mode remains open when close button gets non-button keypress', () => __awaiter(void 0, void 0, void 0, function* () {
+        var _h, _j;
         const el = (yield fixture(html `
       <modal-manager></modal-manager>
-    `));
-        const config = new ModalConfig();
-        el.showModal({ config });
-        yield elementUpdated(el);
-        expect(el.mode).to.equal('open');
-        const modal = (_h = el.shadowRoot) === null || _h === void 0 ? void 0 : _h.querySelector('modal-template');
-        const closeButton = (_j = modal === null || modal === void 0 ? void 0 : modal.shadowRoot) === null || _j === void 0 ? void 0 : _j.querySelector('.close-button');
-        // Close with keyboard
-        const keyboardEvent = new KeyboardEvent('keydown', { key: '.' });
-        closeButton === null || closeButton === void 0 ? void 0 : closeButton.dispatchEvent(keyboardEvent);
-        yield elementUpdated(el);
-        expect(el.mode).to.equal('open');
-    }));
-    it('allows the user to close by clicking on the backdrop if configured to', () => __awaiter(void 0, void 0, void 0, function* () {
-        var _k;
+    `));
+        const config = new ModalConfig();
+        el.showModal({ config });
+        yield elementUpdated(el);
+        expect(el.mode).to.equal('open');
+        const modal = (_h = el.shadowRoot) === null || _h === void 0 ? void 0 : _h.querySelector('modal-template');
+        const closeButton = (_j = modal === null || modal === void 0 ? void 0 : modal.shadowRoot) === null || _j === void 0 ? void 0 : _j.querySelector('.close-button');
+        // Close with keyboard
+        const keyboardEvent = new KeyboardEvent('keydown', { key: '.' });
+        closeButton === null || closeButton === void 0 ? void 0 : closeButton.dispatchEvent(keyboardEvent);
+        yield elementUpdated(el);
+        expect(el.mode).to.equal('open');
+    }));
+    it('allows the user to close by clicking on the backdrop if configured to', () => __awaiter(void 0, void 0, void 0, function* () {
+        var _k;
         const el = (yield fixture(html `
       <modal-manager></modal-manager>
-    `));
-        const config = new ModalConfig();
-        config.closeOnBackdropClick = true;
-        el.showModal({ config });
-        yield elementUpdated(el);
-        const backdrop = (_k = el.shadowRoot) === null || _k === void 0 ? void 0 : _k.querySelector('.backdrop');
-        const clickEvent = new MouseEvent('click');
-        backdrop === null || backdrop === void 0 ? void 0 : backdrop.dispatchEvent(clickEvent);
-        yield elementUpdated(el);
-        expect(el.mode).to.equal('closed');
-    }));
-    it("doesn't allow the user to close by clicking on the backdrop if configured to", () => __awaiter(void 0, void 0, void 0, function* () {
-        var _l;
+    `));
+        const config = new ModalConfig();
+        config.closeOnBackdropClick = true;
+        el.showModal({ config });
+        yield elementUpdated(el);
+        const backdrop = (_k = el.shadowRoot) === null || _k === void 0 ? void 0 : _k.querySelector('.backdrop');
+        const clickEvent = new MouseEvent('click');
+        backdrop === null || backdrop === void 0 ? void 0 : backdrop.dispatchEvent(clickEvent);
+        yield elementUpdated(el);
+        expect(el.mode).to.equal('closed');
+    }));
+    it("doesn't allow the user to close by clicking on the backdrop if configured to", () => __awaiter(void 0, void 0, void 0, function* () {
+        var _l;
         const el = (yield fixture(html `
       <modal-manager></modal-manager>
-    `));
-        const config = new ModalConfig();
-        config.closeOnBackdropClick = false;
-        el.showModal({ config });
-        yield elementUpdated(el);
-        const backdrop = (_l = el.shadowRoot) === null || _l === void 0 ? void 0 : _l.querySelector('.backdrop');
-        const clickEvent = new MouseEvent('click');
-        backdrop === null || backdrop === void 0 ? void 0 : backdrop.dispatchEvent(clickEvent);
-        yield elementUpdated(el);
-        expect(el.getMode()).to.equal('open');
-    }));
-    it('ia logo should not visible on modal', () => __awaiter(void 0, void 0, void 0, function* () {
-        var _m;
+    `));
+        const config = new ModalConfig();
+        config.closeOnBackdropClick = false;
+        el.showModal({ config });
+        yield elementUpdated(el);
+        const backdrop = (_l = el.shadowRoot) === null || _l === void 0 ? void 0 : _l.querySelector('.backdrop');
+        const clickEvent = new MouseEvent('click');
+        backdrop === null || backdrop === void 0 ? void 0 : backdrop.dispatchEvent(clickEvent);
+        yield elementUpdated(el);
+        expect(el.getMode()).to.equal('open');
+    }));
+    it('ia logo should not visible on modal', () => __awaiter(void 0, void 0, void 0, function* () {
+        var _m;
         const el = (yield fixture(html `
       <modal-manager></modal-manager>
-    `));
-        const config = new ModalConfig();
-        config.showHeaderLogo = false;
-        el.showModal({ config });
-        yield elementUpdated(el);
-        const logoIcon = (_m = el.shadowRoot) === null || _m === void 0 ? void 0 : _m.querySelector('.logo-icon');
-        expect(logoIcon).to.not.exist;
-    }));
-    it('should trap Tab key', () => __awaiter(void 0, void 0, void 0, function* () {
-        var _o, _p, _q;
+    `));
+        const config = new ModalConfig();
+        config.showHeaderLogo = false;
+        el.showModal({ config });
+        yield elementUpdated(el);
+        const logoIcon = (_m = el.shadowRoot) === null || _m === void 0 ? void 0 : _m.querySelector('.logo-icon');
+        expect(logoIcon).to.not.exist;
+    }));
+    it('should trap Tab key', () => __awaiter(void 0, void 0, void 0, function* () {
+        var _o, _p, _q, _r, _s;
         const el = (yield fixture(html `
       <modal-manager></modal-manager>
-    `));
-        const config = new ModalConfig();
-        el.showModal({ config });
-        yield elementUpdated(el);
-        expect(el.mode).to.equal('open');
-        // Tab once to focus
-        const tabEvent = new KeyboardEvent('keydown', { key: 'Tab' });
-        document.dispatchEvent(tabEvent);
-        yield elementUpdated(el);
-        // Should be only one tabbable element
-        const modal = (_o = el.shadowRoot) === null || _o === void 0 ? void 0 : _o.querySelector('modal-template');
-        const tabbableElements = getTabbableElements(modal);
-        expect(tabbableElements === null || tabbableElements === void 0 ? void 0 : tabbableElements.length).to.equal(1);
-        const closeButton = (_p = modal === null || modal === void 0 ? void 0 : modal.shadowRoot) === null || _p === void 0 ? void 0 : _p.querySelector('.close-button');
-        const activeElement = (_q = modal === null || modal === void 0 ? void 0 : modal.shadowRoot) === null || _q === void 0 ? void 0 : _q.activeElement;
-        expect(activeElement).to.equal(closeButton);
-        // Tab again
-        el.dispatchEvent(tabEvent);
-        yield elementUpdated(el);
-        // Should be only one tabbable element
-        expect(activeElement).to.equal(closeButton);
-        // Shift + Tab
-        const shiftTabEvent = new KeyboardEvent('keydown', {
-            key: 'Tab',
-            shiftKey: true,
-        });
-        document.dispatchEvent(shiftTabEvent);
-        yield elementUpdated(el);
-        // Should be only one tabbable element
-        expect(activeElement).to.equal(closeButton);
-    }));
-});
+    `));
+        const config = new ModalConfig();
+        el.showModal({ config });
+        yield elementUpdated(el);
+        expect(el.mode).to.equal('open');
+        // Tab once to focus
+        const tabEvent = new KeyboardEvent('keydown', { key: 'Tab' });
+        document.dispatchEvent(tabEvent);
+        yield elementUpdated(el);
+        // Should be only one tabbable element
+        const modal = (_o = el.shadowRoot) === null || _o === void 0 ? void 0 : _o.querySelector('modal-template');
+        const tabbableElements = getTabbableElements(modal);
+        expect(tabbableElements === null || tabbableElements === void 0 ? void 0 : tabbableElements.length).to.equal(1);
+        const closeButton = (_p = modal === null || modal === void 0 ? void 0 : modal.shadowRoot) === null || _p === void 0 ? void 0 : _p.querySelector('.close-button');
+        expect((_q = modal === null || modal === void 0 ? void 0 : modal.shadowRoot) === null || _q === void 0 ? void 0 : _q.activeElement).to.equal(closeButton);
+        // Tab again
+        el.dispatchEvent(tabEvent);
+        yield elementUpdated(el);
+        // Should be only one tabbable element
+        expect((_r = modal === null || modal === void 0 ? void 0 : modal.shadowRoot) === null || _r === void 0 ? void 0 : _r.activeElement).to.equal(closeButton);
+        // Shift + Tab
+        const shiftTabEvent = new KeyboardEvent('keydown', {
+            key: 'Tab',
+            shiftKey: true,
+        });
+        document.dispatchEvent(shiftTabEvent);
+        yield elementUpdated(el);
+        // Should be only one tabbable element
+        expect((_s = modal === null || modal === void 0 ? void 0 : modal.shadowRoot) === null || _s === void 0 ? void 0 : _s.activeElement).to.equal(closeButton);
+    }));
+    it('returns keyboard focus to the triggering element on close', () => __awaiter(void 0, void 0, void 0, function* () {
+        const config = new ModalConfig();
+        const el = (yield fixture(html `
+      <div>
+        <button>Another button</button>
+        <button
+          id="open-modal-btn"
+          @click=${() => {
+            const modal = el.querySelector('modal-manager');
+            modal.showModal({ config });
+        }}
+        >
+          Open modal
+        </button>
+        <modal-manager></modal-manager>
+      </div>
+    `));
+        const openBtn = el.querySelector('#open-modal-btn');
+        const modal = el.querySelector('modal-manager');
+        // Focus is initially on the Open button
+        openBtn.focus();
+        expect(document.activeElement).to.equal(openBtn);
+        // Focus enters the modal when it is opened
+        openBtn.click();
+        yield nextFrame();
+        expect(document.activeElement).to.equal(modal);
+        // With the modal already open, simulate showing different content.
+        // This step is to ensure that even if showModal is called multiple times, we still
+        // maintain the originally-focused element (subsequent calls do not overwrite it).
+        modal.showModal({ config: new ModalConfig() });
+        yield nextFrame();
+        // Focus returns to the Open button when the modal closes
+        modal.closeModal();
+        yield modal.updateComplete;
+        expect(document.activeElement).to.equal(openBtn);
+    }));
+});
 //# sourceMappingURL=modal-manager.test.js.map