MOBILE-3833 tours: Fix some tours not appearing in iOS

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"
-    #button>
+<ion-button (click)="openBlocks()" [userTour]="userTour" [attr.aria-label]="'core.block.opendrawerblocks' | translate" color="secondary">
     <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/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();