From c08d638026d15b4489509f53e1e5ade9c54623f4 Mon Sep 17 00:00:00 2001
From: Noel De Martin <noel@moodle.com>
Date: Tue, 14 Feb 2023 09:21:39 +0100
Subject: [PATCH] MOBILE-4065 a11y: Hide pages under user tours

Following the same strategy as Ionic's built-in overlays https://github.com/ionic-team/ionic-framework/blob/1b30fc97d33e761866b4bcf7518efcdeb753032d/core/src/utils/overlays.ts#L388..L401
---
 .../side-blocks-tour/side-blocks-tour.html    |  2 +-
 .../course-index-tour/course-index-tour.html  |  2 +-
 .../user-menu-tour/user-menu-tour.html        |  2 +-
 .../features/usertours/services/user-tours.ts | 21 +++++++++++++++++++
 4 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/core/features/block/components/side-blocks-tour/side-blocks-tour.html b/src/core/features/block/components/side-blocks-tour/side-blocks-tour.html
index 00793c3ff..49c98e116 100644
--- a/src/core/features/block/components/side-blocks-tour/side-blocks-tour.html
+++ b/src/core/features/block/components/side-blocks-tour/side-blocks-tour.html
@@ -1,4 +1,4 @@
-<h2>{{ 'core.block.tour_navigation_dashboard_title' | translate }}</h2>
+<h1>{{ 'core.block.tour_navigation_dashboard_title' | translate }}</h1>
 <p>{{ 'core.block.tour_navigation_dashboard_content' | translate }}</p>
 <ion-button (click)="dismiss()" expand="block">
     {{ 'core.endonesteptour' | translate }}
diff --git a/src/core/features/course/components/course-index-tour/course-index-tour.html b/src/core/features/course/components/course-index-tour/course-index-tour.html
index dbf65101b..3b70e4244 100644
--- a/src/core/features/course/components/course-index-tour/course-index-tour.html
+++ b/src/core/features/course/components/course-index-tour/course-index-tour.html
@@ -1,4 +1,4 @@
-<h2>{{ 'core.course.tour_navigation_course_index_student_title' | translate }}</h2>
+<h1>{{ 'core.course.tour_navigation_course_index_student_title' | translate }}</h1>
 <p>{{ 'core.course.tour_navigation_course_index_student_content' | translate }}</p>
 <ion-button (click)="dismiss()" expand="block">
     {{ 'core.endonesteptour' | translate }}
diff --git a/src/core/features/mainmenu/components/user-menu-tour/user-menu-tour.html b/src/core/features/mainmenu/components/user-menu-tour/user-menu-tour.html
index efef95b50..d3556b828 100644
--- a/src/core/features/mainmenu/components/user-menu-tour/user-menu-tour.html
+++ b/src/core/features/mainmenu/components/user-menu-tour/user-menu-tour.html
@@ -1,4 +1,4 @@
-<h2>{{ 'core.mainmenu.usermenutourtitle' | translate }}</h2>
+<h1>{{ 'core.mainmenu.usermenutourtitle' | translate }}</h1>
 <p>{{ 'core.mainmenu.usermenutourdescription' | translate }}</p>
 <ion-button (click)="dismiss()" expand="block">
     {{ 'core.endonesteptour' | translate }}
diff --git a/src/core/features/usertours/services/user-tours.ts b/src/core/features/usertours/services/user-tours.ts
index a79b60f93..a098732cb 100644
--- a/src/core/features/usertours/services/user-tours.ts
+++ b/src/core/features/usertours/services/user-tours.ts
@@ -115,6 +115,7 @@ export class CoreUserToursService {
         await CoreUtils.wait(delay ?? 200);
 
         const container = document.querySelector('ion-app') ?? document.body;
+        const viewContainer = container.querySelector('ion-router-outlet, ion-nav, #ion-view-container-root');
         const element = await AngularFrameworkDelegate.attachViewToDom(
             container,
             CoreUserToursUserTourComponent,
@@ -122,6 +123,8 @@ export class CoreUserToursService {
         );
         const tour = CoreDirectivesRegistry.require(element, CoreUserToursUserTourComponent);
 
+        viewContainer?.setAttribute('aria-hidden', 'true');
+
         return this.startTour(tour, options.watch ?? (options as CoreUserToursFocusedOptions).focus);
     }
 
@@ -132,6 +135,15 @@ export class CoreUserToursService {
      */
     async dismiss(acknowledge: boolean = true): Promise<void> {
         await this.getForegroundTour()?.dismiss(acknowledge);
+
+        if (this.hasVisibleTour()) {
+            return;
+        }
+
+        const container = document.querySelector('ion-app') ?? document.body;
+        const viewContainer = container.querySelector('ion-router-outlet, ion-nav, #ion-view-container-root');
+
+        viewContainer?.removeAttribute('aria-hidden');
     }
 
     /**
@@ -241,6 +253,15 @@ export class CoreUserToursService {
         return this.tours.find(({ visible }) => visible)?.component;
     }
 
+    /**
+     * Check whether any tour is visible.
+     *
+     * @returns Whether any tour is visible.
+     */
+    protected hasVisibleTour(): boolean {
+        return this.tours.some(({ visible }) => visible);
+    }
+
     /**
      * Returns the tour index in the stack.
      *