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> | <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…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user