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)
			
			
This commit is contained in:
		
							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…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user