diff --git a/dist/es2015/index.js b/dist/es2015/index.js index 00aa2ea9da07e8e1d5978a4abe6ce1c2e9ac8041..d6f9fb38b17f93f8013660e0b8f491ac49c5a3b0 100644 --- a/dist/es2015/index.js +++ b/dist/es2015/index.js @@ -131,7 +131,32 @@ export var hideOthers = function (originalTarget, parentNode, markerName) { // we should not hide aria-live elements - https://github.com/theKashey/aria-hidden/issues/10 // and script elements, as they have no impact on accessibility. targets.push.apply(targets, Array.from(activeParentNode.querySelectorAll('[aria-live], script'))); - return applyAttributeToOthers(targets, activeParentNode, markerName, 'aria-hidden'); + var undoAttributes = applyAttributeToOthers(targets, activeParentNode, markerName, 'aria-hidden'); + // WebKit un-hides the page very slowly while it has unresolved style changes, such as a closing + // modal's scroll lock, so resolve them first; the next frame would resolve them anyway. + var undo = function () { + getComputedStyle(activeParentNode).visibility; + undoAttributes(); + }; + // React StrictMode replays effects by undoing and re-applying in the same task with the target still + // mounted. Defer that undo so the page isn't un-hidden and re-hidden at once, which stalls WebKit. + var sameTask = true; + var undone = false; + queueMicrotask(function () { + sameTask = false; + }); + return function () { + if (undone) { + return; + } + undone = true; + if (sameTask && targets[0].isConnected) { + queueMicrotask(undo); + } + else { + undo(); + } + }; }; /** * Marks everything except given node(or nodes) as inert diff --git a/dist/es2019/index.js b/dist/es2019/index.js index 17404dae4afb4660e14921347404b6c0ca40cca3..03c30c6c2476b49806ec84de2cf7e3a5f4bfcf4f 100644 --- a/dist/es2019/index.js +++ b/dist/es2019/index.js @@ -126,7 +126,32 @@ export const hideOthers = (originalTarget, parentNode, markerName = 'data-aria-h // we should not hide aria-live elements - https://github.com/theKashey/aria-hidden/issues/10 // and script elements, as they have no impact on accessibility. targets.push(...Array.from(activeParentNode.querySelectorAll('[aria-live], script'))); - return applyAttributeToOthers(targets, activeParentNode, markerName, 'aria-hidden'); + var undoAttributes = applyAttributeToOthers(targets, activeParentNode, markerName, 'aria-hidden'); + // WebKit un-hides the page very slowly while it has unresolved style changes, such as a closing + // modal's scroll lock, so resolve them first; the next frame would resolve them anyway. + var undo = function () { + getComputedStyle(activeParentNode).visibility; + undoAttributes(); + }; + // React StrictMode replays effects by undoing and re-applying in the same task with the target still + // mounted. Defer that undo so the page isn't un-hidden and re-hidden at once, which stalls WebKit. + var sameTask = true; + var undone = false; + queueMicrotask(function () { + sameTask = false; + }); + return function () { + if (undone) { + return; + } + undone = true; + if (sameTask && targets[0].isConnected) { + queueMicrotask(undo); + } + else { + undo(); + } + }; }; /** * Marks everything except given node(or nodes) as inert diff --git a/dist/es5/index.js b/dist/es5/index.js index 1b86f56de25fb82f0627a2c5c087c4211f591a2a..43d3c8c7b3e6ca918c88a8ed6798daefafc4faa6 100644 --- a/dist/es5/index.js +++ b/dist/es5/index.js @@ -134,7 +134,32 @@ var hideOthers = function (originalTarget, parentNode, markerName) { // we should not hide aria-live elements - https://github.com/theKashey/aria-hidden/issues/10 // and script elements, as they have no impact on accessibility. targets.push.apply(targets, Array.from(activeParentNode.querySelectorAll('[aria-live], script'))); - return applyAttributeToOthers(targets, activeParentNode, markerName, 'aria-hidden'); + var undoAttributes = applyAttributeToOthers(targets, activeParentNode, markerName, 'aria-hidden'); + // WebKit un-hides the page very slowly while it has unresolved style changes, such as a closing + // modal's scroll lock, so resolve them first; the next frame would resolve them anyway. + var undo = function () { + getComputedStyle(activeParentNode).visibility; + undoAttributes(); + }; + // React StrictMode replays effects by undoing and re-applying in the same task with the target still + // mounted. Defer that undo so the page isn't un-hidden and re-hidden at once, which stalls WebKit. + var sameTask = true; + var undone = false; + queueMicrotask(function () { + sameTask = false; + }); + return function () { + if (undone) { + return; + } + undone = true; + if (sameTask && targets[0].isConnected) { + queueMicrotask(undo); + } + else { + undo(); + } + }; }; exports.hideOthers = hideOthers; /**