From 93faf5069f54c15283d47d3813c456eb694c076d Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Fri, 27 Dec 2024 12:50:52 +0700 Subject: [PATCH 1/2] don't unpause focus trap when deactivated --- patches/focus-trap+7.5.4.patch | 56 +++++++++++++++++-- .../FocusTrapForScreen/index.web.tsx | 1 + 2 files changed, 51 insertions(+), 6 deletions(-) diff --git a/patches/focus-trap+7.5.4.patch b/patches/focus-trap+7.5.4.patch index c7b2aef2b51f..19ac4432dfaf 100644 --- a/patches/focus-trap+7.5.4.patch +++ b/patches/focus-trap+7.5.4.patch @@ -1,7 +1,22 @@ diff --git a/node_modules/focus-trap/dist/focus-trap.esm.js b/node_modules/focus-trap/dist/focus-trap.esm.js -index 10d56db..a6d76d8 100644 +index 10d56db..975151c 100644 --- a/node_modules/focus-trap/dist/focus-trap.esm.js +++ b/node_modules/focus-trap/dist/focus-trap.esm.js +@@ -71,12 +71,12 @@ var activeFocusTraps = { + trapStack.push(trap); + } + }, +- deactivateTrap: function deactivateTrap(trapStack, trap) { ++ deactivateTrap: function deactivateTrap(trapStack, trap, unpauseOnDeactivate) { + var trapIndex = trapStack.indexOf(trap); + if (trapIndex !== -1) { + trapStack.splice(trapIndex, 1); + } +- if (trapStack.length > 0) { ++ if (trapStack.length > 0 && unpauseOnDeactivate) { + trapStack[trapStack.length - 1].unpause(); + } + } @@ -100,8 +100,8 @@ var isKeyForward = function isKeyForward(e) { var isKeyBackward = function isKeyBackward(e) { return isTabEvent(e) && e.shiftKey; @@ -13,7 +28,15 @@ index 10d56db..a6d76d8 100644 }; // Array.find/findIndex() are not supported on IE; this replicates enough -@@ -283,7 +283,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) { +@@ -153,6 +153,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) { + var doc = (userOptions === null || userOptions === void 0 ? void 0 : userOptions.document) || document; + var trapStack = (userOptions === null || userOptions === void 0 ? void 0 : userOptions.trapStack) || internalTrapStack; + var config = _objectSpread2({ ++ unpauseOnDeactivate: true, + returnFocusOnDeactivate: true, + escapeDeactivates: true, + delayInitialFocus: true, +@@ -283,7 +284,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) { return node; }; var getInitialFocusNode = function getInitialFocusNode() { @@ -22,7 +45,7 @@ index 10d56db..a6d76d8 100644 // false explicitly indicates we want no initialFocus at all if (node === false) { -@@ -744,7 +744,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) { +@@ -744,7 +745,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) { // that caused the focus trap activation. state.delayInitialFocusTimer = config.delayInitialFocus ? delay(function () { tryFocus(getInitialFocusNode()); @@ -31,7 +54,16 @@ index 10d56db..a6d76d8 100644 doc.addEventListener('focusin', checkFocusIn, true); doc.addEventListener('mousedown', checkPointerDown, { capture: true, -@@ -880,7 +880,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) { +@@ -868,7 +869,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) { + state.active = false; + state.paused = false; + updateObservedNodes(); +- activeFocusTraps.deactivateTrap(trapStack, trap); ++ activeFocusTraps.deactivateTrap(trapStack, trap, config.unpauseOnDeactivate); + var onDeactivate = getOption(options, 'onDeactivate'); + var onPostDeactivate = getOption(options, 'onPostDeactivate'); + var checkCanReturnFocus = getOption(options, 'checkCanReturnFocus'); +@@ -880,7 +881,7 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) { tryFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation)); } onPostDeactivate === null || onPostDeactivate === void 0 || onPostDeactivate(); @@ -41,7 +73,7 @@ index 10d56db..a6d76d8 100644 if (returnFocus && checkCanReturnFocus) { checkCanReturnFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation)).then(finishDeactivation, finishDeactivation); diff --git a/node_modules/focus-trap/index.d.ts b/node_modules/focus-trap/index.d.ts -index 400db1b..69f4b94 100644 +index 400db1b..78b38d9 100644 --- a/node_modules/focus-trap/index.d.ts +++ b/node_modules/focus-trap/index.d.ts @@ -16,7 +16,7 @@ declare module 'focus-trap' { @@ -53,7 +85,19 @@ index 400db1b..69f4b94 100644 type MouseEventToBoolean = (event: MouseEvent | TouchEvent) => boolean; type KeyboardEventToBoolean = (event: KeyboardEvent) => boolean; -@@ -185,7 +185,7 @@ declare module 'focus-trap' { +@@ -135,6 +135,11 @@ declare module 'focus-trap' { + * in the trap. + */ + fallbackFocus?: FocusTarget; ++ /** ++ * By default, the previous focus trap on the stack will be unpaused ++ * when the current active trap is deactivated. ++ */ ++ unpauseOnDeactivate?: boolean; + /** + * Default: `true`. If `false`, when the trap is deactivated, + * focus will *not* return to the element that had focus before activation. +@@ -185,7 +190,7 @@ declare module 'focus-trap' { * This prevents elements within the focusable element from capturing * the event that triggered the focus trap activation. */ diff --git a/src/components/FocusTrap/FocusTrapForScreen/index.web.tsx b/src/components/FocusTrap/FocusTrapForScreen/index.web.tsx index 14f14aee8c73..9f14c49929c3 100644 --- a/src/components/FocusTrap/FocusTrapForScreen/index.web.tsx +++ b/src/components/FocusTrap/FocusTrapForScreen/index.web.tsx @@ -50,6 +50,7 @@ function FocusTrapForScreen({children, focusTrapSettings}: FocusTrapProps) { delayInitialFocus: CONST.ANIMATED_TRANSITION, initialFocus: false, setReturnFocus: false, + unpauseOnDeactivate: false, ...(focusTrapSettings?.focusTrapOptions ?? {}), }} > From e945784960998de57db1f3224206f2f27f9917e5 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Fri, 27 Dec 2024 12:58:25 +0700 Subject: [PATCH 2/2] don't unpause focus trap when deactivated --- src/components/FocusTrap/FocusTrapForModal/index.web.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/FocusTrap/FocusTrapForModal/index.web.tsx b/src/components/FocusTrap/FocusTrapForModal/index.web.tsx index 63a33899822c..a9407cccc00a 100644 --- a/src/components/FocusTrap/FocusTrapForModal/index.web.tsx +++ b/src/components/FocusTrap/FocusTrapForModal/index.web.tsx @@ -15,6 +15,7 @@ function FocusTrapForModal({children, active, initialFocus = false}: FocusTrapFo clickOutsideDeactivates: true, initialFocus, fallbackFocus: document.body, + unpauseOnDeactivate: false, setReturnFocus: (element) => { if (ReportActionComposeFocusManager.isFocused()) { return false;