keyborg 1.2.1 → 2.1.0

package/dist/Keyborg.d.ts

@@ -11,6 +11,10 @@ interface WindowWithKeyborg extends Window {
         };
     };
 }
+export interface KeyborgProps {
+    triggerKeys?: number[];
+    dismissKeys?: number[];
+}
 export declare type KeyborgCallback = (isNavigatingWithKeyboard: boolean) => void;
 /**
  * Source of truth for all the keyborg core instances and the current keyboard navigation state
@@ -29,9 +33,11 @@ export declare class KeyborgState {
 declare class KeyborgCore implements Disposable {
     readonly id: string;
     private _win?;
-    private _isMouseUsed;
+    private _isMouseUsedTimer;
     private _dismissTimer;
-    constructor(win: WindowWithKeyborg);
+    private _triggerKeys?;
+    private _dismissKeys?;
+    constructor(win: WindowWithKeyborg, props?: KeyborgProps);
     dispose(): void;
     isDisposed(): boolean;
     /**
@@ -51,7 +57,7 @@ export declare class Keyborg {
     private _win?;
     private _core?;
     private _cb;
-    static create(win: WindowWithKeyborg): Keyborg;
+    static create(win: WindowWithKeyborg, props?: KeyborgProps): Keyborg;
     static dispose(instance: Keyborg): void;
     /**
      * Updates all subscribed callbacks with the keyboard navigation state
@@ -76,6 +82,6 @@ export declare class Keyborg {
      */
     setVal(isNavigatingWithKeyboard: boolean): void;
 }
-export declare function createKeyborg(win: Window): Keyborg;
+export declare function createKeyborg(win: Window, props?: KeyborgProps): Keyborg;
 export declare function disposeKeyborg(instance: Keyborg): void;
 export {};

package/dist/index.js

@@ -181,11 +181,8 @@ function getLastFocusedProgrammatically(win) {
  * Copyright (c) Microsoft Corporation. All rights reserved.
  * Licensed under the MIT License.
  */
-const KeyTab = 9;
-const KeyEsc = 27;
-const _dismissTimeout = 500; // When Esc is pressed and the focused is not moved
-// during _dismissTimeout time, dismiss the keyboard
-// navigation mode.
+const _dismissTimeout = 500; // When a key from dismissKeys is pressed and the focus is not moved
+// during _dismissTimeout time, dismiss the keyboard navigation mode.
 
 let _lastId = 0;
 /**
@@ -246,12 +243,14 @@ const _state = /*#__PURE__*/new KeyborgState();
 
 
 class KeyborgCore {
-  constructor(win) {
-    this._isMouseUsed = false;
-
+  constructor(win, props) {
     this._onFocusIn = e => {
-      if (this._isMouseUsed) {
-        this._isMouseUsed = false;
+      // When the focus is moved not programmatically and without keydown events,
+      // it is likely that the focus is moved by screen reader (as it might swallow
+      // the events when the screen reader shortcuts are used). The screen reader
+      // usage is keyboard navigation.
+      if (this._isMouseUsedTimer) {
+        // There was a mouse event recently.
         return;
       }
 
@@ -281,17 +280,32 @@ class KeyborgCore {
         return;
       }
 
-      this._isMouseUsed = true;
+      const win = this._win;
+
+      if (win) {
+        if (this._isMouseUsedTimer) {
+          win.clearTimeout(this._isMouseUsedTimer);
+        }
+
+        this._isMouseUsedTimer = win.setTimeout(() => {
+          delete this._isMouseUsedTimer;
+        }, 1000); // Keeping the indication of the mouse usage for some time.
+      }
 
       _state.setVal(false);
     };
 
     this._onKeyDown = e => {
+      var _a;
+
       const isNavigatingWithKeyboard = _state.getVal();
 
-      if (!isNavigatingWithKeyboard && e.keyCode === KeyTab) {
+      const keyCode = e.keyCode;
+      const triggerKeys = this._triggerKeys;
+
+      if (!isNavigatingWithKeyboard && (!triggerKeys || triggerKeys.has(keyCode))) {
         _state.setVal(true);
-      } else if (isNavigatingWithKeyboard && e.keyCode === KeyEsc) {
+      } else if (isNavigatingWithKeyboard && ((_a = this._dismissKeys) === null || _a === void 0 ? void 0 : _a.has(keyCode))) {
         this._scheduleDismiss();
       }
     };
@@ -299,6 +313,20 @@ class KeyborgCore {
     this.id = "c" + ++_lastId;
     this._win = win;
     const doc = win.document;
+
+    if (props) {
+      const triggerKeys = props.triggerKeys;
+      const dismissKeys = props.dismissKeys;
+
+      if (triggerKeys === null || triggerKeys === void 0 ? void 0 : triggerKeys.length) {
+        this._triggerKeys = new Set(triggerKeys);
+      }
+
+      if (dismissKeys === null || dismissKeys === void 0 ? void 0 : dismissKeys.length) {
+        this._dismissKeys = new Set(dismissKeys);
+      }
+    }
+
     doc.addEventListener(KEYBORG_FOCUSIN, this._onFocusIn, true); // Capture!
 
     doc.addEventListener("mousedown", this._onMouseDown, true); // Capture!
@@ -314,6 +342,11 @@ class KeyborgCore {
     const win = this._win;
 
     if (win) {
+      if (this._isMouseUsedTimer) {
+        win.clearTimeout(this._isMouseUsedTimer);
+        this._isMouseUsedTimer = undefined;
+      }
+
       if (this._dismissTimer) {
         win.clearTimeout(this._dismissTimer);
         this._dismissTimer = undefined;
@@ -383,7 +416,7 @@ class KeyborgCore {
 
 
 class Keyborg {
-  constructor(win) {
+  constructor(win, props) {
     this._cb = [];
     this._id = "k" + ++_lastId;
     this._win = win;
@@ -393,7 +426,7 @@ class Keyborg {
       this._core = current.core;
       current.refs[this._id] = this;
     } else {
-      this._core = new KeyborgCore(win);
+      this._core = new KeyborgCore(win, props);
       win.__keyborg = {
         core: this._core,
         refs: {
@@ -403,8 +436,8 @@ class Keyborg {
     }
   }
 
-  static create(win) {
-    return new Keyborg(win);
+  static create(win, props) {
+    return new Keyborg(win, props);
   }
 
   static dispose(instance) {
@@ -478,8 +511,8 @@ class Keyborg {
   }
 
 }
-function createKeyborg(win) {
-  return Keyborg.create(win);
+function createKeyborg(win, props) {
+  return Keyborg.create(win, props);
 }
 function disposeKeyborg(instance) {
   Keyborg.dispose(instance);
@@ -489,7 +522,7 @@ function disposeKeyborg(instance) {
  * Copyright (c) Microsoft Corporation. All rights reserved.
  * Licensed under the MIT License.
  */
-const version = "1.2.1";
+const version = "2.1.0";
 
 exports.KEYBORG_FOCUSIN = KEYBORG_FOCUSIN;
 exports.Keyborg = Keyborg;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/keyborg.esm.js

@@ -177,11 +177,8 @@ function getLastFocusedProgrammatically(win) {
  * Copyright (c) Microsoft Corporation. All rights reserved.
  * Licensed under the MIT License.
  */
-const KeyTab = 9;
-const KeyEsc = 27;
-const _dismissTimeout = 500; // When Esc is pressed and the focused is not moved
-// during _dismissTimeout time, dismiss the keyboard
-// navigation mode.
+const _dismissTimeout = 500; // When a key from dismissKeys is pressed and the focus is not moved
+// during _dismissTimeout time, dismiss the keyboard navigation mode.
 
 let _lastId = 0;
 /**
@@ -242,12 +239,14 @@ const _state = /*#__PURE__*/new KeyborgState();
 
 
 class KeyborgCore {
-  constructor(win) {
-    this._isMouseUsed = false;
-
+  constructor(win, props) {
     this._onFocusIn = e => {
-      if (this._isMouseUsed) {
-        this._isMouseUsed = false;
+      // When the focus is moved not programmatically and without keydown events,
+      // it is likely that the focus is moved by screen reader (as it might swallow
+      // the events when the screen reader shortcuts are used). The screen reader
+      // usage is keyboard navigation.
+      if (this._isMouseUsedTimer) {
+        // There was a mouse event recently.
         return;
       }
 
@@ -277,17 +276,32 @@ class KeyborgCore {
         return;
       }
 
-      this._isMouseUsed = true;
+      const win = this._win;
+
+      if (win) {
+        if (this._isMouseUsedTimer) {
+          win.clearTimeout(this._isMouseUsedTimer);
+        }
+
+        this._isMouseUsedTimer = win.setTimeout(() => {
+          delete this._isMouseUsedTimer;
+        }, 1000); // Keeping the indication of the mouse usage for some time.
+      }
 
       _state.setVal(false);
     };
 
     this._onKeyDown = e => {
+      var _a;
+
       const isNavigatingWithKeyboard = _state.getVal();
 
-      if (!isNavigatingWithKeyboard && e.keyCode === KeyTab) {
+      const keyCode = e.keyCode;
+      const triggerKeys = this._triggerKeys;
+
+      if (!isNavigatingWithKeyboard && (!triggerKeys || triggerKeys.has(keyCode))) {
         _state.setVal(true);
-      } else if (isNavigatingWithKeyboard && e.keyCode === KeyEsc) {
+      } else if (isNavigatingWithKeyboard && ((_a = this._dismissKeys) === null || _a === void 0 ? void 0 : _a.has(keyCode))) {
         this._scheduleDismiss();
       }
     };
@@ -295,6 +309,20 @@ class KeyborgCore {
     this.id = "c" + ++_lastId;
     this._win = win;
     const doc = win.document;
+
+    if (props) {
+      const triggerKeys = props.triggerKeys;
+      const dismissKeys = props.dismissKeys;
+
+      if (triggerKeys === null || triggerKeys === void 0 ? void 0 : triggerKeys.length) {
+        this._triggerKeys = new Set(triggerKeys);
+      }
+
+      if (dismissKeys === null || dismissKeys === void 0 ? void 0 : dismissKeys.length) {
+        this._dismissKeys = new Set(dismissKeys);
+      }
+    }
+
     doc.addEventListener(KEYBORG_FOCUSIN, this._onFocusIn, true); // Capture!
 
     doc.addEventListener("mousedown", this._onMouseDown, true); // Capture!
@@ -310,6 +338,11 @@ class KeyborgCore {
     const win = this._win;
 
     if (win) {
+      if (this._isMouseUsedTimer) {
+        win.clearTimeout(this._isMouseUsedTimer);
+        this._isMouseUsedTimer = undefined;
+      }
+
       if (this._dismissTimer) {
         win.clearTimeout(this._dismissTimer);
         this._dismissTimer = undefined;
@@ -379,7 +412,7 @@ class KeyborgCore {
 
 
 class Keyborg {
-  constructor(win) {
+  constructor(win, props) {
     this._cb = [];
     this._id = "k" + ++_lastId;
     this._win = win;
@@ -389,7 +422,7 @@ class Keyborg {
       this._core = current.core;
       current.refs[this._id] = this;
     } else {
-      this._core = new KeyborgCore(win);
+      this._core = new KeyborgCore(win, props);
       win.__keyborg = {
         core: this._core,
         refs: {
@@ -399,8 +432,8 @@ class Keyborg {
     }
   }
 
-  static create(win) {
-    return new Keyborg(win);
+  static create(win, props) {
+    return new Keyborg(win, props);
   }
 
   static dispose(instance) {
@@ -474,8 +507,8 @@ class Keyborg {
   }
 
 }
-function createKeyborg(win) {
-  return Keyborg.create(win);
+function createKeyborg(win, props) {
+  return Keyborg.create(win, props);
 }
 function disposeKeyborg(instance) {
   Keyborg.dispose(instance);
@@ -485,7 +518,7 @@ function disposeKeyborg(instance) {
  * Copyright (c) Microsoft Corporation. All rights reserved.
  * Licensed under the MIT License.
  */
-const version = "1.2.1";
+const version = "2.1.0";
 
 export { KEYBORG_FOCUSIN, Keyborg, createKeyborg, disposeKeyborg, getLastFocusedProgrammatically, nativeFocus, version };
 //# sourceMappingURL=keyborg.esm.js.map

package/dist/keyborg.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyborg.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"keyborg.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "keyborg",
-  "version": "1.2.1",
+  "version": "2.1.0",
   "description": "Keyboard Navigation Detection for Web",
   "author": "Marat Abdullin <marata@microsoft.com>",
   "license": "MIT",
@@ -46,7 +46,7 @@
     "eslint-plugin-import": "^2.25.3",
     "node-fetch": "^2.6.6",
     "prettier": "^2.4.1",
-    "release-it": "^14.11.8",
+    "release-it": "^15.6.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.60.1",
     "rollup-plugin-sourcemaps": "^0.6.3",