From 2707ccd9da562cefc340dd32b9958959f7a493d1 Mon Sep 17 00:00:00 2001
From: Dani Palou <dani@moodle.com>
Date: Thu, 9 May 2024 17:09:57 +0200
Subject: [PATCH] MOBILE-4470 overlays: Fix Ionic bug with aria-hidden
---
src/core/services/utils/dom.ts | 41 +++++++++++++++++++++++++++++++++-
1 file changed, 40 insertions(+), 1 deletion(-)
diff --git a/src/core/services/utils/dom.ts b/src/core/services/utils/dom.ts
index ccf004160..cb97417eb 100644
--- a/src/core/services/utils/dom.ts
+++ b/src/core/services/utils/dom.ts
@@ -37,6 +37,8 @@ import {
PopoverController,
ModalController,
Router,
+ ActionSheetController,
+ LoadingController,
} from '@singletons';
import { CoreLogger } from '@singletons/logger';
import { CoreFileSizeSum } from '@services/plugin-file-delegate';
@@ -868,6 +870,8 @@ export class CoreDomUtilsProvider {
alertMessageEl && this.treatAnchors(alertMessageEl);
}
+ this.fixAriaHidden(alert);
+
return;
});
@@ -1408,6 +1412,8 @@ export class CoreDomUtilsProvider {
await loader.present();
+ this.fixAriaHidden(loader);
+
return loader;
}
@@ -1476,8 +1482,9 @@ export class CoreDomUtilsProvider {
// TODO: Improve this if we need two modals with same component open at the same time.
const modalId = Md5.hashAsciiStr(options.component?.toString() || '');
+ const alreadyDisplayed = !!this.displayedModals[modalId];
- const modal = this.displayedModals[modalId]
+ const modal = alreadyDisplayed
? this.displayedModals[modalId]
: await ModalController.create(modalOptions);
@@ -1502,6 +1509,10 @@ export class CoreDomUtilsProvider {
await modal.present();
}
+ if (!alreadyDisplayed) {
+ this.fixAriaHidden(modal);
+ }
+
const result = await resultPromise;
navSubscription?.unsubscribe();
@@ -1512,6 +1523,32 @@ export class CoreDomUtilsProvider {
}
}
+ /**
+ * Temporary fix to remove aria-hidden from ion-router-outlet if needed. It can be removed once the Ionic bug is fixed.
+ * https://github.com/ionic-team/ionic-framework/issues/29396
+ *
+ * @param overlay Overlay dismissed.
+ */
+ protected async fixAriaHidden(
+ overlay: HTMLIonModalElement | HTMLIonPopoverElement | HTMLIonAlertElement | HTMLIonToastElement,
+ ): Promise<void> {
+
+ await overlay.onDidDismiss();
+
+ const overlays = await Promise.all([
+ ModalController.getTop(),
+ PopoverController.getTop(),
+ ActionSheetController.getTop(),
+ AlertController.getTop(),
+ LoadingController.getTop(),
+ ToastController.getTop(),
+ ]);
+
+ if (!overlays.find(overlay => overlay !== undefined)) {
+ document.querySelector('ion-router-outlet')?.removeAttribute('aria-hidden');
+ }
+ }
+
/**
* Opens a side Modal.
*
@@ -1574,6 +1611,8 @@ export class CoreDomUtilsProvider {
}
}
+ this.fixAriaHidden(popover);
+
return popover;
}