@primer/behaviors 0.0.0-2022019163715 → 0.0.0-2022027215135

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 (9) hide show
  1. package/dist/cjs/focus-trap.d.ts +1 -2
  2. package/dist/cjs/focus-trap.js +28 -53
  3. package/dist/cjs/utils/iterate-focusable-elements.d.ts +1 -0
  4. package/dist/cjs/utils/iterate-focusable-elements.js +7 -2
  5. package/dist/esm/focus-trap.d.ts +1 -2
  6. package/dist/esm/focus-trap.js +28 -53
  7. package/dist/esm/utils/iterate-focusable-elements.d.ts +1 -0
  8. package/dist/esm/utils/iterate-focusable-elements.js +5 -1
  9. package/package.json +2 -2
package/dist/cjs/focus-trap.d.ts CHANGED
@@ -1,2 +1 @@
1
- export declare function focusTrap(container: HTMLElement, initialFocus?: HTMLElement): AbortController;
2
- export declare function focusTrap(container: HTMLElement, initialFocus: HTMLElement | undefined, abortSignal: AbortSignal): void;
1
+ export declare function focusTrap(container: HTMLElement, initialFocus?: HTMLElement, abortSignal?: AbortSignal): AbortController | undefined;
package/dist/cjs/focus-trap.js CHANGED
@@ -1,8 +1,8 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.focusTrap = void 0;
4
- const iterate_focusable_elements_js_1 = require("./utils/iterate-focusable-elements.js");
5
4
  const event_listener_signal_js_1 = require("./polyfills/event-listener-signal.js");
5
+ const iterate_focusable_elements_js_1 = require("./utils/iterate-focusable-elements.js");
6
6
  (0, event_listener_signal_js_1.polyfill)();
7
7
  const suspendedTrapStack = [];
8
8
  let activeTrap = undefined;
@@ -19,60 +19,36 @@ function followSignal(signal) {
19
19
  });
20
20
  return controller;
21
21
  }
22
- function getFocusableChild(container, lastChild = false) {
23
- return (0, iterate_focusable_elements_js_1.iterateFocusableElements)(container, { reverse: lastChild, strict: true, onlyTabbable: true }).next().value;
24
- }
25
22
  function focusTrap(container, initialFocus, abortSignal) {
26
23
  const controller = new AbortController();
27
24
  const signal = abortSignal !== null && abortSignal !== void 0 ? abortSignal : controller.signal;
28
25
  container.setAttribute('data-focus-trap', 'active');
29
- let lastFocusedChild = undefined;
30
- function ensureTrapZoneHasFocus(focusedElement) {
31
- if (focusedElement instanceof HTMLElement && document.contains(container)) {
32
- if (container.contains(focusedElement)) {
33
- lastFocusedChild = focusedElement;
34
- return;
35
- }
36
- else {
37
- if (lastFocusedChild && (0, iterate_focusable_elements_js_1.isTabbable)(lastFocusedChild) && container.contains(lastFocusedChild)) {
38
- lastFocusedChild.focus();
39
- return;
40
- }
41
- else if (initialFocus && container.contains(initialFocus)) {
42
- initialFocus.focus();
43
- return;
44
- }
45
- else {
46
- const containerNeedsTemporaryTabIndex = container.getAttribute('tabindex') === null;
47
- if (containerNeedsTemporaryTabIndex) {
48
- container.setAttribute('tabindex', '-1');
49
- }
50
- container.focus();
51
- if (containerNeedsTemporaryTabIndex) {
52
- container.addEventListener('blur', () => container.removeAttribute('tabindex'), { once: true });
53
- }
54
- return;
55
- }
56
- }
57
- }
26
+ const sentinelStart = document.createElement('span');
27
+ sentinelStart.setAttribute('class', 'sentinel');
28
+ sentinelStart.setAttribute('tabindex', '0');
29
+ sentinelStart.setAttribute('aria-hidden', 'true');
30
+ sentinelStart.onfocus = () => {
31
+ const lastFocusableChild = (0, iterate_focusable_elements_js_1.getFocusableChild)(container, true);
32
+ lastFocusableChild === null || lastFocusableChild === void 0 ? void 0 : lastFocusableChild.focus();
33
+ };
34
+ const sentinelEnd = document.createElement('span');
35
+ sentinelEnd.setAttribute('class', 'sentinel');
36
+ sentinelEnd.setAttribute('tabindex', '0');
37
+ sentinelEnd.setAttribute('aria-hidden', 'true');
38
+ sentinelEnd.onfocus = () => {
39
+ const firstFocusableChild = (0, iterate_focusable_elements_js_1.getFocusableChild)(container);
40
+ firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
41
+ };
42
+ container.prepend(sentinelStart);
43
+ container.append(sentinelEnd);
44
+ if (initialFocus) {
45
+ initialFocus.focus();
46
+ }
47
+ else {
48
+ const firstFocusableChild = (0, iterate_focusable_elements_js_1.getFocusableChild)(container);
49
+ firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
58
50
  }
59
51
  const wrappingController = followSignal(signal);
60
- container.addEventListener('keydown', event => {
61
- if (event.key !== 'Tab' || event.defaultPrevented) {
62
- return;
63
- }
64
- const { target } = event;
65
- const firstFocusableChild = getFocusableChild(container);
66
- const lastFocusableChild = getFocusableChild(container, true);
67
- if (target === firstFocusableChild && event.shiftKey) {
68
- event.preventDefault();
69
- lastFocusableChild === null || lastFocusableChild === void 0 ? void 0 : lastFocusableChild.focus();
70
- }
71
- else if (target === lastFocusableChild && !event.shiftKey) {
72
- event.preventDefault();
73
- firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
74
- }
75
- }, { signal: wrappingController.signal });
76
52
  if (activeTrap) {
77
53
  const suspendedTrap = activeTrap;
78
54
  activeTrap.container.setAttribute('data-focus-trap', 'suspended');
@@ -84,16 +60,15 @@ function focusTrap(container, initialFocus, abortSignal) {
84
60
  });
85
61
  signal.addEventListener('abort', () => {
86
62
  container.removeAttribute('data-focus-trap');
63
+ const sentinels = container.getElementsByClassName('sentinel');
64
+ while (sentinels.length > 0)
65
+ sentinels[0].remove();
87
66
  const suspendedTrapIndex = suspendedTrapStack.findIndex(t => t.container === container);
88
67
  if (suspendedTrapIndex >= 0) {
89
68
  suspendedTrapStack.splice(suspendedTrapIndex, 1);
90
69
  }
91
70
  tryReactivate();
92
71
  });
93
- document.addEventListener('focus', event => {
94
- ensureTrapZoneHasFocus(event.target);
95
- }, { signal: wrappingController.signal, capture: true });
96
- ensureTrapZoneHasFocus(document.activeElement);
97
72
  activeTrap = {
98
73
  container,
99
74
  controller: wrappingController,
package/dist/cjs/utils/iterate-focusable-elements.d.ts CHANGED
@@ -4,5 +4,6 @@ export interface IterateFocusableElements {
4
4
  onlyTabbable?: boolean;
5
5
  }
6
6
  export declare function iterateFocusableElements(container: HTMLElement, options?: IterateFocusableElements): Generator<HTMLElement, undefined, undefined>;
7
+ export declare function getFocusableChild(container: HTMLElement, lastChild?: boolean): HTMLElement | undefined;
7
8
  export declare function isFocusable(elem: HTMLElement, strict?: boolean): boolean;
8
9
  export declare function isTabbable(elem: HTMLElement, strict?: boolean): boolean;
package/dist/cjs/utils/iterate-focusable-elements.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.isTabbable = exports.isFocusable = exports.iterateFocusableElements = void 0;
3
+ exports.isTabbable = exports.isFocusable = exports.getFocusableChild = exports.iterateFocusableElements = void 0;
4
4
  function* iterateFocusableElements(container, options = {}) {
5
5
  var _a, _b;
6
6
  const strict = (_a = options.strict) !== null && _a !== void 0 ? _a : false;
@@ -32,12 +32,17 @@ function* iterateFocusableElements(container, options = {}) {
32
32
  return undefined;
33
33
  }
34
34
  exports.iterateFocusableElements = iterateFocusableElements;
35
+ function getFocusableChild(container, lastChild = false) {
36
+ return iterateFocusableElements(container, { reverse: lastChild, strict: true, onlyTabbable: true }).next().value;
37
+ }
38
+ exports.getFocusableChild = getFocusableChild;
35
39
  function isFocusable(elem, strict = false) {
36
40
  const disabledAttrInert = ['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'OPTGROUP', 'OPTION', 'FIELDSET'].includes(elem.tagName) &&
37
41
  elem.disabled;
38
42
  const hiddenInert = elem.hidden;
39
43
  const hiddenInputInert = elem instanceof HTMLInputElement && elem.type === 'hidden';
40
- if (disabledAttrInert || hiddenInert || hiddenInputInert) {
44
+ const sentinelInert = elem.classList.contains('sentinel');
45
+ if (disabledAttrInert || hiddenInert || hiddenInputInert || sentinelInert) {
41
46
  return false;
42
47
  }
43
48
  if (strict) {
package/dist/esm/focus-trap.d.ts CHANGED
@@ -1,2 +1 @@
1
- export declare function focusTrap(container: HTMLElement, initialFocus?: HTMLElement): AbortController;
2
- export declare function focusTrap(container: HTMLElement, initialFocus: HTMLElement | undefined, abortSignal: AbortSignal): void;
1
+ export declare function focusTrap(container: HTMLElement, initialFocus?: HTMLElement, abortSignal?: AbortSignal): AbortController | undefined;
package/dist/esm/focus-trap.js CHANGED
@@ -1,5 +1,5 @@
1
- import { isTabbable, iterateFocusableElements } from './utils/iterate-focusable-elements.js';
2
1
  import { polyfill as eventListenerSignalPolyfill } from './polyfills/event-listener-signal.js';
2
+ import { getFocusableChild } from './utils/iterate-focusable-elements.js';
3
3
  eventListenerSignalPolyfill();
4
4
  const suspendedTrapStack = [];
5
5
  let activeTrap = undefined;
@@ -16,60 +16,36 @@ function followSignal(signal) {
16
16
  });
17
17
  return controller;
18
18
  }
19
- function getFocusableChild(container, lastChild = false) {
20
- return iterateFocusableElements(container, { reverse: lastChild, strict: true, onlyTabbable: true }).next().value;
21
- }
22
19
  export function focusTrap(container, initialFocus, abortSignal) {
23
20
  const controller = new AbortController();
24
21
  const signal = abortSignal !== null && abortSignal !== void 0 ? abortSignal : controller.signal;
25
22
  container.setAttribute('data-focus-trap', 'active');
26
- let lastFocusedChild = undefined;
27
- function ensureTrapZoneHasFocus(focusedElement) {
28
- if (focusedElement instanceof HTMLElement && document.contains(container)) {
29
- if (container.contains(focusedElement)) {
30
- lastFocusedChild = focusedElement;
31
- return;
32
- }
33
- else {
34
- if (lastFocusedChild && isTabbable(lastFocusedChild) && container.contains(lastFocusedChild)) {
35
- lastFocusedChild.focus();
36
- return;
37
- }
38
- else if (initialFocus && container.contains(initialFocus)) {
39
- initialFocus.focus();
40
- return;
41
- }
42
- else {
43
- const containerNeedsTemporaryTabIndex = container.getAttribute('tabindex') === null;
44
- if (containerNeedsTemporaryTabIndex) {
45
- container.setAttribute('tabindex', '-1');
46
- }
47
- container.focus();
48
- if (containerNeedsTemporaryTabIndex) {
49
- container.addEventListener('blur', () => container.removeAttribute('tabindex'), { once: true });
50
- }
51
- return;
52
- }
53
- }
54
- }
23
+ const sentinelStart = document.createElement('span');
24
+ sentinelStart.setAttribute('class', 'sentinel');
25
+ sentinelStart.setAttribute('tabindex', '0');
26
+ sentinelStart.setAttribute('aria-hidden', 'true');
27
+ sentinelStart.onfocus = () => {
28
+ const lastFocusableChild = getFocusableChild(container, true);
29
+ lastFocusableChild === null || lastFocusableChild === void 0 ? void 0 : lastFocusableChild.focus();
30
+ };
31
+ const sentinelEnd = document.createElement('span');
32
+ sentinelEnd.setAttribute('class', 'sentinel');
33
+ sentinelEnd.setAttribute('tabindex', '0');
34
+ sentinelEnd.setAttribute('aria-hidden', 'true');
35
+ sentinelEnd.onfocus = () => {
36
+ const firstFocusableChild = getFocusableChild(container);
37
+ firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
38
+ };
39
+ container.prepend(sentinelStart);
40
+ container.append(sentinelEnd);
41
+ if (initialFocus) {
42
+ initialFocus.focus();
55
43
  }
56
- const wrappingController = followSignal(signal);
57
- container.addEventListener('keydown', event => {
58
- if (event.key !== 'Tab' || event.defaultPrevented) {
59
- return;
60
- }
61
- const { target } = event;
44
+ else {
62
45
  const firstFocusableChild = getFocusableChild(container);
63
- const lastFocusableChild = getFocusableChild(container, true);
64
- if (target === firstFocusableChild && event.shiftKey) {
65
- event.preventDefault();
66
- lastFocusableChild === null || lastFocusableChild === void 0 ? void 0 : lastFocusableChild.focus();
67
- }
68
- else if (target === lastFocusableChild && !event.shiftKey) {
69
- event.preventDefault();
70
- firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
71
- }
72
- }, { signal: wrappingController.signal });
46
+ firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
47
+ }
48
+ const wrappingController = followSignal(signal);
73
49
  if (activeTrap) {
74
50
  const suspendedTrap = activeTrap;
75
51
  activeTrap.container.setAttribute('data-focus-trap', 'suspended');
@@ -81,16 +57,15 @@ export function focusTrap(container, initialFocus, abortSignal) {
81
57
  });
82
58
  signal.addEventListener('abort', () => {
83
59
  container.removeAttribute('data-focus-trap');
60
+ const sentinels = container.getElementsByClassName('sentinel');
61
+ while (sentinels.length > 0)
62
+ sentinels[0].remove();
84
63
  const suspendedTrapIndex = suspendedTrapStack.findIndex(t => t.container === container);
85
64
  if (suspendedTrapIndex >= 0) {
86
65
  suspendedTrapStack.splice(suspendedTrapIndex, 1);
87
66
  }
88
67
  tryReactivate();
89
68
  });
90
- document.addEventListener('focus', event => {
91
- ensureTrapZoneHasFocus(event.target);
92
- }, { signal: wrappingController.signal, capture: true });
93
- ensureTrapZoneHasFocus(document.activeElement);
94
69
  activeTrap = {
95
70
  container,
96
71
  controller: wrappingController,
package/dist/esm/utils/iterate-focusable-elements.d.ts CHANGED
@@ -4,5 +4,6 @@ export interface IterateFocusableElements {
4
4
  onlyTabbable?: boolean;
5
5
  }
6
6
  export declare function iterateFocusableElements(container: HTMLElement, options?: IterateFocusableElements): Generator<HTMLElement, undefined, undefined>;
7
+ export declare function getFocusableChild(container: HTMLElement, lastChild?: boolean): HTMLElement | undefined;
7
8
  export declare function isFocusable(elem: HTMLElement, strict?: boolean): boolean;
8
9
  export declare function isTabbable(elem: HTMLElement, strict?: boolean): boolean;
package/dist/esm/utils/iterate-focusable-elements.js CHANGED
@@ -28,12 +28,16 @@ export function* iterateFocusableElements(container, options = {}) {
28
28
  }
29
29
  return undefined;
30
30
  }
31
+ export function getFocusableChild(container, lastChild = false) {
32
+ return iterateFocusableElements(container, { reverse: lastChild, strict: true, onlyTabbable: true }).next().value;
33
+ }
31
34
  export function isFocusable(elem, strict = false) {
32
35
  const disabledAttrInert = ['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'OPTGROUP', 'OPTION', 'FIELDSET'].includes(elem.tagName) &&
33
36
  elem.disabled;
34
37
  const hiddenInert = elem.hidden;
35
38
  const hiddenInputInert = elem instanceof HTMLInputElement && elem.type === 'hidden';
36
- if (disabledAttrInert || hiddenInert || hiddenInputInert) {
39
+ const sentinelInert = elem.classList.contains('sentinel');
40
+ if (disabledAttrInert || hiddenInert || hiddenInputInert || sentinelInert) {
37
41
  return false;
38
42
  }
39
43
  if (strict) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/behaviors",
3
- "version": "0.0.0-2022019163715",
3
+ "version": "0.0.0-2022027215135",
4
4
  "description": "Shared behaviors for JavaScript components",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -60,7 +60,7 @@
60
60
  "size-limit": [
61
61
  {
62
62
  "limit": "10kb",
63
- "path": "dist/index.js"
63
+ "path": "dist/esm/index.js"
64
64
  }
65
65
  ],
66
66
  "devDependencies": {