@primer/behaviors 1.0.3 → 1.1.0-rc.e605114

package/CHANGELOG.md

@@ -0,0 +1,27 @@
+# @primer/behaviors
+
+## 1.1.0
+
+### Minor Changes
+
+- [#52](https://github.com/primer/behaviors/pull/52) [`1aa3027`](https://github.com/primer/behaviors/commit/1aa302782e3c833f9d9c27f602a046e81f05c3e5) Thanks [@owenniblock](https://github.com/owenniblock)! - Update focusTrap to use new methodology after accessibility discussions
+
+## 1.0.3
+
+### Patch Changes
+
+- [#42](https://github.com/primer/behaviors/pull/42) [`41945a3`](https://github.com/primer/behaviors/commit/41945a37ef07da82ce5a29feb03d7a7d96ec76ea) Thanks [@dgreif](https://github.com/dgreif)! - Build both esm and cjs output for the package
+
+## 1.0.2
+
+### Patch Changes
+
+- [#17](https://github.com/primer/behaviors/pull/17) [`9194ba4`](https://github.com/primer/behaviors/commit/9194ba403502b4acba0be03bed1a765c1ba81340) Thanks [@dgreif](https://github.com/dgreif)! - Correct margin orientation for `scrollIntoView`
+
+* [#18](https://github.com/primer/behaviors/pull/18) [`3b4dd41`](https://github.com/primer/behaviors/commit/3b4dd414175417f83bd144939fe74b2a01bc7136) Thanks [@dgreif](https://github.com/dgreif)! - Export utils as submodule
+
+## 1.0.1
+
+### Patch Changes
+
+- [#10](https://github.com/primer/behaviors/pull/10) [`88b6f34`](https://github.com/primer/behaviors/commit/88b6f34bf4874f3c81473020a01a58b197dd6e16) Thanks [@dgreif](https://github.com/dgreif)! - Set up changesets

package/dist/cjs/focus-trap.d.ts

@@ -1,2 +1 @@
-export declare function focusTrap(container: HTMLElement, initialFocus?: HTMLElement): AbortController;
-export declare function focusTrap(container: HTMLElement, initialFocus: HTMLElement | undefined, abortSignal: AbortSignal): void;
+export declare function focusTrap(container: HTMLElement, initialFocus?: HTMLElement, abortSignal?: AbortSignal): AbortController | undefined;

package/dist/cjs/focus-trap.js

@@ -19,13 +19,28 @@ function followSignal(signal) {
     });
     return controller;
 }
-function getFocusableChild(container, lastChild = false) {
-    return (0, iterate_focusable_elements_js_1.iterateFocusableElements)(container, { reverse: lastChild, strict: true, onlyTabbable: true }).next().value;
-}
 function focusTrap(container, initialFocus, abortSignal) {
     const controller = new AbortController();
     const signal = abortSignal !== null && abortSignal !== void 0 ? abortSignal : controller.signal;
     container.setAttribute('data-focus-trap', 'active');
+    const sentinelStart = document.createElement('span');
+    sentinelStart.setAttribute('class', 'sentinel');
+    sentinelStart.setAttribute('tabindex', '0');
+    sentinelStart.setAttribute('aria-hidden', 'true');
+    sentinelStart.onfocus = () => {
+        const lastFocusableChild = (0, iterate_focusable_elements_js_1.getFocusableChild)(container, true);
+        lastFocusableChild === null || lastFocusableChild === void 0 ? void 0 : lastFocusableChild.focus();
+    };
+    const sentinelEnd = document.createElement('span');
+    sentinelEnd.setAttribute('class', 'sentinel');
+    sentinelEnd.setAttribute('tabindex', '0');
+    sentinelEnd.setAttribute('aria-hidden', 'true');
+    sentinelEnd.onfocus = () => {
+        const firstFocusableChild = (0, iterate_focusable_elements_js_1.getFocusableChild)(container);
+        firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
+    };
+    container.prepend(sentinelStart);
+    container.append(sentinelEnd);
     let lastFocusedChild = undefined;
     function ensureTrapZoneHasFocus(focusedElement) {
         if (focusedElement instanceof HTMLElement && document.contains(container)) {
@@ -43,36 +58,14 @@ function focusTrap(container, initialFocus, abortSignal) {
                     return;
                 }
                 else {
-                    const containerNeedsTemporaryTabIndex = container.getAttribute('tabindex') === null;
-                    if (containerNeedsTemporaryTabIndex) {
-                        container.setAttribute('tabindex', '-1');
-                    }
-                    container.focus();
-                    if (containerNeedsTemporaryTabIndex) {
-                        container.addEventListener('blur', () => container.removeAttribute('tabindex'), { once: true });
-                    }
+                    const firstFocusableChild = (0, iterate_focusable_elements_js_1.getFocusableChild)(container);
+                    firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
                     return;
                 }
             }
         }
     }
     const wrappingController = followSignal(signal);
-    container.addEventListener('keydown', event => {
-        if (event.key !== 'Tab' || event.defaultPrevented) {
-            return;
-        }
-        const { target } = event;
-        const firstFocusableChild = getFocusableChild(container);
-        const lastFocusableChild = getFocusableChild(container, true);
-        if (target === firstFocusableChild && event.shiftKey) {
-            event.preventDefault();
-            lastFocusableChild === null || lastFocusableChild === void 0 ? void 0 : lastFocusableChild.focus();
-        }
-        else if (target === lastFocusableChild && !event.shiftKey) {
-            event.preventDefault();
-            firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
-        }
-    }, { signal: wrappingController.signal });
     if (activeTrap) {
         const suspendedTrap = activeTrap;
         activeTrap.container.setAttribute('data-focus-trap', 'suspended');
@@ -84,6 +77,9 @@ function focusTrap(container, initialFocus, abortSignal) {
     });
     signal.addEventListener('abort', () => {
         container.removeAttribute('data-focus-trap');
+        const sentinels = container.getElementsByClassName('sentinel');
+        while (sentinels.length > 0)
+            sentinels[0].remove();
         const suspendedTrapIndex = suspendedTrapStack.findIndex(t => t.container === container);
         if (suspendedTrapIndex >= 0) {
             suspendedTrapStack.splice(suspendedTrapIndex, 1);

package/dist/cjs/utils/iterate-focusable-elements.d.ts

@@ -4,5 +4,6 @@ export interface IterateFocusableElements {
     onlyTabbable?: boolean;
 }
 export declare function iterateFocusableElements(container: HTMLElement, options?: IterateFocusableElements): Generator<HTMLElement, undefined, undefined>;
+export declare function getFocusableChild(container: HTMLElement, lastChild?: boolean): HTMLElement | undefined;
 export declare function isFocusable(elem: HTMLElement, strict?: boolean): boolean;
 export declare function isTabbable(elem: HTMLElement, strict?: boolean): boolean;

package/dist/cjs/utils/iterate-focusable-elements.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isTabbable = exports.isFocusable = exports.iterateFocusableElements = void 0;
+exports.isTabbable = exports.isFocusable = exports.getFocusableChild = exports.iterateFocusableElements = void 0;
 function* iterateFocusableElements(container, options = {}) {
     var _a, _b;
     const strict = (_a = options.strict) !== null && _a !== void 0 ? _a : false;
@@ -32,12 +32,17 @@ function* iterateFocusableElements(container, options = {}) {
     return undefined;
 }
 exports.iterateFocusableElements = iterateFocusableElements;
+function getFocusableChild(container, lastChild = false) {
+    return iterateFocusableElements(container, { reverse: lastChild, strict: true, onlyTabbable: true }).next().value;
+}
+exports.getFocusableChild = getFocusableChild;
 function isFocusable(elem, strict = false) {
     const disabledAttrInert = ['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'OPTGROUP', 'OPTION', 'FIELDSET'].includes(elem.tagName) &&
         elem.disabled;
     const hiddenInert = elem.hidden;
     const hiddenInputInert = elem instanceof HTMLInputElement && elem.type === 'hidden';
-    if (disabledAttrInert || hiddenInert || hiddenInputInert) {
+    const sentinelInert = elem.classList.contains('sentinel');
+    if (disabledAttrInert || hiddenInert || hiddenInputInert || sentinelInert) {
         return false;
     }
     if (strict) {

package/dist/esm/focus-trap.d.ts

@@ -1,2 +1 @@
-export declare function focusTrap(container: HTMLElement, initialFocus?: HTMLElement): AbortController;
-export declare function focusTrap(container: HTMLElement, initialFocus: HTMLElement | undefined, abortSignal: AbortSignal): void;
+export declare function focusTrap(container: HTMLElement, initialFocus?: HTMLElement, abortSignal?: AbortSignal): AbortController | undefined;

package/dist/esm/focus-trap.js

@@ -1,4 +1,4 @@
-import { isTabbable, iterateFocusableElements } from './utils/iterate-focusable-elements.js';
+import { getFocusableChild, isTabbable } from './utils/iterate-focusable-elements.js';
 import { polyfill as eventListenerSignalPolyfill } from './polyfills/event-listener-signal.js';
 eventListenerSignalPolyfill();
 const suspendedTrapStack = [];
@@ -16,13 +16,28 @@ function followSignal(signal) {
     });
     return controller;
 }
-function getFocusableChild(container, lastChild = false) {
-    return iterateFocusableElements(container, { reverse: lastChild, strict: true, onlyTabbable: true }).next().value;
-}
 export function focusTrap(container, initialFocus, abortSignal) {
     const controller = new AbortController();
     const signal = abortSignal !== null && abortSignal !== void 0 ? abortSignal : controller.signal;
     container.setAttribute('data-focus-trap', 'active');
+    const sentinelStart = document.createElement('span');
+    sentinelStart.setAttribute('class', 'sentinel');
+    sentinelStart.setAttribute('tabindex', '0');
+    sentinelStart.setAttribute('aria-hidden', 'true');
+    sentinelStart.onfocus = () => {
+        const lastFocusableChild = getFocusableChild(container, true);
+        lastFocusableChild === null || lastFocusableChild === void 0 ? void 0 : lastFocusableChild.focus();
+    };
+    const sentinelEnd = document.createElement('span');
+    sentinelEnd.setAttribute('class', 'sentinel');
+    sentinelEnd.setAttribute('tabindex', '0');
+    sentinelEnd.setAttribute('aria-hidden', 'true');
+    sentinelEnd.onfocus = () => {
+        const firstFocusableChild = getFocusableChild(container);
+        firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
+    };
+    container.prepend(sentinelStart);
+    container.append(sentinelEnd);
     let lastFocusedChild = undefined;
     function ensureTrapZoneHasFocus(focusedElement) {
         if (focusedElement instanceof HTMLElement && document.contains(container)) {
@@ -40,36 +55,14 @@ export function focusTrap(container, initialFocus, abortSignal) {
                     return;
                 }
                 else {
-                    const containerNeedsTemporaryTabIndex = container.getAttribute('tabindex') === null;
-                    if (containerNeedsTemporaryTabIndex) {
-                        container.setAttribute('tabindex', '-1');
-                    }
-                    container.focus();
-                    if (containerNeedsTemporaryTabIndex) {
-                        container.addEventListener('blur', () => container.removeAttribute('tabindex'), { once: true });
-                    }
+                    const firstFocusableChild = getFocusableChild(container);
+                    firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
                     return;
                 }
             }
         }
     }
     const wrappingController = followSignal(signal);
-    container.addEventListener('keydown', event => {
-        if (event.key !== 'Tab' || event.defaultPrevented) {
-            return;
-        }
-        const { target } = event;
-        const firstFocusableChild = getFocusableChild(container);
-        const lastFocusableChild = getFocusableChild(container, true);
-        if (target === firstFocusableChild && event.shiftKey) {
-            event.preventDefault();
-            lastFocusableChild === null || lastFocusableChild === void 0 ? void 0 : lastFocusableChild.focus();
-        }
-        else if (target === lastFocusableChild && !event.shiftKey) {
-            event.preventDefault();
-            firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
-        }
-    }, { signal: wrappingController.signal });
     if (activeTrap) {
         const suspendedTrap = activeTrap;
         activeTrap.container.setAttribute('data-focus-trap', 'suspended');
@@ -81,6 +74,9 @@ export function focusTrap(container, initialFocus, abortSignal) {
     });
     signal.addEventListener('abort', () => {
         container.removeAttribute('data-focus-trap');
+        const sentinels = container.getElementsByClassName('sentinel');
+        while (sentinels.length > 0)
+            sentinels[0].remove();
         const suspendedTrapIndex = suspendedTrapStack.findIndex(t => t.container === container);
         if (suspendedTrapIndex >= 0) {
             suspendedTrapStack.splice(suspendedTrapIndex, 1);

package/dist/esm/utils/iterate-focusable-elements.d.ts

@@ -4,5 +4,6 @@ export interface IterateFocusableElements {
     onlyTabbable?: boolean;
 }
 export declare function iterateFocusableElements(container: HTMLElement, options?: IterateFocusableElements): Generator<HTMLElement, undefined, undefined>;
+export declare function getFocusableChild(container: HTMLElement, lastChild?: boolean): HTMLElement | undefined;
 export declare function isFocusable(elem: HTMLElement, strict?: boolean): boolean;
 export declare function isTabbable(elem: HTMLElement, strict?: boolean): boolean;

package/dist/esm/utils/iterate-focusable-elements.js

@@ -28,12 +28,16 @@ export function* iterateFocusableElements(container, options = {}) {
     }
     return undefined;
 }
+export function getFocusableChild(container, lastChild = false) {
+    return iterateFocusableElements(container, { reverse: lastChild, strict: true, onlyTabbable: true }).next().value;
+}
 export function isFocusable(elem, strict = false) {
     const disabledAttrInert = ['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'OPTGROUP', 'OPTION', 'FIELDSET'].includes(elem.tagName) &&
         elem.disabled;
     const hiddenInert = elem.hidden;
     const hiddenInputInert = elem instanceof HTMLInputElement && elem.type === 'hidden';
-    if (disabledAttrInert || hiddenInert || hiddenInputInert) {
+    const sentinelInert = elem.classList.contains('sentinel');
+    if (disabledAttrInert || hiddenInert || hiddenInputInert || sentinelInert) {
         return false;
     }
     if (strict) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/behaviors",
-  "version": "1.0.3",
+  "version": "1.1.0-rc.e605114",
   "description": "Shared behaviors for JavaScript components",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",