MOBILE-4065 a11y: Hide pages under user tours

Following the same strategy as Ionic's built-in overlays 1b30fc97d3/core/src/utils/overlays.ts (L388..L401)
main
Noel De Martin 2023-02-14 09:21:39 +01:00
parent 77fb8f7502
commit c08d638026
4 changed files with 24 additions and 3 deletions

View File

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

View File

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

View File

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

View File

@ -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.
*