@ionic/core 8.7.5-dev.11758642453.13b1da5d → 8.7.5-dev.11758652700.103435a3
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.
- package/components/modal.js +7 -4
- package/components/overlays.js +26 -9
- package/dist/cjs/index.cjs.js +1 -1
- package/dist/cjs/ion-action-sheet.cjs.entry.js +1 -1
- package/dist/cjs/ion-alert.cjs.entry.js +1 -1
- package/dist/cjs/ion-datetime_3.cjs.entry.js +1 -1
- package/dist/cjs/ion-loading.cjs.entry.js +1 -1
- package/dist/cjs/ion-menu_3.cjs.entry.js +1 -1
- package/dist/cjs/ion-modal.cjs.entry.js +8 -5
- package/dist/cjs/ion-popover.cjs.entry.js +1 -1
- package/dist/cjs/ion-select-modal.cjs.entry.js +1 -1
- package/dist/cjs/ion-select_3.cjs.entry.js +1 -1
- package/dist/cjs/ion-toast.cjs.entry.js +1 -1
- package/dist/cjs/{overlays-CPUTc8An.js → overlays-czPyT6xP.js} +26 -9
- package/dist/collection/components/modal/gestures/sheet.js +7 -4
- package/dist/collection/utils/overlays.js +26 -9
- package/dist/docs.json +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/ion-action-sheet.entry.js +1 -1
- package/dist/esm/ion-alert.entry.js +1 -1
- package/dist/esm/ion-datetime_3.entry.js +1 -1
- package/dist/esm/ion-loading.entry.js +1 -1
- package/dist/esm/ion-menu_3.entry.js +1 -1
- package/dist/esm/ion-modal.entry.js +8 -5
- package/dist/esm/ion-popover.entry.js +1 -1
- package/dist/esm/ion-select-modal.entry.js +1 -1
- package/dist/esm/ion-select_3.entry.js +1 -1
- package/dist/esm/ion-toast.entry.js +1 -1
- package/dist/esm/{overlays-BOalOTUe.js → overlays-BYcYBCrx.js} +26 -9
- package/dist/ionic/index.esm.js +1 -1
- package/dist/ionic/ionic.esm.js +1 -1
- package/dist/ionic/{p-de2bedb6.entry.js → p-0793aea6.entry.js} +1 -1
- package/dist/ionic/{p-3f07313b.entry.js → p-0e1904a0.entry.js} +1 -1
- package/dist/ionic/{p-12d04c28.entry.js → p-117e7a3f.entry.js} +1 -1
- package/dist/ionic/{p-97f8294e.entry.js → p-1f68cb59.entry.js} +1 -1
- package/dist/ionic/{p-f4dfce09.entry.js → p-25e5e5cc.entry.js} +1 -1
- package/dist/ionic/{p-2e1782af.entry.js → p-568efea2.entry.js} +1 -1
- package/dist/ionic/{p-1bd0a347.entry.js → p-63852736.entry.js} +1 -1
- package/dist/ionic/p-6e43c86a.entry.js +4 -0
- package/dist/ionic/{p-fd46b48a.entry.js → p-746cd400.entry.js} +1 -1
- package/dist/ionic/{p-4a95b96c.entry.js → p-90f4cc71.entry.js} +1 -1
- package/dist/ionic/p-Cnh7O81W.js +4 -0
- package/hydrate/index.js +33 -13
- package/hydrate/index.mjs +33 -13
- package/package.json +1 -1
- package/dist/ionic/p-JK8qe2uI.js +0 -4
- package/dist/ionic/p-f8900d24.entry.js +0 -4
package/components/modal.js
CHANGED
|
@@ -985,8 +985,9 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
985
985
|
const contentAnimation = animation.childAnimations.find((ani) => ani.id === 'contentAnimation');
|
|
986
986
|
const enableBackdrop = () => {
|
|
987
987
|
// Respect explicit opt-out of focus trapping/backdrop interactions
|
|
988
|
-
// If focusTrap is false, do not enable the backdrop or re-enable focus trap
|
|
989
|
-
|
|
988
|
+
// If focusTrap is false or showBackdrop is false, do not enable the backdrop or re-enable focus trap
|
|
989
|
+
const el = baseEl;
|
|
990
|
+
if (el.focusTrap === false || el.showBackdrop === false) {
|
|
990
991
|
return;
|
|
991
992
|
}
|
|
992
993
|
baseEl.style.setProperty('pointer-events', 'auto');
|
|
@@ -1114,7 +1115,8 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
1114
1115
|
* applied, so the modal content can still be interacted with.
|
|
1115
1116
|
*/
|
|
1116
1117
|
const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint &&
|
|
1117
|
-
baseEl.focusTrap !== false
|
|
1118
|
+
baseEl.focusTrap !== false &&
|
|
1119
|
+
baseEl.showBackdrop !== false;
|
|
1118
1120
|
if (shouldEnableBackdrop) {
|
|
1119
1121
|
enableBackdrop();
|
|
1120
1122
|
}
|
|
@@ -1423,7 +1425,8 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
1423
1425
|
* after the backdropBreakpoint value
|
|
1424
1426
|
*/
|
|
1425
1427
|
const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint &&
|
|
1426
|
-
baseEl.focusTrap !== false
|
|
1428
|
+
baseEl.focusTrap !== false &&
|
|
1429
|
+
baseEl.showBackdrop !== false;
|
|
1427
1430
|
if (shouldEnableBackdrop) {
|
|
1428
1431
|
enableBackdrop();
|
|
1429
1432
|
}
|
package/components/overlays.js
CHANGED
|
@@ -496,11 +496,9 @@ const setRootAriaHidden = (hidden = false) => {
|
|
|
496
496
|
}
|
|
497
497
|
if (hidden) {
|
|
498
498
|
viewContainer.setAttribute('aria-hidden', 'true');
|
|
499
|
-
viewContainer.setAttribute('inert', '');
|
|
500
499
|
}
|
|
501
500
|
else {
|
|
502
501
|
viewContainer.removeAttribute('aria-hidden');
|
|
503
|
-
viewContainer.removeAttribute('inert');
|
|
504
502
|
}
|
|
505
503
|
};
|
|
506
504
|
const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts) => {
|
|
@@ -527,15 +525,31 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
|
|
|
527
525
|
* the keyboard focus from leaving the overlay unless
|
|
528
526
|
* developers explicitly opt out (for example, sheet
|
|
529
527
|
* modals that should permit background interaction).
|
|
528
|
+
*
|
|
529
|
+
* Note: Some apps move inline overlays to a specific container
|
|
530
|
+
* during the willPresent lifecycle (e.g., React portals via
|
|
531
|
+
* onWillPresent). Defer applying aria-hidden/inert to the app
|
|
532
|
+
* root until after willPresent so we can detect where the
|
|
533
|
+
* overlay is finally inserted. If the overlay is inside the
|
|
534
|
+
* view container subtree, skip adding aria-hidden/inert there
|
|
535
|
+
* to avoid disabling the overlay.
|
|
530
536
|
*/
|
|
531
537
|
const overlayEl = overlay.el;
|
|
532
538
|
const shouldTrapFocus = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false;
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
}
|
|
539
|
+
// Only lock out root content when backdrop is active. Developers relying on showBackdrop=false
|
|
540
|
+
// expect background interaction to remain enabled.
|
|
541
|
+
const shouldLockRoot = shouldTrapFocus && overlayEl.showBackdrop !== false;
|
|
537
542
|
overlay.presented = true;
|
|
538
543
|
overlay.willPresent.emit();
|
|
544
|
+
if (shouldLockRoot) {
|
|
545
|
+
const root = getAppRoot(document);
|
|
546
|
+
const viewContainer = root.querySelector('ion-router-outlet, #ion-view-container-root');
|
|
547
|
+
const overlayInsideViewContainer = viewContainer ? viewContainer.contains(overlayEl) : false;
|
|
548
|
+
if (!overlayInsideViewContainer) {
|
|
549
|
+
setRootAriaHidden(true);
|
|
550
|
+
}
|
|
551
|
+
document.body.classList.add(BACKDROP_NO_SCROLL);
|
|
552
|
+
}
|
|
539
553
|
(_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
|
|
540
554
|
const mode = getIonMode(overlay);
|
|
541
555
|
// get the user's animation fn if one was provided
|
|
@@ -638,14 +652,17 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
|
|
|
638
652
|
* from the root element when the last focus-trapping overlay
|
|
639
653
|
* is dismissed.
|
|
640
654
|
*/
|
|
641
|
-
const
|
|
655
|
+
const overlaysLockingRoot = presentedOverlays.filter((o) => {
|
|
656
|
+
const el = o;
|
|
657
|
+
return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && el.showBackdrop !== false;
|
|
658
|
+
});
|
|
642
659
|
const overlayEl = overlay.el;
|
|
643
|
-
const
|
|
660
|
+
const locksRoot = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false && overlayEl.showBackdrop !== false;
|
|
644
661
|
/**
|
|
645
662
|
* If this is the last visible overlay that is trapping focus
|
|
646
663
|
* then we want to re-add the root to the accessibility tree.
|
|
647
664
|
*/
|
|
648
|
-
const lastOverlayTrappingFocus =
|
|
665
|
+
const lastOverlayTrappingFocus = locksRoot && overlaysLockingRoot.length === 1 && overlaysLockingRoot[0].id === overlayEl.id;
|
|
649
666
|
if (lastOverlayTrappingFocus) {
|
|
650
667
|
setRootAriaHidden(false);
|
|
651
668
|
document.body.classList.remove(BACKDROP_NO_SCROLL);
|
package/dist/cjs/index.cjs.js
CHANGED
|
@@ -15,7 +15,7 @@ var index$2 = require('./index-DNh170BW.js');
|
|
|
15
15
|
var config = require('./config-CKhELRRu.js');
|
|
16
16
|
var theme = require('./theme-CeDs6Hcv.js');
|
|
17
17
|
var index$3 = require('./index-D24wggHR.js');
|
|
18
|
-
var overlays = require('./overlays-
|
|
18
|
+
var overlays = require('./overlays-czPyT6xP.js');
|
|
19
19
|
require('./index-DkNv4J_i.js');
|
|
20
20
|
require('./gesture-controller-dtqlP_q4.js');
|
|
21
21
|
require('./hardware-back-button-BxdNu76F.js');
|
|
@@ -7,7 +7,7 @@ var index = require('./index-DNh170BW.js');
|
|
|
7
7
|
var buttonActive = require('./button-active-BzZenWWH.js');
|
|
8
8
|
var helpers = require('./helpers-DgwmcYAu.js');
|
|
9
9
|
var lockController = require('./lock-controller-aDB9wrEf.js');
|
|
10
|
-
var overlays = require('./overlays-
|
|
10
|
+
var overlays = require('./overlays-czPyT6xP.js');
|
|
11
11
|
var theme = require('./theme-CeDs6Hcv.js');
|
|
12
12
|
var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
|
|
13
13
|
var animation = require('./animation-ZJ1lAkZD.js');
|
|
@@ -8,7 +8,7 @@ var config = require('./config-CKhELRRu.js');
|
|
|
8
8
|
var buttonActive = require('./button-active-BzZenWWH.js');
|
|
9
9
|
var helpers = require('./helpers-DgwmcYAu.js');
|
|
10
10
|
var lockController = require('./lock-controller-aDB9wrEf.js');
|
|
11
|
-
var overlays = require('./overlays-
|
|
11
|
+
var overlays = require('./overlays-czPyT6xP.js');
|
|
12
12
|
var theme = require('./theme-CeDs6Hcv.js');
|
|
13
13
|
var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
|
|
14
14
|
var animation = require('./animation-ZJ1lAkZD.js');
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
var index = require('./index-DNh170BW.js');
|
|
7
7
|
var focusVisible = require('./focus-visible-CCvKiLh3.js');
|
|
8
8
|
var helpers = require('./helpers-DgwmcYAu.js');
|
|
9
|
-
var overlays = require('./overlays-
|
|
9
|
+
var overlays = require('./overlays-czPyT6xP.js');
|
|
10
10
|
var dir = require('./dir-Cn0z1rJH.js');
|
|
11
11
|
var theme = require('./theme-CeDs6Hcv.js');
|
|
12
12
|
var index$1 = require('./index-DqmRDbxg.js');
|
|
@@ -7,7 +7,7 @@ var index = require('./index-DNh170BW.js');
|
|
|
7
7
|
var config = require('./config-CKhELRRu.js');
|
|
8
8
|
var helpers = require('./helpers-DgwmcYAu.js');
|
|
9
9
|
var lockController = require('./lock-controller-aDB9wrEf.js');
|
|
10
|
-
var overlays = require('./overlays-
|
|
10
|
+
var overlays = require('./overlays-czPyT6xP.js');
|
|
11
11
|
var theme = require('./theme-CeDs6Hcv.js');
|
|
12
12
|
var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
|
|
13
13
|
var animation = require('./animation-ZJ1lAkZD.js');
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
var index = require('./index-DNh170BW.js');
|
|
7
7
|
var cubicBezier = require('./cubic-bezier-DAjy1V-e.js');
|
|
8
|
-
var overlays = require('./overlays-
|
|
8
|
+
var overlays = require('./overlays-czPyT6xP.js');
|
|
9
9
|
var gestureController = require('./gesture-controller-dtqlP_q4.js');
|
|
10
10
|
var hardwareBackButton = require('./hardware-back-button-BxdNu76F.js');
|
|
11
11
|
var helpers = require('./helpers-DgwmcYAu.js');
|
|
@@ -9,7 +9,7 @@ var frameworkDelegate = require('./framework-delegate-WkyjrnCx.js');
|
|
|
9
9
|
var helpers = require('./helpers-DgwmcYAu.js');
|
|
10
10
|
var lockController = require('./lock-controller-aDB9wrEf.js');
|
|
11
11
|
var capacitor = require('./capacitor-DmA66EwP.js');
|
|
12
|
-
var overlays = require('./overlays-
|
|
12
|
+
var overlays = require('./overlays-czPyT6xP.js');
|
|
13
13
|
var theme = require('./theme-CeDs6Hcv.js');
|
|
14
14
|
var index$4 = require('./index-BzEyuIww.js');
|
|
15
15
|
var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
|
|
@@ -988,8 +988,9 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
988
988
|
const contentAnimation = animation.childAnimations.find((ani) => ani.id === 'contentAnimation');
|
|
989
989
|
const enableBackdrop = () => {
|
|
990
990
|
// Respect explicit opt-out of focus trapping/backdrop interactions
|
|
991
|
-
// If focusTrap is false, do not enable the backdrop or re-enable focus trap
|
|
992
|
-
|
|
991
|
+
// If focusTrap is false or showBackdrop is false, do not enable the backdrop or re-enable focus trap
|
|
992
|
+
const el = baseEl;
|
|
993
|
+
if (el.focusTrap === false || el.showBackdrop === false) {
|
|
993
994
|
return;
|
|
994
995
|
}
|
|
995
996
|
baseEl.style.setProperty('pointer-events', 'auto');
|
|
@@ -1117,7 +1118,8 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
1117
1118
|
* applied, so the modal content can still be interacted with.
|
|
1118
1119
|
*/
|
|
1119
1120
|
const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint &&
|
|
1120
|
-
baseEl.focusTrap !== false
|
|
1121
|
+
baseEl.focusTrap !== false &&
|
|
1122
|
+
baseEl.showBackdrop !== false;
|
|
1121
1123
|
if (shouldEnableBackdrop) {
|
|
1122
1124
|
enableBackdrop();
|
|
1123
1125
|
}
|
|
@@ -1426,7 +1428,8 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
1426
1428
|
* after the backdropBreakpoint value
|
|
1427
1429
|
*/
|
|
1428
1430
|
const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint &&
|
|
1429
|
-
baseEl.focusTrap !== false
|
|
1431
|
+
baseEl.focusTrap !== false &&
|
|
1432
|
+
baseEl.showBackdrop !== false;
|
|
1430
1433
|
if (shouldEnableBackdrop) {
|
|
1431
1434
|
enableBackdrop();
|
|
1432
1435
|
}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
'use strict';
|
|
5
5
|
|
|
6
6
|
var index = require('./index-DNh170BW.js');
|
|
7
|
-
var overlays = require('./overlays-
|
|
7
|
+
var overlays = require('./overlays-czPyT6xP.js');
|
|
8
8
|
var frameworkDelegate = require('./framework-delegate-WkyjrnCx.js');
|
|
9
9
|
var helpers = require('./helpers-DgwmcYAu.js');
|
|
10
10
|
var lockController = require('./lock-controller-aDB9wrEf.js');
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
var index = require('./index-DNh170BW.js');
|
|
7
7
|
var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
|
|
8
|
-
var overlays = require('./overlays-
|
|
8
|
+
var overlays = require('./overlays-czPyT6xP.js');
|
|
9
9
|
var theme = require('./theme-CeDs6Hcv.js');
|
|
10
10
|
require('./index-DkNv4J_i.js');
|
|
11
11
|
require('./helpers-DgwmcYAu.js');
|
|
@@ -7,7 +7,7 @@ var index = require('./index-DNh170BW.js');
|
|
|
7
7
|
var notchController = require('./notch-controller-Bf5Rr4R5.js');
|
|
8
8
|
var compareWithUtils = require('./compare-with-utils-DSicavqM.js');
|
|
9
9
|
var helpers = require('./helpers-DgwmcYAu.js');
|
|
10
|
-
var overlays = require('./overlays-
|
|
10
|
+
var overlays = require('./overlays-czPyT6xP.js');
|
|
11
11
|
var dir = require('./dir-Cn0z1rJH.js');
|
|
12
12
|
var theme = require('./theme-CeDs6Hcv.js');
|
|
13
13
|
var watchOptions = require('./watch-options-CviOsrTS.js');
|
|
@@ -7,7 +7,7 @@ var index$1 = require('./index-DNh170BW.js');
|
|
|
7
7
|
var config = require('./config-CKhELRRu.js');
|
|
8
8
|
var helpers = require('./helpers-DgwmcYAu.js');
|
|
9
9
|
var lockController = require('./lock-controller-aDB9wrEf.js');
|
|
10
|
-
var overlays = require('./overlays-
|
|
10
|
+
var overlays = require('./overlays-czPyT6xP.js');
|
|
11
11
|
var theme = require('./theme-CeDs6Hcv.js');
|
|
12
12
|
var ionicGlobal = require('./ionic-global-UI5YPSi-.js');
|
|
13
13
|
var animation = require('./animation-ZJ1lAkZD.js');
|
|
@@ -498,11 +498,9 @@ const setRootAriaHidden = (hidden = false) => {
|
|
|
498
498
|
}
|
|
499
499
|
if (hidden) {
|
|
500
500
|
viewContainer.setAttribute('aria-hidden', 'true');
|
|
501
|
-
viewContainer.setAttribute('inert', '');
|
|
502
501
|
}
|
|
503
502
|
else {
|
|
504
503
|
viewContainer.removeAttribute('aria-hidden');
|
|
505
|
-
viewContainer.removeAttribute('inert');
|
|
506
504
|
}
|
|
507
505
|
};
|
|
508
506
|
const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts) => {
|
|
@@ -529,15 +527,31 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
|
|
|
529
527
|
* the keyboard focus from leaving the overlay unless
|
|
530
528
|
* developers explicitly opt out (for example, sheet
|
|
531
529
|
* modals that should permit background interaction).
|
|
530
|
+
*
|
|
531
|
+
* Note: Some apps move inline overlays to a specific container
|
|
532
|
+
* during the willPresent lifecycle (e.g., React portals via
|
|
533
|
+
* onWillPresent). Defer applying aria-hidden/inert to the app
|
|
534
|
+
* root until after willPresent so we can detect where the
|
|
535
|
+
* overlay is finally inserted. If the overlay is inside the
|
|
536
|
+
* view container subtree, skip adding aria-hidden/inert there
|
|
537
|
+
* to avoid disabling the overlay.
|
|
532
538
|
*/
|
|
533
539
|
const overlayEl = overlay.el;
|
|
534
540
|
const shouldTrapFocus = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false;
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
}
|
|
541
|
+
// Only lock out root content when backdrop is active. Developers relying on showBackdrop=false
|
|
542
|
+
// expect background interaction to remain enabled.
|
|
543
|
+
const shouldLockRoot = shouldTrapFocus && overlayEl.showBackdrop !== false;
|
|
539
544
|
overlay.presented = true;
|
|
540
545
|
overlay.willPresent.emit();
|
|
546
|
+
if (shouldLockRoot) {
|
|
547
|
+
const root = getAppRoot(document);
|
|
548
|
+
const viewContainer = root.querySelector('ion-router-outlet, #ion-view-container-root');
|
|
549
|
+
const overlayInsideViewContainer = viewContainer ? viewContainer.contains(overlayEl) : false;
|
|
550
|
+
if (!overlayInsideViewContainer) {
|
|
551
|
+
setRootAriaHidden(true);
|
|
552
|
+
}
|
|
553
|
+
document.body.classList.add(gestureController.BACKDROP_NO_SCROLL);
|
|
554
|
+
}
|
|
541
555
|
(_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
|
|
542
556
|
const mode = ionicGlobal.getIonMode(overlay);
|
|
543
557
|
// get the user's animation fn if one was provided
|
|
@@ -640,14 +654,17 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
|
|
|
640
654
|
* from the root element when the last focus-trapping overlay
|
|
641
655
|
* is dismissed.
|
|
642
656
|
*/
|
|
643
|
-
const
|
|
657
|
+
const overlaysLockingRoot = presentedOverlays.filter((o) => {
|
|
658
|
+
const el = o;
|
|
659
|
+
return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && el.showBackdrop !== false;
|
|
660
|
+
});
|
|
644
661
|
const overlayEl = overlay.el;
|
|
645
|
-
const
|
|
662
|
+
const locksRoot = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false && overlayEl.showBackdrop !== false;
|
|
646
663
|
/**
|
|
647
664
|
* If this is the last visible overlay that is trapping focus
|
|
648
665
|
* then we want to re-add the root to the accessibility tree.
|
|
649
666
|
*/
|
|
650
|
-
const lastOverlayTrappingFocus =
|
|
667
|
+
const lastOverlayTrappingFocus = locksRoot && overlaysLockingRoot.length === 1 && overlaysLockingRoot[0].id === overlayEl.id;
|
|
651
668
|
if (lastOverlayTrappingFocus) {
|
|
652
669
|
setRootAriaHidden(false);
|
|
653
670
|
document.body.classList.remove(gestureController.BACKDROP_NO_SCROLL);
|
|
@@ -46,8 +46,9 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
|
|
|
46
46
|
const contentAnimation = animation.childAnimations.find((ani) => ani.id === 'contentAnimation');
|
|
47
47
|
const enableBackdrop = () => {
|
|
48
48
|
// Respect explicit opt-out of focus trapping/backdrop interactions
|
|
49
|
-
// If focusTrap is false, do not enable the backdrop or re-enable focus trap
|
|
50
|
-
|
|
49
|
+
// If focusTrap is false or showBackdrop is false, do not enable the backdrop or re-enable focus trap
|
|
50
|
+
const el = baseEl;
|
|
51
|
+
if (el.focusTrap === false || el.showBackdrop === false) {
|
|
51
52
|
return;
|
|
52
53
|
}
|
|
53
54
|
baseEl.style.setProperty('pointer-events', 'auto');
|
|
@@ -175,7 +176,8 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
|
|
|
175
176
|
* applied, so the modal content can still be interacted with.
|
|
176
177
|
*/
|
|
177
178
|
const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint &&
|
|
178
|
-
baseEl.focusTrap !== false
|
|
179
|
+
baseEl.focusTrap !== false &&
|
|
180
|
+
baseEl.showBackdrop !== false;
|
|
179
181
|
if (shouldEnableBackdrop) {
|
|
180
182
|
enableBackdrop();
|
|
181
183
|
}
|
|
@@ -484,7 +486,8 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
|
|
|
484
486
|
* after the backdropBreakpoint value
|
|
485
487
|
*/
|
|
486
488
|
const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint &&
|
|
487
|
-
baseEl.focusTrap !== false
|
|
489
|
+
baseEl.focusTrap !== false &&
|
|
490
|
+
baseEl.showBackdrop !== false;
|
|
488
491
|
if (shouldEnableBackdrop) {
|
|
489
492
|
enableBackdrop();
|
|
490
493
|
}
|
|
@@ -417,11 +417,9 @@ export const setRootAriaHidden = (hidden = false) => {
|
|
|
417
417
|
}
|
|
418
418
|
if (hidden) {
|
|
419
419
|
viewContainer.setAttribute('aria-hidden', 'true');
|
|
420
|
-
viewContainer.setAttribute('inert', '');
|
|
421
420
|
}
|
|
422
421
|
else {
|
|
423
422
|
viewContainer.removeAttribute('aria-hidden');
|
|
424
|
-
viewContainer.removeAttribute('inert');
|
|
425
423
|
}
|
|
426
424
|
};
|
|
427
425
|
export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts) => {
|
|
@@ -448,15 +446,31 @@ export const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation
|
|
|
448
446
|
* the keyboard focus from leaving the overlay unless
|
|
449
447
|
* developers explicitly opt out (for example, sheet
|
|
450
448
|
* modals that should permit background interaction).
|
|
449
|
+
*
|
|
450
|
+
* Note: Some apps move inline overlays to a specific container
|
|
451
|
+
* during the willPresent lifecycle (e.g., React portals via
|
|
452
|
+
* onWillPresent). Defer applying aria-hidden/inert to the app
|
|
453
|
+
* root until after willPresent so we can detect where the
|
|
454
|
+
* overlay is finally inserted. If the overlay is inside the
|
|
455
|
+
* view container subtree, skip adding aria-hidden/inert there
|
|
456
|
+
* to avoid disabling the overlay.
|
|
451
457
|
*/
|
|
452
458
|
const overlayEl = overlay.el;
|
|
453
459
|
const shouldTrapFocus = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false;
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
}
|
|
460
|
+
// Only lock out root content when backdrop is active. Developers relying on showBackdrop=false
|
|
461
|
+
// expect background interaction to remain enabled.
|
|
462
|
+
const shouldLockRoot = shouldTrapFocus && overlayEl.showBackdrop !== false;
|
|
458
463
|
overlay.presented = true;
|
|
459
464
|
overlay.willPresent.emit();
|
|
465
|
+
if (shouldLockRoot) {
|
|
466
|
+
const root = getAppRoot(document);
|
|
467
|
+
const viewContainer = root.querySelector('ion-router-outlet, #ion-view-container-root');
|
|
468
|
+
const overlayInsideViewContainer = viewContainer ? viewContainer.contains(overlayEl) : false;
|
|
469
|
+
if (!overlayInsideViewContainer) {
|
|
470
|
+
setRootAriaHidden(true);
|
|
471
|
+
}
|
|
472
|
+
document.body.classList.add(BACKDROP_NO_SCROLL);
|
|
473
|
+
}
|
|
460
474
|
(_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
|
|
461
475
|
const mode = getIonMode(overlay);
|
|
462
476
|
// get the user's animation fn if one was provided
|
|
@@ -559,14 +573,17 @@ export const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLe
|
|
|
559
573
|
* from the root element when the last focus-trapping overlay
|
|
560
574
|
* is dismissed.
|
|
561
575
|
*/
|
|
562
|
-
const
|
|
576
|
+
const overlaysLockingRoot = presentedOverlays.filter((o) => {
|
|
577
|
+
const el = o;
|
|
578
|
+
return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && el.showBackdrop !== false;
|
|
579
|
+
});
|
|
563
580
|
const overlayEl = overlay.el;
|
|
564
|
-
const
|
|
581
|
+
const locksRoot = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false && overlayEl.showBackdrop !== false;
|
|
565
582
|
/**
|
|
566
583
|
* If this is the last visible overlay that is trapping focus
|
|
567
584
|
* then we want to re-add the root to the accessibility tree.
|
|
568
585
|
*/
|
|
569
|
-
const lastOverlayTrappingFocus =
|
|
586
|
+
const lastOverlayTrappingFocus = locksRoot && overlaysLockingRoot.length === 1 && overlaysLockingRoot[0].id === overlayEl.id;
|
|
570
587
|
if (lastOverlayTrappingFocus) {
|
|
571
588
|
setRootAriaHidden(false);
|
|
572
589
|
document.body.classList.remove(BACKDROP_NO_SCROLL);
|
package/dist/docs.json
CHANGED
package/dist/esm/index.js
CHANGED
|
@@ -13,7 +13,7 @@ export { L as LogLevel } from './index-4DxY6_gG.js';
|
|
|
13
13
|
export { I as IonicSafeString, g as getMode, s as setupConfig } from './config-Dx_6wPIJ.js';
|
|
14
14
|
export { o as openURL } from './theme-DiVJyqlX.js';
|
|
15
15
|
export { m as menuController } from './index-CXSTcaAW.js';
|
|
16
|
-
export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-
|
|
16
|
+
export { b as actionSheetController, a as alertController, l as loadingController, m as modalController, p as pickerController, c as popoverController, t as toastController } from './overlays-BYcYBCrx.js';
|
|
17
17
|
import './index-ZjP4CjeZ.js';
|
|
18
18
|
import './gesture-controller-BTEOs1at.js';
|
|
19
19
|
import './hardware-back-button-Dhbd-23H.js';
|
|
@@ -5,7 +5,7 @@ import { r as registerInstance, c as createEvent, a as readTask, h, d as Host, g
|
|
|
5
5
|
import { c as createButtonActiveGesture } from './button-active-DBUPuLNw.js';
|
|
6
6
|
import { r as raf } from './helpers-8KSQQGQy.js';
|
|
7
7
|
import { c as createLockController } from './lock-controller-B-hirT0v.js';
|
|
8
|
-
import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, f as present, g as dismiss, h as eventMethod, s as safeCall, j as prepareOverlay, k as setOverlayId } from './overlays-
|
|
8
|
+
import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, f as present, g as dismiss, h as eventMethod, s as safeCall, j as prepareOverlay, k as setOverlayId } from './overlays-BYcYBCrx.js';
|
|
9
9
|
import { g as getClassMap } from './theme-DiVJyqlX.js';
|
|
10
10
|
import { b as getIonMode } from './ionic-global-CTSyufhF.js';
|
|
11
11
|
import { c as createAnimation } from './animation-BvhAtgca.js';
|
|
@@ -6,7 +6,7 @@ import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './conf
|
|
|
6
6
|
import { c as createButtonActiveGesture } from './button-active-DBUPuLNw.js';
|
|
7
7
|
import { r as raf } from './helpers-8KSQQGQy.js';
|
|
8
8
|
import { c as createLockController } from './lock-controller-B-hirT0v.js';
|
|
9
|
-
import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-
|
|
9
|
+
import { d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-BYcYBCrx.js';
|
|
10
10
|
import { g as getClassMap } from './theme-DiVJyqlX.js';
|
|
11
11
|
import { b as getIonMode } from './ionic-global-CTSyufhF.js';
|
|
12
12
|
import { c as createAnimation } from './animation-BvhAtgca.js';
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
import { j as printIonError, f as printIonWarning, r as registerInstance, c as createEvent, w as writeTask, h, d as Host, g as getElement } from './index-4DxY6_gG.js';
|
|
5
5
|
import { startFocusVisible } from './focus-visible-BmVRXR1y.js';
|
|
6
6
|
import { r as raf, g as getElementRoot, a as renderHiddenInput, e as clamp } from './helpers-8KSQQGQy.js';
|
|
7
|
-
import { F as FOCUS_TRAP_DISABLE_CLASS, d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-
|
|
7
|
+
import { F as FOCUS_TRAP_DISABLE_CLASS, d as createDelegateController, e as createTriggerController, B as BACKDROP, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall } from './overlays-BYcYBCrx.js';
|
|
8
8
|
import { i as isRTL } from './dir-C53feagD.js';
|
|
9
9
|
import { c as createColorClasses, g as getClassMap } from './theme-DiVJyqlX.js';
|
|
10
10
|
import { l as chevronDown, o as caretUpSharp, p as chevronForward, q as caretDownSharp, c as chevronBack } from './index-DV3sJJW8.js';
|
|
@@ -5,7 +5,7 @@ import { r as registerInstance, c as createEvent, e as config, h, d as Host, g a
|
|
|
5
5
|
import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './config-Dx_6wPIJ.js';
|
|
6
6
|
import { r as raf } from './helpers-8KSQQGQy.js';
|
|
7
7
|
import { c as createLockController } from './lock-controller-B-hirT0v.js';
|
|
8
|
-
import { d as createDelegateController, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-
|
|
8
|
+
import { d as createDelegateController, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-BYcYBCrx.js';
|
|
9
9
|
import { g as getClassMap } from './theme-DiVJyqlX.js';
|
|
10
10
|
import { b as getIonMode } from './ionic-global-CTSyufhF.js';
|
|
11
11
|
import { c as createAnimation } from './animation-BvhAtgca.js';
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import { r as registerInstance, c as createEvent, e as config, j as printIonError, h, d as Host, g as getElement } from './index-4DxY6_gG.js';
|
|
5
5
|
import { g as getTimeGivenProgression } from './cubic-bezier-hHmYLOfE.js';
|
|
6
|
-
import { o as getPresentedOverlay, B as BACKDROP, n as focusFirstDescendant, q as focusLastDescendant, G as GESTURE } from './overlays-
|
|
6
|
+
import { o as getPresentedOverlay, B as BACKDROP, n as focusFirstDescendant, q as focusLastDescendant, G as GESTURE } from './overlays-BYcYBCrx.js';
|
|
7
7
|
import { G as GESTURE_CONTROLLER } from './gesture-controller-BTEOs1at.js';
|
|
8
8
|
import { shouldUseCloseWatcher } from './hardware-back-button-Dhbd-23H.js';
|
|
9
9
|
import { o as isEndSide, i as inheritAriaAttributes, l as assert, e as clamp } from './helpers-8KSQQGQy.js';
|
|
@@ -7,7 +7,7 @@ import { C as CoreDelegate, a as attachComponent, d as detachComponent } from '.
|
|
|
7
7
|
import { e as clamp, g as getElementRoot, r as raf, b as inheritAttributes, h as hasLazyBuild } from './helpers-8KSQQGQy.js';
|
|
8
8
|
import { c as createLockController } from './lock-controller-B-hirT0v.js';
|
|
9
9
|
import { g as getCapacitor } from './capacitor-CFERIeaU.js';
|
|
10
|
-
import { G as GESTURE, O as OVERLAY_GESTURE_PRIORITY, F as FOCUS_TRAP_DISABLE_CLASS, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-
|
|
10
|
+
import { G as GESTURE, O as OVERLAY_GESTURE_PRIORITY, F as FOCUS_TRAP_DISABLE_CLASS, e as createTriggerController, B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod } from './overlays-BYcYBCrx.js';
|
|
11
11
|
import { g as getClassMap } from './theme-DiVJyqlX.js';
|
|
12
12
|
import { e as deepReady, w as waitForMount } from './index-Dp7GXH1z.js';
|
|
13
13
|
import { b as getIonMode } from './ionic-global-CTSyufhF.js';
|
|
@@ -986,8 +986,9 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
986
986
|
const contentAnimation = animation.childAnimations.find((ani) => ani.id === 'contentAnimation');
|
|
987
987
|
const enableBackdrop = () => {
|
|
988
988
|
// Respect explicit opt-out of focus trapping/backdrop interactions
|
|
989
|
-
// If focusTrap is false, do not enable the backdrop or re-enable focus trap
|
|
990
|
-
|
|
989
|
+
// If focusTrap is false or showBackdrop is false, do not enable the backdrop or re-enable focus trap
|
|
990
|
+
const el = baseEl;
|
|
991
|
+
if (el.focusTrap === false || el.showBackdrop === false) {
|
|
991
992
|
return;
|
|
992
993
|
}
|
|
993
994
|
baseEl.style.setProperty('pointer-events', 'auto');
|
|
@@ -1115,7 +1116,8 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
1115
1116
|
* applied, so the modal content can still be interacted with.
|
|
1116
1117
|
*/
|
|
1117
1118
|
const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint &&
|
|
1118
|
-
baseEl.focusTrap !== false
|
|
1119
|
+
baseEl.focusTrap !== false &&
|
|
1120
|
+
baseEl.showBackdrop !== false;
|
|
1119
1121
|
if (shouldEnableBackdrop) {
|
|
1120
1122
|
enableBackdrop();
|
|
1121
1123
|
}
|
|
@@ -1424,7 +1426,8 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
|
|
|
1424
1426
|
* after the backdropBreakpoint value
|
|
1425
1427
|
*/
|
|
1426
1428
|
const shouldEnableBackdrop = currentBreakpoint > backdropBreakpoint &&
|
|
1427
|
-
baseEl.focusTrap !== false
|
|
1429
|
+
baseEl.focusTrap !== false &&
|
|
1430
|
+
baseEl.showBackdrop !== false;
|
|
1428
1431
|
if (shouldEnableBackdrop) {
|
|
1429
1432
|
enableBackdrop();
|
|
1430
1433
|
}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* (C) Ionic http://ionicframework.com - MIT License
|
|
3
3
|
*/
|
|
4
4
|
import { r as registerInstance, c as createEvent, f as printIonWarning, h, d as Host, g as getElement } from './index-4DxY6_gG.js';
|
|
5
|
-
import { B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, n as focusFirstDescendant, g as dismiss, h as eventMethod, F as FOCUS_TRAP_DISABLE_CLASS } from './overlays-
|
|
5
|
+
import { B as BACKDROP, j as prepareOverlay, k as setOverlayId, f as present, n as focusFirstDescendant, g as dismiss, h as eventMethod, F as FOCUS_TRAP_DISABLE_CLASS } from './overlays-BYcYBCrx.js';
|
|
6
6
|
import { C as CoreDelegate, a as attachComponent, d as detachComponent } from './framework-delegate-BLEBgH06.js';
|
|
7
7
|
import { g as getElementRoot, r as raf, f as addEventListener, h as hasLazyBuild } from './helpers-8KSQQGQy.js';
|
|
8
8
|
import { c as createLockController } from './lock-controller-B-hirT0v.js';
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import { r as registerInstance, h, i as forceUpdate, d as Host, g as getElement } from './index-4DxY6_gG.js';
|
|
5
5
|
import { b as getIonMode } from './ionic-global-CTSyufhF.js';
|
|
6
|
-
import { s as safeCall } from './overlays-
|
|
6
|
+
import { s as safeCall } from './overlays-BYcYBCrx.js';
|
|
7
7
|
import { g as getClassMap } from './theme-DiVJyqlX.js';
|
|
8
8
|
import './index-ZjP4CjeZ.js';
|
|
9
9
|
import './helpers-8KSQQGQy.js';
|
|
@@ -5,7 +5,7 @@ import { r as registerInstance, c as createEvent, f as printIonWarning, h, d as
|
|
|
5
5
|
import { c as createNotchController } from './notch-controller-lb417-kU.js';
|
|
6
6
|
import { i as isOptionSelected, c as compareOptions } from './compare-with-utils-sObYyvOy.js';
|
|
7
7
|
import { b as inheritAttributes, a as renderHiddenInput, n as focusVisibleElement } from './helpers-8KSQQGQy.js';
|
|
8
|
-
import { c as popoverController, b as actionSheetController, a as alertController, m as modalController, s as safeCall } from './overlays-
|
|
8
|
+
import { c as popoverController, b as actionSheetController, a as alertController, m as modalController, s as safeCall } from './overlays-BYcYBCrx.js';
|
|
9
9
|
import { i as isRTL } from './dir-C53feagD.js';
|
|
10
10
|
import { h as hostContext, c as createColorClasses, g as getClassMap } from './theme-DiVJyqlX.js';
|
|
11
11
|
import { w as watchForOptions } from './watch-options-Dtdm8lKC.js';
|
|
@@ -5,7 +5,7 @@ import { f as printIonWarning, r as registerInstance, c as createEvent, e as con
|
|
|
5
5
|
import { E as ENABLE_HTML_CONTENT_DEFAULT, a as sanitizeDOMString } from './config-Dx_6wPIJ.js';
|
|
6
6
|
import { g as getElementRoot, r as raf } from './helpers-8KSQQGQy.js';
|
|
7
7
|
import { c as createLockController } from './lock-controller-B-hirT0v.js';
|
|
8
|
-
import { O as OVERLAY_GESTURE_PRIORITY, d as createDelegateController, e as createTriggerController, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall, G as GESTURE } from './overlays-
|
|
8
|
+
import { O as OVERLAY_GESTURE_PRIORITY, d as createDelegateController, e as createTriggerController, i as isCancel, j as prepareOverlay, k as setOverlayId, f as present, g as dismiss, h as eventMethod, s as safeCall, G as GESTURE } from './overlays-BYcYBCrx.js';
|
|
9
9
|
import { c as createColorClasses, g as getClassMap } from './theme-DiVJyqlX.js';
|
|
10
10
|
import { b as getIonMode } from './ionic-global-CTSyufhF.js';
|
|
11
11
|
import { c as createAnimation } from './animation-BvhAtgca.js';
|