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

package/package.json

@@ -1,85 +1,85 @@
-{
-  "name": "@internetarchive/modal-manager",
-  "version": "2.0.3",
-  "description": "A Modal Manager Web Component",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/internetarchive/iaux-modal-manager.git"
-  },
-  "license": "AGPL-3.0-only",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "scripts": {
-    "prepare": "npm run build && husky install",
-    "prepare:ghpages": "rimraf ghpages && npm run prepare && vite build && cp -R assets/images ghpages/assets/images",
-    "start": "concurrently --kill-others --names tsc,es-dev-server \"npm run tsc:watch\" \"es-dev-server --app-index index.html --node-resolve --open --watch --preserve-symlinks\"",
-    "docs": "typedoc",
-    "build": "tsc",
-    "tsc:watch": "tsc --watch",
-    "lint:eslint": "eslint --ext .ts . --ignore-path .gitignore",
-    "format:eslint": "eslint --ext .ts . --fix --ignore-path .gitignore",
-    "lint:prettier": "prettier \"**/*.ts\" --check --ignore-path .gitignore",
-    "format:prettier": "prettier \"**/*.ts\" --write --ignore-path .gitignore",
-    "lint": "npm run lint:eslint && npm run lint:prettier",
-    "format": "npm run format:eslint && npm run format:prettier",
-    "circular": "madge --circular .",
-    "test": "tsc && npm run lint && npm run circular && karma start --coverage",
-    "test:watch": "concurrently --kill-others --names tsc,karma \"npm run tsc:watch\" \"karma start --auto-watch=true --single-run=false\"",
-    "publish:alpha": "npm run test && npm run prepare && npm version prerelease --preid alpha --no-git-tag-version && npm publish --tag alpha"
-  },
-  "dependencies": {
-    "@internetarchive/ia-activity-indicator": "^0.0.6",
-    "@internetarchive/icon-close": "^1.3.4",
-    "@internetarchive/icon-ia-logo": "^1.3.4",
-    "@internetarchive/icon-user": "^1.3.4",
-    "lit": "^2.8.0",
-    "throttle-debounce": "^5.0.0"
-  },
-  "devDependencies": {
-    "@open-wc/eslint-config": "^9.2.2",
-    "@open-wc/testing": "^4.0.0",
-    "@open-wc/testing-karma": "^3.0.0",
-    "@types/mocha": "^10.0.0",
-    "@types/node": "^20.8.4",
-    "@types/throttle-debounce": "^5.0.0",
-    "@typescript-eslint/eslint-plugin": "^7.1.0",
-    "@typescript-eslint/parser": "^7.1.0",
-    "concurrently": "^8.0.0",
-    "deepmerge": "^4.0.0",
-    "es-dev-server": "^2.0.0",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^6.11.0",
-    "husky": "^9.0.0",
-    "lint-staged": "^14.0.1",
-    "madge": "^6.0.0",
-    "prettier": "^2.7.1",
-    "rimraf": "^5.0.5",
-    "tslib": "^2.4.0",
-    "typedoc": "^0.25.0",
-    "typescript": "^4.7.4",
-    "vite": "^4.4.11"
-  },
-  "eslintConfig": {
-    "extends": [
-      "@open-wc/eslint-config",
-      "eslint-config-prettier"
-    ]
-  },
-  "prettier": {
-    "singleQuote": true,
-    "arrowParens": "avoid"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "*.ts": [
-      "eslint --fix",
-      "prettier --write",
-      "git add"
-    ]
-  }
-}
+{
+  "name": "@internetarchive/modal-manager",
+  "version": "2.0.4-alpha-webdev7960.1",
+  "description": "A Modal Manager Web Component",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/internetarchive/iaux-modal-manager.git"
+  },
+  "license": "AGPL-3.0-only",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "prepare": "npm run build && husky install",
+    "prepare:ghpages": "rimraf ghpages && npm run prepare && vite build && cp -R assets/images ghpages/assets/images",
+    "start": "concurrently --kill-others --names tsc,es-dev-server \"npm run tsc:watch\" \"es-dev-server --app-index index.html --node-resolve --open --watch --preserve-symlinks\"",
+    "docs": "typedoc",
+    "build": "tsc",
+    "tsc:watch": "tsc --watch",
+    "lint:eslint": "eslint --ext .ts . --ignore-path .gitignore",
+    "format:eslint": "eslint --ext .ts . --fix --ignore-path .gitignore",
+    "lint:prettier": "prettier \"**/*.ts\" --check --ignore-path .gitignore",
+    "format:prettier": "prettier \"**/*.ts\" --write --ignore-path .gitignore",
+    "lint": "npm run lint:eslint && npm run lint:prettier",
+    "format": "npm run format:eslint && npm run format:prettier",
+    "circular": "madge --circular .",
+    "test": "tsc && npm run lint && npm run circular && karma start --coverage",
+    "test:watch": "concurrently --kill-others --names tsc,karma \"npm run tsc:watch\" \"karma start --auto-watch=true --single-run=false\"",
+    "publish:alpha": "npm run test && npm run prepare && npm version prerelease --preid alpha --no-git-tag-version && npm publish --tag alpha"
+  },
+  "dependencies": {
+    "@internetarchive/ia-activity-indicator": "^0.0.6",
+    "@internetarchive/icon-close": "^1.3.4",
+    "@internetarchive/icon-ia-logo": "^1.3.4",
+    "@internetarchive/icon-user": "^1.3.4",
+    "lit": "^2.8.0",
+    "throttle-debounce": "^5.0.0"
+  },
+  "devDependencies": {
+    "@open-wc/eslint-config": "^9.2.2",
+    "@open-wc/testing": "^4.0.0",
+    "@open-wc/testing-karma": "^3.0.0",
+    "@types/mocha": "^10.0.0",
+    "@types/node": "^20.8.4",
+    "@types/throttle-debounce": "^5.0.0",
+    "@typescript-eslint/eslint-plugin": "^7.1.0",
+    "@typescript-eslint/parser": "^7.1.0",
+    "concurrently": "^8.0.0",
+    "deepmerge": "^4.0.0",
+    "es-dev-server": "^2.0.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^6.11.0",
+    "husky": "^9.0.0",
+    "lint-staged": "^14.0.1",
+    "madge": "^6.0.0",
+    "prettier": "^2.7.1",
+    "rimraf": "^5.0.5",
+    "tslib": "^2.4.0",
+    "typedoc": "^0.25.0",
+    "typescript": "^4.7.4",
+    "vite": "^4.4.11"
+  },
+  "eslintConfig": {
+    "extends": [
+      "@open-wc/eslint-config",
+      "eslint-config-prettier"
+    ]
+  },
+  "prettier": {
+    "singleQuote": true,
+    "arrowParens": "avoid"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write",
+      "git add"
+    ]
+  }
+}

package/renovate.json

@@ -1,7 +1,7 @@
-{
-  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
-    "config:base",
-    ":preserveSemverRanges"
-  ]
-}
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:base",
+    ":preserveSemverRanges"
+  ]
+}

package/src/modal-manager.ts

@@ -9,6 +9,7 @@ import {
 import { property, customElement, query } from 'lit/decorators.js';
 
 import Modal from './shoelace/modal';
+import { getDeepestActiveElement } from './shoelace/active-elements';
 
 import './modal-template';
 import { ModalTemplate } from './modal-template';
@@ -112,6 +113,10 @@ export class ModalManager extends LitElement implements ModalManagerInterface {
     this.customModalContent = undefined;
     if (this.modalTemplate) this.modalTemplate.config = new ModalConfig();
     this.modal.deactivate();
+
+    // Return focus to the triggering element, if possible
+    (this.triggeringElement as HTMLElement)?.focus?.();
+    this.triggeringElement = undefined;
   }
 
   /**
@@ -122,6 +127,12 @@ export class ModalManager extends LitElement implements ModalManagerInterface {
    */
   private closeOnBackdropClick = true;
 
+  /**
+   * The element that had focus when the modal was opened, so that we can return focus
+   * to it after the modal closes.
+   */
+  private triggeringElement?: Element;
+
   /**
    * A callback if the user closes the modal
    *
@@ -173,6 +184,9 @@ export class ModalManager extends LitElement implements ModalManagerInterface {
     userClosedModalCallback?: () => void;
     userPressedLeftNavButtonCallback?: () => void;
   }): Promise<void> {
+    // If the dialog is being opened, make note of what element was focused beforehand
+    if (this.mode === ModalManagerMode.Closed) this.captureFocusedElement();
+
     this.closeOnBackdropClick = options.config.closeOnBackdropClick;
     this.userClosedModalCallback = options.userClosedModalCallback;
     this.userPressedLeftNavButtonCallback =
@@ -187,6 +201,14 @@ export class ModalManager extends LitElement implements ModalManagerInterface {
     this.modal.activate();
   }
 
+  /**
+   * Sets the triggering element to the one that is currently focused, as deep
+   * within Shadow DOM as possible.
+   */
+  private captureFocusedElement(): void {
+    this.triggeringElement = getDeepestActiveElement();
+  }
+
   /** @inheritdoc */
   updated(changed: PropertyValues): void {
     /* istanbul ignore else */

package/src/shoelace/LICENSE.md

@@ -1,7 +1,7 @@
-Copyright (c) 2020 A Beautiful Site, LLC
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
+Copyright (c) 2020 A Beautiful Site, LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

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/tsconfig.json

@@ -1,21 +1,21 @@
-{
-  "compilerOptions": {
-    "target": "es6",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "noEmitOnError": true,
-    "lib": ["es2017", "dom"],
-    "strict": true,
-    "esModuleInterop": false,
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true,
-    "importHelpers": true,
-    "outDir": "dist",
-    "sourceMap": true,
-    "inlineSources": true,
-    "declaration": true,
-    "rootDir": "./",
-    "skipLibCheck": true
-  },
-  "include": ["**/*.ts"]
-}
+{
+  "compilerOptions": {
+    "target": "es6",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "lib": ["es2017", "dom"],
+    "strict": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+    "declaration": true,
+    "rootDir": "./",
+    "skipLibCheck": true
+  },
+  "include": ["**/*.ts"]
+}