From 8e3da0a1083050bdda46c278e727b31225c6ffee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 15 Dec 2020 10:27:16 +0100
Subject: [PATCH] MOBILE-3624 core: Fix migration linting problems

---
 gulpfile.js                                   |  2 +-
 .../components/myoverview/myoverview.ts       | 22 +++++++---------
 .../addon-block-sitemainmenu.html             |  5 +++-
 .../services/coursecompletion.ts              | 12 ++++-----
 .../core-context-menu-popover.html            |  6 +++--
 .../show-password/show-password.scss          |  2 +-
 .../pages/choose-site/choose-site.html        | 18 ++++++++-----
 .../course-progress/course-progress.ts        |  2 +-
 .../self-enrol-password.html                  | 24 +++++++++--------
 .../pages/course-preview/course-preview.html  |  2 +-
 .../emulator/services/capture-helper.ts       |  2 +-
 .../services/fileuploader-helper.ts           |  2 +-
 .../fileuploader/services/fileuploader.ts     |  2 +-
 .../login/pages/credentials/credentials.html  | 22 +++++++++-------
 .../forgotten-password.html                   | 12 +++++----
 .../login/pages/reconnect/reconnect.html      | 14 +++++-----
 src/core/features/login/pages/site/site.html  |  6 ++++-
 .../features/mainmenu/pages/more/more.html    |  6 ++---
 .../search-box/core-search-box.html           |  2 +-
 .../settings/pages/general/general.html       |  8 +++---
 .../features/settings/pages/site/site.html    |  2 +-
 src/core/features/user/pages/about/about.html |  6 ++---
 .../features/user/pages/profile/profile.html  | 26 ++++++++++---------
 src/core/services/utils/dom.ts                |  2 +-
 24 files changed, 117 insertions(+), 90 deletions(-)

diff --git a/gulpfile.js b/gulpfile.js
index ae1ef0a8c..739e799c2 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -41,5 +41,5 @@ gulp.task('push', (done) => {
 gulp.task('default', gulp.parallel('lang'));
 
 gulp.task('watch', () => {
-    gulp.watch(langsPaths, { interval: 500 }, gulp.parallel('lang'));
+    gulp.watch(paths.lang, { interval: 500 }, gulp.parallel('lang'));
 });
diff --git a/src/addons/block/myoverview/components/myoverview/myoverview.ts b/src/addons/block/myoverview/components/myoverview/myoverview.ts
index 63a6956c8..c4b8eae72 100644
--- a/src/addons/block/myoverview/components/myoverview/myoverview.ts
+++ b/src/addons/block/myoverview/components/myoverview/myoverview.ts
@@ -231,7 +231,7 @@ export class AddonBlockMyOverviewComponent extends CoreBlockBaseComponent implem
     protected async fetchContent(): Promise<void> {
         const config = this.block.configsRecord || {};
 
-        const showCategories = config && config.displaycategories && config.displaycategories.value == '1';
+        const showCategories = config?.displaycategories?.value == '1';
 
         const courses = await CoreCoursesHelper.instance.getUserCoursesWithOptions(this.sort, undefined, undefined, showCategories);
 
@@ -257,26 +257,26 @@ export class AddonBlockMyOverviewComponent extends CoreBlockBaseComponent implem
         this.showFilter = false;
 
         this.showFilters.all = this.getShowFilterValue(
-            !config || config.displaygroupingall.value == '1',
+            !config || config.displaygroupingall?.value == '1',
             this.courses.all.length === 0,
         );
         // Do not show allincludinghiddenif config it's not present (before 3.8).
         this.showFilters.allincludinghidden =
             this.getShowFilterValue(
-                config.displaygroupingallincludinghidden.value == '1',
+                config?.displaygroupingallincludinghidden?.value == '1',
                 this.courses.allincludinghidden.length === 0,
             );
 
         this.showFilters.inprogress = this.getShowFilterValue(
-            !config || config.displaygroupinginprogress.value == '1',
+            !config || config.displaygroupinginprogress?.value == '1',
             this.courses.inprogress.length === 0,
         );
         this.showFilters.past = this.getShowFilterValue(
-            !config || config.displaygroupingpast.value == '1',
+            !config || config.displaygroupingpast?.value == '1',
             this.courses.past.length === 0,
         );
         this.showFilters.future = this.getShowFilterValue(
-            !config || config.displaygroupingfuture.value == '1',
+            !config || config.displaygroupingfuture?.value == '1',
             this.courses.future.length === 0,
         );
 
@@ -285,24 +285,22 @@ export class AddonBlockMyOverviewComponent extends CoreBlockBaseComponent implem
 
         this.showFilters.hidden = this.getShowFilterValue(
             this.showSelectorFilter && typeof courses[0].hidden != 'undefined' &&
-                (!config || config.displaygroupinghidden.value == '1'),
+                (!config || config.displaygroupinghidden?.value == '1'),
             this.courses.hidden.length === 0,
         );
 
         this.showFilters.favourite = this.getShowFilterValue(
             this.showSelectorFilter && typeof courses[0].isfavourite != 'undefined' &&
-                (!config || (config.displaygroupingstarred && config.displaygroupingstarred.value == '1') ||
-                    (config.displaygroupingfavourites && config.displaygroupingfavourites.value == '1')),
+                (!config || config.displaygroupingstarred?.value == '1' || config.displaygroupingfavourites?.value == '1'),
             this.courses.favourite.length === 0,
         );
 
         this.showFilters.custom = this.getShowFilterValue(
-            this.showSelectorFilter && config?.displaygroupingcustomfield.value == '1' &&
-                !!config?.customfieldsexport && !!config?.customfieldsexport.value,
+            this.showSelectorFilter && config?.displaygroupingcustomfield?.value == '1' && !!config?.customfieldsexport?.value,
             false,
         );
         if (this.showFilters.custom == 'show') {
-            this.customFilter = CoreTextUtils.instance.parseJSON(config.customfieldsexport.value, []);
+            this.customFilter = CoreTextUtils.instance.parseJSON(config?.customfieldsexport?.value, []);
         } else {
             this.customFilter = [];
         }
diff --git a/src/addons/block/sitemainmenu/components/sitemainmenu/addon-block-sitemainmenu.html b/src/addons/block/sitemainmenu/components/sitemainmenu/addon-block-sitemainmenu.html
index eceb7a099..a9e637d33 100644
--- a/src/addons/block/sitemainmenu/components/sitemainmenu/addon-block-sitemainmenu.html
+++ b/src/addons/block/sitemainmenu/components/sitemainmenu/addon-block-sitemainmenu.html
@@ -6,7 +6,10 @@
 <core-loading [hideUntil]="loaded" class="core-loading-center">
     <ng-container *ngIf="mainMenuBlock">
         <ion-item class="ion-text-wrap" *ngIf="mainMenuBlock.summary">
-            <core-format-text [text]="mainMenuBlock.summary" [component]="component" [componentId]="siteHomeId" contextLevel="course" [contextInstanceId]="siteHomeId"></core-format-text>
+            <ion-label>
+                <core-format-text [text]="mainMenuBlock.summary" [component]="component" [componentId]="siteHomeId"
+                    contextLevel="course" [contextInstanceId]="siteHomeId"></core-format-text>
+            </ion-label>
         </ion-item>
 
         <!--<core-course-module *ngFor="let module of mainMenuBlock.modules" [module]="module" [courseId]="siteHomeId" [downloadEnabled]="downloadEnabled" [section]="mainMenuBlock"></core-course-module>-->
diff --git a/src/addons/coursecompletion/services/coursecompletion.ts b/src/addons/coursecompletion/services/coursecompletion.ts
index 6dc4e6811..6ae4d2b92 100644
--- a/src/addons/coursecompletion/services/coursecompletion.ts
+++ b/src/addons/coursecompletion/services/coursecompletion.ts
@@ -103,7 +103,7 @@ export class AddonCourseCompletionProvider {
         userId = userId || site.getUserId();
         this.logger.debug('Get completion for course ' + courseId + ' and user ' + userId);
 
-        const data: CoreCompletionGetCourseCompletionStatusWSParams = {
+        const data: AddonCourseCompletionGetCourseCompletionStatusWSParams = {
             courseid: courseId,
             userid: userId,
         };
@@ -112,7 +112,7 @@ export class AddonCourseCompletionProvider {
         preSets.updateFrequency = preSets.updateFrequency || CoreSite.FREQUENCY_SOMETIMES;
         preSets.cacheErrors = ['notenroled'];
 
-        const result: CoreCompletionGetCourseCompletionStatusWSResponse =
+        const result: AddonCourseCompletionGetCourseCompletionStatusWSResponse =
             await site.read('core_completion_get_course_completion_status', data, preSets);
         if (result.completionstatus) {
             return result.completionstatus;
@@ -253,7 +253,7 @@ export class AddonCourseCompletionProvider {
     async markCourseAsSelfCompleted(courseId: number, siteId?: string): Promise<void> {
         const site = await CoreSites.instance.getSite(siteId);
 
-        const params: CoreCompletionMarkCourseSelfCompletedWSParams = {
+        const params: AddonCourseCompletionMarkCourseSelfCompletedWSParams = {
             courseid: courseId,
         };
 
@@ -292,7 +292,7 @@ export type AddonCourseCompletionCourseCompletionStatus = {
 /**
  * Params of core_completion_get_course_completion_status WS.
  */
-export type CoreCompletionGetCourseCompletionStatusWSParams = {
+export type AddonCourseCompletionGetCourseCompletionStatusWSParams = {
     courseid: number; // Course ID.
     userid: number; // User ID.
 };
@@ -300,7 +300,7 @@ export type CoreCompletionGetCourseCompletionStatusWSParams = {
 /**
  * Data returned by core_completion_get_course_completion_status WS.
  */
-export type CoreCompletionGetCourseCompletionStatusWSResponse = {
+export type AddonCourseCompletionGetCourseCompletionStatusWSResponse = {
     completionstatus: AddonCourseCompletionCourseCompletionStatus; // Course status.
     warnings?: CoreWSExternalWarning[];
 };
@@ -308,6 +308,6 @@ export type CoreCompletionGetCourseCompletionStatusWSResponse = {
 /**
  * Params of core_completion_mark_course_self_completed WS.
  */
-export type CoreCompletionMarkCourseSelfCompletedWSParams = {
+export type AddonCourseCompletionMarkCourseSelfCompletedWSParams = {
     courseid: number; // Course ID.
 };
diff --git a/src/core/components/context-menu/core-context-menu-popover.html b/src/core/components/context-menu/core-context-menu-popover.html
index 36cfcacdd..971d6a9ef 100644
--- a/src/core/components/context-menu/core-context-menu-popover.html
+++ b/src/core/components/context-menu/core-context-menu-popover.html
@@ -1,11 +1,13 @@
 <ion-list [id]="uniqueId" role="menu">
-    <ion-list-header *ngIf="title">{{title}}</ion-list-header>
+    <ion-list-header *ngIf="title">
+        <ion-label>{{title}}</ion-label>
+    </ion-list-header>
     <ion-item class="ion-text-wrap" *ngFor="let item of items" core-link [capture]="item.captureLink" [autoLogin]="item.autoLogin"
     [href]="item.href" (click)="itemClicked($event, item)" [attr.aria-label]="item.ariaAction" [hidden]="item.hidden"
     [detail]="(item.href && !item.iconAction) || null" role="menuitem">
         <ion-icon *ngIf="item.iconDescription" [name]="item.iconDescription" [attr.aria-label]="item.ariaDescription" slot="start">
         </ion-icon>
-        <core-format-text [clean]="true" [text]="item.content" [filter]="false"></core-format-text>
+        <ion-label><core-format-text [clean]="true" [text]="item.content" [filter]="false"></core-format-text></ion-label>
         <ion-icon *ngIf="(item.href || item.action) && item.iconAction && item.iconAction != 'spinner'" [name]="item.iconAction"
             [class.icon-slash]="item.iconSlash" slot="end">
         </ion-icon>
diff --git a/src/core/components/show-password/show-password.scss b/src/core/components/show-password/show-password.scss
index 1f98c810c..a0960f099 100644
--- a/src/core/components/show-password/show-password.scss
+++ b/src/core/components/show-password/show-password.scss
@@ -6,7 +6,7 @@
         padding: 0 calc(var(--padding-start) / 2);
         position: absolute;
         right: 0;
-        bottom: calc(var(--padding-bottom) / 2);
+        bottom: 8px;
         margin-top: 0;
         margin-bottom: 0;
         z-index: 3;
diff --git a/src/core/features/contentlinks/pages/choose-site/choose-site.html b/src/core/features/contentlinks/pages/choose-site/choose-site.html
index c88916023..488670d69 100644
--- a/src/core/features/contentlinks/pages/choose-site/choose-site.html
+++ b/src/core/features/contentlinks/pages/choose-site/choose-site.html
@@ -10,8 +10,10 @@
     <core-loading [hideUntil]="loaded">
         <ion-list>
             <ion-item class="ion-text-wrap">
-                <p class="item-heading">{{ 'core.contentlinks.chooseaccounttoopenlink' | translate }}</p>
-                <p>{{ url }}</p>
+                <ion-label>
+                    <p class="item-heading">{{ 'core.contentlinks.chooseaccounttoopenlink' | translate }}</p>
+                    <p>{{ url }}</p>
+                </ion-label>
             </ion-item>
             <ion-item *ngFor="let site of sites" (click)="siteClicked(site.id)" detail="false">
                 <ion-avatar slot="start">
@@ -19,12 +21,16 @@
                         alt="{{ 'core.pictureof' | translate:{$a: site.fullName} }}" role="presentation"
                         onError="this.src='assets/img/user-avatar.png'">
                 </ion-avatar>
-                <h2>{{site.fullName}}</h2>
-                <p><core-format-text [text]="site.siteName" clean="true" [siteId]="site.id"></core-format-text></p>
-                <p>{{site.siteUrl}}</p>
+                <ion-label>
+                    <h2>{{site.fullName}}</h2>
+                    <p><core-format-text [text]="site.siteName" clean="true" [siteId]="site.id"></core-format-text></p>
+                    <p>{{site.siteUrl}}</p>
+                </ion-label>
             </ion-item>
             <ion-item>
-                <ion-button expand="block" (click)="cancel()">{{ 'core.login.cancel' | translate }}</ion-button>
+                <ion-label>
+                    <ion-button expand="block" (click)="cancel()">{{ 'core.login.cancel' | translate }}</ion-button>
+                </ion-label>
             </ion-item>
         </ion-list>
     </core-loading>
diff --git a/src/core/features/courses/components/course-progress/course-progress.ts b/src/core/features/courses/components/course-progress/course-progress.ts
index 057156451..54f9755fd 100644
--- a/src/core/features/courses/components/course-progress/course-progress.ts
+++ b/src/core/features/courses/components/course-progress/course-progress.ts
@@ -213,7 +213,7 @@ export class CoreCoursesCourseProgressComponent implements OnInit, OnDestroy {
             },
             event: e,
         });
-        popover.present();
+        await popover.present();
 
         const action = await popover.onDidDismiss<string>();
 
diff --git a/src/core/features/courses/components/self-enrol-password/self-enrol-password.html b/src/core/features/courses/components/self-enrol-password/self-enrol-password.html
index 3012c1939..ee4c213f3 100644
--- a/src/core/features/courses/components/self-enrol-password/self-enrol-password.html
+++ b/src/core/features/courses/components/self-enrol-password/self-enrol-password.html
@@ -15,17 +15,19 @@
 <ion-content class="ion-padding">
     <form (ngSubmit)="submitPassword($event)" #enrolPasswordForm>
         <ion-item>
-            <core-show-password [name]="'password'">
-                <ion-input
-                    class="ion-text-wrap core-ioninput-password"
-                    name="password"
-                    type="password"
-                    placeholder="{{ 'core.courses.password' | translate }}"
-                    [(ngModel)]="password"
-                    [core-auto-focus]
-                    [clearOnEdit]="false">
-                </ion-input>
-            </core-show-password>
+            <ion-label>
+                <core-show-password [name]="'password'">
+                    <ion-input
+                        class="ion-text-wrap core-ioninput-password"
+                        name="password"
+                        type="password"
+                        placeholder="{{ 'core.courses.password' | translate }}"
+                        [(ngModel)]="password"
+                        [core-auto-focus]
+                        [clearOnEdit]="false">
+                    </ion-input>
+                </core-show-password>
+            </ion-label>
         </ion-item>
         <div class="ion-padding">
             <ion-button expand="block" [disabled]="!password" type="submit">{{ 'core.courses.enrolme' | translate }}</ion-button>
diff --git a/src/core/features/courses/pages/course-preview/course-preview.html b/src/core/features/courses/pages/course-preview/course-preview.html
index 0baa7286b..4f2a6a09a 100644
--- a/src/core/features/courses/pages/course-preview/course-preview.html
+++ b/src/core/features/courses/pages/course-preview/course-preview.html
@@ -52,7 +52,7 @@
                         <h2>{{contact.fullname}}</h2>
                     </ion-label>
                 </ion-item>
-                <ion-item-divider></ion-item-divider>
+                <ion-item-divider><ion-label></ion-label></ion-item-divider>
             </ng-container>
 
             <ion-item class="ion-text-wrap" *ngIf="course.customfields">
diff --git a/src/core/features/emulator/services/capture-helper.ts b/src/core/features/emulator/services/capture-helper.ts
index d282ae4d6..7b9079727 100644
--- a/src/core/features/emulator/services/capture-helper.ts
+++ b/src/core/features/emulator/services/capture-helper.ts
@@ -107,7 +107,7 @@ export class CoreEmulatorCaptureHelperProvider {
             componentProps: params,
         });
 
-        modal.present();
+        await modal.present();
 
         const result = await modal.onDidDismiss();
 
diff --git a/src/core/features/fileuploader/services/fileuploader-helper.ts b/src/core/features/fileuploader/services/fileuploader-helper.ts
index 36d2924ec..a303ee0bd 100644
--- a/src/core/features/fileuploader/services/fileuploader-helper.ts
+++ b/src/core/features/fileuploader/services/fileuploader-helper.ts
@@ -420,7 +420,7 @@ export class CoreFileUploaderHelperProvider {
             header: title ? title : Translate.instance.instant('core.fileuploader.' + (upload ? 'uploadafile' : 'selectafile')),
             buttons: buttons,
         });
-        this.actionSheet.present();
+        await this.actionSheet.present();
 
         // Call afterRender for each button.
         setTimeout(() => {
diff --git a/src/core/features/fileuploader/services/fileuploader.ts b/src/core/features/fileuploader/services/fileuploader.ts
index 58dfa0e7e..6cbc4bb91 100644
--- a/src/core/features/fileuploader/services/fileuploader.ts
+++ b/src/core/features/fileuploader/services/fileuploader.ts
@@ -130,7 +130,7 @@ export class CoreFileUploaderProvider {
             backdropDismiss: false,
         });
 
-        modal.present();
+        await modal.present();
 
         const result = await modal.onWillDismiss();
 
diff --git a/src/core/features/login/pages/credentials/credentials.html b/src/core/features/login/pages/credentials/credentials.html
index 3ba70db0b..498b4f7ec 100644
--- a/src/core/features/login/pages/credentials/credentials.html
+++ b/src/core/features/login/pages/credentials/credentials.html
@@ -31,17 +31,21 @@
 
         <form ion-list [formGroup]="credForm" (ngSubmit)="login($event)" class="core-login-form" #credentialsForm>
             <ion-item *ngIf="siteChecked && !isBrowserSSO">
-                <ion-input type="text" name="username" placeholder="{{ 'core.login.username' | translate }}"
-                    formControlName="username" autocapitalize="none" autocorrect="off" autocomplete="username" enterkeyhint="next"
-                    required="true"></ion-input>
+                <ion-label>
+                    <ion-input type="text" name="username" placeholder="{{ 'core.login.username' | translate }}"
+                        formControlName="username" autocapitalize="none" autocorrect="off" autocomplete="username" enterkeyhint="next"
+                        required="true"></ion-input>
+                </ion-label>
             </ion-item>
             <ion-item *ngIf="siteChecked && !isBrowserSSO" class="ion-margin-bottom">
-                <core-show-password [name]="'password'">
-                    <ion-input name="password" type="password" placeholder="{{ 'core.login.password' | translate }}"
-                        formControlName="password" [clearOnEdit]="false" autocomplete="current-password" enterkeyhint="go"
-                        required="true">
-                    </ion-input>
-                </core-show-password>
+                <ion-label>
+                    <core-show-password [name]="'password'">
+                        <ion-input name="password" type="password" placeholder="{{ 'core.login.password' | translate }}"
+                            formControlName="password" [clearOnEdit]="false" autocomplete="current-password" enterkeyhint="go"
+                            required="true">
+                        </ion-input>
+                    </core-show-password>
+                </ion-label>
             </ion-item>
             <ion-button expand="block" type="submit" [disabled]="siteChecked && !isBrowserSSO && !credForm.valid"
                 class="ion-margin core-login-login-button">
diff --git a/src/core/features/login/pages/forgotten-password/forgotten-password.html b/src/core/features/login/pages/forgotten-password/forgotten-password.html
index 0806d2b59..fc2042ba6 100644
--- a/src/core/features/login/pages/forgotten-password/forgotten-password.html
+++ b/src/core/features/login/pages/forgotten-password/forgotten-password.html
@@ -10,13 +10,13 @@
 <ion-content>
     <ion-list lines="none">
         <ion-item class="ion-text-wrap">
-            {{ 'core.login.passwordforgotteninstructions2' | translate }}
+            <ion-label>{{ 'core.login.passwordforgotteninstructions2' | translate }}</ion-label>
         </ion-item>
     </ion-list>
     <ion-card>
         <form ion-list [formGroup]="myForm" (ngSubmit)="resetPassword($event)" #resetPasswordForm>
             <ion-item-divider class="ion-text-wrap">
-                {{ 'core.login.searchby' | translate }}
+                <ion-label>{{ 'core.login.searchby' | translate }}</ion-label>
             </ion-item-divider>
             <ion-radio-group formControlName="field">
                 <ion-item>
@@ -29,9 +29,11 @@
                 </ion-item>
             </ion-radio-group>
             <ion-item>
-                <ion-input type="text" name="value" placeholder="{{ 'core.login.usernameoremail' | translate }}"
-                    formControlName="value" autocapitalize="none" autocorrect="off" [core-auto-focus]="autoFocus">
-                </ion-input>
+                <ion-label>
+                    <ion-input type="text" name="value" placeholder="{{ 'core.login.usernameoremail' | translate }}"
+                        formControlName="value" autocapitalize="none" autocorrect="off" [core-auto-focus]="autoFocus">
+                    </ion-input>
+                </ion-label>
             </ion-item>
             <ion-button type="submit" class="ion-margin" expand="block" [disabled]="!myForm.valid">
                 {{ 'core.courses.search' | translate }}
diff --git a/src/core/features/login/pages/reconnect/reconnect.html b/src/core/features/login/pages/reconnect/reconnect.html
index c1d18e233..ad4887437 100644
--- a/src/core/features/login/pages/reconnect/reconnect.html
+++ b/src/core/features/login/pages/reconnect/reconnect.html
@@ -39,12 +39,14 @@
             </ion-label>
         </ion-item>
         <ion-item class="ion-margin-bottom">
-            <core-show-password [name]="'password'">
-                <ion-input class="core-ioninput-password" name="password" type="password"
-                    placeholder="{{ 'core.login.password' | translate }}" formControlName="password" [clearOnEdit]="false"
-                    autocomplete="current-password" enterkeyhint="go" required="true">
-                </ion-input>
-            </core-show-password>
+            <ion-label>
+                <core-show-password [name]="'password'">
+                    <ion-input class="core-ioninput-password" name="password" type="password"
+                        placeholder="{{ 'core.login.password' | translate }}" formControlName="password" [clearOnEdit]="false"
+                        autocomplete="current-password" enterkeyhint="go" required="true">
+                    </ion-input>
+                </core-show-password>
+            </ion-label>
         </ion-item>
         <ion-grid class="ion-padding">
             <ion-row>
diff --git a/src/core/features/login/pages/site/site.html b/src/core/features/login/pages/site/site.html
index 29def2140..51d15e67d 100644
--- a/src/core/features/login/pages/site/site.html
+++ b/src/core/features/login/pages/site/site.html
@@ -74,7 +74,11 @@
         </ng-container>
 
         <ion-item *ngIf="siteSelector == 'url'" lines="none">
-            <ion-button expand="block" [disabled]="!siteForm.valid" text-wrap>{{ 'core.login.connect' | translate }}</ion-button>
+            <ion-label>
+                <ion-button expand="block" [disabled]="!siteForm.valid" text-wrap>
+                    {{ 'core.login.connect' | translate }}
+                </ion-button>
+            </ion-label>
         </ion-item>
     </form>
 
diff --git a/src/core/features/mainmenu/pages/more/more.html b/src/core/features/mainmenu/pages/more/more.html
index aba57a084..20a7eb21b 100644
--- a/src/core/features/mainmenu/pages/more/more.html
+++ b/src/core/features/mainmenu/pages/more/more.html
@@ -20,9 +20,9 @@
                 <p>{{ siteUrl }}</p>
             </ion-label>
         </ion-item>
-        <ion-item-divider></ion-item-divider>
+        <ion-item-divider><ion-label></ion-label></ion-item-divider>
         <ion-item class="ion-text-center" *ngIf="(!handlers || !handlers.length) && !handlersLoaded">
-            <ion-spinner></ion-spinner>
+            <ion-label><ion-spinner></ion-spinner></ion-label>
         </ion-item>
         <ion-item button *ngFor="let handler of handlers" [ngClass]="['core-moremenu-handler', handler.class || '']"
             (click)="openHandler(handler)" title="{{ handler.title | translate }}" detail="true" detail>
@@ -83,7 +83,7 @@
                 <h2>{{ logoutLabel | translate }}</h2>
             </ion-label>
         </ion-item>
-        <ion-item-divider></ion-item-divider>
+        <ion-item-divider><ion-label></ion-label></ion-item-divider>
         <ion-item button router-direction="forward" routerLink="settings"
             title="{{ 'core.settings.appsettings' | translate }}" detail>
             <ion-icon name="fas-cogs" slot="start"></ion-icon>
diff --git a/src/core/features/search/components/search-box/core-search-box.html b/src/core/features/search/components/search-box/core-search-box.html
index e8f4b3aa5..70b6e55da 100644
--- a/src/core/features/search/components/search-box/core-search-box.html
+++ b/src/core/features/search/components/search-box/core-search-box.html
@@ -21,7 +21,7 @@
                 (click)="historyClicked($event, item.searchedtext)" tabindex="1" detail>
                 <ion-icon name="fas-history" slot="start">
                 </ion-icon>
-                {{item.searchedtext}}
+                <ion-label>{{item.searchedtext}}</ion-label>
             </ion-item>
         </ion-list>
     </form>
diff --git a/src/core/features/settings/pages/general/general.html b/src/core/features/settings/pages/general/general.html
index 141186cd4..9f1b8ccab 100644
--- a/src/core/features/settings/pages/general/general.html
+++ b/src/core/features/settings/pages/general/general.html
@@ -24,9 +24,11 @@
         <ion-segment [(ngModel)]="selectedFontSize" (ionChange)="fontSizeChanged()" color="primary" item-content>
             <ion-segment-button *ngFor="let fontSize of fontSizes" [value]="fontSize.size"
                 [ngStyle]="{'font-size.px': fontSize.style}">
-                {{ 'core.settings.fontsizecharacter' | translate }}
-                <!-- Empty element styled with the largest font size, so all buttons share a common baseline. -->
-                <span [ngStyle]="{'font-size.px': fontSizes[fontSizes.length - 1].style}"></span>
+                <ion-label>
+                    {{ 'core.settings.fontsizecharacter' | translate }}
+                    <!-- Empty element styled with the largest font size, so all buttons share a common baseline. -->
+                    <span [ngStyle]="{'font-size.px': fontSizes[fontSizes.length - 1].style}"></span>
+                </ion-label>
             </ion-segment-button>
         </ion-segment>
     </ion-item>
diff --git a/src/core/features/settings/pages/site/site.html b/src/core/features/settings/pages/site/site.html
index b20ac3539..aafde72c6 100644
--- a/src/core/features/settings/pages/site/site.html
+++ b/src/core/features/settings/pages/site/site.html
@@ -24,7 +24,7 @@
                     <p>{{ siteUrl }}</p>
                 </ion-label>
             </ion-item>
-            <ion-item-divider></ion-item-divider>
+            <ion-item-divider><ion-label></ion-label></ion-item-divider>
             <ion-item *ngIf="isIOS"
                 (click)="openHandler('CoreSharedFilesListPage', {manage: true, siteId: siteId, hideSitePicker: true})"
                 [title]="'core.sharedfiles.sharedfiles' | translate"
diff --git a/src/core/features/user/pages/about/about.html b/src/core/features/user/pages/about/about.html
index c2a48db58..5f44d6504 100644
--- a/src/core/features/user/pages/about/about.html
+++ b/src/core/features/user/pages/about/about.html
@@ -13,7 +13,7 @@
     <core-loading [hideUntil]="userLoaded">
         <ion-list *ngIf="user">
             <ion-item-group *ngIf="hasContact">
-                <ion-item-divider>{{ 'core.user.contact' | translate}}</ion-item-divider>
+                <ion-item-divider><ion-label>{{ 'core.user.contact' | translate}}</ion-label></ion-item-divider>
                 <ion-item class="ion-text-wrap" *ngIf="user.email">
                     <ion-label>
                         <h2>{{ 'core.user.email' | translate }}</h2>
@@ -60,7 +60,7 @@
                 </ion-item>
             </ion-item-group>
             <ion-item-group *ngIf="hasDetails">
-                <ion-item-divider>{{ 'core.userdetails' | translate}}</ion-item-divider>
+                <ion-item-divider><ion-label>{{ 'core.userdetails' | translate}}</ion-label></ion-item-divider>
                 <ion-item class="ion-text-wrap" *ngIf="user.url">
                     <ion-label>
                         <h2>{{ 'core.user.webpage' | translate}}</h2>
@@ -80,7 +80,7 @@
                 </core-user-profile-field>
             </ion-item-group>
             <ion-item-group *ngIf="user.description">
-                <ion-item-divider>{{ 'core.user.description' | translate}}</ion-item-divider>
+                <ion-item-divider><ion-label>{{ 'core.user.description' | translate}}</ion-label></ion-item-divider>
                 <ion-item class="ion-text-wrap">
                     <ion-label>
                         <p><core-format-text [text]="user.description" contextLevel="user" [contextInstanceId]="user.id">
diff --git a/src/core/features/user/pages/profile/profile.html b/src/core/features/user/pages/profile/profile.html
index 0b1befa4f..256ce3568 100644
--- a/src/core/features/user/pages/profile/profile.html
+++ b/src/core/features/user/pages/profile/profile.html
@@ -34,7 +34,7 @@
                 <ion-row class="ion-no-padding justify-content-between"
                     *ngIf="communicationHandlers && communicationHandlers.length">
                     <ion-col *ngFor="let handler of communicationHandlers" class="ion-align-self-center ion-text-center">
-                        <a (click)="handlerClicked($event, handler)" [ngClass]="['core-user-profile-handler', handler.class]"
+                        <a (click)="handlerClicked($event, handler)" [ngClass]="['core-user-profile-handler', handler.class || '']"
                             title="{{handler.title | translate}}">
                             <ion-icon [name]="handler.icon" slot="start"></ion-icon>
                             <p>{{handler.title | translate}}</p>
@@ -56,11 +56,11 @@
                 </ion-label>
             </ion-item>
             <ion-item class="ion-text-center core-loading-handlers" *ngIf="isLoadingHandlers">
-                <ion-spinner></ion-spinner>
+                <ion-label><ion-spinner></ion-spinner></ion-label>
             </ion-item>
 
             <ion-item button *ngFor="let handler of newPageHandlers" class="ion-text-wrap" (click)="handlerClicked($event, handler)"
-                [ngClass]="['core-user-profile-handler', handler.class]" [hidden]="handler.hidden"
+                [ngClass]="['core-user-profile-handler', handler.class || '']" [hidden]="handler.hidden"
                 title="{{ handler.title | translate }}" detail>
                 <ion-icon *ngIf="handler.icon" [name]="handler.icon" slot="start"></ion-icon>
                 <ion-label>
@@ -69,15 +69,17 @@
             </ion-item>
 
             <ion-item *ngIf="actionHandlers && actionHandlers.length">
-                <ion-button *ngFor="let handler of actionHandlers" expand="block" fill="outline"
-                    [ngClass]="['core-user-profile-handler', handler.class]" (click)="handlerClicked($event, handler)"
-                    [hidden]="handler.hidden" title="{{ handler.title | translate }}" [disabled]="handler.spinner">
-                    <ion-icon *ngIf="handler.icon" [name]="handler.icon" slot="start"></ion-icon>
-                    <ion-label>
-                        <span>{{ handler.title | translate }}</span>
-                    </ion-label>
-                    <ion-spinner *ngIf="handler.spinner"></ion-spinner>
-                </ion-button>
+                <ion-label>
+                    <ion-button *ngFor="let handler of actionHandlers" expand="block" fill="outline"
+                        [ngClass]="['core-user-profile-handler', handler.class || '']" (click)="handlerClicked($event, handler)"
+                        [hidden]="handler.hidden" title="{{ handler.title | translate }}" [disabled]="handler.spinner">
+                        <ion-icon *ngIf="handler.icon" [name]="handler.icon" slot="start"></ion-icon>
+                        <ion-label>
+                            <span>{{ handler.title | translate }}</span>
+                        </ion-label>
+                        <ion-spinner *ngIf="handler.spinner"></ion-spinner>
+                    </ion-button>
+                </ion-label>
             </ion-item>
         </ion-list>
 
diff --git a/src/core/services/utils/dom.ts b/src/core/services/utils/dom.ts
index cff84e7d1..9e9db3227 100644
--- a/src/core/services/utils/dom.ts
+++ b/src/core/services/utils/dom.ts
@@ -1574,7 +1574,7 @@ export class CoreDomUtilsProvider {
             cssClass: cssClass,
         });
 
-        loader.present();
+        await loader.present();
 
         return loader;
     }