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
parent
77fb8f7502
commit
c08d638026
|
@ -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 }}
|
||||
|
|
|
@ -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 }}
|
||||
|
|
|
@ -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 }}
|
||||
|
|
|
@ -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.
|
||||
*
|
||||
|
|
Loading…
Reference in New Issue