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>
|
<p>{{ 'core.block.tour_navigation_dashboard_content' | translate }}</p>
|
||||||
<ion-button (click)="dismiss()" expand="block">
|
<ion-button (click)="dismiss()" expand="block">
|
||||||
{{ 'core.endonesteptour' | translate }}
|
{{ '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>
|
<p>{{ 'core.course.tour_navigation_course_index_student_content' | translate }}</p>
|
||||||
<ion-button (click)="dismiss()" expand="block">
|
<ion-button (click)="dismiss()" expand="block">
|
||||||
{{ 'core.endonesteptour' | translate }}
|
{{ '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>
|
<p>{{ 'core.mainmenu.usermenutourdescription' | translate }}</p>
|
||||||
<ion-button (click)="dismiss()" expand="block">
|
<ion-button (click)="dismiss()" expand="block">
|
||||||
{{ 'core.endonesteptour' | translate }}
|
{{ 'core.endonesteptour' | translate }}
|
||||||
|
|
|
@ -115,6 +115,7 @@ export class CoreUserToursService {
|
||||||
await CoreUtils.wait(delay ?? 200);
|
await CoreUtils.wait(delay ?? 200);
|
||||||
|
|
||||||
const container = document.querySelector('ion-app') ?? document.body;
|
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(
|
const element = await AngularFrameworkDelegate.attachViewToDom(
|
||||||
container,
|
container,
|
||||||
CoreUserToursUserTourComponent,
|
CoreUserToursUserTourComponent,
|
||||||
|
@ -122,6 +123,8 @@ export class CoreUserToursService {
|
||||||
);
|
);
|
||||||
const tour = CoreDirectivesRegistry.require(element, CoreUserToursUserTourComponent);
|
const tour = CoreDirectivesRegistry.require(element, CoreUserToursUserTourComponent);
|
||||||
|
|
||||||
|
viewContainer?.setAttribute('aria-hidden', 'true');
|
||||||
|
|
||||||
return this.startTour(tour, options.watch ?? (options as CoreUserToursFocusedOptions).focus);
|
return this.startTour(tour, options.watch ?? (options as CoreUserToursFocusedOptions).focus);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -132,6 +135,15 @@ export class CoreUserToursService {
|
||||||
*/
|
*/
|
||||||
async dismiss(acknowledge: boolean = true): Promise<void> {
|
async dismiss(acknowledge: boolean = true): Promise<void> {
|
||||||
await this.getForegroundTour()?.dismiss(acknowledge);
|
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;
|
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.
|
* Returns the tour index in the stack.
|
||||||
*
|
*
|
||||||
|
|
Loading…
Reference in New Issue