Merge pull request #3264 from dpalou/MOBILE-3833

Mobile 3833

src/core/features/block/components/side-blocks-button/side-blocks-button.html

@@ -1,4 +1,3 @@
-<ion-button (click)="openBlocks()" [userTour]="userTour" [attr.aria-label]="'core.block.opendrawerblocks' | translate" color="secondary"
+<ion-button (click)="openBlocks()" [userTour]="userTour" [attr.aria-label]="'core.block.opendrawerblocks' | translate" color="secondary">
-    #button>
     <ion-icon name="fas-chevron-left" slot="icon-only" aria-hidden="true"></ion-icon>
 </ion-button>

src/core/features/block/components/side-blocks-button/side-blocks-button.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Component, ElementRef, Input, OnDestroy, OnInit } from '@angular/core';
 import { CoreCancellablePromise } from '@classes/cancellable-promise';
 import { CoreUserTourDirectiveOptions } from '@directives/user-tour';
 import { CoreUserToursAlignment, CoreUserToursSide } from '@features/usertours/services/user-tours';
@@ -33,14 +33,17 @@ export class CoreBlockSideBlocksButtonComponent implements OnInit, OnDestroy {
 
     @Input() contextLevel!: string;
     @Input() instanceId!: number;
-    @ViewChild('button', { read: ElementRef }) button?: ElementRef<HTMLElement>;
 
     userTour: CoreUserTourDirectiveOptions = {
         id: 'side-blocks-button',
         component: CoreBlockSideBlocksTourComponent,
         side: CoreUserToursSide.Start,
         alignment: CoreUserToursAlignment.Center,
-        getFocusedElement: nativeButton => nativeButton.shadowRoot?.children[0] as HTMLElement,
+        getFocusedElement: nativeButton => {
+            const innerButton = Array.from(nativeButton.shadowRoot?.children ?? []).find(child => child.tagName === 'BUTTON');
+
+            return innerButton as HTMLElement ?? nativeButton;
+        },
     };
 
     protected element: HTMLElement;

src/core/features/course/components/course-format/course-format.html

@@ -56,7 +56,7 @@
 <!-- Course Index button. -->
 <ion-fab slot="fixed" core-fab vertical="bottom" horizontal="end" *ngIf="loaded && displayCourseIndex">
     <ion-fab-button (click)="openCourseIndex()" [userTour]="courseIndexTour" [attr.aria-label]="'core.course.courseindex' | translate"
-        color="secondary" #courseIndexFab>
+        color="secondary">
         <ion-icon name="fas-list-ul" aria-hidden="true"></ion-icon>
         <span class="sr-only">{{'core.course.courseindex' | translate }}</span>
     </ion-fab-button>

src/core/features/course/components/course-format/course-format.ts

@@ -23,7 +23,6 @@ import {
     QueryList,
     Type,
     ElementRef,
-    ViewChild,
 } from '@angular/core';
 import { CoreDomUtils } from '@services/utils/dom';
 import { CoreDynamicComponent } from '@components/dynamic-component/dynamic-component';
@@ -77,7 +76,6 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
     @Input() moduleId?: number; // The module ID to scroll to. Must be inside the initial selected section.
 
     @ViewChildren(CoreDynamicComponent) dynamicComponents?: QueryList<CoreDynamicComponent>;
-    @ViewChild('courseIndexFab', { read: ElementRef }) courseIndexFab?: ElementRef<HTMLElement>;
 
     // All the possible component classes.
     courseFormatComponent?: Type<unknown>;
@@ -93,7 +91,11 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
         component: CoreCourseCourseIndexTourComponent,
         side: CoreUserToursSide.Top,
         alignment: CoreUserToursAlignment.End,
-        getFocusedElement: nativeButton => nativeButton.shadowRoot?.children[0] as HTMLElement,
+        getFocusedElement: nativeButton => {
+            const innerButton = Array.from(nativeButton.shadowRoot?.children ?? []).find(child => child.tagName === 'BUTTON');
+
+            return innerButton as HTMLElement ?? nativeButton;
+        },
     };
 
     displayCourseIndex = false;

src/core/features/course/pages/contents/contents.ts

@@ -353,7 +353,6 @@ export class CoreCourseContentsPage implements OnInit, OnDestroy, CoreRefreshCon
      * @return Promise resolved when done.
      */
     protected async showLoadingAndRefresh(sync = false, invalidateData = true): Promise<void> {
-        // Save scroll position to restore it once done.
         this.updatingData = true;
         this.changeDetectorRef.detectChanges();
 

src/core/features/mainmenu/components/user-menu-button/user-menu-button.html

@@ -1,4 +1,4 @@
 <core-user-avatar *ngIf="isMainScreen && siteInfo" [user]="siteInfo" class="core-bar-button-image clickable" [linkProfile]="false"
     (ariaButtonClick)="openUserMenu($event)" [userTour]="userTour" role="button" tabindex="0"
-    [attr.aria-label]="'core.user.useraccount' | translate" #avatar>
+    [attr.aria-label]="'core.user.useraccount' | translate">
 </core-user-avatar>

src/core/features/mainmenu/components/user-menu-button/user-menu-button.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { CoreSiteInfo } from '@classes/site';
 import { CoreUserTourDirectiveOptions } from '@directives/user-tour';
 import { CoreUserToursAlignment, CoreUserToursSide } from '@features/usertours/services/user-tours';
@@ -44,8 +44,6 @@ export class CoreMainMenuUserButtonComponent implements OnInit {
         side: CoreScreen.isMobile ? CoreUserToursSide.Start : CoreUserToursSide.End,
     };
 
-    @ViewChild('avatar', { read: ElementRef }) avatar?: ElementRef<HTMLElement>;
-
     constructor(protected routerOutlet: IonRouterOutlet) {
         const currentSite = CoreSites.getRequiredCurrentSite();
 

src/core/features/usertours/components/user-tour/user-tour.ts

@@ -183,6 +183,11 @@ export class CoreUserToursUserTourComponent implements AfterViewInit, OnDestroy
      * Play animation to show that the User Tour has started.
      */
     private async playEnterAnimation(): Promise<void> {
+        if (!('animate' in this.element)) {
+            // Not supported, don't animate.
+            return;
+        }
+
         const animations = [
             this.element.animate({ opacity: ['0', '1'] }, { duration: ANIMATION_DURATION }),
             this.wrapperElement.value?.animate(
@@ -198,6 +203,11 @@ export class CoreUserToursUserTourComponent implements AfterViewInit, OnDestroy
      * Play animation to show that the User Tour has endd.
      */
     private async playLeaveAnimation(): Promise<void> {
+        if (!('animate' in this.element)) {
+            // Not supported, don't animate.
+            return;
+        }
+
         const animations = [
             this.element.animate({ opacity: ['1', '0'] }, { duration: ANIMATION_DURATION }),
             this.wrapperElement.value?.animate(