Merge pull request #3547 from NoelDeMartin/MOBILE-4065

MOBILE-4065 a11y: Hide pages under user tours

Author: crazyserver

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 }}

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 }}

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 }}

src/core/features/usertours/services/user-tours.ts

@@ -115,13 +115,16 @@ 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,
             { ...componentOptions, container },
         );
         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.
      *