@internetarchive/modal-manager 2.0.4-alpha-webdev7960.0 → 2.0.4

package/test/modal-manager.test.ts

@@ -1,4 +1,10 @@
-import { fixture, expect, oneEvent, elementUpdated } from '@open-wc/testing';
+import {
+  fixture,
+  expect,
+  oneEvent,
+  elementUpdated,
+  nextFrame,
+} from '@open-wc/testing';
 import { TemplateResult, html } from 'lit';
 
 import '../src/modal-manager';
@@ -322,16 +328,14 @@ describe('Modal Manager', () => {
     const closeButton = modal?.shadowRoot?.querySelector(
       '.close-button'
     ) as HTMLElement;
-    const activeElement = modal?.shadowRoot?.activeElement as HTMLElement;
-
-    expect(activeElement).to.equal(closeButton);
+    expect(modal?.shadowRoot?.activeElement).to.equal(closeButton);
 
     // Tab again
     el.dispatchEvent(tabEvent);
     await elementUpdated(el);
 
     // Should be only one tabbable element
-    expect(activeElement).to.equal(closeButton);
+    expect(modal?.shadowRoot?.activeElement).to.equal(closeButton);
 
     // Shift + Tab
     const shiftTabEvent = new KeyboardEvent('keydown', {
@@ -342,6 +346,48 @@ describe('Modal Manager', () => {
     await elementUpdated(el);
 
     // Should be only one tabbable element
-    expect(activeElement).to.equal(closeButton);
+    expect(modal?.shadowRoot?.activeElement).to.equal(closeButton);
+  });
+
+  it('returns keyboard focus to the triggering element on close', async () => {
+    const config = new ModalConfig();
+    const el = (await fixture(html`
+      <div>
+        <button>Another button</button>
+        <button
+          id="open-modal-btn"
+          @click=${() => {
+            const modal = el.querySelector('modal-manager') as ModalManager;
+            modal.showModal({ config });
+          }}
+        >
+          Open modal
+        </button>
+        <modal-manager></modal-manager>
+      </div>
+    `)) as HTMLDivElement;
+
+    const openBtn = el.querySelector('#open-modal-btn') as HTMLButtonElement;
+    const modal = el.querySelector('modal-manager') as ModalManager;
+
+    // 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();
+    await 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() });
+    await nextFrame();
+
+    // Focus returns to the Open button when the modal closes
+    modal.closeModal();
+    await modal.updateComplete;
+    expect(document.activeElement).to.equal(openBtn);
   });
 });

package/test/modal-template.test.ts

@@ -1,206 +1,206 @@
-import { fixture, expect, oneEvent } from '@open-wc/testing';
-import { html } from 'lit';
-import '../src/modal-template';
-import { ModalConfig } from '../src/modal-config';
-
-describe('Modal Template', () => {
-  it('has correct default configuration', async () => {
-    const el = await fixture(html` <modal-template></modal-template> `);
-
-    const processingLogo = el.shadowRoot?.querySelector('.processing-logo');
-    const headline = el.shadowRoot?.querySelector('.headline');
-    const message = el.shadowRoot?.querySelector('.message');
-    const title = el.shadowRoot?.querySelector('h1.title') as HTMLElement;
-
-    expect(headline).to.not.exist;
-    expect(message).to.not.exist;
-    expect(title).to.not.exist;
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    expect('hidden' in processingLogo!.classList);
-  });
-
-  it('does not show the title if one not provided', async () => {
-    const config = new ModalConfig();
-    config.title = undefined;
-
-    const el = await fixture(html`
-      <modal-template .config=${config}></modal-template>
-    `);
-
-    const title = el.shadowRoot?.querySelector('h1.title');
-    expect(title).to.not.exist;
-  });
-
-  it('emits closeButtonPressed event when close button is pressed', async () => {
-    const el = await fixture(html` <modal-template></modal-template> `);
-
-    const closeButton = el.shadowRoot?.querySelector('.close-button');
-    const clickEvent = new MouseEvent('click');
-
-    setTimeout(() => {
-      closeButton?.dispatchEvent(clickEvent);
-    });
-    const response = await oneEvent(el, 'closeButtonPressed', false);
-    expect(response).to.exist;
-  });
-
-  it('emits closeButtonPressed event when close button gets spacebar pressed', async () => {
-    const el = await fixture(html` <modal-template></modal-template> `);
-
-    const closeButton = el.shadowRoot?.querySelector('.close-button');
-    const clickEvent = new KeyboardEvent('keydown', { key: ' ' });
-
-    setTimeout(() => {
-      closeButton?.dispatchEvent(clickEvent);
-    });
-    const response = await oneEvent(el, 'closeButtonPressed', false);
-    expect(response).to.exist;
-  });
-
-  it('emits leftNavButtonPressed event when left nav button is pressed', async () => {
-    const config = new ModalConfig();
-    config.showLeftNavButton = true;
-    const el = await fixture(html`
-      <modal-template .config=${config}></modal-template>
-    `);
-
-    const leftNavButton = el.shadowRoot?.querySelector('.back-button');
-    const clickEvent = new MouseEvent('click');
-
-    setTimeout(() => {
-      leftNavButton?.dispatchEvent(clickEvent);
-    });
-    const response = await oneEvent(el, 'leftNavButtonPressed', false);
-    expect(response).to.exist;
-  });
-
-  it('emits leftNavButtonPressed event when left nav button gets spacebar pressed', async () => {
-    const config = new ModalConfig();
-    config.showLeftNavButton = true;
-    const el = await fixture(html`
-      <modal-template .config=${config}></modal-template>
-    `);
-
-    const leftNavButton = el.shadowRoot?.querySelector('.back-button');
-    const clickEvent = new KeyboardEvent('keydown', { key: ' ' });
-
-    setTimeout(() => {
-      leftNavButton?.dispatchEvent(clickEvent);
-    });
-    const response = await oneEvent(el, 'leftNavButtonPressed', false);
-    expect(response).to.exist;
-  });
-
-  it('shows the processing indicator if configured to', async () => {
-    const config = new ModalConfig();
-    config.showProcessingIndicator = true;
-
-    const el = await fixture(html`
-      <modal-template .config=${config}></modal-template>
-    `);
-
-    const processingLogo = el.shadowRoot?.querySelector('.processing-logo');
-    const classList = processingLogo?.classList ?? [];
-    expect('hidden' in classList).to.equal(false);
-  });
-
-  it('shows the left nav button if configured to', async () => {
-    const config = new ModalConfig();
-    config.showLeftNavButton = true;
-    const el = await fixture(html`
-      <modal-template .config=${config}></modal-template>
-    `);
-
-    const leftNavButton = el.shadowRoot?.querySelector('.back-button');
-    expect(leftNavButton).to.exist;
-  });
-
-  it('hides the left nav button if configured to', async () => {
-    const config = new ModalConfig();
-    config.showCloseButton = false;
-    const el = await fixture(html`
-      <modal-template .config=${config}></modal-template>
-    `);
-
-    const closeButton = el.shadowRoot?.querySelector('.close-button');
-    expect(closeButton).to.not.exist;
-  });
-
-  it('uses custom text for the left nav button if configured to', async () => {
-    const config = new ModalConfig();
-    config.showLeftNavButton = true;
-    config.leftNavButtonText = 'Previous';
-    const el = await fixture(html`
-      <modal-template .config=${config}></modal-template>
-    `);
-
-    const leftNavButton = el.shadowRoot?.querySelector('.back-button');
-
-    expect(leftNavButton).to.exist;
-    expect(leftNavButton?.innerHTML).to.contain('Previous');
-  });
-
-  it('does not use any text for the left nav button if not configured to', async () => {
-    const config = new ModalConfig();
-    config.showLeftNavButton = true;
-
-    const el = await fixture(html`
-      <modal-template .config=${config}></modal-template>
-    `);
-
-    const leftNavButton = el.shadowRoot?.querySelector('.back-button');
-    expect(leftNavButton?.innerHTML).not.to.contain('Previous');
-  });
-
-  it('shows the close button if configured to', async () => {
-    const config = new ModalConfig();
-    config.showCloseButton = true;
-    const el = await fixture(html`
-      <modal-template .config=${config}></modal-template>
-    `);
-
-    const closeButton = el.shadowRoot?.querySelector('.close-button');
-    expect(closeButton).to.exist;
-  });
-
-  it('hides the close button if configured to', async () => {
-    const config = new ModalConfig();
-    config.showCloseButton = false;
-    const el = await fixture(html`
-      <modal-template .config=${config}></modal-template>
-    `);
-
-    const closeButton = el.shadowRoot?.querySelector('.close-button');
-    expect(closeButton).to.not.exist;
-  });
-
-  it('shows the properties from the config', async () => {
-    const config = new ModalConfig();
-    config.title = html`Boop`;
-    config.subtitle = html`Bop`;
-    config.headline = html`Foo`;
-    config.message = html`Bar`;
-
-    const el = await fixture(html`
-      <modal-template .config=${config}></modal-template>
-    `);
-
-    const title = el.shadowRoot?.querySelector('h1');
-    const subtitle = el.shadowRoot?.querySelector('h2');
-
-    const headline = el.shadowRoot?.querySelector('.headline');
-    const message = el.shadowRoot?.querySelector('.message');
-
-    expect(title).to.exist;
-    expect(title?.innerText).to.equal('Boop');
-
-    expect(subtitle).to.exist;
-    expect(subtitle?.innerText).to.equal('Bop');
-
-    expect(headline).to.exist;
-    expect(headline?.textContent).to.equal('Foo');
-
-    expect(message).to.exist;
-    expect(message?.textContent).to.equal('Bar');
-  });
-});
+import { fixture, expect, oneEvent } from '@open-wc/testing';
+import { html } from 'lit';
+import '../src/modal-template';
+import { ModalConfig } from '../src/modal-config';
+
+describe('Modal Template', () => {
+  it('has correct default configuration', async () => {
+    const el = await fixture(html` <modal-template></modal-template> `);
+
+    const processingLogo = el.shadowRoot?.querySelector('.processing-logo');
+    const headline = el.shadowRoot?.querySelector('.headline');
+    const message = el.shadowRoot?.querySelector('.message');
+    const title = el.shadowRoot?.querySelector('h1.title') as HTMLElement;
+
+    expect(headline).to.not.exist;
+    expect(message).to.not.exist;
+    expect(title).to.not.exist;
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    expect('hidden' in processingLogo!.classList);
+  });
+
+  it('does not show the title if one not provided', async () => {
+    const config = new ModalConfig();
+    config.title = undefined;
+
+    const el = await fixture(html`
+      <modal-template .config=${config}></modal-template>
+    `);
+
+    const title = el.shadowRoot?.querySelector('h1.title');
+    expect(title).to.not.exist;
+  });
+
+  it('emits closeButtonPressed event when close button is pressed', async () => {
+    const el = await fixture(html` <modal-template></modal-template> `);
+
+    const closeButton = el.shadowRoot?.querySelector('.close-button');
+    const clickEvent = new MouseEvent('click');
+
+    setTimeout(() => {
+      closeButton?.dispatchEvent(clickEvent);
+    });
+    const response = await oneEvent(el, 'closeButtonPressed', false);
+    expect(response).to.exist;
+  });
+
+  it('emits closeButtonPressed event when close button gets spacebar pressed', async () => {
+    const el = await fixture(html` <modal-template></modal-template> `);
+
+    const closeButton = el.shadowRoot?.querySelector('.close-button');
+    const clickEvent = new KeyboardEvent('keydown', { key: ' ' });
+
+    setTimeout(() => {
+      closeButton?.dispatchEvent(clickEvent);
+    });
+    const response = await oneEvent(el, 'closeButtonPressed', false);
+    expect(response).to.exist;
+  });
+
+  it('emits leftNavButtonPressed event when left nav button is pressed', async () => {
+    const config = new ModalConfig();
+    config.showLeftNavButton = true;
+    const el = await fixture(html`
+      <modal-template .config=${config}></modal-template>
+    `);
+
+    const leftNavButton = el.shadowRoot?.querySelector('.back-button');
+    const clickEvent = new MouseEvent('click');
+
+    setTimeout(() => {
+      leftNavButton?.dispatchEvent(clickEvent);
+    });
+    const response = await oneEvent(el, 'leftNavButtonPressed', false);
+    expect(response).to.exist;
+  });
+
+  it('emits leftNavButtonPressed event when left nav button gets spacebar pressed', async () => {
+    const config = new ModalConfig();
+    config.showLeftNavButton = true;
+    const el = await fixture(html`
+      <modal-template .config=${config}></modal-template>
+    `);
+
+    const leftNavButton = el.shadowRoot?.querySelector('.back-button');
+    const clickEvent = new KeyboardEvent('keydown', { key: ' ' });
+
+    setTimeout(() => {
+      leftNavButton?.dispatchEvent(clickEvent);
+    });
+    const response = await oneEvent(el, 'leftNavButtonPressed', false);
+    expect(response).to.exist;
+  });
+
+  it('shows the processing indicator if configured to', async () => {
+    const config = new ModalConfig();
+    config.showProcessingIndicator = true;
+
+    const el = await fixture(html`
+      <modal-template .config=${config}></modal-template>
+    `);
+
+    const processingLogo = el.shadowRoot?.querySelector('.processing-logo');
+    const classList = processingLogo?.classList ?? [];
+    expect('hidden' in classList).to.equal(false);
+  });
+
+  it('shows the left nav button if configured to', async () => {
+    const config = new ModalConfig();
+    config.showLeftNavButton = true;
+    const el = await fixture(html`
+      <modal-template .config=${config}></modal-template>
+    `);
+
+    const leftNavButton = el.shadowRoot?.querySelector('.back-button');
+    expect(leftNavButton).to.exist;
+  });
+
+  it('hides the left nav button if configured to', async () => {
+    const config = new ModalConfig();
+    config.showCloseButton = false;
+    const el = await fixture(html`
+      <modal-template .config=${config}></modal-template>
+    `);
+
+    const closeButton = el.shadowRoot?.querySelector('.close-button');
+    expect(closeButton).to.not.exist;
+  });
+
+  it('uses custom text for the left nav button if configured to', async () => {
+    const config = new ModalConfig();
+    config.showLeftNavButton = true;
+    config.leftNavButtonText = 'Previous';
+    const el = await fixture(html`
+      <modal-template .config=${config}></modal-template>
+    `);
+
+    const leftNavButton = el.shadowRoot?.querySelector('.back-button');
+
+    expect(leftNavButton).to.exist;
+    expect(leftNavButton?.innerHTML).to.contain('Previous');
+  });
+
+  it('does not use any text for the left nav button if not configured to', async () => {
+    const config = new ModalConfig();
+    config.showLeftNavButton = true;
+
+    const el = await fixture(html`
+      <modal-template .config=${config}></modal-template>
+    `);
+
+    const leftNavButton = el.shadowRoot?.querySelector('.back-button');
+    expect(leftNavButton?.innerHTML).not.to.contain('Previous');
+  });
+
+  it('shows the close button if configured to', async () => {
+    const config = new ModalConfig();
+    config.showCloseButton = true;
+    const el = await fixture(html`
+      <modal-template .config=${config}></modal-template>
+    `);
+
+    const closeButton = el.shadowRoot?.querySelector('.close-button');
+    expect(closeButton).to.exist;
+  });
+
+  it('hides the close button if configured to', async () => {
+    const config = new ModalConfig();
+    config.showCloseButton = false;
+    const el = await fixture(html`
+      <modal-template .config=${config}></modal-template>
+    `);
+
+    const closeButton = el.shadowRoot?.querySelector('.close-button');
+    expect(closeButton).to.not.exist;
+  });
+
+  it('shows the properties from the config', async () => {
+    const config = new ModalConfig();
+    config.title = html`Boop`;
+    config.subtitle = html`Bop`;
+    config.headline = html`Foo`;
+    config.message = html`Bar`;
+
+    const el = await fixture(html`
+      <modal-template .config=${config}></modal-template>
+    `);
+
+    const title = el.shadowRoot?.querySelector('h1');
+    const subtitle = el.shadowRoot?.querySelector('h2');
+
+    const headline = el.shadowRoot?.querySelector('.headline');
+    const message = el.shadowRoot?.querySelector('.message');
+
+    expect(title).to.exist;
+    expect(title?.innerText).to.equal('Boop');
+
+    expect(subtitle).to.exist;
+    expect(subtitle?.innerText).to.equal('Bop');
+
+    expect(headline).to.exist;
+    expect(headline?.textContent).to.equal('Foo');
+
+    expect(message).to.exist;
+    expect(message?.textContent).to.equal('Bar');
+  });
+});

package/vite.config.ts

@@ -1,23 +1,23 @@
-import { defineConfig } from 'vite';
-import { resolve } from 'path';
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  base: '',
-  assetsInclude: ['**/*.jpg'],
-  build: {
-    outDir: 'ghpages',
-    manifest: true,
-    rollupOptions: {
-      input: {
-        main: resolve(__dirname, 'index.html'),
-      },
-    },
-  },
-  server: {
-    host: true,
-    port: 8080,
-    open: true,
-    cors: true,
-  },
-});
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: '',
+  assetsInclude: ['**/*.jpg'],
+  build: {
+    outDir: 'ghpages',
+    manifest: true,
+    rollupOptions: {
+      input: {
+        main: resolve(__dirname, 'index.html'),
+      },
+    },
+  },
+  server: {
+    host: true,
+    port: 8080,
+    open: true,
+    cors: true,
+  },
+});