Add isClosable to popupOptions (#55)

authsignal · Mar 1, 2024 · 13b8f15 · 13b8f15
1 parent 947fbdf
commit 13b8f15
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 23 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@authsignal/browser",
- "version": "0.4.0",
+ "version": "0.4.1",
  "type": "module",
  "main": "dist/index.js",
  "module": "dist/index.js",
@@ -30,7 +30,7 @@
  "@fingerprintjs/fingerprintjs": "^3.3.6",
  "@simplewebauthn/browser": "^9.0.1",
  "@simplewebauthn/types": "^9.0.1",
- "a11y-dialog": "^7.5.2",
+ "a11y-dialog": "8.0.4",
  "uuid": "^9.0.0"
  },
  "devDependencies": {

diff --git a/src/authsignal.ts b/src/authsignal.ts
@@ -125,7 +125,7 @@ export class Authsignal {
  private launchWithPopup(url: string, options: PopupLaunchOptions) {
  const {popupOptions} = options;
 
- const popupHandler = new PopupHandler({width: popupOptions?.width});
+ const popupHandler = new PopupHandler({width: popupOptions?.width, isClosable: popupOptions?.isClosable});
 
  const popupUrl = `${url}&mode=popup`;
 

diff --git a/src/handlers/popup-handler.ts b/src/handlers/popup-handler.ts
@@ -1,4 +1,4 @@
-import A11yDialog from "a11y-dialog";
+import A11yDialog, {A11yDialogEvent} from "a11y-dialog";
 
 const CONTAINER_ID = "__authsignal-popup-container";
 const CONTENT_ID = "__authsignal-popup-content";
@@ -14,26 +14,23 @@ type PopupShowInput = {
  url: string;
 };
 
-type EventType = "show" | "hide" | "destroy" | "create";
-
-type EventHandler = (node: Element, event?: Event) => void;
-
 type PopupHandlerOptions = {
  width?: string;
+ isClosable?: boolean;
 };
 
 export class PopupHandler {
  private popup: A11yDialog | null = null;
 
- constructor({width}: PopupHandlerOptions) {
+ constructor({width, isClosable}: PopupHandlerOptions) {
  if (document.querySelector(`#${CONTAINER_ID}`)) {
  throw new Error("Multiple instances of Authsignal popup is not supported.");
  }
 
- this.create({width});
+ this.create({width, isClosable});
  }
 
- create({width = DEFAULT_WIDTH}: PopupHandlerOptions) {
+ create({width = DEFAULT_WIDTH, isClosable = true}: PopupHandlerOptions) {
  const isWidthValidCSSValue = CSS.supports("width", width);
 
  let popupWidth = width;
@@ -48,10 +45,17 @@ export class PopupHandler {
  container.setAttribute("id", CONTAINER_ID);
  container.setAttribute("aria-hidden", "true");
 
+ if (!isClosable) {
+ container.setAttribute("role", "alertdialog");
+ }
+
  // Create dialog overlay
  const overlay = document.createElement("div");
  overlay.setAttribute("id", OVERLAY_ID);
- overlay.setAttribute("data-a11y-dialog-hide", "true");
+
+ if (isClosable) {
+ overlay.setAttribute("data-a11y-dialog-hide", "true");
+ }
 
  // Create dialog content
  const content = document.createElement("div");
@@ -161,12 +165,12 @@ export class PopupHandler {
  this.popup.hide();
  }
 
- on(event: EventType, handler: EventHandler) {
+ on(event: A11yDialogEvent, listener: EventListener) {
  if (!this.popup) {
  throw new Error("Popup is not initialized");
  }
 
- this.popup.on(event, handler);
+ this.popup.on(event, listener);
  }
 }
 

diff --git a/src/types.ts b/src/types.ts
@@ -21,6 +21,10 @@ export type PopupLaunchOptions = BaseLaunchOptions & {
  * @deprecated The popup will automatically resize to fit the content.
  */
  height?: string;
+ /**
+ * Whether the popup is closable with the escape key and by clicking the backdrop.
+ */
+ isClosable?: boolean;
  };
 };
 

diff --git a/yarn.lock b/yarn.lock
@@ -281,12 +281,12 @@
  "@typescript-eslint/types" "5.39.0"
  eslint-visitor-keys "^3.3.0"
 
-a11y-dialog@^7.5.2:
- version "7.5.2"
- resolved "https://registry.npmjs.org/a11y-dialog/-/a11y-dialog-7.5.2.tgz#8174d3f71a05d8d5a02ebae515384c747910391c"
- integrity sha512-zfWtVvrbGbP3AFnEJ1aJFtu7GvedgjOEKbkyEUSeaNWDzmFJk9O5nuolDQrRDyRDE5fqSJRiBJtD5bUYKveoUg==
+a11y-dialog@8.0.4:
+ version "8.0.4"
+ resolved "https://registry.npmjs.org/a11y-dialog/-/a11y-dialog-8.0.4.tgz#731a983d38d059665ff7e62daccedf5214131be8"
+ integrity sha512-MQrLxqLPx4E8+ynGwulBs6OjtxQT/XemgnlNPb+cR8K/qdwHBQv1WZQZpBuTVhlWGpAwWmSYffUZ/78anhcD3w==
  dependencies:
- focusable-selectors "^0.4.0"
+ focusable-selectors "^0.8.0"
 
 acorn-jsx@^5.3.2:
  version "5.3.2"
@@ -651,10 +651,10 @@ flatted@^3.1.0:
  resolved "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"
  integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
 
-focusable-selectors@^0.4.0:
- version "0.4.0"
- resolved "https://registry.npmjs.org/focusable-selectors/-/focusable-selectors-0.4.0.tgz#c93092bfe65c7cf7ef52aed82fb6f8df31072459"
- integrity sha512-tc/236hUU3xemsRLu1RKhRQ5UWHjRM9iJTli1zdac43h7b1biRSgG0mILM0qrcsKaGCHcOPJ6NKbk12ouKHLpw==
+focusable-selectors@^0.8.0:
+ version "0.8.4"
+ resolved "https://registry.npmjs.org/focusable-selectors/-/focusable-selectors-0.8.4.tgz#2ee34129b29371766ce201499e3b88c6f79ea4c1"
+ integrity sha512-0XxbkD0KhOnX10qmnfF9U8DkDD8N/e4M77wMYw2Itoi4vdcoRjSkqXLZFIzkrLIOxzmzCGy88fNG1EbeXMD/zw==
 
 fs.realpath@^1.0.0:
  version "1.0.0"