keyborg 2.0.0 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/Keyborg.d.ts +1 -1
  2. package/dist/index.js +33 -8
  3. package/dist/index.js.map +1 -1
  4. package/dist/keyborg.esm.js +33 -8
  5. package/dist/keyborg.esm.js.map +1 -1
  6. package/package.json +1 -1
package/dist/Keyborg.d.ts CHANGED
@@ -33,7 +33,7 @@ export declare class KeyborgState {
33
33
  declare class KeyborgCore implements Disposable {
34
34
  readonly id: string;
35
35
  private _win?;
36
- private _isMouseUsed;
36
+ private _isMouseUsedTimer;
37
37
  private _dismissTimer;
38
38
  private _triggerKeys?;
39
39
  private _dismissKeys?;
package/dist/index.js CHANGED
@@ -244,11 +244,13 @@ const _state = /*#__PURE__*/new KeyborgState();
244
244
 
245
245
  class KeyborgCore {
246
246
  constructor(win, props) {
247
- this._isMouseUsed = false;
248
-
249
247
  this._onFocusIn = e => {
250
- if (this._isMouseUsed) {
251
- this._isMouseUsed = false;
248
+ // When the focus is moved not programmatically and without keydown events,
249
+ // it is likely that the focus is moved by screen reader (as it might swallow
250
+ // the events when the screen reader shortcuts are used). The screen reader
251
+ // usage is keyboard navigation.
252
+ if (this._isMouseUsedTimer) {
253
+ // There was a mouse event recently.
252
254
  return;
253
255
  }
254
256
 
@@ -278,13 +280,23 @@ class KeyborgCore {
278
280
  return;
279
281
  }
280
282
 
281
- this._isMouseUsed = true;
283
+ const win = this._win;
284
+
285
+ if (win) {
286
+ if (this._isMouseUsedTimer) {
287
+ win.clearTimeout(this._isMouseUsedTimer);
288
+ }
289
+
290
+ this._isMouseUsedTimer = win.setTimeout(() => {
291
+ delete this._isMouseUsedTimer;
292
+ }, 1000); // Keeping the indication of the mouse usage for some time.
293
+ }
282
294
 
283
295
  _state.setVal(false);
284
296
  };
285
297
 
286
298
  this._onKeyDown = e => {
287
- var _a;
299
+ var _a, _b;
288
300
 
289
301
  const isNavigatingWithKeyboard = _state.getVal();
290
302
 
@@ -292,8 +304,16 @@ class KeyborgCore {
292
304
  const triggerKeys = this._triggerKeys;
293
305
 
294
306
  if (!isNavigatingWithKeyboard && (!triggerKeys || triggerKeys.has(keyCode))) {
307
+ const activeElement = (_a = this._win) === null || _a === void 0 ? void 0 : _a.document.activeElement;
308
+
309
+ if (activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA" || activeElement.contentEditable === "true")) {
310
+ // We're inside an input, textarea or contenteditable, it's not
311
+ // keyboard navigation, it is text editing scenario.
312
+ return;
313
+ }
314
+
295
315
  _state.setVal(true);
296
- } else if (isNavigatingWithKeyboard && ((_a = this._dismissKeys) === null || _a === void 0 ? void 0 : _a.has(keyCode))) {
316
+ } else if (isNavigatingWithKeyboard && ((_b = this._dismissKeys) === null || _b === void 0 ? void 0 : _b.has(keyCode))) {
297
317
  this._scheduleDismiss();
298
318
  }
299
319
  };
@@ -330,6 +350,11 @@ class KeyborgCore {
330
350
  const win = this._win;
331
351
 
332
352
  if (win) {
353
+ if (this._isMouseUsedTimer) {
354
+ win.clearTimeout(this._isMouseUsedTimer);
355
+ this._isMouseUsedTimer = undefined;
356
+ }
357
+
333
358
  if (this._dismissTimer) {
334
359
  win.clearTimeout(this._dismissTimer);
335
360
  this._dismissTimer = undefined;
@@ -505,7 +530,7 @@ function disposeKeyborg(instance) {
505
530
  * Copyright (c) Microsoft Corporation. All rights reserved.
506
531
  * Licensed under the MIT License.
507
532
  */
508
- const version = "2.0.0";
533
+ const version = "2.2.0";
509
534
 
510
535
  exports.KEYBORG_FOCUSIN = KEYBORG_FOCUSIN;
511
536
  exports.Keyborg = Keyborg;
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/keyborg.esm.js CHANGED
@@ -240,11 +240,13 @@ const _state = /*#__PURE__*/new KeyborgState();
240
240
 
241
241
  class KeyborgCore {
242
242
  constructor(win, props) {
243
- this._isMouseUsed = false;
244
-
245
243
  this._onFocusIn = e => {
246
- if (this._isMouseUsed) {
247
- this._isMouseUsed = false;
244
+ // When the focus is moved not programmatically and without keydown events,
245
+ // it is likely that the focus is moved by screen reader (as it might swallow
246
+ // the events when the screen reader shortcuts are used). The screen reader
247
+ // usage is keyboard navigation.
248
+ if (this._isMouseUsedTimer) {
249
+ // There was a mouse event recently.
248
250
  return;
249
251
  }
250
252
 
@@ -274,13 +276,23 @@ class KeyborgCore {
274
276
  return;
275
277
  }
276
278
 
277
- this._isMouseUsed = true;
279
+ const win = this._win;
280
+
281
+ if (win) {
282
+ if (this._isMouseUsedTimer) {
283
+ win.clearTimeout(this._isMouseUsedTimer);
284
+ }
285
+
286
+ this._isMouseUsedTimer = win.setTimeout(() => {
287
+ delete this._isMouseUsedTimer;
288
+ }, 1000); // Keeping the indication of the mouse usage for some time.
289
+ }
278
290
 
279
291
  _state.setVal(false);
280
292
  };
281
293
 
282
294
  this._onKeyDown = e => {
283
- var _a;
295
+ var _a, _b;
284
296
 
285
297
  const isNavigatingWithKeyboard = _state.getVal();
286
298
 
@@ -288,8 +300,16 @@ class KeyborgCore {
288
300
  const triggerKeys = this._triggerKeys;
289
301
 
290
302
  if (!isNavigatingWithKeyboard && (!triggerKeys || triggerKeys.has(keyCode))) {
303
+ const activeElement = (_a = this._win) === null || _a === void 0 ? void 0 : _a.document.activeElement;
304
+
305
+ if (activeElement && (activeElement.tagName === "INPUT" || activeElement.tagName === "TEXTAREA" || activeElement.contentEditable === "true")) {
306
+ // We're inside an input, textarea or contenteditable, it's not
307
+ // keyboard navigation, it is text editing scenario.
308
+ return;
309
+ }
310
+
291
311
  _state.setVal(true);
292
- } else if (isNavigatingWithKeyboard && ((_a = this._dismissKeys) === null || _a === void 0 ? void 0 : _a.has(keyCode))) {
312
+ } else if (isNavigatingWithKeyboard && ((_b = this._dismissKeys) === null || _b === void 0 ? void 0 : _b.has(keyCode))) {
293
313
  this._scheduleDismiss();
294
314
  }
295
315
  };
@@ -326,6 +346,11 @@ class KeyborgCore {
326
346
  const win = this._win;
327
347
 
328
348
  if (win) {
349
+ if (this._isMouseUsedTimer) {
350
+ win.clearTimeout(this._isMouseUsedTimer);
351
+ this._isMouseUsedTimer = undefined;
352
+ }
353
+
329
354
  if (this._dismissTimer) {
330
355
  win.clearTimeout(this._dismissTimer);
331
356
  this._dismissTimer = undefined;
@@ -501,7 +526,7 @@ function disposeKeyborg(instance) {
501
526
  * Copyright (c) Microsoft Corporation. All rights reserved.
502
527
  * Licensed under the MIT License.
503
528
  */
504
- const version = "2.0.0";
529
+ const version = "2.2.0";
505
530
 
506
531
  export { KEYBORG_FOCUSIN, Keyborg, createKeyborg, disposeKeyborg, getLastFocusedProgrammatically, nativeFocus, version };
507
532
  //# sourceMappingURL=keyborg.esm.js.map
package/dist/keyborg.esm.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"keyborg.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"keyborg.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "keyborg",
3
- "version": "2.0.0",
3
+ "version": "2.2.0",
4
4
  "description": "Keyboard Navigation Detection for Web",
5
5
  "author": "Marat Abdullin <marata@microsoft.com>",
6
6
  "license": "MIT",