From 66fe7934258eb1f42ca40645ee36a0f286ed2ef0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 12 Dec 2023 13:25:33 +0100
Subject: [PATCH 01/11] MOBILE-3947 ionic: Update ionic to 7.6.1

---
 package-lock.json | 24 ++++++++++++------------
 package.json      |  2 +-
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 59d7c43d3e9..841cc1fb7ea 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -40,7 +40,7 @@
         "@awesome-cordova-plugins/sqlite": "^6.3.0",
         "@awesome-cordova-plugins/status-bar": "^6.3.0",
         "@awesome-cordova-plugins/web-intent": "^6.3.0",
-        "@ionic/angular": "^7.0.0",
+        "@ionic/angular": "^7.6.1",
         "@ionic/cordova-builders": "^10.0.0",
         "@moodlehq/cordova-plugin-advanced-http": "3.3.1-moodle.1",
         "@moodlehq/cordova-plugin-camera": "6.0.0-moodle.2",
@@ -3449,11 +3449,11 @@
       "dev": true
     },
     "node_modules/@ionic/angular": {
-      "version": "7.5.6",
-      "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-7.5.6.tgz",
-      "integrity": "sha512-RJDQgGiVRps/04HBfx23E8tiGCvzE2d5NpWB1Mi1CDmc0ENTSc6odb2XI45YhFxmGvQsWZ8k+H1N/8emAHPraw==",
+      "version": "7.6.1",
+      "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-7.6.1.tgz",
+      "integrity": "sha512-Eh//g/bAL9se4PD6C19NqymgQbqKp4W+Ffbjo8Qnqwk02jGMs/jcMP0WVEcLNiEws2m67kIiWItrUhJjb8pplA==",
       "dependencies": {
-        "@ionic/core": "7.5.6",
+        "@ionic/core": "7.6.1",
         "ionicons": "^7.0.0",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.3.0"
@@ -3967,11 +3967,11 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "7.5.6",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.5.6.tgz",
-      "integrity": "sha512-bYQp2twwm61uA0Q31ToVIpQWsiQ9so1dRoWZPD+l+y4fVuFmOCLYeS6XTLTm73jVBq40JfEcsac7eYC4DxoemQ==",
+      "version": "7.6.1",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.1.tgz",
+      "integrity": "sha512-o4PSRxokfRB5H3E5DAM7xivG8XFXaXD3+U/tha0QKemiMSntqgPqy0FYX0pNEwIrV3llRzFbAGNqyvB1+BG97Q==",
       "dependencies": {
-        "@stencil/core": "^4.7.2",
+        "@stencil/core": "^4.8.2",
         "ionicons": "^7.2.1",
         "tslib": "^2.1.0"
       }
@@ -5990,9 +5990,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "4.7.2",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.7.2.tgz",
-      "integrity": "sha512-sPPDYrXiTbfeUF5CCyfqysXK/yfTHC4xYR1+nHzGkS2vhRSBOLp0oPuB+xkJLKA+K2ZqDJUxpOnDxy1CLWwBXA==",
+      "version": "4.8.2",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.2.tgz",
+      "integrity": "sha512-KdZEAtz9VnqMtXOkf51+8mphyRt0fN/LYgtj5M8gnveGspG8KzoyTDzlWt0wsstWIsJJ21RA1yd3AgMMZiu3MA==",
       "bin": {
         "stencil": "bin/stencil"
       },
diff --git a/package.json b/package.json
index 9e0dfa518b9..7e739e54994 100644
--- a/package.json
+++ b/package.json
@@ -75,7 +75,7 @@
     "@awesome-cordova-plugins/sqlite": "^6.3.0",
     "@awesome-cordova-plugins/status-bar": "^6.3.0",
     "@awesome-cordova-plugins/web-intent": "^6.3.0",
-    "@ionic/angular": "^7.0.0",
+    "@ionic/angular": "^7.6.1",
     "@ionic/cordova-builders": "^10.0.0",
     "@moodlehq/cordova-plugin-advanced-http": "3.3.1-moodle.1",
     "@moodlehq/cordova-plugin-camera": "6.0.0-moodle.2",

From 50596da0f2a0de4463fc341720849ab0cc90408b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 30 Nov 2023 15:08:10 +0100
Subject: [PATCH 02/11] MOBILE-3947 chore: Change Combobox select mandatory
 child

---
 src/core/components/combobox/combobox.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/core/components/combobox/combobox.ts b/src/core/components/combobox/combobox.ts
index 05d0d7d2503..97414ae212a 100644
--- a/src/core/components/combobox/combobox.ts
+++ b/src/core/components/combobox/combobox.ts
@@ -51,7 +51,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 })
 export class CoreComboboxComponent implements ControlValueAccessor {
 
-    @ViewChild(IonSelect) select!: IonSelect;
+    @ViewChild(IonSelect) select?: IonSelect;
 
     @Input() interface: 'popover' | 'modal' = 'popover';
     @Input() label = Translate.instant('core.show'); // Aria label.
@@ -118,7 +118,7 @@ export class CoreComboboxComponent implements ControlValueAccessor {
     async openSelect(event?: UIEvent): Promise<void> {
         this.touch();
 
-        if (this.interface == 'modal') {
+        if (this.interface === 'modal') {
             if (this.expanded || !this.modalOptions) {
                 return;
             }

From c60519f2a816287ee7b46cdf5b660537e4cbdbd4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 28 Nov 2023 15:33:50 +0100
Subject: [PATCH 03/11] MOBILE-3947 course: Open course index in a sheet modal

---
 .../features/course/components/course-format/course-format.ts   | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/core/features/course/components/course-format/course-format.ts b/src/core/features/course/components/course-format/course-format.ts
index 784a0d09ad5..06c8e6c7d32 100644
--- a/src/core/features/course/components/course-format/course-format.ts
+++ b/src/core/features/course/components/course-format/course-format.ts
@@ -426,6 +426,8 @@ export class CoreCourseFormatComponent implements OnInit, OnChanges, OnDestroy {
 
         const data = await CoreDomUtils.openModal<CoreCourseIndexSectionWithModule>({
             component: CoreCourseCourseIndexComponent,
+            initialBreakpoint: 1,
+            breakpoints: [0, 1],
             componentProps: {
                 course: this.course,
                 sections: this.sections,

From 1e16f68070ad6a019fb27e2cbbfb63a401c75b33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 1 Dec 2023 15:52:47 +0100
Subject: [PATCH 04/11] MOBILE-3947 app: Add development html class and upgrade
 class to ionic7

---
 src/app/app.component.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 0c3b63393ea..f6176bf3830 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -59,7 +59,8 @@ export class AppComponent implements OnInit, AfterViewInit {
     ngOnInit(): void {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const win = <any> window;
-        CoreDomUtils.toggleModeClass('ionic5', true, { includeLegacy: true });
+        CoreDomUtils.toggleModeClass('ionic7', true, { includeLegacy: true });
+        CoreDomUtils.toggleModeClass('development', CoreConstants.BUILD.isDevelopment);
         this.addVersionClass(MOODLEAPP_VERSION_PREFIX, CoreConstants.CONFIG.versionname.replace('-dev', ''));
 
         CoreEvents.on(CoreEvents.LOGOUT, async () => {

From 6c2888526001790c890b16b01aa2572ffe13fba5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 5 Dec 2023 12:02:40 +0100
Subject: [PATCH 05/11] MOBILE-3947 assign: Do not require submission statement
 if empty

---
 src/addons/mod/assign/components/submission/submission.ts | 6 ++++++
 src/addons/mod/assign/pages/edit/edit.ts                  | 6 ++++++
 2 files changed, 12 insertions(+)

diff --git a/src/addons/mod/assign/components/submission/submission.ts b/src/addons/mod/assign/components/submission/submission.ts
index 4bf833519a3..9cd46da9f34 100644
--- a/src/addons/mod/assign/components/submission/submission.ts
+++ b/src/addons/mod/assign/components/submission/submission.ts
@@ -1124,9 +1124,15 @@ export class AddonModAssignSubmissionComponent implements OnInit, OnDestroy, Can
             return [];
         }
 
+        // Receved submission statement should not be undefined. It would mean that the WS is not returning the value.
         const submissionStatementMissing = !!this.assign.requiresubmissionstatement &&
             this.assign.submissionstatement === undefined;
 
+        // If received submission statement is empty, then it's not required.
+        if(!this.assign.submissionstatement && this.assign.submissionstatement !== undefined) {
+            this.assign.requiresubmissionstatement = 0;
+        }
+
         this.canSubmit = !this.isSubmittedForGrading && !this.submittedOffline && (lastAttempt.cansubmit ||
             (this.hasOffline && AddonModAssign.canSubmitOffline(this.assign, submissionStatus)));
 
diff --git a/src/addons/mod/assign/pages/edit/edit.ts b/src/addons/mod/assign/pages/edit/edit.ts
index b7677e45171..1618d391827 100644
--- a/src/addons/mod/assign/pages/edit/edit.ts
+++ b/src/addons/mod/assign/pages/edit/edit.ts
@@ -205,6 +205,12 @@ export class AddonModAssignEditPage implements OnInit, OnDestroy, CanLeave {
             this.introAttachments = submissionStatus.assignmentdata?.attachments?.intro ?? this.assign.introattachments;
 
             this.allowOffline = true; // If offline isn't allowed we shouldn't have reached this point.
+
+            // If received submission statement is empty, then it's not required.
+            if(!this.assign.submissionstatement && this.assign.submissionstatement !== undefined) {
+                this.assign.requiresubmissionstatement = 0;
+            }
+
             // Only show submission statement if we are editing our own submission.
             if (this.assign.requiresubmissionstatement && !this.assign.submissiondrafts && this.userId == currentUserId) {
                 this.submissionStatement = this.assign.submissionstatement;

From 243386232e3afc7e3e35e402f38110140cca9988 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 12 Dec 2023 12:51:59 +0100
Subject: [PATCH 06/11] MOBILE-3947 chore: Remove Ionic warnings about legacy
 form controls

---
 src/addons/blog/pages/entries/entries.html    |   5 +-
 .../calendar/components/filter/filter.html    |  10 +-
 .../calendar/pages/edit-event/edit-event.html |  74 +++++------
 .../calendar/pages/settings/settings.html     |   5 +-
 .../airnotifier/pages/devices/devices.html    |   5 +-
 .../group-conversations.html                  |   3 +-
 .../messages/pages/settings/settings.html     |  37 +++---
 .../addon-mod-assign-submission.html          |  37 +++---
 src/addons/mod/assign/pages/edit/edit.html    |   5 +-
 .../mod/chat/pages/sessions/sessions.html     |   5 +-
 .../index/addon-mod-choice-index.html         |  12 +-
 .../mod/data/components/search/search.html    |  28 +++--
 src/addons/mod/data/data-forms.scss           |   6 +
 .../addon-mod-data-field-checkbox.html        |  12 +-
 .../component/addon-mod-data-field-date.html  |   7 +-
 .../addon-mod-data-field-latlong.html         |   8 +-
 .../component/addon-mod-data-field-menu.html  |   5 +-
 .../addon-mod-data-field-multimenu.html       |  12 +-
 .../addon-mod-data-field-picture.html         |   4 +-
 .../addon-mod-data-field-radiobutton.html     |   5 +-
 src/addons/mod/feedback/pages/form/form.html  |  55 ++++----
 .../mod/feedback/services/feedback-helper.ts  |  16 +--
 .../mod/forum/components/post/post.html       |  11 +-
 .../pages/new-discussion/new-discussion.html  |  30 +++--
 src/addons/mod/forum/pages/search/search.html |   2 +-
 .../addon-mod-glossary-mode-picker.html       |   5 +-
 src/addons/mod/glossary/pages/edit/edit.html  |  35 +++---
 .../mod/lesson/pages/player/player.html       |  24 ++--
 .../lesson/pages/user-retake/user-retake.html |   7 +-
 .../addon-mod-quiz-access-password.html       |   2 +-
 .../index/addon-mod-scorm-index.html          |   7 +-
 .../index/addon-mod-survey-index.html         |  10 +-
 src/addons/mod/wiki/pages/edit/edit.html      |   4 +-
 ...shop-assessment-strategy-accumulative.html |  19 ++-
 ...workshop-assessment-strategy-comments.html |  10 +-
 ...orkshop-assessment-strategy-numerrors.html |  22 ++--
 ...d-workshop-assessment-strategy-rubric.html |   5 +-
 ...ddon-mod-workshop-assessment-strategy.html |  13 +-
 .../workshop/pages/assessment/assessment.html |  18 +--
 .../edit-submission/edit-submission.html      |  15 ++-
 .../workshop/pages/submission/submission.html |  11 +-
 .../notes/components/add/add-modal.html       |   9 +-
 .../pages/settings/settings.html              |  16 +--
 .../addon-qbehaviour-deferredcbm.html         |   5 +-
 .../component/addon-qtype-calculated.html     |  15 ++-
 .../calculated/component/calculated.scss      |   3 +
 .../qtype/calculated/component/calculated.ts  |   1 +
 .../essay/component/addon-qtype-essay.html    |  13 +-
 .../match/component/addon-qtype-match.html    |  18 +--
 .../component/addon-qtype-multichoice.html    |  48 +++----
 .../component/addon-qtype-shortanswer.html    |   6 +-
 .../addon-user-profile-field-checkbox.html    |   9 +-
 .../addon-user-profile-field-menu.html        |  10 +-
 .../addon-user-profile-field-social.html      |   9 +-
 .../addon-user-profile-field-text.html        |  10 +-
 .../addon-user-profile-field-textarea.html    |   2 +-
 .../group-selector/group-selector.html        |   9 +-
 .../input-errors/core-input-errors.html       |  28 ++---
 .../components/input-errors/input-errors.scss |  19 +--
 .../components/input-errors/input-errors.ts   |  36 ++++--
 .../local-file/core-local-file.html           |   3 +-
 .../components/mark-required/mark-required.ts |   7 +-
 .../password-modal/password-modal.html        |   6 +-
 .../components/show-password/show-password.ts |   2 +-
 .../site-picker/core-site-picker.html         |   5 +-
 .../core-editor-rich-text-editor.html         |   3 +-
 .../login/pages/credentials/credentials.html  |  10 +-
 .../pages/email-signup/email-signup.html      |  79 ++++++------
 .../forgotten-password.html                   |  12 +-
 .../login/pages/reconnect/reconnect.html      |   6 +-
 src/core/features/login/pages/site/site.html  |  18 ++-
 .../components/rate/core-rating-rate.html     |   5 +-
 .../global-search-filters.html                |  25 ++--
 .../search-box/core-search-box.html           |   6 +-
 src/core/features/settings/pages/dev/dev.html |  28 ++---
 .../settings/pages/general/general.html       |  22 ++--
 .../synchronization/synchronization.html      |   9 +-
 src/theme/components/format-text.scss         |   4 +
 src/theme/theme.base.scss                     | 117 +++++++++---------
 79 files changed, 612 insertions(+), 627 deletions(-)
 create mode 100644 src/addons/qtype/calculated/component/calculated.scss

diff --git a/src/addons/blog/pages/entries/entries.html b/src/addons/blog/pages/entries/entries.html
index 9fac4dfb2d0..ee8584a0834 100644
--- a/src/addons/blog/pages/entries/entries.html
+++ b/src/addons/blog/pages/entries/entries.html
@@ -17,8 +17,9 @@ <h1>{{ title | translate }}</h1>
     </ion-refresher>
     <core-loading [hideUntil]="loaded">
         <ion-item *ngIf="showMyEntriesToggle">
-            <ion-label>{{ 'addon.blog.showonlyyourentries' | translate }}</ion-label>
-            <ion-toggle [(ngModel)]="onlyMyEntries" (ionChange)="onlyMyEntriesToggleChanged(onlyMyEntries)" slot="end" />
+            <ion-toggle [(ngModel)]="onlyMyEntries" (ionChange)="onlyMyEntriesToggleChanged(onlyMyEntries)">
+                {{ 'addon.blog.showonlyyourentries' | translate }}
+            </ion-toggle>
         </ion-item>
         <core-empty-box *ngIf="entries && entries.length === 0" icon="far-newspaper" [message]="'addon.blog.noentriesyet' | translate" />
         <ng-container *ngFor="let entry of entries">
diff --git a/src/addons/calendar/components/filter/filter.html b/src/addons/calendar/components/filter/filter.html
index 365e7e72f79..5d746163a0a 100644
--- a/src/addons/calendar/components/filter/filter.html
+++ b/src/addons/calendar/components/filter/filter.html
@@ -11,17 +11,17 @@
     <ion-list>
         <ion-item *ngFor="let type of types" class="addon-calendar-event" [ngClass]="['addon-calendar-eventtype-'+type]">
             <ion-icon [name]="typeIcons[type]" slot="start" aria-hidden="true" />
-            <ion-label>{{ 'addon.calendar.' + type + 'events' | translate}}</ion-label>
-            <ion-toggle [(ngModel)]="filter[type]" (ionChange)="onChange()" slot="end" />
+            <ion-toggle [(ngModel)]="filter[type]" (ionChange)="onChange()">
+                {{ 'addon.calendar.' + type + 'events' | translate}}
+            </ion-toggle>
         </ion-item>
         <core-spacer *ngIf="filter.course || filter.category || filter.group" />
         <ng-container *ngIf="filter.course || filter.category || filter.group">
             <ion-radio-group [(ngModel)]="courseId" (ionChange)="onChange()">
                 <ion-item class="ion-text-wrap" *ngFor="let course of sortedCourses">
-                    <ion-label>
+                    <ion-radio [value]="course.id">
                         <core-format-text [text]="course.shortname" />
-                    </ion-label>
-                    <ion-radio slot="end" [value]="course.id" />
+                    </ion-radio>
                 </ion-item>
             </ion-radio-group>
         </ng-container>
diff --git a/src/addons/calendar/pages/edit-event/edit-event.html b/src/addons/calendar/pages/edit-event/edit-event.html
index 26592324da2..bca2701b6a0 100644
--- a/src/addons/calendar/pages/edit-event/edit-event.html
+++ b/src/addons/calendar/pages/edit-event/edit-event.html
@@ -17,10 +17,10 @@ <h1>{{ title | translate }}</h1>
         <form [formGroup]="form" *ngIf="!error" #editEventForm>
             <!-- Event name. -->
             <ion-item class="ion-text-wrap">
-                <ion-label position="stacked">
-                    <p class="item-heading" [core-mark-required]="true">{{ 'addon.calendar.eventname' | translate }}</p>
-                </ion-label>
-                <ion-input type="text" name="name" [placeholder]="'addon.calendar.eventname' | translate" formControlName="name" />
+                <ion-input labelPlacement="stacked" type="text" name="name" [placeholder]="'addon.calendar.eventname' | translate"
+                    formControlName="name">
+                    <div slot="label" [core-mark-required]="true">{{ 'addon.calendar.eventname' | translate }}</div>
+                </ion-input>
                 <core-input-errors [control]="form.controls.name" [errorMessages]="errors" />
             </ion-item>
 
@@ -42,12 +42,13 @@ <h1>{{ title | translate }}</h1>
 
             <!-- Type. -->
             <ion-item class="ion-text-wrap addon-calendar-eventtype-container">
-                <ion-label>
+                <ion-label *ngIf="eventTypes.length === 1">
                     <p class="item-heading" [core-mark-required]="true">{{ 'addon.calendar.eventkind' | translate }}</p>
                 </ion-label>
                 <p *ngIf="eventTypes.length === 1" slot="end">{{eventTypes[0].name | translate }}</p>
                 <ion-select *ngIf="eventTypes.length > 1" formControlName="eventtype" interface="action-sheet"
                     [cancelText]="'core.cancel' | translate" [interfaceOptions]="{header: 'addon.calendar.eventkind' | translate}">
+                    <div [core-mark-required]="true" slot="label">{{ 'addon.calendar.eventkind' | translate }}</div>
                     <ion-select-option *ngFor="let type of eventTypes" [value]="type.value">
                         {{ type.name | translate }}
                     </ion-select-option>
@@ -56,11 +57,9 @@ <h1>{{ title | translate }}</h1>
 
             <!-- Category. -->
             <ion-item class="ion-text-wrap" *ngIf="typeControl.value === 'category'">
-                <ion-label>
-                    <p class="item-heading" [core-mark-required]="true">{{ 'core.category' | translate }}</p>
-                </ion-label>
                 <ion-select formControlName="categoryid" interface="action-sheet" [placeholder]="'core.noselection' | translate"
                     [cancelText]="'core.cancel' | translate" [interfaceOptions]="{header: 'core.category' | translate}">
+                    <p [core-mark-required]="true" slot="label">{{ 'core.category' | translate }}</p>
                     <ion-select-option *ngFor="let category of categories" [value]="category.id">
                         {{ category.name }}
                     </ion-select-option>
@@ -69,11 +68,9 @@ <h1>{{ title | translate }}</h1>
 
             <!-- Course. -->
             <ion-item class="ion-text-wrap" *ngIf="typeControl.value === 'course'">
-                <ion-label>
-                    <p class="item-heading" [core-mark-required]="true">{{ 'core.course' | translate }}</p>
-                </ion-label>
                 <ion-select formControlName="courseid" interface="action-sheet" [placeholder]="'core.noselection' | translate"
                     [cancelText]="'core.cancel' | translate" [interfaceOptions]="{header: 'core.course' | translate}">
+                    <p [core-mark-required]="true" slot="label">{{ 'core.course' | translate }}</p>
                     <ion-select-option *ngFor="let course of courses" [value]="course.id">{{ course.fullname }}</ion-select-option>
                 </ion-select>
             </ion-item>
@@ -82,12 +79,10 @@ <h1>{{ title | translate }}</h1>
             <ng-container *ngIf="typeControl.value === 'group'">
                 <!-- Select the course. -->
                 <ion-item class="ion-text-wrap">
-                    <ion-label>
-                        <p class="item-heading" [core-mark-required]="true">{{ 'core.course' | translate }}</p>
-                    </ion-label>
                     <ion-select formControlName="groupcourseid" interface="action-sheet" [placeholder]="'core.noselection' | translate"
                         [cancelText]="'core.cancel' | translate" (ionChange)="groupCourseSelected()"
                         [interfaceOptions]="{header: 'core.course' | translate}">
+                        <p [core-mark-required]="true" slot="label">{{ 'core.course' | translate }}</p>
                         <ion-select-option *ngFor="let course of courses" [value]="course.id">
                             {{ course.fullname }}
                         </ion-select-option>
@@ -101,11 +96,9 @@ <h1>{{ title | translate }}</h1>
                 </ion-item>
                 <!-- Select the group. -->
                 <ion-item class="ion-text-wrap core-edit-set-group" *ngIf="!loadingGroups && groups.length > 0">
-                    <ion-label>
-                        <p class="item-heading" [core-mark-required]="true">{{ 'core.group' | translate }}</p>
-                    </ion-label>
                     <ion-select formControlName="groupid" interface="action-sheet" [placeholder]="'core.noselection' | translate"
                         [cancelText]="'core.cancel' | translate" [interfaceOptions]="{header: 'core.group' | translate}">
+                        <p [core-mark-required]="true" slot="label">{{ 'core.group' | translate }}</p>
                         <ion-select-option *ngFor="let group of groups" [value]="group.id">{{ group.name }}</ion-select-option>
                     </ion-select>
                 </ion-item>
@@ -147,16 +140,14 @@ <h1>{{ title | translate }}</h1>
                         </ion-label>
                     </ion-item-divider>
                     <ion-item>
-                        <ion-label>
+                        <ion-radio [value]="0">
                             <p>{{ 'addon.calendar.durationnone' | translate }}</p>
-                        </ion-label>
-                        <ion-radio slot="end" [value]="0" />
+                        </ion-radio>
                     </ion-item>
                     <ion-item>
-                        <ion-label>
+                        <ion-radio [value]="1">
                             <p>{{ 'addon.calendar.durationuntil' | translate }}</p>
-                        </ion-label>
-                        <ion-radio slot="end" [value]="1" />
+                        </ion-radio>
                     </ion-item>
                     <ion-item *ngIf="form.controls.duration.value === 1">
                         <ion-label position="stacked" />
@@ -171,14 +162,12 @@ <h1>{{ title | translate }}</h1>
                         </ion-modal>
                     </ion-item>
                     <ion-item>
-                        <ion-label>
-                            <p>{{ 'addon.calendar.durationminutes' | translate }}</p>
-                        </ion-label>
-                        <ion-radio slot="end" [value]="2" />
+                        <ion-radio [value]="2">
+                            <p id="durationinminutes">{{ 'addon.calendar.durationminutes' | translate }}</p>
+                        </ion-radio>
                     </ion-item>
                     <ion-item *ngIf="form.controls.duration.value === 2">
-                        <ion-label class="sr-only">{{ 'addon.calendar.durationminutes' | translate }}</ion-label>
-                        <ion-input type="number" name="timedurationminutes" slot="end"
+                        <ion-input type="number" name="timedurationminutes" labelPlacement="start" aria-labelledby="durationinminutes"
                             [placeholder]="'addon.calendar.durationminutes' | translate" formControlName="timedurationminutes" />
                     </ion-item>
                 </ion-radio-group>
@@ -187,16 +176,13 @@ <h1>{{ title | translate }}</h1>
             <!-- Repeat (for new events). -->
             <ng-container *ngIf="!eventId || eventId < 0">
                 <ion-item class="ion-text-wrap divider">
-                    <ion-label>
+                    <ion-checkbox labelPlacement="start" formControlName="repeat">
                         <p class="item-heading">{{ 'addon.calendar.repeatevent' | translate }}</p>
-                    </ion-label>
-                    <ion-checkbox slot="end" formControlName="repeat" />
+                    </ion-checkbox>
                 </ion-item>
                 <ion-item class="ion-text-wrap">
-                    <ion-label position="stacked">
-                        <p class="item-heading">{{ 'addon.calendar.repeatweeksl' | translate }}</p>
-                    </ion-label>
-                    <ion-input type="number" name="repeats" formControlName="repeats" [disabled]="!form.controls.repeat.value" />
+                    <ion-input labelPlacement="stacked" [label]="'addon.calendar.repeatweeksl' | translate" type="number" name="repeats"
+                        formControlName="repeats" [disabled]="!form.controls.repeat.value" />
                 </ion-item>
             </ng-container>
 
@@ -209,16 +195,14 @@ <h1>{{ title | translate }}</h1>
                         </ion-label>
                     </ion-item-divider>
                     <ion-item>
-                        <ion-label>
+                        <ion-radio value="1">
                             <p>{{ 'addon.calendar.repeateditall' | translate:{$a: otherEventsCount} }}</p>
-                        </ion-label>
-                        <ion-radio slot="end" value="1" />
+                        </ion-radio>
                     </ion-item>
                     <ion-item>
-                        <ion-label>
+                        <ion-radio value="0">
                             <p>{{ 'addon.calendar.repeateditthis' | translate }}</p>
-                        </ion-label>
-                        <ion-radio slot="end" value="0" />
+                        </ion-radio>
                     </ion-item>
                 </ion-radio-group>
             </div>
@@ -235,10 +219,8 @@ <h1>{{ title | translate }}</h1>
 
             <!-- Location. -->
             <ion-item class="ion-text-wrap">
-                <ion-label position="stacked">
-                    <p class="item-heading">{{ 'core.location' | translate }}</p>
-                </ion-label>
-                <ion-input type="text" name="location" [placeholder]="'core.location' | translate" formControlName="location" />
+                <ion-input type="text" name="location" [placeholder]="'core.location' | translate" [label]="'core.location' | translate"
+                    labelPlacement="stacked" formControlName="location" />
             </ion-item>
         </form>
         <div collapsible-footer appearOnBottom *ngIf="loaded && !error" slot="fixed">
diff --git a/src/addons/calendar/pages/settings/settings.html b/src/addons/calendar/pages/settings/settings.html
index 7ca79cf2851..7389d7f7437 100644
--- a/src/addons/calendar/pages/settings/settings.html
+++ b/src/addons/calendar/pages/settings/settings.html
@@ -11,8 +11,9 @@ <h1>{{ 'core.settings.settings' | translate }}</h1>
 <ion-content>
     <ion-list>
         <ion-item *ngIf="defaultTimeLabel">
-            <ion-label>{{ 'addon.calendar.defaultnotificationtime' | translate }}</ion-label>
-            <ion-select [(ngModel)]="defaultTimeLabel" (click)="changeDefaultTime($event)">
+
+            <ion-select [(ngModel)]="defaultTimeLabel" (click)="changeDefaultTime($event)"
+                [label]="'addon.calendar.defaultnotificationtime' | translate">
                 <ion-select-option [value]="defaultTimeLabel">{{ defaultTimeLabel }}</ion-select-option>
             </ion-select>
         </ion-item>
diff --git a/src/addons/messageoutput/airnotifier/pages/devices/devices.html b/src/addons/messageoutput/airnotifier/pages/devices/devices.html
index ffecacf6987..f3729734448 100644
--- a/src/addons/messageoutput/airnotifier/pages/devices/devices.html
+++ b/src/addons/messageoutput/airnotifier/pages/devices/devices.html
@@ -23,7 +23,7 @@ <h2>{{ platform.platform }}</h2>
                 <ion-list>
                     <ion-item class="ion-text-wrap" *ngFor="let device of platform.devices" [class.item-current]="device.current">
                         <ion-label>
-                            <p class="item-heading">
+                            <p class="item-heading" id="device-{{device.id}}">
                                 <strong>{{ device.name }} {{ device.model }}</strong> ({{platform.platform}} {{ device.version }})
                             </p>
                             <p *ngIf="device.current"><strong>{{ 'core.currentdevice' | translate }}</strong></p>
@@ -33,7 +33,8 @@ <h2>{{ platform.platform }}</h2>
                             </p>
                         </ion-label>
                         <core-button-with-spinner [loading]="device.updating" slot="end">
-                            <ion-toggle [(ngModel)]="device.enable" (ngModelChange)="enableDevice(device, device.enable)" />
+                            <ion-toggle [(ngModel)]="device.enable" (ngModelChange)="enableDevice(device, device.enable)"
+                                [attr.aria-labelledby]="'device-'+ device.id " />
                         </core-button-with-spinner>
                     </ion-item>
                 </ion-list>
diff --git a/src/addons/messages/pages/group-conversations/group-conversations.html b/src/addons/messages/pages/group-conversations/group-conversations.html
index de0dd6db5ad..313ebb0b5e8 100644
--- a/src/addons/messages/pages/group-conversations/group-conversations.html
+++ b/src/addons/messages/pages/group-conversations/group-conversations.html
@@ -161,7 +161,8 @@ <h2>{{ 'addon.messages.individualconversations' | translate }} ({{ individual.co
             <div class="flex-row ion-justify-content-between">
                 <p class="item-heading">
                     <core-format-text [text]="conversation.name" contextLevel="system" [contextInstanceId]="0" />
-                    <ion-icon name="fas-user-slash" *ngIf="conversation.isblocked" [title]="'addon.messages.contactblocked' | translate" />
+                    <ion-icon name="fas-user-slash" *ngIf="conversation.isblocked"
+                        [attr.aria-label]="'addon.messages.contactblocked' | translate" />
                     <ion-icon *ngIf="conversation.ismuted" name="fas-volume-xmark"
                         [title]="'addon.messages.mutedconversation' | translate" />
                 </p>
diff --git a/src/addons/messages/pages/settings/settings.html b/src/addons/messages/pages/settings/settings.html
index c5c8a9c4060..c638b6e6bad 100644
--- a/src/addons/messages/pages/settings/settings.html
+++ b/src/addons/messages/pages/settings/settings.html
@@ -22,21 +22,19 @@ <h2>{{ 'core.settings.general' | translate }}</h2>
                     </ion-label>
                 </ion-item-divider>
                 <ion-item class="ion-text-wrap">
-                    <ion-label>
-                        <p>{{ 'addon.messages.useentertosend' | translate }}</p>
-                    </ion-label>
-                    <ion-toggle [(ngModel)]="sendOnEnter" (ngModelChange)="sendOnEnterChanged()" slot="end" />
+                    <ion-toggle [(ngModel)]="sendOnEnter" (ngModelChange)="sendOnEnterChanged()">
+                        {{ 'addon.messages.useentertosend' | translate }}
+                    </ion-toggle>
                 </ion-item>
             </ion-list>
         </ion-card>
 
         <!-- Contactable privacy. -->
         <ion-card>
-            <ion-item *ngIf="!advancedContactable">
-                <ion-label class="ion-text-wrap">
-                    <p>{{ 'addon.messages.blocknoncontacts' | translate }}</p>
-                </ion-label>
-                <ion-toggle [(ngModel)]="contactablePrivacy" (ngModelChange)="saveContactablePrivacy(contactablePrivacy)" slot="end" />
+            <ion-item *ngIf="!advancedContactable" class="ion-text-wrap">
+                <ion-toggle [(ngModel)]="contactablePrivacy" (ngModelChange)="saveContactablePrivacy(contactablePrivacy)">
+                    {{ 'addon.messages.blocknoncontacts' | translate }}
+                </ion-toggle>
             </ion-item>
 
             <ion-list *ngIf="advancedContactable">
@@ -47,22 +45,19 @@ <h2>{{ 'addon.messages.contactableprivacy' | translate }}</h2>
                         </ion-label>
                     </ion-item-divider>
                     <ion-item class="ion-text-wrap">
-                        <ion-label>
-                            <p>{{ 'addon.messages.contactableprivacy_onlycontacts' | translate }}</p>
-                        </ion-label>
-                        <ion-radio slot="start" [value]="onlyContactsValue" />
+                        <ion-radio labelPlacement="end" justify="start" [value]="onlyContactsValue">
+                            {{ 'addon.messages.contactableprivacy_onlycontacts' | translate }}
+                        </ion-radio>
                     </ion-item>
                     <ion-item class="ion-text-wrap">
-                        <ion-label>
-                            <p>{{ 'addon.messages.contactableprivacy_coursemember' | translate }}</p>
-                        </ion-label>
-                        <ion-radio slot="start" [value]="courseMemberValue" />
+                        <ion-radio labelPlacement="end" justify="start" [value]="courseMemberValue">
+                            {{ 'addon.messages.contactableprivacy_coursemember' | translate }}
+                        </ion-radio>
                     </ion-item>
                     <ion-item *ngIf="allowSiteMessaging" class="ion-text-wrap">
-                        <ion-label>
-                            <p>{{ 'addon.messages.contactableprivacy_site' | translate }}</p>
-                        </ion-label>
-                        <ion-radio slot="start" [value]="siteValue" />
+                        <ion-radio labelPlacement="end" justify="start" [value]="siteValue">
+                            {{ 'addon.messages.contactableprivacy_site' | translate }}
+                        </ion-radio>
                     </ion-item>
                 </ion-radio-group>
             </ion-list>
diff --git a/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html b/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
index a0f9a4e701a..0cf93f8f109 100644
--- a/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
+++ b/src/addons/mod/assign/components/submission/addon-mod-assign-submission.html
@@ -226,10 +226,9 @@ <h2>{{ 'addon.mod_assign.userswhoneedtosubmit' | translate: {$a: ''} }}</h2>
                             <!-- Submit for grading form. -->
                             <ng-container *ngIf="canSubmit">
                                 <ion-item class="ion-text-wrap" *ngIf="submissionStatement">
-                                    <ion-label>
+                                    <ion-checkbox name="submissionstatement" [(ngModel)]="acceptStatement">
                                         <core-format-text [text]="submissionStatement" [filter]="false" />
-                                    </ion-label>
-                                    <ion-checkbox slot="end" name="submissionstatement" [(ngModel)]="acceptStatement" />
+                                    </ion-checkbox>
                                 </ion-item>
                                 <!-- Submit button. -->
                                 <ion-item class="ion-text-wrap" *ngIf="!showErrorStatementSubmit">
@@ -277,22 +276,18 @@ <h2>{{ 'addon.mod_assign.userswhoneedtosubmit' | translate: {$a: ''} }}</h2>
                         <!-- Numeric grade.
                         Use a text input because otherwise we cannot readthe value if it has an invalid character. -->
                         <ion-item class="ion-text-wrap" *ngIf="grade.method === 'simple' && !grade.scale">
-                            <ion-label position="stacked">
-                                <p class="item-heading">{{ 'addon.mod_assign.gradeoutof' | translate: {$a: gradeInfo!.grade} }}</p>
-                            </ion-label>
                             <ion-input *ngIf="!grade.disabled" type="text" [(ngModel)]="grade.grade" min="0" [max]="gradeInfo!.grade"
-                                [lang]="grade.lang" />
-                            <p *ngIf="grade.disabled">{{ 'addon.mod_assign.gradelocked' | translate }}</p>
+                                [lang]="grade.lang" [label]="'addon.mod_assign.gradeoutof' | translate: {$a: gradeInfo!.grade}"
+                                labelPlacement="stacked"
+                                [helperText]="grade.disabled ? ('addon.mod_assign.gradelocked' | translate) : null" />
                         </ion-item>
 
                         <!-- Grade using a scale. -->
                         <ion-item class="ion-text-wrap" *ngIf="grade.method === 'simple' && grade.scale">
-                            <ion-label>
-                                <p class="item-heading">{{ 'addon.mod_assign.grade' | translate }}</p>
-                            </ion-label>
                             <ion-select [(ngModel)]="grade.grade" interface="action-sheet" [disabled]="grade.disabled"
                                 [cancelText]="'core.cancel' | translate"
                                 [interfaceOptions]="{header: 'addon.mod_assign.grade' | translate}">
+                                <p class="item-heading" slot="label">{{ 'addon.mod_assign.grade' | translate }}</p>
                                 <ion-select-option *ngFor="let grade of grade.scale" [value]="grade.value">
                                     {{grade.label}}
                                 </ion-select-option>
@@ -301,12 +296,10 @@ <h2>{{ 'addon.mod_assign.userswhoneedtosubmit' | translate: {$a: ''} }}</h2>
 
                         <!-- Outcomes. -->
                         <ion-item class="ion-text-wrap" *ngFor="let outcome of gradeInfo!.outcomes">
-                            <ion-label>
-                                <p class="item-heading">{{ outcome.name }}</p>
-                            </ion-label>
                             <ion-select *ngIf="canSaveGrades && outcome.itemNumber" [(ngModel)]="outcome.selectedId"
                                 interface="action-sheet" [disabled]="gradeInfo!.disabled" [cancelText]="'core.cancel' | translate"
                                 [interfaceOptions]="{header: outcome.name }">
+                                <p class="item-heading" slot="label">{{ outcome.name }}</p>
                                 <ion-select-option *ngFor="let grade of outcome.options" [value]="grade.value">
                                     {{grade.label}}
                                 </ion-select-option>
@@ -353,11 +346,10 @@ <h2>{{ 'addon.mod_assign.userswhoneedtosubmit' | translate: {$a: ''} }}</h2>
 
                     <!--- Apply grade to all team members. -->
                     <ion-item class="ion-text-wrap" *ngIf="assign!.teamsubmission && canSaveGrades">
-                        <ion-label>
+                        <ion-toggle [(ngModel)]="grade.applyToAll">
                             <p class="item-heading">{{ 'addon.mod_assign.groupsubmissionsettings' | translate }}</p>
                             <p>{{ 'addon.mod_assign.applytoteam' | translate }}</p>
-                        </ion-label>
-                        <ion-toggle [(ngModel)]="grade.applyToAll" slot="end" />
+                        </ion-toggle>
                     </ion-item>
 
                     <!-- Attempt status. -->
@@ -380,18 +372,19 @@ <h2>{{ 'addon.mod_assign.userswhoneedtosubmit' | translate: {$a: ''} }}</h2>
                             </ion-label>
                         </ion-item>
                         <ion-item *ngIf="canSaveGrades && allowAddAttempt">
-                            <ion-label>{{ 'addon.mod_assign.addattempt' | translate }}</ion-label>
-                            <ion-toggle [(ngModel)]="grade.addAttempt" slot="end" />
+                            <ion-toggle [(ngModel)]="grade.addAttempt">
+                                <p>{{ 'addon.mod_assign.addattempt' | translate }}</p>
+                            </ion-toggle>
                         </ion-item>
                     </ng-container>
 
                     <!-- Data about the grader (teacher who graded). -->
-                    <ion-item class="ion-text-wrap" *ngIf="grader" core-user-link [userId]="grader!.id" [courseId]="courseId"
-                        [attr.aria-label]="grader!.fullname" [detail]="true">
+                    <ion-item class="ion-text-wrap" *ngIf="grader" core-user-link [userId]="grader.id" [courseId]="courseId"
+                        [attr.aria-label]="grader.fullname" [detail]="true">
                         <core-user-avatar [user]="grader" slot="start" [linkProfile]="false" />
                         <ion-label>
                             <p class="item-heading">{{ 'addon.mod_assign.gradedby' | translate }}</p>
-                            <p class="item-heading">{{ grader!.fullname }}</p>
+                            <p class="item-heading">{{ grader.fullname }}</p>
                             <p *ngIf="feedback!.gradeddate">{{ feedback!.gradeddate * 1000 | coreFormatDate }}</p>
                         </ion-label>
                     </ion-item>
diff --git a/src/addons/mod/assign/pages/edit/edit.html b/src/addons/mod/assign/pages/edit/edit.html
index a054156414f..e1ed90813cf 100644
--- a/src/addons/mod/assign/pages/edit/edit.html
+++ b/src/addons/mod/assign/pages/edit/edit.html
@@ -38,10 +38,9 @@ <h1>
             <form name="addon-mod_assign-edit-form" #editSubmissionForm>
                 <!-- Submission statement. -->
                 <ion-item class="ion-text-wrap" *ngIf="submissionStatement">
-                    <ion-label>
+                    <ion-checkbox name="submissionstatement" [(ngModel)]="submissionStatementAccepted">
                         <core-format-text [text]="submissionStatement" [filter]="false" />
-                    </ion-label>
-                    <ion-checkbox slot="end" name="submissionstatement" [(ngModel)]="submissionStatementAccepted" />
+                    </ion-checkbox>
                     <!-- ion-checkbox doesn't use an input. Create a hidden input to hold the value. -->
                     <input type="hidden" [ngModel]="submissionStatementAccepted" name="submissionstatement">
                 </ion-item>
diff --git a/src/addons/mod/chat/pages/sessions/sessions.html b/src/addons/mod/chat/pages/sessions/sessions.html
index 8fc39d7c1bf..c85c3d68cb6 100644
--- a/src/addons/mod/chat/pages/sessions/sessions.html
+++ b/src/addons/mod/chat/pages/sessions/sessions.html
@@ -17,8 +17,9 @@ <h1>{{ 'addon.mod_chat.chatreport' | translate }}</h1>
             <core-group-selector [groupInfo]="groupInfo" [(selected)]="groupId" (selectedChange)="reloadSessions()" [courseId]="courseId" />
 
             <ion-item>
-                <ion-label>{{ 'addon.mod_chat.showincompletesessions' | translate }}</ion-label>
-                <ion-toggle [(ngModel)]="showAll" (ionChange)="reloadSessions()" slot="end" />
+                <ion-toggle [(ngModel)]="showAll" (ionChange)="reloadSessions()">
+                    {{ 'addon.mod_chat.showincompletesessions' | translate }}
+                </ion-toggle>
             </ion-item>
 
             <ion-card *ngFor="let session of sessions.items" (click)="sessions.select(session)" button
diff --git a/src/addons/mod/choice/components/index/addon-mod-choice-index.html b/src/addons/mod/choice/components/index/addon-mod-choice-index.html
index a362558bbba..80374ed111f 100644
--- a/src/addons/mod/choice/components/index/addon-mod-choice-index.html
+++ b/src/addons/mod/choice/components/index/addon-mod-choice-index.html
@@ -48,18 +48,16 @@
     <ion-card *ngIf="options.length && choice">
         <ng-container *ngIf="choice.allowmultiple">
             <ion-item class="ion-text-wrap" *ngFor="let option of options">
-                <ion-label>
+                <ion-checkbox [(ngModel)]="option.checked" [disabled]="option.disabled || !canEdit">
                     <ng-container *ngTemplateOutlet="optionLabelTemplate; context: {option: option}" />
-                </ion-label>
-                <ion-checkbox slot="end" [(ngModel)]="option.checked" [disabled]="option.disabled || !canEdit" />
+                </ion-checkbox>
             </ion-item>
         </ng-container>
         <ion-radio-group *ngIf="!choice.allowmultiple" [(ngModel)]="selectedOption.id">
             <ion-item class="ion-text-wrap" *ngFor="let option of options">
-                <ion-label>
+                <ion-radio [value]="option.id" [disabled]="option.disabled || !canEdit">
                     <ng-container *ngTemplateOutlet="optionLabelTemplate; context: {option: option}" />
-                </ion-label>
-                <ion-radio slot="end" [value]="option.id" [disabled]="option.disabled || !canEdit" />
+                </ion-radio>
             </ion-item>
         </ion-radio-group>
     </ion-card>
@@ -147,7 +145,7 @@ <h3 class="item-heading">
 
 <!-- Template to render a choice option label. -->
 <ng-template #optionLabelTemplate let-option="option">
-    <p>
+    <p class="item-heading">
         <core-format-text [text]="option.text" contextLevel="module" [contextInstanceId]="module.id" [courseId]="courseId" />
         <span *ngIf="choice!.limitanswers && option.countanswers >= option.maxanswers">
             {{ 'addon.mod_choice.full' | translate }}
diff --git a/src/addons/mod/data/components/search/search.html b/src/addons/mod/data/components/search/search.html
index 4071d59179d..479fb2eb3be 100644
--- a/src/addons/mod/data/components/search/search.html
+++ b/src/addons/mod/data/components/search/search.html
@@ -12,20 +12,20 @@ <h1>{{ 'addon.mod_data.search' | translate }}</h1>
 </ion-header>
 <ion-content>
     <ion-item>
-        <ion-label>{{ 'addon.mod_data.advancedsearch' | translate }}</ion-label>
-        <ion-toggle [(ngModel)]="search.searchingAdvanced" slot="end" />
+        <ion-toggle [(ngModel)]="search.searchingAdvanced">
+            {{ 'addon.mod_data.advancedsearch' | translate }}
+        </ion-toggle>
     </ion-item>
     <form (ngSubmit)="searchEntries($event)" [formGroup]="searchForm" #searchFormEl>
         <ion-list class="ion-no-margin">
             <ion-item [hidden]="search.searchingAdvanced">
-                <ion-label class="sr-only">{{ 'addon.mod_data.search' | translate}}</ion-label>
-                <ion-input type="text" placeholder="{{ 'addon.mod_data.search' | translate}}" [(ngModel)]="search.text" name="text"
-                    formControlName="text" />
+                <ion-input type="text" [attr.aria-label]="'addon.mod_data.search' | translate"
+                    placeholder="{{ 'addon.mod_data.search' | translate}}" name="text" formControlName="text" />
             </ion-item>
             <ion-item class="ion-text-wrap">
-                <ion-label position="stacked">{{ 'core.sortby' | translate }}</ion-label>
-                <ion-select interface="action-sheet" name="sortBy" formControlName="sortBy" [placeholder]="'core.sortby' | translate"
-                    [cancelText]="'core.cancel' | translate" [interfaceOptions]="{header: 'core.sortby' | translate}">
+                <ion-select labelPlacement="stacked" interface="action-sheet" name="sortBy" formControlName="sortBy"
+                    [placeholder]="'core.sortby' | translate" [cancelText]="'core.cancel' | translate"
+                    [interfaceOptions]="{header: 'core.sortby' | translate}" [label]="'core.sortby' | translate">
                     <optgroup *ngIf="fieldsArray.length" label="{{ 'addon.mod_data.fields' | translate }}">
                         <ion-select-option *ngFor="let field of fieldsArray" [value]="field.id">{{field.name}}</ion-select-option>
                     </optgroup>
@@ -41,14 +41,16 @@ <h1>{{ 'addon.mod_data.search' | translate }}</h1>
                 </ion-select>
             </ion-item>
             <ion-list>
-                <ion-radio-group [(ngModel)]="search.sortDirection" name="sortDirection" formControlName="sortDirection">
+                <ion-radio-group name="sortDirection" formControlName="sortDirection">
                     <ion-item>
-                        <ion-label>{{ 'addon.mod_data.ascending' | translate }}</ion-label>
-                        <ion-radio slot="start" value="ASC" />
+                        <ion-radio value="ASC" labelPlacement="end" justify="start">
+                            {{ 'addon.mod_data.ascending' | translate }}
+                        </ion-radio>
                     </ion-item>
                     <ion-item>
-                        <ion-label>{{ 'addon.mod_data.descending' | translate }}</ion-label>
-                        <ion-radio slot="start" value="DESC" />
+                        <ion-radio value="DESC" labelPlacement="end" justify="start">
+                            {{'addon.mod_data.descending' | translate}}
+                        </ion-radio>
                     </ion-item>
                 </ion-radio-group>
             </ion-list>
diff --git a/src/addons/mod/data/data-forms.scss b/src/addons/mod/data/data-forms.scss
index 92f6ff9faaa..bc50e228fd3 100644
--- a/src/addons/mod/data/data-forms.scss
+++ b/src/addons/mod/data/data-forms.scss
@@ -16,6 +16,12 @@
 
         .addon-data-latlong {
             display: flex;
+
+            .input-units {
+                flex-grow: 1;
+                white-space: nowrap;
+                align-self: center;
+            }
         }
     }
 
diff --git a/src/addons/mod/data/fields/checkbox/component/addon-mod-data-field-checkbox.html b/src/addons/mod/data/fields/checkbox/component/addon-mod-data-field-checkbox.html
index abca23146e2..76533f6a0d9 100644
--- a/src/addons/mod/data/fields/checkbox/component/addon-mod-data-field-checkbox.html
+++ b/src/addons/mod/data/fields/checkbox/component/addon-mod-data-field-checkbox.html
@@ -3,13 +3,17 @@
     <ion-select [formControlName]="'f_'+field.id" multiple="true" [placeholder]="'addon.mod_data.menuchoose' | translate"
         [cancelText]="'core.cancel' | translate" [okText]="'core.ok' | translate" [interfaceOptions]="{header: field.name}"
         interface="alert">
-        <ion-select-option *ngFor="let option of options" [value]="option.value">{{option.key}}</ion-select-option>
+        <ion-select-option *ngFor="let option of options" [value]="option.value">
+            <core-format-text [text]="option.key" contextLevel="module" [contextInstanceId]="database?.coursemodule"
+                [courseId]="database?.course" [wsNotFiltered]="true" />
+        </ion-select-option>
     </ion-select>
     <core-input-errors *ngIf="error && editMode" [control]="form.controls['f_'+field.id]" [errorText]="error" />
 
-    <ion-item *ngIf="searchMode">
-        <ion-label>{{ 'addon.mod_data.selectedrequired' | translate }}</ion-label>
-        <ion-checkbox slot="end" [formControlName]="'f_'+field.id+'_allreq'" [(ngModel)]="searchFields!['f_'+field.id+'_allreq']" />
+    <ion-item *ngIf="searchMode" class="ion-text-wrap">
+        <ion-checkbox [formControlName]="'f_'+field.id+'_allreq'" [(ngModel)]="searchFields!['f_'+field.id+'_allreq']">
+            {{ 'addon.mod_data.selectedrequired' | translate }}
+        </ion-checkbox>
     </ion-item>
 </span>
 
diff --git a/src/addons/mod/data/fields/date/component/addon-mod-data-field-date.html b/src/addons/mod/data/fields/date/component/addon-mod-data-field-date.html
index 5e2b2c81703..9e937812172 100644
--- a/src/addons/mod/data/fields/date/component/addon-mod-data-field-date.html
+++ b/src/addons/mod/data/fields/date/component/addon-mod-data-field-date.html
@@ -10,9 +10,10 @@
     </ion-modal>
     <core-input-errors *ngIf="error && editMode" [control]="form.controls['f_'+field.id]" [errorText]="error" />
 
-    <ion-item *ngIf="searchMode">
-        <ion-label>{{ 'addon.mod_data.usedate' | translate }}</ion-label>
-        <ion-checkbox slot="end" [formControlName]="'f_'+field.id+'_z'" [(ngModel)]="searchFields['f_'+field.id+'_z']" />
+    <ion-item *ngIf="searchMode" class="ion-text-wrap">
+        <ion-checkbox [formControlName]="'f_'+field.id+'_z'" [(ngModel)]="searchFields['f_'+field.id+'_z']">
+            {{ 'addon.mod_data.usedate' | translate }}
+        </ion-checkbox>
     </ion-item>
 </span>
 
diff --git a/src/addons/mod/data/fields/latlong/component/addon-mod-data-field-latlong.html b/src/addons/mod/data/fields/latlong/component/addon-mod-data-field-latlong.html
index eee88521bb4..69cc669074f 100644
--- a/src/addons/mod/data/fields/latlong/component/addon-mod-data-field-latlong.html
+++ b/src/addons/mod/data/fields/latlong/component/addon-mod-data-field-latlong.html
@@ -3,13 +3,13 @@
 
     <ng-container *ngIf="editMode">
         <span [core-mark-required]="field.required" class="core-mark-required"></span>
-        <div class="addon-data-latlong">
+        <div class="addon-data-latlong flex-row">
             <ion-input type="text" [formControlName]="'f_'+field.id+'_0'" maxlength="10" />
-            <span class="placeholder-icon" item-right>°N</span>
+            <div class="input-units">°N</div>
         </div>
-        <div class="addon-data-latlong">
+        <div class="addon-data-latlong flex-row">
             <ion-input type="text" [formControlName]="'f_'+field.id+'_1'" maxlength="10" />
-            <span class="placeholder-icon" item-right>°E</span>
+            <div class="input-units">°E</div>
         </div>
         <div class="addon-data-latlong" *ngIf="locationServicesEnabled">
             <ion-button (click)="getLocation($event)">
diff --git a/src/addons/mod/data/fields/menu/component/addon-mod-data-field-menu.html b/src/addons/mod/data/fields/menu/component/addon-mod-data-field-menu.html
index cc2184808ef..76391c5e283 100644
--- a/src/addons/mod/data/fields/menu/component/addon-mod-data-field-menu.html
+++ b/src/addons/mod/data/fields/menu/component/addon-mod-data-field-menu.html
@@ -3,7 +3,10 @@
     <ion-select [formControlName]="'f_'+field.id" [placeholder]="'addon.mod_data.menuchoose' | translate"
         [cancelText]="'core.cancel' | translate" [interfaceOptions]="{header: field.name}" interface="action-sheet">
         <ion-select-option value="">{{ 'addon.mod_data.menuchoose' | translate }}</ion-select-option>
-        <ion-select-option *ngFor="let option of options" [value]="option">{{option}}</ion-select-option>
+        <ion-select-option *ngFor="let option of options" [value]="option">
+            <core-format-text [text]="option" contextLevel="module" [contextInstanceId]="database?.coursemodule"
+                [courseId]="database?.course" [wsNotFiltered]="true" />
+        </ion-select-option>
     </ion-select>
     <core-input-errors *ngIf="error && editMode" [control]="form.controls['f_'+field.id]" [errorText]="error" />
 </span>
diff --git a/src/addons/mod/data/fields/multimenu/component/addon-mod-data-field-multimenu.html b/src/addons/mod/data/fields/multimenu/component/addon-mod-data-field-multimenu.html
index 455677ce0d4..d7b459a7cc3 100644
--- a/src/addons/mod/data/fields/multimenu/component/addon-mod-data-field-multimenu.html
+++ b/src/addons/mod/data/fields/multimenu/component/addon-mod-data-field-multimenu.html
@@ -3,14 +3,18 @@
     <ion-select [formControlName]="'f_'+field.id" multiple="true" [placeholder]="'addon.mod_data.menuchoose' | translate"
         [cancelText]="'core.cancel' | translate" [okText]="'core.ok' | translate" [interfaceOptions]="{header: field.name}"
         interface="alert">
-        <ion-select-option *ngFor="let option of options" [value]="option.value">{{option.key}}</ion-select-option>
+        <ion-select-option *ngFor="let option of options" [value]="option.value">
+            <core-format-text [text]="option.key" contextLevel="module" [contextInstanceId]="database?.coursemodule"
+                [courseId]="database?.course" [wsNotFiltered]="true" />
+        </ion-select-option>
     </ion-select>
     <core-input-errors *ngIf="error && editMode" [control]="form.controls['f_'+field.id]" [errorText]="error" />
 
 
-    <ion-item *ngIf="searchMode">
-        <ion-label>{{ 'addon.mod_data.selectedrequired' | translate }}</ion-label>
-        <ion-checkbox slot="end" [formControlName]="'f_'+field.id+'_allreq'" [(ngModel)]="searchFields!['f_'+field.id+'_allreq']" />
+    <ion-item *ngIf="searchMode" class="ion-text-wrap">
+        <ion-checkbox [formControlName]="'f_'+field.id+'_allreq'" [(ngModel)]="searchFields!['f_'+field.id+'_allreq']">
+            {{ 'addon.mod_data.selectedrequired' | translate }}
+        </ion-checkbox>
     </ion-item>
 </span>
 
diff --git a/src/addons/mod/data/fields/picture/component/addon-mod-data-field-picture.html b/src/addons/mod/data/fields/picture/component/addon-mod-data-field-picture.html
index 99cfcd004f9..52291469fd9 100644
--- a/src/addons/mod/data/fields/picture/component/addon-mod-data-field-picture.html
+++ b/src/addons/mod/data/fields/picture/component/addon-mod-data-field-picture.html
@@ -4,8 +4,8 @@
         [allowOffline]="true" acceptedTypes="image" [courseId]="database?.course" />
     <core-input-errors *ngIf="error" [errorText]="error" />
 
-    <ion-label position="stacked">{{ 'addon.mod_data.alttext' | translate }}</ion-label>
-    <ion-input type="text" [formControlName]="'f_'+field.id+'_alttext'" [placeholder]=" 'addon.mod_data.alttext' | translate" />
+    <ion-input [label]="'addon.mod_data.alttext' | translate" labelPlacement="stacked" type="text"
+        [formControlName]="'f_'+field.id+'_alttext'" [placeholder]=" 'addon.mod_data.alttext' | translate" />
 </span>
 
 <span *ngIf="searchMode && form" [formGroup]="form">
diff --git a/src/addons/mod/data/fields/radiobutton/component/addon-mod-data-field-radiobutton.html b/src/addons/mod/data/fields/radiobutton/component/addon-mod-data-field-radiobutton.html
index 1f51004cc39..ced96a13ff9 100644
--- a/src/addons/mod/data/fields/radiobutton/component/addon-mod-data-field-radiobutton.html
+++ b/src/addons/mod/data/fields/radiobutton/component/addon-mod-data-field-radiobutton.html
@@ -4,7 +4,10 @@
         [cancelText]="'core.cancel' | translate" [okText]="'core.ok' | translate" [interfaceOptions]="{header: field.name}"
         interface="alert">
         <ion-select-option value="">{{ 'addon.mod_data.menuchoose' | translate }}</ion-select-option>
-        <ion-select-option *ngFor="let option of options" [value]="option">{{option}}</ion-select-option>
+        <ion-select-option *ngFor="let option of options" [value]="option">
+            <core-format-text [text]="option" contextLevel="module" [contextInstanceId]="database?.coursemodule"
+                [courseId]="database?.course" [wsNotFiltered]="true" />
+        </ion-select-option>
     </ion-select>
     <core-input-errors *ngIf="error && editMode" [control]="form.controls['f_'+field.id]" [errorText]="error" />
 </span>
diff --git a/src/addons/mod/feedback/pages/form/form.html b/src/addons/mod/feedback/pages/form/form.html
index 0f6671a8487..e03f78b9bb9 100644
--- a/src/addons/mod/feedback/pages/form/form.html
+++ b/src/addons/mod/feedback/pages/form/form.html
@@ -26,37 +26,40 @@ <h1>
                     <ng-container *ngIf="item.typ !== 'pagebreak'">
                         <ion-item class="ion-text-wrap addon-mod_feedback-item" [color]="item.dependitem > 0 ? 'light' : ''"
                             [class.core-danger-item]="item.isEmpty || item.hasError">
-                            <ion-label [position]="item.hasTextInput ? 'stacked' : undefined">
-                                <p *ngIf="item.name" [core-mark-required]="item.required">
-                                    <span *ngIf="feedback!.autonumbering && item.itemnumber">{{item.itemnumber}}. </span>
-                                    <core-format-text [component]="component" [componentId]="cmId" [text]="item.name" contextLevel="module"
-                                        [contextInstanceId]="cmId" [courseId]="courseId" [wsNotFiltered]="true" />
-                                    <span *ngIf="item.postfix" class="addon-mod_feedback-postfix">{{item.postfix}}</span>
-                                </p>
+                            <ion-label *ngIf="!item.slottedLabel">
+                                <ng-container *ngTemplateOutlet="label; context: {item: item}" />
                                 <p *ngIf="item.templateName === 'label'">
                                     <core-format-text [component]="component" [componentId]="cmId" [text]="item.presentation"
                                         contextLevel="module" [contextInstanceId]="cmId" [wsNotFiltered]="true" [courseId]="courseId" />
                                 </p>
                             </ion-label>
 
-                            <ion-input *ngIf="item.templateName === 'textfield'" type="text" [(ngModel)]="item.value" autocorrect="off"
-                                name="{{item.typ}}_{{item.id}}" maxlength="{{item.length}}" [required]="item.required" />
+                            <ion-input labelPlacement="stacked" *ngIf="item.templateName === 'textfield'" type="text"
+                                [(ngModel)]="item.value" autocorrect="off" name="{{item.typ}}_{{item.id}}" maxlength="{{item.length}}"
+                                [required]="item.required">
+                                <ng-container *ngTemplateOutlet="label; context: {item: item}" />
+                            </ion-input>
 
                             <ng-container *ngIf="item.templateName === 'numeric'">
-                                <ion-input type="number" [(ngModel)]="item.value" name="{{item.typ}}_{{item.id}}"
-                                    [required]="item.required" />
+                                <ion-input labelPlacement="stacked" type="number" [(ngModel)]="item.value" name="{{item.typ}}_{{item.id}}"
+                                    [required]="item.required">
+                                    <ng-container *ngTemplateOutlet="label; context: {item: item}" />
+                                </ion-input>
                                 <ion-text *ngIf="item.hasError" color="danger" class="addon-mod_feedback-item-error">
                                     {{ 'addon.mod_feedback.numberoutofrange' | translate }} [{{item.rangefrom}}
                                     <span *ngIf="item.rangefrom && item.rangeto">, </span>{{item.rangeto}}]
                                 </ion-text>
                             </ng-container>
 
-                            <ion-textarea *ngIf="item.templateName === 'textarea'" [required]="item.required"
-                                name="{{item.typ}}_{{item.id}}" [(ngModel)]="item.value" />
+                            <ion-textarea labelPlacement="stacked" *ngIf="item.templateName === 'textarea'" [required]="item.required"
+                                name="{{item.typ}}_{{item.id}}" [(ngModel)]="item.value">
+                                <ng-container *ngTemplateOutlet="label; context: {item: item}" />
+                            </ion-textarea>
 
-                            <ion-select *ngIf="item.templateName === 'multichoice-d'" [required]="item.required"
+                            <ion-select labelPlacement="stacked" *ngIf="item.templateName === 'multichoice-d'" [required]="item.required"
                                 name="{{item.typ}}_{{item.id}}" [(ngModel)]="item.value" interface="action-sheet"
                                 [cancelText]="'core.cancel' | translate" [interfaceOptions]="{header: item.name}">
+                                <ng-container *ngTemplateOutlet="label; context: {item: item}" />
                                 <ion-select-option *ngFor="let option of item.choices" [value]="option.value">
                                     <core-format-text [component]="component" [componentId]="cmId" [text]="option.label"
                                         contextLevel="module" [contextInstanceId]="cmId" [wsNotFiltered]="true" [courseId]="courseId" />
@@ -66,23 +69,21 @@ <h1>
 
                         <ion-radio-group *ngIf="item.templateName === 'multichoice-r'" [(ngModel)]="item.value" [required]="item.required"
                             name="{{item.typ}}_{{item.id}}">
-                            <ion-item *ngFor="let option of item.choices">
-                                <ion-label>
+                            <ion-item *ngFor="let option of item.choices" class="ion-text-wrap">
+                                <ion-radio [value]="option.value">
                                     <core-format-text [component]="component" [componentId]="cmId" [text]="option.label"
                                         contextLevel="module" [contextInstanceId]="cmId" [wsNotFiltered]="true" [courseId]="courseId" />
-                                </ion-label>
-                                <ion-radio slot="start" [value]="option.value" />
+                                </ion-radio>
                             </ion-item>
                         </ion-radio-group>
 
                         <ng-container *ngIf="item.templateName === 'multichoice-c'">
                             <ion-item *ngFor="let option of item.choices">
-                                <ion-label>
+                                <ion-checkbox [required]="item.required" name="{{item.typ}}_{{item.id}}" [(ngModel)]="option.checked"
+                                    value="option.value">
                                     <core-format-text [component]="component" [componentId]="cmId" [text]="option.label"
                                         contextLevel="module" [contextInstanceId]="cmId" [wsNotFiltered]="true" [courseId]="courseId" />
-                                </ion-label>
-                                <ion-checkbox [required]="item.required" name="{{item.typ}}_{{item.id}}" [(ngModel)]="option.checked"
-                                    value="option.value" />
+                                </ion-checkbox>
                             </ion-item>
                         </ng-container>
 
@@ -152,3 +153,13 @@ <h1>
         </div>
     </core-loading>
 </ion-content>
+
+
+<ng-template #label let-item="item">
+    <p *ngIf="item.name" [core-mark-required]="item.required" [slot]="item.slottedLabel ? 'label' : undefined">
+        <span *ngIf="feedback!.autonumbering && item.itemnumber">{{item.itemnumber}}. </span>
+        <core-format-text [component]="component" [componentId]="cmId" [text]="item.name" contextLevel="module" [contextInstanceId]="cmId"
+            [courseId]="courseId" [wsNotFiltered]="true" />
+        <span *ngIf="item.postfix" class="addon-mod_feedback-postfix">{{item.postfix}}</span>
+    </p>
+</ng-template>
diff --git a/src/addons/mod/feedback/services/feedback-helper.ts b/src/addons/mod/feedback/services/feedback-helper.ts
index 18dddff572f..8b7f6d58a8d 100644
--- a/src/addons/mod/feedback/services/feedback-helper.ts
+++ b/src/addons/mod/feedback/services/feedback-helper.ts
@@ -251,7 +251,7 @@ export class AddonModFeedbackHelperProvider {
         return Object.assign(item, {
             templateName: 'label',
             value: '',
-            hasTextInput: false,
+            slottedLabel: false,
         });
     }
 
@@ -265,7 +265,7 @@ export class AddonModFeedbackHelperProvider {
         const formItem: AddonModFeedbackFormBasicItem = Object.assign(item, {
             templateName: 'label',
             value: '',
-            hasTextInput: false,
+            slottedLabel: false,
         });
 
         const type = parseInt(formItem.presentation, 10);
@@ -304,7 +304,7 @@ export class AddonModFeedbackHelperProvider {
             value: item.rawValue !== undefined ? Number(item.rawValue) : '',
             rangefrom: typeof rangeFrom == 'number' && !isNaN(rangeFrom) ? range[0] : '',
             rangeto: typeof rangeTo == 'number' && !isNaN(rangeTo) ? rangeTo : '',
-            hasTextInput: true,
+            slottedLabel: true,
         });
         formItem.postfix = this.getNumericBoundariesForDisplay(formItem.rangefrom, formItem.rangeto);
 
@@ -322,7 +322,7 @@ export class AddonModFeedbackHelperProvider {
             templateName: 'textfield',
             length: Number(item.presentation.split(AddonModFeedbackProvider.LINE_SEP)[1]) || 255,
             value: item.rawValue !== undefined ? item.rawValue : '',
-            hasTextInput: true,
+            slottedLabel: true,
         });
     }
 
@@ -336,7 +336,7 @@ export class AddonModFeedbackHelperProvider {
         return Object.assign(item, {
             templateName: 'textarea',
             value: item.rawValue !== undefined ? item.rawValue : '',
-            hasTextInput: true,
+            slottedLabel: true,
         });
     }
 
@@ -356,7 +356,7 @@ export class AddonModFeedbackHelperProvider {
             subtype: subType,
             value: '',
             choices: [],
-            hasTextInput: false,
+            slottedLabel: subType === 'd',
         });
 
         formItem.presentation = parts.length > 1 ? parts[1] : '';
@@ -411,7 +411,7 @@ export class AddonModFeedbackHelperProvider {
         const formItem: AddonModFeedbackCaptchaItem = Object.assign(item, {
             templateName: 'captcha',
             value: '',
-            hasTextInput: false,
+            slottedLabel: false,
         });
 
         const data = <string[]> CoreTextUtils.parseJSON(item.otherdata);
@@ -549,7 +549,7 @@ export type AddonModFeedbackFormItem =
 export type AddonModFeedbackFormBasicItem = AddonModFeedbackItem & {
     templateName: string;
     value: AddonModFeedbackResponseValue;
-    hasTextInput: boolean;
+    slottedLabel: boolean;
     isEmpty?: boolean;
     hasError?: boolean;
 };
diff --git a/src/addons/mod/forum/components/post/post.html b/src/addons/mod/forum/components/post/post.html
index 327984298cd..d20baf0a828 100644
--- a/src/addons/mod/forum/components/post/post.html
+++ b/src/addons/mod/forum/components/post/post.html
@@ -94,9 +94,9 @@ <h2 class="ion-text-wrap">
     </ng-container>
 
     <form *ngIf="showForm" [id]="'addon-forum-reply-edit-form-' + uniqueId" #replyFormEl>
-        <ion-item>
-            <ion-label position="stacked">{{ 'addon.mod_forum.subject' | translate }}</ion-label>
-            <ion-input type="text" [placeholder]="'addon.mod_forum.subject' | translate" [(ngModel)]="formData.subject" name="subject" />
+        <ion-item class="ion-text-wrap">
+            <ion-input labelPlacement="stacked" type="text" [placeholder]="'addon.mod_forum.subject' | translate"
+                [(ngModel)]="formData.subject" name="subject" [label]="'addon.mod_forum.subject' | translate" />
         </ion-item>
         <ion-item>
             <ion-label position="stacked">{{ 'addon.mod_forum.message' | translate }}</ion-label>
@@ -106,8 +106,9 @@ <h2 class="ion-text-wrap">
                 [draftExtraParams]="{reply: post.id}" (contentChanged)="onMessageChange($event)" />
         </ion-item>
         <ion-item class="ion-text-wrap" *ngIf="accessInfo.canpostprivatereply">
-            <ion-label>{{ 'addon.mod_forum.privatereply' | translate }}</ion-label>
-            <ion-checkbox slot="end" [(ngModel)]="formData.isprivatereply" name="isprivatereply" />
+            <ion-checkbox [(ngModel)]="formData.isprivatereply" name="isprivatereply">
+                {{ 'addon.mod_forum.privatereply' | translate }}
+            </ion-checkbox>
         </ion-item>
         <ng-container *ngIf="forum.id && forum.maxattachments > 0">
             <ion-item button class="divider ion-text-wrap" (click)="toggleAdvanced()" [detail]="false" [attr.aria-expanded]="advanced"
diff --git a/src/addons/mod/forum/pages/new-discussion/new-discussion.html b/src/addons/mod/forum/pages/new-discussion/new-discussion.html
index 8d9bb72e3c6..4971fdd2bca 100644
--- a/src/addons/mod/forum/pages/new-discussion/new-discussion.html
+++ b/src/addons/mod/forum/pages/new-discussion/new-discussion.html
@@ -16,9 +16,10 @@ <h1>{{ 'addon.mod_forum.addanewdiscussion' | translate }}</h1>
     <core-loading [hideUntil]="groupsLoaded">
         <form *ngIf="showForm" #newDiscFormEl>
             <ion-item>
-                <ion-label position="stacked">{{ 'addon.mod_forum.subject' | translate }}</ion-label>
-                <ion-input [(ngModel)]="newDiscussion.subject" type="text" [placeholder]="'addon.mod_forum.subject' | translate"
-                    name="subject" />
+                <ion-input labelPlacement="stacked" [(ngModel)]="newDiscussion.subject" type="text"
+                    [placeholder]="'addon.mod_forum.subject' | translate" name="subject">
+                    <p>{{ 'addon.mod_forum.subject' | translate }}</p>
+                </ion-input>
             </ion-item>
             <ion-item>
                 <ion-label position="stacked">{{ 'addon.mod_forum.message' | translate }}</ion-label>
@@ -38,27 +39,30 @@ <h2>{{ 'addon.mod_forum.advanced' | translate }}</h2>
             </ion-item>
             <div *ngIf="advanced" id="addon-mod-forum-new-discussion-advanced">
                 <ion-item *ngIf="showGroups && groupIds.length > 1 && accessInfo.cancanposttomygroups">
-                    <ion-label>{{ 'addon.mod_forum.posttomygroups' | translate }}</ion-label>
-                    <ion-toggle [(ngModel)]="newDiscussion.postToAllGroups" name="postallgroups" slot="end" />
+                    <ion-toggle [(ngModel)]="newDiscussion.postToAllGroups" name="postallgroups">
+                        {{ 'addon.mod_forum.posttomygroups' | translate }}
+                    </ion-toggle>
                 </ion-item>
-                <ion-item *ngIf="showGroups" class="core-edit-set-group">
-                    <ion-label>{{ 'addon.mod_forum.group' | translate }}</ion-label>
+                <ion-item *ngIf="showGroups" class="core-edit-set-group ion-text-wrap">
                     <ion-select [(ngModel)]="newDiscussion.groupId" [disabled]="newDiscussion.postToAllGroups" interface="action-sheet"
                         name="groupid" [interfaceOptions]="{header: 'addon.mod_forum.group' | translate}"
                         [cancelText]="'core.cancel' | translate" (ionChange)="calculateGroupName()">
+                        <p class="item-heading" slot="label">{{ 'addon.mod_forum.group' | translate }}</p>
                         <ion-select-option *ngFor="let group of groups" [value]="group.id">
                             <core-format-text [text]="group.name" contextLevel="course" [contextInstanceId]="courseId"
                                 [wsNotFiltered]="true" />
                         </ion-select-option>
                     </ion-select>
                 </ion-item>
-                <ion-item>
-                    <ion-label>{{ 'addon.mod_forum.discussionsubscription' | translate }}</ion-label>
-                    <ion-toggle [(ngModel)]="newDiscussion.subscribe" name="subscribe" slot="end" />
+                <ion-item class="ion-text-wrap">
+                    <ion-toggle [(ngModel)]="newDiscussion.subscribe" name="subscribe">
+                        {{ 'addon.mod_forum.discussionsubscription' | translate }}
+                    </ion-toggle>
                 </ion-item>
-                <ion-item *ngIf="canPin">
-                    <ion-label>{{ 'addon.mod_forum.discussionpinned' | translate }}</ion-label>
-                    <ion-toggle [(ngModel)]="newDiscussion.pin" name="pin" slot="end" />
+                <ion-item *ngIf="canPin" class="ion-text-wrap">
+                    <ion-toggle [(ngModel)]="newDiscussion.pin" name="pin">
+                        {{ 'addon.mod_forum.discussionpinned' | translate }}
+                    </ion-toggle>
                 </ion-item>
                 <core-attachments *ngIf="canCreateAttachments && forum && forum.maxattachments > 0" [files]="newDiscussion.files"
                     [maxSize]="forum.maxbytes" [maxSubmissions]="forum.maxattachments" [component]="component" [componentId]="forum.cmid"
diff --git a/src/addons/mod/forum/pages/search/search.html b/src/addons/mod/forum/pages/search/search.html
index 18acb61ca68..c31a0b312c1 100644
--- a/src/addons/mod/forum/pages/search/search.html
+++ b/src/addons/mod/forum/pages/search/search.html
@@ -12,7 +12,7 @@ <h1 *ngIf="!forum">{{ 'addon.block_searchforums.pluginname' | translate }}</h1>
 <ion-content class="limited-width">
     <div>
         <ion-card class="core-danger-card" *ngIf="searchBanner">
-            <ion-item>
+            <ion-item class="ion-text-wrap">
                 <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true" />
                 <ion-label>
                     <core-format-text [text]="searchBanner" />
diff --git a/src/addons/mod/glossary/components/mode-picker/addon-mod-glossary-mode-picker.html b/src/addons/mod/glossary/components/mode-picker/addon-mod-glossary-mode-picker.html
index 18f01efbd80..3e34c275e92 100644
--- a/src/addons/mod/glossary/components/mode-picker/addon-mod-glossary-mode-picker.html
+++ b/src/addons/mod/glossary/components/mode-picker/addon-mod-glossary-mode-picker.html
@@ -1,8 +1,9 @@
 <ion-content>
     <ion-radio-group [(ngModel)]="selectedMode" (ionChange)="modePicked()">
         <ion-item class="ion-text-wrap" *ngFor="let mode of modes">
-            <ion-label>{{ mode.langkey | translate }}</ion-label>
-            <ion-radio slot="end" [value]="mode.key" />
+            <ion-radio [value]="mode.key">
+                {{ mode.langkey | translate }}
+            </ion-radio>
         </ion-item>
     </ion-radio-group>
 </ion-content>
diff --git a/src/addons/mod/glossary/pages/edit/edit.html b/src/addons/mod/glossary/pages/edit/edit.html
index 220f2a46b1a..6cde74e131f 100644
--- a/src/addons/mod/glossary/pages/edit/edit.html
+++ b/src/addons/mod/glossary/pages/edit/edit.html
@@ -14,8 +14,8 @@ <h1 *ngIf="glossary">
     <core-loading [hideUntil]="loaded">
         <form #editFormEl *ngIf="glossary">
             <ion-item>
-                <ion-label position="stacked">{{ 'addon.mod_glossary.concept' | translate }}</ion-label>
-                <ion-input type="text" [placeholder]="'addon.mod_glossary.concept' | translate" [(ngModel)]="data.concept" name="concept" />
+                <ion-input labelPlacement="stacked" type="text" [placeholder]="'addon.mod_glossary.concept' | translate"
+                    [(ngModel)]="data.concept" name="concept" [label]="'addon.mod_glossary.concept' | translate" />
             </ion-item>
             <ion-item>
                 <ion-label position="stacked">{{ 'addon.mod_glossary.definition' | translate }}</ion-label>
@@ -25,22 +25,20 @@ <h1 *ngIf="glossary">
                     [draftExtraParams]="editorExtraParams" />
             </ion-item>
             <ion-item *ngIf="categories.length > 0">
-                <ion-label position="stacked">
-                    {{ 'addon.mod_glossary.categories' | translate }}
-                </ion-label>
-                <ion-select [(ngModel)]="data.categories" multiple="true" interface="action-sheet"
+
+                <ion-select labelPlacement="stacked" [(ngModel)]="data.categories" multiple="true" interface="action-sheet"
                     [placeholder]="'addon.mod_glossary.categories' | translate" name="categories" [cancelText]="'core.cancel' | translate"
-                    [interfaceOptions]="{header: 'addon.mod_glossary.categories' | translate}">
+                    [interfaceOptions]="{header: 'addon.mod_glossary.categories' | translate}"
+                    [label]="'addon.mod_glossary.categories' | translate">
                     <ion-select-option *ngFor="let category of categories" [value]="category.id">
                         {{ category.name }}
                     </ion-select-option>
                 </ion-select>
             </ion-item>
             <ion-item *ngIf="showAliases">
-                <ion-label position="stacked">
-                    {{ 'addon.mod_glossary.aliases' | translate }}
-                </ion-label>
-                <ion-textarea [(ngModel)]="data.aliases" rows="1" [core-auto-rows]="data.aliases" name="aliases" />
+
+                <ion-textarea labelPlacement="stacked" [(ngModel)]="data.aliases" rows="1" [core-auto-rows]="data.aliases" name="aliases"
+                    [label]="'addon.mod_glossary.aliases' | translate" />
             </ion-item>
             <ion-item-divider>
                 <ion-label>
@@ -56,16 +54,19 @@ <h2>{{ 'addon.mod_glossary.linking' | translate }}</h2>
                     </ion-label>
                 </ion-item-divider>
                 <ion-item class="ion-text-wrap">
-                    <ion-label>{{ 'addon.mod_glossary.entryusedynalink' | translate }}</ion-label>
-                    <ion-toggle [(ngModel)]="data.usedynalink" name="usedynalink" slot="end" />
+                    <ion-toggle [(ngModel)]="data.usedynalink" name="usedynalink">
+                        {{ 'addon.mod_glossary.entryusedynalink' | translate }}
+                    </ion-toggle>
                 </ion-item>
                 <ion-item class="ion-text-wrap">
-                    <ion-label>{{ 'addon.mod_glossary.casesensitive' | translate }}</ion-label>
-                    <ion-toggle [disabled]="!data.usedynalink" [(ngModel)]="data.casesensitive" name="casesensitive" slot="end" />
+                    <ion-toggle [disabled]="!data.usedynalink" [(ngModel)]="data.casesensitive" name="casesensitive">
+                        {{ 'addon.mod_glossary.casesensitive' | translate }}
+                    </ion-toggle>
                 </ion-item>
                 <ion-item class="ion-text-wrap">
-                    <ion-label>{{ 'addon.mod_glossary.fullmatch' | translate }}</ion-label>
-                    <ion-toggle [disabled]="!data.usedynalink" [(ngModel)]="data.fullmatch" name="fullmatch" slot="end" />
+                    <ion-toggle [disabled]="!data.usedynalink" [(ngModel)]="data.fullmatch" name="fullmatch">
+                        {{ 'addon.mod_glossary.fullmatch' | translate }}
+                    </ion-toggle>
                 </ion-item>
             </ng-container>
             <ion-button class="ion-margin" expand="block" [disabled]="!data.concept || !data.definition" (click)="save()">
diff --git a/src/addons/mod/lesson/pages/player/player.html b/src/addons/mod/lesson/pages/player/player.html
index edca7531d97..ae341d2dd37 100644
--- a/src/addons/mod/lesson/pages/player/player.html
+++ b/src/addons/mod/lesson/pages/player/player.html
@@ -71,10 +71,9 @@ <h2>
 
                         <!-- Short answer. -->
                         <ion-item class="ion-text-wrap" *ngSwitchCase="'shortanswer'">
-                            <ion-label class="sr-only" stacked />
                             <ion-input [type]="question.input!.type" placeholder="{{ 'addon.mod_lesson.youranswer' | translate }}"
-                                [id]="question.input!.id" [formControlName]="question.input!.name" autocorrect="off"
-                                [maxlength]="question.input!.maxlength" />
+                                [attr.aria-label]="'addon.mod_lesson.youranswer' | translate" [id]="question.input!.id"
+                                [formControlName]="question.input!.name" autocorrect="off" [maxlength]="question.input!.maxlength" />
                         </ion-item>
 
                         <!-- Essay. -->
@@ -103,22 +102,20 @@ <h2>
                             <!-- Single choice. -->
                             <ion-radio-group *ngIf="!question.multi" [formControlName]="question.controlName">
                                 <ion-item class="ion-text-wrap" *ngFor="let option of question.options">
-                                    <ion-label>
+                                    <ion-radio [id]="option.id" [value]="option.value" [disabled]="option.disabled">
                                         <core-format-text [component]="component" [componentId]="lesson.coursemodule" [text]="option.text"
                                             contextLevel="module" [contextInstanceId]="lesson.coursemodule" [courseId]="courseId" />
-                                    </ion-label>
-                                    <ion-radio slot="end" [id]="option.id" [value]="option.value" [disabled]="option.disabled" />
+                                    </ion-radio>
                                 </ion-item>
                             </ion-radio-group>
 
                             <!-- Multiple choice. -->
                             <ng-container *ngIf="question.multi">
                                 <ion-item class="ion-text-wrap" *ngFor="let option of question.options">
-                                    <ion-label>
+                                    <ion-checkbox [id]="option.id" [formControlName]="option.name">
                                         <core-format-text [component]="component" [componentId]="lesson.coursemodule" [text]="option.text"
                                             contextLevel="module" [contextInstanceId]="lesson.coursemodule" [courseId]="courseId" />
-                                    </ion-label>
-                                    <ion-checkbox [id]="option.id" [formControlName]="option.name" slot="end" />
+                                    </ion-checkbox>
                                 </ion-item>
                             </ng-container>
                         </ng-container>
@@ -126,14 +123,11 @@ <h2>
                         <!-- Matching. -->
                         <ng-container *ngSwitchCase="'matching'">
                             <ion-item class="ion-text-wrap" *ngFor="let row of question.rows">
-                                <ion-label>
-                                    <p>
-                                        <core-format-text [component]="component" [componentId]="lesson.coursemodule" [text]="row.text"
-                                            contextLevel="module" [contextInstanceId]="lesson.coursemodule" [courseId]="courseId" />
-                                    </p>
-                                </ion-label>
                                 <ion-select [id]="row.id" [formControlName]="row.name" [cancelText]="'core.cancel' | translate"
                                     interface="action-sheet">
+                                    <core-format-text slot="label" [component]="component" [componentId]="lesson.coursemodule"
+                                        [text]="row.text" contextLevel="module" [contextInstanceId]="lesson.coursemodule"
+                                        [courseId]="courseId" />
                                     <ion-select-option *ngFor="let option of row.options" [value]="option.value">
                                         {{option.label}}
                                     </ion-select-option>
diff --git a/src/addons/mod/lesson/pages/user-retake/user-retake.html b/src/addons/mod/lesson/pages/user-retake/user-retake.html
index a105b835aab..c4d966e6cf7 100644
--- a/src/addons/mod/lesson/pages/user-retake/user-retake.html
+++ b/src/addons/mod/lesson/pages/user-retake/user-retake.html
@@ -26,10 +26,10 @@ <h2>{{student.fullname}}</h2>
 
             <!-- Retake selector if there is more than one retake. -->
             <ion-item class="ion-text-wrap" *ngIf="student.attempts && student.attempts.length > 1">
-                <ion-label>{{ 'addon.mod_lesson.attemptheader' | translate }}</ion-label>
                 <ion-select [(ngModel)]="selectedRetake" (ionChange)="changeRetake(selectedRetake!)"
                     [cancelText]="'core.cancel' | translate" interface="action-sheet"
                     [interfaceOptions]="{header: 'addon.mod_lesson.attemptheader' | translate}">
+                    <p slot="label" class="item-heading">{{ 'addon.mod_lesson.attemptheader' | translate }}</p>
                     <ion-select-option *ngFor="let retake of student.attempts" [value]="retake.try">
                         {{retake.label}}
                     </ion-select-option>
@@ -129,7 +129,7 @@ <h2>{{student.fullname}}</h2>
                                 <!-- Truefalse or multichoice. -->
                                 <ion-item class="ion-text-wrap" *ngIf="answer[0].isCheckbox"
                                     [ngClass]="{'addon-mod_lesson-highlight': answer[0].highlight}">
-                                    <ion-label>
+                                    <ion-checkbox [attr.name]="answer[0].name" [ngModel]="answer[0].checked" [disabled]="true">
                                         <p>
                                             <core-format-text [component]="component" [componentId]="lesson?.coursemodule"
                                                 [text]="answer[0].content" contextLevel="module" [contextInstanceId]="lesson?.coursemodule"
@@ -143,8 +143,7 @@ <h2>{{student.fullname}}</h2>
                                         <ion-badge *ngIf="answer[0].successBadge" color="success" class="addon-mod_lesson-answer-success">
                                             {{ answer[0].successBadge }}
                                         </ion-badge>
-                                    </ion-label>
-                                    <ion-checkbox [attr.name]="answer[0].name" [ngModel]="answer[0].checked" [disabled]="true" slot="end" />
+                                    </ion-checkbox>
                                 </ion-item>
 
                                 <!-- Short answer or numeric. -->
diff --git a/src/addons/mod/quiz/accessrules/password/component/addon-mod-quiz-access-password.html b/src/addons/mod/quiz/accessrules/password/component/addon-mod-quiz-access-password.html
index 6ac16c283d6..13e00d1dfbc 100644
--- a/src/addons/mod/quiz/accessrules/password/component/addon-mod-quiz-access-password.html
+++ b/src/addons/mod/quiz/accessrules/password/component/addon-mod-quiz-access-password.html
@@ -6,7 +6,7 @@
 </ion-item>
 <ion-item [formGroup]="form">
     <ion-label class="sr-only">{{ 'addon.mod_quiz.quizpassword' | translate }}</ion-label>
-    <core-show-password [name]="'quizpassword'">
+    <core-show-password name="quizpassword">
         <ion-input id="addon-mod_quiz-accessrule-password-input" name="quizpassword" type="password"
             placeholder="{{ 'addon.mod_quiz.quizpassword' | translate }}" [formControlName]="'quizpassword'" [clearOnEdit]="false" />
     </core-show-password>
diff --git a/src/addons/mod/scorm/components/index/addon-mod-scorm-index.html b/src/addons/mod/scorm/components/index/addon-mod-scorm-index.html
index 6e3e06fa42f..36b05044be6 100644
--- a/src/addons/mod/scorm/components/index/addon-mod-scorm-index.html
+++ b/src/addons/mod/scorm/components/index/addon-mod-scorm-index.html
@@ -110,10 +110,10 @@ <h3 class="item-heading">{{'core.grades.grades' | translate}}</h3>
             </ion-card-header>
             <ion-list>
                 <ion-item class="ion-text-wrap" *ngIf="organizations.length > 1">
-                    <ion-label>{{ 'addon.mod_scorm.organizations' | translate }}</ion-label>
                     <ion-select [(ngModel)]="currentOrganization.identifier" (ionChange)="loadOrganization()"
                         [cancelText]="'core.cancel' | translate" interface="action-sheet"
                         [interfaceOptions]="{header: 'addon.mod_scorm.organizations' | translate}">
+                        <p class="item-heading" slot="label">{{ 'addon.mod_scorm.organizations' | translate }}</p>
                         <ion-select-option *ngFor="let org of organizations" [value]="org.identifier">
                             {{ org.title }}
                         </ion-select-option>
@@ -182,8 +182,9 @@ <h3 class="item-heading">{{'core.grades.grades' | translate}}</h3>
                 <ng-container *ngIf="!downloading && !skip">
                     <!-- Create new attempt -->
                     <ion-item class="ion-text-wrap" *ngIf="!scorm.forcenewattempt && numAttempts > 0 && !incomplete && attemptsLeft > 0">
-                        <ion-label>{{ 'addon.mod_scorm.newattempt' | translate }}</ion-label>
-                        <ion-checkbox slot="end" name="newAttempt" [(ngModel)]="startNewAttempt" />
+                        <ion-checkbox name="newAttempt" [(ngModel)]="startNewAttempt">
+                            {{ 'addon.mod_scorm.newattempt' | translate }}
+                        </ion-checkbox>
                     </ion-item>
 
                     <ion-item *ngIf="statusMessage">
diff --git a/src/addons/mod/survey/components/index/addon-mod-survey-index.html b/src/addons/mod/survey/components/index/addon-mod-survey-index.html
index 3ef172a082e..a87a031277f 100644
--- a/src/addons/mod/survey/components/index/addon-mod-survey-index.html
+++ b/src/addons/mod/survey/components/index/addon-mod-survey-index.html
@@ -101,12 +101,12 @@ <h3 class="ion-padding-horizontal" [class.ion-padding-top]="questionIndex === 1"
                     </ion-row>
 
                     <ion-item *ngIf="question.type === 0" class="ion-text-wrap" [class.even]="isEven">
-                        <ion-label position="floating">
-                            <span [core-mark-required]="question.required">
+                        <ion-textarea labelPlacement="floating" [(ngModel)]="answers[question.name]" [name]="question.name"
+                            [required]="question.required">
+                            <p slot="label" [core-mark-required]="question.required">
                                 <strong>{{question.num}}.</strong> {{ question.text }}
-                            </span>
-                        </ion-label>
-                        <ion-textarea [(ngModel)]="answers[question.name]" [name]="question.name" [required]="question.required" />
+                            </p>
+                        </ion-textarea>
                     </ion-item>
                 </ng-container>
 
diff --git a/src/addons/mod/wiki/pages/edit/edit.html b/src/addons/mod/wiki/pages/edit/edit.html
index fb07e5de514..743e3e1a12b 100644
--- a/src/addons/mod/wiki/pages/edit/edit.html
+++ b/src/addons/mod/wiki/pages/edit/edit.html
@@ -20,8 +20,8 @@ <h1>
     <core-loading [hideUntil]="loaded">
         <form [formGroup]="pageForm" #editPageForm *ngIf="loaded">
             <ion-item class="ion-text-wrap" *ngIf="canEditTitle">
-                <ion-label class="sr-only">{{ 'addon.mod_wiki.newpagetitle' | translate }}</ion-label>
-                <ion-input name="title" type="text" [placeholder]="'addon.mod_wiki.newpagetitle' | translate" formControlName="title" />
+                <ion-input [attr.aria-label]="'addon.mod_wiki.newpagetitle' | translate" name="title" type="text"
+                    [placeholder]="'addon.mod_wiki.newpagetitle' | translate" formControlName="title" />
             </ion-item>
 
             <ion-item>
diff --git a/src/addons/mod/workshop/assessment/accumulative/component/addon-mod-workshop-assessment-strategy-accumulative.html b/src/addons/mod/workshop/assessment/accumulative/component/addon-mod-workshop-assessment-strategy-accumulative.html
index 2663902c3fd..5db1fd7d420 100644
--- a/src/addons/mod/workshop/assessment/accumulative/component/addon-mod-workshop-assessment-strategy-accumulative.html
+++ b/src/addons/mod/workshop/assessment/accumulative/component/addon-mod-workshop-assessment-strategy-accumulative.html
@@ -7,14 +7,12 @@ <h2>{{ field.dimtitle }}</h2>
             </ion-label>
         </ion-item>
         <ion-item *ngIf="edit && field.grades">
-            <ion-label position="stacked">
-                <span [core-mark-required]="true">
+            <ion-select labelPlacement="stacked" [(ngModel)]="selectedValues[n].grade" [cancelText]="'core.cancel' | translate"
+                interface="action-sheet" [interfaceOptions]="{header: 'addon.mod_workshop_assessment_accumulative.dimensiongradefor' |
+                    translate : {'$a': field.dimtitle }}">
+                <div [core-mark-required]="true" slot="label">
                     {{ 'addon.mod_workshop_assessment_accumulative.dimensiongradefor' | translate : {'$a': field.dimtitle } }}
-                </span>
-            </ion-label>
-            <ion-select [interfaceOptions]="{header: 'addon.mod_workshop_assessment_accumulative.dimensiongradefor' |
-                    translate : {'$a': field.dimtitle }}" [(ngModel)]="selectedValues[n].grade" [cancelText]="'core.cancel' | translate"
-                interface="action-sheet">
+                </div>
                 <ion-select-option *ngFor="let grade of field.grades" [value]="grade.value">{{grade.label}}</ion-select-option>
             </ion-select>
             <core-input-errors *ngIf="fieldErrors['grade_' + n]" [errorText]="fieldErrors['grade_' + n]" />
@@ -29,10 +27,9 @@ <h2>{{ field.dimtitle }}</h2>
             </ion-label>
         </ion-item>
         <ion-item *ngIf="edit">
-            <ion-label position="stacked">
-                {{ 'addon.mod_workshop_assessment_accumulative.dimensioncommentfor' | translate : {'$a': field.dimtitle } }}
-            </ion-label>
-            <ion-textarea [(ngModel)]="selectedValues[n].peercomment" [core-auto-rows]="selectedValues[n].peercomment" />
+            <ion-textarea labelPlacement="stacked" [(ngModel)]="selectedValues[n].peercomment"
+                [core-auto-rows]="selectedValues[n].peercomment"
+                [label]=" 'addon.mod_workshop_assessment_accumulative.dimensioncommentfor' | translate : {'$a': field.dimtitle }" />
         </ion-item>
         <ion-item *ngIf="!edit" class="ion-text-wrap">
             <ion-label>
diff --git a/src/addons/mod/workshop/assessment/comments/component/addon-mod-workshop-assessment-strategy-comments.html b/src/addons/mod/workshop/assessment/comments/component/addon-mod-workshop-assessment-strategy-comments.html
index 8097e372e20..2bf9dbea806 100644
--- a/src/addons/mod/workshop/assessment/comments/component/addon-mod-workshop-assessment-strategy-comments.html
+++ b/src/addons/mod/workshop/assessment/comments/component/addon-mod-workshop-assessment-strategy-comments.html
@@ -7,12 +7,12 @@ <h2>{{ field.dimtitle }}</h2>
             </ion-label>
         </ion-item>
         <ion-item *ngIf="edit">
-            <ion-label position="stacked">
-                <span [core-mark-required]="true">
+            <ion-textarea labelPlacement="stacked" [(ngModel)]="selectedValues[n].peercomment"
+                [core-auto-rows]="selectedValues[n].peercomment">
+                <div [core-mark-required]="true" slot="label">
                     {{ 'addon.mod_workshop_assessment_comments.dimensioncommentfor' | translate : {'$a': field.dimtitle } }}
-                </span>
-            </ion-label>
-            <ion-textarea [(ngModel)]="selectedValues[n].peercomment" [core-auto-rows]="selectedValues[n].peercomment" />
+                </div>
+            </ion-textarea>
             <core-input-errors *ngIf="fieldErrors['peercomment_' + n]" [errorText]="fieldErrors['peercomment_' + n]" />
         </ion-item>
         <ion-item *ngIf="!edit" class="ion-text-wrap">
diff --git a/src/addons/mod/workshop/assessment/numerrors/component/addon-mod-workshop-assessment-strategy-numerrors.html b/src/addons/mod/workshop/assessment/numerrors/component/addon-mod-workshop-assessment-strategy-numerrors.html
index 8d79ddd4313..bcabefad5eb 100644
--- a/src/addons/mod/workshop/assessment/numerrors/component/addon-mod-workshop-assessment-strategy-numerrors.html
+++ b/src/addons/mod/workshop/assessment/numerrors/component/addon-mod-workshop-assessment-strategy-numerrors.html
@@ -10,32 +10,28 @@ <h2>{{ field.dimtitle }}</h2>
             <ion-radio-group [(ngModel)]="selectedValues[n].grade" [name]="'grade_' + n">
                 <ion-item>
                     <ion-label position="stacked">
-                        <span [core-mark-required]="edit">
+                        <p [core-mark-required]="edit">
                             {{ 'addon.mod_workshop.yourassessmentfor' | translate : {'$a': field.dimtitle } }}
-                        </span>
+                        </p>
                     </ion-label>
                     <core-input-errors *ngIf="edit && fieldErrors['grade_' + n]" [errorText]="fieldErrors['grade_' + n]" />
                 </ion-item>
                 <ion-item>
-                    <ion-label>
+                    <ion-radio [value]="-1" [disabled]="!edit" labelPlacement="end" justify="start">
                         <core-format-text [text]="field.grade0" [filter]="false" />
-                    </ion-label>
-                    <ion-radio slot="start" [value]="-1" [disabled]="!edit" />
+                    </ion-radio>
                 </ion-item>
                 <ion-item>
-                    <ion-label>
+                    <ion-radio [value]="1" [disabled]="!edit" labelPlacement="end" justify="start">
                         <core-format-text [text]="field.grade1" [filter]="false" />
-                    </ion-label>
-                    <ion-radio slot="start" [value]="1" [disabled]="!edit" />
+                    </ion-radio>
                 </ion-item>
             </ion-radio-group>
         </ion-list>
         <ion-item *ngIf="edit">
-            <ion-label position="stacked">
-                {{ 'addon.mod_workshop_assessment_numerrors.dimensioncommentfor' | translate : {'$a': field.dimtitle } }}
-            </ion-label>
-            <ion-textarea [(ngModel)]="selectedValues[n].peercomment" [name]="'peercomment_' + n"
-                [core-auto-rows]="selectedValues[n].peercomment" />
+            <ion-textarea labelPlacement="stacked" [(ngModel)]="selectedValues[n].peercomment" [name]="'peercomment_' + n"
+                [core-auto-rows]="selectedValues[n].peercomment"
+                [label]="'addon.mod_workshop_assessment_numerrors.dimensioncommentfor' | translate : {'$a': field.dimtitle }" />
         </ion-item>
         <ion-item *ngIf="!edit" class="ion-text-wrap">
             <ion-label>
diff --git a/src/addons/mod/workshop/assessment/rubric/component/addon-mod-workshop-assessment-strategy-rubric.html b/src/addons/mod/workshop/assessment/rubric/component/addon-mod-workshop-assessment-strategy-rubric.html
index a9673c651ac..65bf993fa7b 100644
--- a/src/addons/mod/workshop/assessment/rubric/component/addon-mod-workshop-assessment-strategy-rubric.html
+++ b/src/addons/mod/workshop/assessment/rubric/component/addon-mod-workshop-assessment-strategy-rubric.html
@@ -10,13 +10,12 @@ <h2 [core-mark-required]="edit">{{ field.dimtitle }}</h2>
         <ion-list>
             <ion-radio-group [(ngModel)]="selectedValues[n].chosenlevelid" [name]="'chosenlevelid_' + n">
                 <ion-item *ngFor="let subfield of field.fields">
-                    <ion-label>
+                    <ion-radio [value]="subfield.levelid" [disabled]="!edit" labelPlacement="end" justify="start">
                         <p>
                             <core-format-text [text]="subfield.definition" contextLevel="module" [contextInstanceId]="moduleId"
                                 [courseId]="courseId" />
                         </p>
-                    </ion-label>
-                    <ion-radio slot="start" [value]="subfield.levelid" [disabled]="!edit" />
+                    </ion-radio>
                 </ion-item>
             </ion-radio-group>
         </ion-list>
diff --git a/src/addons/mod/workshop/components/assessment-strategy/addon-mod-workshop-assessment-strategy.html b/src/addons/mod/workshop/components/assessment-strategy/addon-mod-workshop-assessment-strategy.html
index 1c08bfc0103..29f8f9f9a8c 100644
--- a/src/addons/mod/workshop/components/assessment-strategy/addon-mod-workshop-assessment-strategy.html
+++ b/src/addons/mod/workshop/components/assessment-strategy/addon-mod-workshop-assessment-strategy.html
@@ -21,7 +21,7 @@ <h2 class="ion-padding">{{ 'addon.mod_workshop.assessmentform' | translate }}</h
                     <h3 class="item-heading">{{ 'addon.mod_workshop.overallfeedback' | translate }}</h3>
                 </ion-label>
             </ion-item>
-            <ion-item position="stacked" *ngIf="edit">
+            <ion-item *ngIf="edit">
                 <ion-label position="stacked">
                     <span [core-mark-required]="overallFeedkbackRequired">
                         {{ 'addon.mod_workshop.feedbackauthor' | translate }}
@@ -37,13 +37,12 @@ <h3 class="item-heading">{{ 'addon.mod_workshop.overallfeedback' | translate }}<
                 [maxSize]="workshop.overallfeedbackmaxbytes" [maxSubmissions]="workshop.overallfeedbackfiles" [component]="component"
                 [componentId]="componentId" [allowOffline]="true" [courseId]="workshop.course" />
             <ion-item *ngIf="edit && access && access.canallocate">
-                <ion-label position="stacked">
-                    <span [core-mark-required]="true">
-                        {{ 'addon.mod_workshop.assessmentweight' | translate }}
-                    </span>
-                </ion-label>
-                <ion-select [(ngModel)]="weight" interface="action-sheet" name="weight" [cancelText]="'core.cancel' | translate"
+                <ion-select labelPlacement="stacked" [(ngModel)]="weight" interface="action-sheet" name="weight"
+                    [cancelText]="'core.cancel' | translate"
                     [interfaceOptions]="{header: 'addon.mod_workshop.assessmentweight' | translate}">
+                    <div [core-mark-required]="true" slot="label">
+                        {{ 'addon.mod_workshop.assessmentweight' | translate }}
+                    </div>
                     <ion-select-option *ngFor="let w of weights" [value]="w">{{w}}</ion-select-option>
                 </ion-select>
             </ion-item>
diff --git a/src/addons/mod/workshop/pages/assessment/assessment.html b/src/addons/mod/workshop/pages/assessment/assessment.html
index 3a385db0519..c835afd7a4f 100644
--- a/src/addons/mod/workshop/pages/assessment/assessment.html
+++ b/src/addons/mod/workshop/pages/assessment/assessment.html
@@ -58,13 +58,12 @@ <h3 class="item-heading">{{ 'addon.mod_workshop.assessmentsettings' | translate
                 </ion-label>
             </ion-item>
             <ion-item class="ion-text-wrap" *ngIf="access?.canallocate">
-                <ion-label position="stacked">
-                    <span core-mark-required="true">
-                        {{ 'addon.mod_workshop.assessmentweight' | translate }}
-                    </span>
-                </ion-label>
-                <ion-select formControlName="weight" required="true" interface="action-sheet" [cancelText]="'core.cancel' | translate"
+                <ion-select labelPlacement="stacked" formControlName="weight" required="true" interface="action-sheet"
+                    [cancelText]="'core.cancel' | translate"
                     [interfaceOptions]="{header: 'addon.mod_workshop.assessmentweight' | translate}">
+                    <div [core-mark-required]="true" slot="label">
+                        {{ 'addon.mod_workshop.assessmentweight' | translate }}
+                    </div>
                     <ion-select-option *ngFor="let w of weights" [value]="w">{{ w }}</ion-select-option>
                 </ion-select>
             </ion-item>
@@ -75,9 +74,10 @@ <h3 class="item-heading">{{ 'addon.mod_workshop.gradinggradecalculated' | transl
                 </ion-label>
             </ion-item>
             <ion-item class="ion-text-wrap" *ngIf="access?.canoverridegrades">
-                <ion-label position="stacked">{{ 'addon.mod_workshop.gradinggradeover' | translate }}</ion-label>
-                <ion-select formControlName="grade" interface="action-sheet" [cancelText]="'core.cancel' | translate"
-                    [interfaceOptions]="{header: 'addon.mod_workshop.gradinggradeover' | translate}">
+                <ion-select labelPlacement="stacked" formControlName="grade" interface="action-sheet"
+                    [cancelText]="'core.cancel' | translate"
+                    [interfaceOptions]="{header: 'addon.mod_workshop.gradinggradeover' | translate}"
+                    [label]="'addon.mod_workshop.gradinggradeover' | translate">
                     <ion-select-option *ngFor="let grade of evaluationGrades" [value]="grade.value">
                         {{grade.label}}
                     </ion-select-option>
diff --git a/src/addons/mod/workshop/pages/edit-submission/edit-submission.html b/src/addons/mod/workshop/pages/edit-submission/edit-submission.html
index c28b405f8f7..5c88ef4d278 100644
--- a/src/addons/mod/workshop/pages/edit-submission/edit-submission.html
+++ b/src/addons/mod/workshop/pages/edit-submission/edit-submission.html
@@ -17,20 +17,19 @@ <h1>{{ 'addon.mod_workshop.editsubmission' | translate }}</h1>
     <core-loading [hideUntil]="loaded">
         <form [formGroup]="editForm" *ngIf="workshop" #editFormEl>
             <ion-item class="ion-text-wrap">
-                <ion-label position="stacked">
-                    <span core-mark-required="true">
+                <ion-input labelPlacement="stacked" name="title" type="text"
+                    [placeholder]="'addon.mod_workshop.submissiontitle' | translate" formControlName="title">
+                    <div [core-mark-required]="true" slot="label">
                         {{ 'addon.mod_workshop.submissiontitle' | translate }}
-                    </span>
-                </ion-label>
-                <ion-input name="title" type="text" [placeholder]="'addon.mod_workshop.submissiontitle' | translate"
-                    formControlName="title" />
+                    </div>
+                </ion-input>
             </ion-item>
 
             <ion-item *ngIf="textAvailable">
                 <ion-label position="stacked">
-                    <span [core-mark-required]="textRequired">
+                    <div [core-mark-required]="textRequired">
                         {{ 'addon.mod_workshop.submissioncontent' | translate }}
-                    </span>
+                    </div>
                 </ion-label>
                 <core-rich-text-editor [control]="editForm.controls['content']" name="content"
                     [placeholder]="'addon.mod_workshop.submissioncontent' | translate" [component]="component" [componentId]="componentId"
diff --git a/src/addons/mod/workshop/pages/submission/submission.html b/src/addons/mod/workshop/pages/submission/submission.html
index ecb28c9a188..12c87873002 100644
--- a/src/addons/mod/workshop/pages/submission/submission.html
+++ b/src/addons/mod/workshop/pages/submission/submission.html
@@ -100,11 +100,10 @@ <h3 class="item-heading">{{ 'addon.mod_workshop.feedbackauthor' | translate }}</
                 </ion-label>
             </ion-item>
             <ion-item class="ion-text-wrap" *ngIf="access.canpublishsubmissions">
-                <ion-label>
+                <ion-toggle formControlName="published">
                     <p class="item-heading">{{ 'addon.mod_workshop.publishsubmission' | translate }}</p>
                     <p>{{ 'addon.mod_workshop.publishsubmission_help' | translate }}</p>
-                </ion-label>
-                <ion-toggle formControlName="published" slot="end" />
+                </ion-toggle>
             </ion-item>
 
             <ion-item class="ion-text-wrap">
@@ -114,9 +113,9 @@ <h3 class="item-heading">{{ 'addon.mod_workshop.gradecalculated' | translate }}<
                 </ion-label>
             </ion-item>
             <ion-item class="ion-text-wrap">
-                <ion-label position="stacked">{{ 'addon.mod_workshop.gradeover' | translate }}</ion-label>
-                <ion-select formControlName="grade" interface="action-sheet" [cancelText]="'core.cancel' | translate"
-                    [interfaceOptions]="{header: 'addon.mod_workshop.gradeover' | translate}">
+                <ion-select labelPlacement="stacked" formControlName="grade" interface="action-sheet"
+                    [cancelText]="'core.cancel' | translate" [interfaceOptions]="{header: 'addon.mod_workshop.gradeover' | translate}"
+                    [label]="'addon.mod_workshop.gradeover' | translate">
                     <ion-select-option *ngFor="let grade of evaluationGrades" [value]="grade.value">
                         {{grade.label}}
                     </ion-select-option>
diff --git a/src/addons/notes/components/add/add-modal.html b/src/addons/notes/components/add/add-modal.html
index f806e1b4e17..e247a4fb28f 100644
--- a/src/addons/notes/components/add/add-modal.html
+++ b/src/addons/notes/components/add/add-modal.html
@@ -13,16 +13,15 @@ <h1>{{ 'addon.notes.addnewnote' | translate }}</h1>
 <ion-content>
     <form name="itemEdit" (ngSubmit)="addNote($event)" #itemEdit>
         <ion-item>
-            <ion-label>{{ 'addon.notes.publishstate' | translate }}</ion-label>
-            <ion-select [(ngModel)]="type" name="publishState" interface="popover">
-                <ion-select-option value="personal">{{ 'addon.notes.personalnotes' | translate }}</ion-select-option>
+            <ion-select [(ngModel)]="type" name="publishState" interface="popover" [label]="'addon.notes.publishstate' | translate">
+                <ion-select-option value=" personal">{{ 'addon.notes.personalnotes' | translate }}</ion-select-option>
                 <ion-select-option value="course">{{ 'addon.notes.coursenotes' | translate }}</ion-select-option>
                 <ion-select-option value="site">{{ 'addon.notes.sitenotes' | translate }}</ion-select-option>
             </ion-select>
         </ion-item>
         <ion-item>
-            <ion-label class="sr-only">{{ 'addon.notes.note' | translate }}</ion-label>
-            <ion-textarea placeholder="{{ 'addon.notes.note' | translate }}" rows="5" [(ngModel)]="text" name="text" required="required" />
+            <ion-textarea [attr.aria-label]="'addon.notes.note' | translate" placeholder="{{ 'addon.notes.note' | translate }}" rows="5"
+                [(ngModel)]="text" name="text" required="required" />
         </ion-item>
         <div class="ion-padding">
             <ion-button expand="block" type="submit" [disabled]="processing || text.length < 2">
diff --git a/src/addons/notifications/pages/settings/settings.html b/src/addons/notifications/pages/settings/settings.html
index 16d12064c87..0348dcf1c03 100644
--- a/src/addons/notifications/pages/settings/settings.html
+++ b/src/addons/notifications/pages/settings/settings.html
@@ -22,26 +22,22 @@ <h1>{{ 'addon.notifications.notifications' | translate }}</h1>
     <core-loading [hideUntil]="preferencesLoaded">
         <ion-card>
             <ion-item class="ion-text-wrap" *ngIf="preferences">
-                <ion-label>
+                <ion-toggle [(ngModel)]="preferences.enableall" (ngModelChange)="enableAll(preferences.enableall)">
                     <p class="item-heading">{{ 'addon.notifications.allownotifications' | translate }}</p>
-                </ion-label>
-                <ion-toggle [(ngModel)]="preferences.enableall" (ngModelChange)="enableAll(preferences.enableall)" slot="end" />
+                </ion-toggle>
             </ion-item>
             <ion-item class="ion-text-wrap" *ngIf="canChangeSound">
-                <ion-label>
+                <ion-toggle [(ngModel)]="notificationSound" (ngModelChange)="changeNotificationSound(notificationSound)">
                     <p class="item-heading">{{ 'addon.notifications.playsound' | translate }}</p>
-                </ion-label>
-                <ion-toggle [(ngModel)]="notificationSound" (ngModelChange)="changeNotificationSound(notificationSound)" slot="end" />
+                </ion-toggle>
             </ion-item>
         </ion-card>
 
         <ion-card>
-            <ion-item class="ion-text-wrap only-links" *ngIf="preferences?.processors?.length" lines="none" [button]="false">
-                <ion-label class="addon-notification-type-form">
-                    <p class="item-heading">{{ 'addon.notifications.typeofnotification' | translate }}</p>
-                </ion-label>
+            <ion-item class="ion-text-wrap addon-notification-type-form" *ngIf="preferences?.processors?.length" lines="none">
                 <!-- Show processor selector. -->
                 <ion-select [(ngModel)]="currentProcessorName" (ionChange)="changeProcessor($event)" interface="popover">
+                    <p class="item-heading" slot="label">{{ 'addon.notifications.typeofnotification' | translate }}</p>
                     <ion-select-option class="ion-text-wrap" *ngFor="let processor of preferences?.processors" [value]="processor.name">
                         {{ processor.displayname }}
                     </ion-select-option>
diff --git a/src/addons/qbehaviour/deferredcbm/component/addon-qbehaviour-deferredcbm.html b/src/addons/qbehaviour/deferredcbm/component/addon-qbehaviour-deferredcbm.html
index a410718781c..36dc18ff1fc 100644
--- a/src/addons/qbehaviour/deferredcbm/component/addon-qbehaviour-deferredcbm.html
+++ b/src/addons/qbehaviour/deferredcbm/component/addon-qbehaviour-deferredcbm.html
@@ -7,8 +7,9 @@
 
     <ion-radio-group [(ngModel)]="question.behaviourCertaintySelected" [name]="question.behaviourCertaintyOptions[0].name">
         <ion-item class="ion-text-wrap" *ngFor="let option of question.behaviourCertaintyOptions">
-            <ion-label>{{ option.text }}</ion-label>
-            <ion-radio slot="end" id="{{option.id}}" [value]="option.value" [disabled]="option.disabled" />
+            <ion-radio id="{{option.id}}" [value]="option.value" [disabled]="option.disabled">
+                {{ option.text }}
+            </ion-radio>
         </ion-item>
     </ion-radio-group>
 
diff --git a/src/addons/qtype/calculated/component/addon-qtype-calculated.html b/src/addons/qtype/calculated/component/addon-qtype-calculated.html
index bb5fb9136b1..9767e13cc31 100644
--- a/src/addons/qtype/calculated/component/addon-qtype-calculated.html
+++ b/src/addons/qtype/calculated/component/addon-qtype-calculated.html
@@ -12,18 +12,16 @@
     </ng-container>
 
     <ion-item *ngIf="question.input" class="ion-text-wrap core-{{question.input.correctIconColor}}-item">
-        <ion-label position="stacked">{{ 'addon.mod_quiz.answercolon' | translate }}</ion-label>
-
-        <div class="flex-row">
+        <div class="flex-row ion-align-items-end">
             <!-- Display unit select before the answer input. -->
             <ng-container *ngIf="question.select && question.selectFirst">
                 <ng-container *ngTemplateOutlet="selectUnits" />
             </ng-container>
 
             <!-- Input to enter the answer. -->
-            <ion-input type="text" [attr.name]="question.input.name"
+            <ion-input labelPlacement="stacked" type="text" [attr.name]="question.input.name"
                 [placeholder]="question.input.readOnly ? '' : 'core.question.answer' | translate" [value]="question.input.value"
-                [disabled]="question.input.readOnly" autocorrect="off" />
+                [disabled]="question.input.readOnly" autocorrect="off" [label]="'addon.mod_quiz.answercolon' | translate" />
 
             <!-- Display unit select after the answer input. -->
             <ng-container *ngIf="question.select && !question.selectFirst">
@@ -58,9 +56,10 @@
 <ng-template #radioUnits>
     <ion-radio-group [(ngModel)]="question!.unit" [name]="question!.optionsName">
         <ion-item class="ion-text-wrap" *ngFor="let option of question!.options">
-            <ion-label>{{ option.text }}</ion-label>
-            <ion-radio slot="end" [value]="option.value" [disabled]="option.disabled || question!.input?.readOnly"
-                [color]="question!.input?.correctIconColor" />
+            <ion-radio [value]="option.value" [disabled]="option.disabled || question!.input?.readOnly"
+                [color]="question!.input?.correctIconColor">
+                {{ option.text }}
+            </ion-radio>
         </ion-item>
 
         <!-- ion-radio doesn't use an input. Create a hidden input to hold the selected value. -->
diff --git a/src/addons/qtype/calculated/component/calculated.scss b/src/addons/qtype/calculated/component/calculated.scss
new file mode 100644
index 00000000000..da82b85528d
--- /dev/null
+++ b/src/addons/qtype/calculated/component/calculated.scss
@@ -0,0 +1,3 @@
+.flex-row {
+    width: 100%;
+}
diff --git a/src/addons/qtype/calculated/component/calculated.ts b/src/addons/qtype/calculated/component/calculated.ts
index 4fb301733f1..18c06481967 100644
--- a/src/addons/qtype/calculated/component/calculated.ts
+++ b/src/addons/qtype/calculated/component/calculated.ts
@@ -22,6 +22,7 @@ import { AddonModQuizCalculatedQuestion, CoreQuestionBaseComponent } from '@feat
 @Component({
     selector: 'addon-qtype-calculated',
     templateUrl: 'addon-qtype-calculated.html',
+    styleUrls: ['calculated.scss'],
 })
 export class AddonQtypeCalculatedComponent extends CoreQuestionBaseComponent<AddonModQuizCalculatedQuestion> {
 
diff --git a/src/addons/qtype/essay/component/addon-qtype-essay.html b/src/addons/qtype/essay/component/addon-qtype-essay.html
index 452f716f84d..b3c8b906f6b 100644
--- a/src/addons/qtype/essay/component/addon-qtype-essay.html
+++ b/src/addons/qtype/essay/component/addon-qtype-essay.html
@@ -11,19 +11,18 @@
     <ng-container *ngIf="!review">
         <!-- Textarea. -->
         <ion-item *ngIf="question.textarea && (!question.hasDraftFiles || uploadFilesSupported)">
-            <ion-label class="sr-only">{{ 'core.question.answer' | translate }}</ion-label>
             <!-- "Format" and draftid hidden inputs -->
             <input *ngIf="question.formatInput" type="hidden" [name]="question.formatInput.name" [value]="question.formatInput.value">
             <input *ngIf="question.answerDraftIdInput" type="hidden" [name]="question.answerDraftIdInput.name"
                 [value]="question.answerDraftIdInput.value">
             <!-- Plain text textarea. -->
-            <ion-textarea *ngIf="question.isPlainText" class="core-question-textarea" [ngClass]='{"core-monospaced": question.isMonospaced}'
-                placeholder="{{ 'core.question.answer' | translate }}" [attr.name]="question.textarea.name"
-                [ngModel]="question.textarea.text" />
+            <ion-textarea *ngIf="question.isPlainText" [attr.aria-label]="'core.question.answer' | translate" class="core-question-textarea"
+                [ngClass]='{"core-monospaced": question.isMonospaced}' placeholder="{{ 'core.question.answer' | translate }}"
+                [attr.name]="question.textarea.name" [ngModel]="question.textarea.text" />
             <!-- Rich text editor. -->
-            <core-rich-text-editor *ngIf="!question.isPlainText" placeholder="{{ 'core.question.answer' | translate }}"
-                [control]="formControl" [name]="question.textarea.name" [component]="component" [componentId]="componentId"
-                [autoSave]="false" />
+            <core-rich-text-editor *ngIf="!question.isPlainText" [attr.aria-label]="'core.question.answer' | translate"
+                placeholder="{{ 'core.question.answer' | translate }}" [control]="formControl" [name]="question.textarea.name"
+                [component]="component" [componentId]="componentId" [autoSave]="false" />
         </ion-item>
 
         <!-- Draft files not supported. -->
diff --git a/src/addons/qtype/match/component/addon-qtype-match.html b/src/addons/qtype/match/component/addon-qtype-match.html
index 28b81e9d501..cec385a0ba0 100644
--- a/src/addons/qtype/match/component/addon-qtype-match.html
+++ b/src/addons/qtype/match/component/addon-qtype-match.html
@@ -6,17 +6,17 @@
         </ion-label>
     </ion-item>
     <ion-item class="ion-text-wrap" *ngFor="let row of question.rows">
-        <ion-label>
-            <core-format-text id="addon-qtype-match-question-{{row.id}}" [component]="component" [componentId]="componentId"
-                [text]="row.text" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
-            <label class="accesshide" for="{{row.id}}" *ngIf="row.accessibilityLabel">
-                {{ row.accessibilityLabel }}
-            </label>
-        </ion-label>
-        <ion-select id="{{row.id}}" [name]="row.name" [(ngModel)]="row.selected" interface="action-sheet"
-            [attr.aria-labelledby]="'addon-qtype-match-question-' + row.id" [disabled]="row.disabled"
+
+        <ion-select id="{{row.id}}" [name]="row.name" [(ngModel)]="row.selected" interface="action-sheet" [disabled]="row.disabled"
             [cancelText]="'core.cancel' | translate"
             [ngClass]="{'addon-qtype-match-correct': row.isCorrect === 1,'addon-qtype-match-incorrect': row.isCorrect === 0}">
+            <div slot="label">
+                <core-format-text [component]="component" [componentId]="componentId" [text]="row.text" [contextLevel]="contextLevel"
+                    [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
+                <label class="accesshide" for="{{row.id}}" *ngIf="row.accessibilityLabel">
+                    {{ row.accessibilityLabel }}
+                </label>
+            </div>
             <ion-select-option *ngFor="let option of row.options" [value]="option.value">
                 {{option.label}}
             </ion-select-option>
diff --git a/src/addons/qtype/multichoice/component/addon-qtype-multichoice.html b/src/addons/qtype/multichoice/component/addon-qtype-multichoice.html
index a6b5d868fed..c5daf7e3d0c 100644
--- a/src/addons/qtype/multichoice/component/addon-qtype-multichoice.html
+++ b/src/addons/qtype/multichoice/component/addon-qtype-multichoice.html
@@ -16,21 +16,21 @@
     <!-- Checkbox for multiple choice. -->
     <ng-container *ngIf="question.multi">
         <ion-item class="ion-text-wrap answer" *ngFor="let option of question.options">
-            <ion-label [color]='(option.isCorrect === 1 ? "success": "") + (option.isCorrect === 0 ? "danger": "")' [class]="option.class">
-                <core-format-text [component]="component" [componentId]="componentId" [text]="option.text" [contextLevel]="contextLevel"
-                    [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
-                <div *ngIf="option.feedback" class="specificfeedback">
-                    <core-format-text [component]="component" [componentId]="componentId" [text]="option.feedback"
-                        [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
+            <ion-checkbox [attr.name]="option.name" [(ngModel)]="option.checked" [disabled]="option.disabled"
+                [color]='(option.isCorrect === 1 ? "success": "") + (option.isCorrect === 0 ? "danger": "")'>
+                <div [class]="option.class">
+                    <core-format-text [component]="component" [componentId]="componentId" [text]="option.text" [contextLevel]="contextLevel"
+                        [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
+                    <div *ngIf="option.feedback" class="specificfeedback">
+                        <core-format-text [component]="component" [componentId]="componentId" [text]="option.feedback"
+                            [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
+                    </div>
                 </div>
-            </ion-label>
-
-            <ion-checkbox slot="end" [attr.name]="option.name" [(ngModel)]="option.checked" [disabled]="option.disabled"
-                [color]='(option.isCorrect === 1 ? "success": "") + (option.isCorrect === 0 ? "danger": "")' />
+            </ion-checkbox>
 
-            <ion-icon *ngIf="option.isCorrect === 1" class="core-correct-icon" name="fas-check" color="success"
+            <ion-icon slot="end" *ngIf="option.isCorrect === 1" class="core-correct-icon" name="fas-check" color="success"
                 [attr.aria-label]="'core.question.correct' | translate" />
-            <ion-icon *ngIf="option.isCorrect === 0" class="core-correct-icon" name="fas-xmark" color="danger"
+            <ion-icon slot="end" *ngIf="option.isCorrect === 0" class="core-correct-icon" name="fas-xmark" color="danger"
                 [attr.aria-label]="'core.question.incorrect' | translate" />
 
             <!-- ion-checkbox doesn't use an input. Create a hidden input to hold the value. -->
@@ -41,21 +41,21 @@
     <!-- Radio buttons for single choice. -->
     <ion-radio-group *ngIf="!question.multi" [(ngModel)]="question.singleChoiceModel" [name]="question.optionsName">
         <ion-item class="ion-text-wrap answer" *ngFor="let option of question.options">
-            <ion-label [class]="option.class">
-                <core-format-text [component]="component" [componentId]="componentId" [text]="option.text" [contextLevel]="contextLevel"
-                    [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
-                <div *ngIf="option.feedback" class="specificfeedback">
-                    <core-format-text [component]="component" [componentId]="componentId" [text]="option.feedback"
-                        [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
+            <ion-radio [value]="option.value" [disabled]="option.disabled"
+                [color]='(option.isCorrect === 1 ? "success": "") + (option.isCorrect === 0 ? "danger": "")'>
+                <div [class]="option.class">
+                    <core-format-text [component]="component" [componentId]="componentId" [text]="option.text" [contextLevel]="contextLevel"
+                        [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
+                    <div *ngIf="option.feedback" class="specificfeedback">
+                        <core-format-text [component]="component" [componentId]="componentId" [text]="option.feedback"
+                            [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" />
+                    </div>
                 </div>
-            </ion-label>
-
-            <ion-radio [value]="option.value" [disabled]="option.disabled" slot="end"
-                [color]='(option.isCorrect === 1 ? "success": "") + (option.isCorrect === 0 ? "danger": "")' />
+            </ion-radio>
 
-            <ion-icon *ngIf="option.isCorrect === 1" class="core-correct-icon" name="fas-check" color="success"
+            <ion-icon slot="end" *ngIf="option.isCorrect === 1" class="core-correct-icon" name="fas-check" color="success"
                 [attr.aria-label]="'core.question.correct' | translate" />
-            <ion-icon *ngIf="option.isCorrect === 0" class="core-correct-icon" name="fas-xmark" color="danger"
+            <ion-icon slot="end" *ngIf="option.isCorrect === 0" class="core-correct-icon" name="fas-xmark" color="danger"
                 [attr.aria-label]="'core.question.incorrect' | translate" />
         </ion-item>
         <ion-button *ngIf="!question.disabled" class="ion-text-wrap ion-margin-top" expand="block" fill="outline"
diff --git a/src/addons/qtype/shortanswer/component/addon-qtype-shortanswer.html b/src/addons/qtype/shortanswer/component/addon-qtype-shortanswer.html
index 5c65cee573e..ff6c2bf61d4 100644
--- a/src/addons/qtype/shortanswer/component/addon-qtype-shortanswer.html
+++ b/src/addons/qtype/shortanswer/component/addon-qtype-shortanswer.html
@@ -7,9 +7,9 @@
     </ion-item>
     <ion-item *ngIf="question.input && !question.input.isInline"
         class="ion-text-wrap addon-qtype-shortanswer-input core-{{question.input.correctIconColor}}-item">
-        <ion-label position="stacked">{{ 'addon.mod_quiz.answercolon' | translate }}</ion-label>
-        <ion-input type="text" [placeholder]="question.input.readOnly ? '' : 'core.question.answer' | translate"
-            [attr.name]="question.input.name" [value]="question.input.value" autocorrect="off" [disabled]="question.input.readOnly" />
+        <ion-input labelPlacement="stacked" type="text" [placeholder]="question.input.readOnly ? '' : 'core.question.answer' | translate"
+            [attr.name]="question.input.name" [value]="question.input.value" autocorrect="off" [disabled]="question.input.readOnly"
+            [label]="'addon.mod_quiz.answercolon' | translate" />
         <ion-icon *ngIf="question.input.correctIcon" class="core-correct-icon" slot="end" [name]="question.input.correctIcon"
             [color]="[question.input.correctIconColor]" />
     </ion-item>
diff --git a/src/addons/userprofilefield/checkbox/component/addon-user-profile-field-checkbox.html b/src/addons/userprofilefield/checkbox/component/addon-user-profile-field-checkbox.html
index f4a639077ac..5b8775019a2 100644
--- a/src/addons/userprofilefield/checkbox/component/addon-user-profile-field-checkbox.html
+++ b/src/addons/userprofilefield/checkbox/component/addon-user-profile-field-checkbox.html
@@ -16,12 +16,11 @@
 
 <!-- Edit. -->
 <ion-item *ngIf="edit && field && field.shortname && form" [formGroup]="form">
-    <ion-label>
-        <span class="label-text" [core-mark-required]="required">
+    <ion-checkbox [formControlName]="modelName" labelPlacement="start" justify="space-between">
+        <span [core-mark-required]="required">
             <core-format-text [text]="field.name" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId"
                 [courseId]="courseId" [wsNotFiltered]="true" />
         </span>
-        <core-input-errors [control]="form.controls[modelName]" />
-    </ion-label>
-    <ion-checkbox item-end [formControlName]="modelName" />
+    </ion-checkbox>
+    <core-input-errors [control]="form.controls[modelName]" />
 </ion-item>
diff --git a/src/addons/userprofilefield/menu/component/addon-user-profile-field-menu.html b/src/addons/userprofilefield/menu/component/addon-user-profile-field-menu.html
index 545f8938b22..d051d51cf47 100644
--- a/src/addons/userprofilefield/menu/component/addon-user-profile-field-menu.html
+++ b/src/addons/userprofilefield/menu/component/addon-user-profile-field-menu.html
@@ -14,14 +14,12 @@
 
 <!-- Edit. -->
 <ion-item *ngIf="edit && field && field.shortname && form" class="ion-text-wrap" [formGroup]="form">
-    <ion-label position="stacked">
-        <span [core-mark-required]="required">
+    <ion-select labelPlacement="stacked" [formControlName]="modelName" [placeholder]="'core.choosedots' | translate"
+        interface="action-sheet" [cancelText]="'core.cancel' | translate" [interfaceOptions]="{header: field.name}">
+        <div [core-mark-required]="required" slot="label">
             <core-format-text [text]="field.name" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId"
                 [courseId]="courseId" [wsNotFiltered]="true" />
-        </span>
-    </ion-label>
-    <ion-select [formControlName]="modelName" [placeholder]="'core.choosedots' | translate" interface="action-sheet"
-        [cancelText]="'core.cancel' | translate" [interfaceOptions]="{header: field.name}">
+        </div>
         <ion-select-option value="">{{ 'core.choosedots' | translate }}</ion-select-option>
         <ion-select-option *ngFor="let option of options" [value]="option">{{option}}</ion-select-option>
     </ion-select>
diff --git a/src/addons/userprofilefield/social/component/addon-user-profile-field-social.html b/src/addons/userprofilefield/social/component/addon-user-profile-field-social.html
index 8cffbf860fe..4a06329de63 100644
--- a/src/addons/userprofilefield/social/component/addon-user-profile-field-social.html
+++ b/src/addons/userprofilefield/social/component/addon-user-profile-field-social.html
@@ -14,12 +14,11 @@
 
 <!-- Edit. -->
 <ion-item *ngIf="edit && field && field.shortname && form" class="ion-text-wrap" [formGroup]="form">
-    <ion-label position="stacked">
-        <span [core-mark-required]="required">
+    <ion-input labelPlacement="stacked" type="text" [formControlName]="modelName" [placeholder]="field.name">
+        <div [core-mark-required]="required" slot="label">
             <core-format-text [text]="field.name" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId"
                 [courseId]="courseId" [wsNotFiltered]="true" />
-        </span>
-    </ion-label>
-    <ion-input type="text" [formControlName]="modelName" [placeholder]="field.name" />
+        </div>
+    </ion-input>
     <core-input-errors [control]="form.controls[modelName]" />
 </ion-item>
diff --git a/src/addons/userprofilefield/text/component/addon-user-profile-field-text.html b/src/addons/userprofilefield/text/component/addon-user-profile-field-text.html
index 123ac8566f0..8c5f3e1abd1 100644
--- a/src/addons/userprofilefield/text/component/addon-user-profile-field-text.html
+++ b/src/addons/userprofilefield/text/component/addon-user-profile-field-text.html
@@ -14,12 +14,12 @@
 
 <!-- Edit. -->
 <ion-item *ngIf="edit && field && field.shortname && form" class="ion-text-wrap" [formGroup]="form">
-    <ion-label position="stacked">
-        <span [core-mark-required]="required">
+    <ion-input labelPlacement="stacked" [type]="inputType" [formControlName]="modelName" [placeholder]="field.name"
+        maxlength="{{maxLength}}">
+        <div [core-mark-required]="required" slot="label">
             <core-format-text [text]="field.name" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId"
                 [courseId]="courseId" [wsNotFiltered]="true" />
-        </span>
-    </ion-label>
-    <ion-input [type]="inputType" [formControlName]="modelName" [placeholder]="field.name" maxlength="{{maxLength}}" />
+        </div>
+    </ion-input>
     <core-input-errors [control]="form.controls[modelName]" />
 </ion-item>
diff --git a/src/addons/userprofilefield/textarea/component/addon-user-profile-field-textarea.html b/src/addons/userprofilefield/textarea/component/addon-user-profile-field-textarea.html
index 6077c59902d..f56a7ecc9d4 100644
--- a/src/addons/userprofilefield/textarea/component/addon-user-profile-field-textarea.html
+++ b/src/addons/userprofilefield/textarea/component/addon-user-profile-field-textarea.html
@@ -19,8 +19,8 @@
             <core-format-text [text]="field.name" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId"
                 [courseId]="courseId" [wsNotFiltered]="true" />
         </span>
-        <core-input-errors [control]="control" />
     </ion-label>
     <core-rich-text-editor [control]="control" [placeholder]="field.name" [autoSave]="true" [contextLevel]="contextLevel"
         [contextInstanceId]="contextInstanceId" [elementId]="modelName" />
+    <core-input-errors [control]="control" />
 </ion-item>
diff --git a/src/core/components/group-selector/group-selector.html b/src/core/components/group-selector/group-selector.html
index 300db0750f2..d3904dac2cf 100644
--- a/src/core/components/group-selector/group-selector.html
+++ b/src/core/components/group-selector/group-selector.html
@@ -7,12 +7,9 @@
     </ion-card>
 
     <ion-item class="ion-text-wrap core-group-selector">
-        <ion-label>
-            <ng-container *ngIf="groupInfo.separateGroups">{{'core.groupsseparate' | translate }}</ng-container>
-            <ng-container *ngIf="groupInfo.visibleGroups">{{'core.groupsvisible' | translate }}</ng-container>
-        </ion-label>
-        <ion-select [(ngModel)]="selected" (ionChange)="selectedChange.emit(selected)" interface="action-sheet"
-            [cancelText]="'core.cancel' | translate" [interfaceOptions]="{header: 'core.group' | translate}">
+        <ion-select [label]="(groupInfo.separateGroups ? 'core.groupsseparate': 'core.groupsvisible')  | translate" [(ngModel)]=" selected"
+            (ionChange)="selectedChange.emit(selected)" interface="action-sheet" [cancelText]="'core.cancel' | translate"
+            [interfaceOptions]="{header: 'core.group' | translate}">
             <ion-select-option *ngFor="let group of groupInfo.groups" [value]=" group.id">
                 <core-format-text [text]="group.name" contextLevel="course" [contextInstanceId]="courseId" [wsNotFiltered]="true" />
             </ion-select-option>
diff --git a/src/core/components/input-errors/core-input-errors.html b/src/core/components/input-errors/core-input-errors.html
index 9bee393c364..ac6829dff64 100644
--- a/src/core/components/input-errors/core-input-errors.html
+++ b/src/core/components/input-errors/core-input-errors.html
@@ -1,16 +1,14 @@
-<div class="core-input-error-container" role="alert" *ngIf="(control && control.dirty && !control.valid) || errorText">
-    <ng-container *ngIf="control && control.dirty && !control.valid">
-        <ng-container *ngFor="let error of errorKeys">
-            <div *ngIf="control.hasError(error)" class="core-input-error">
-                <span *ngIf="errorMessages && errorMessages[error]">{{errorMessages[error]}}</span>
-                <span *ngIf="(!errorMessages || !errorMessages[error]) && error === 'max' && control.errors?.max">
-                    {{ 'core.login.invalidvaluemax' | translate:{$a: control.errors!.max.max} }}
-                </span>
-                <span *ngIf="(!errorMessages || !errorMessages[error]) && error === 'min' && control.errors?.min">
-                    {{ 'core.login.invalidvaluemin' | translate:{$a: control.errors!.min.min} }}
-                </span>
-            </div>
-        </ng-container>
+<ng-container *ngIf="control && control.dirty && !control.valid">
+    <ng-container *ngFor="let error of errorKeys">
+        <div *ngIf="control.hasError(error)" class="core-input-error">
+            <span *ngIf="errorMessages && errorMessages[error]">{{errorMessages[error]}}</span>
+            <span *ngIf="(!errorMessages || !errorMessages[error]) && error === 'max' && control.errors?.max">
+                {{ 'core.login.invalidvaluemax' | translate:{$a: control.errors!.max.max} }}
+            </span>
+            <span *ngIf="(!errorMessages || !errorMessages[error]) && error === 'min' && control.errors?.min">
+                {{ 'core.login.invalidvaluemin' | translate:{$a: control.errors!.min.min} }}
+            </span>
+        </div>
     </ng-container>
-    <div *ngIf="errorText" class="core-input-error" aria-live="assertive">{{ errorText }}</div>
-</div>
+</ng-container>
+<div *ngIf="errorText" class="core-input-error" aria-live="assertive">{{ errorText }}</div>
diff --git a/src/core/components/input-errors/input-errors.scss b/src/core/components/input-errors/input-errors.scss
index 0d73958b97a..aeb2e8fd223 100644
--- a/src/core/components/input-errors/input-errors.scss
+++ b/src/core/components/input-errors/input-errors.scss
@@ -1,17 +1,18 @@
 :host {
     display: contents;
-    .core-input-error-container {
+    &.has-errors {
+        display: block;
         width: 100%;
+    }
 
-        .core-input-error {
-            padding: 4px;
-            color: var(--danger);
-            font-size: 12px;
-            display: none;
+    .core-input-error {
+        padding: 4px;
+        color: var(--danger);
+        font-size: 12px;
+        display: none;
 
-            &:first-child {
-                display: block;
-            }
+        &:first-child {
+            display: block;
         }
     }
 }
diff --git a/src/core/components/input-errors/input-errors.ts b/src/core/components/input-errors/input-errors.ts
index 0458c7cc792..1178676491f 100644
--- a/src/core/components/input-errors/input-errors.ts
+++ b/src/core/components/input-errors/input-errors.ts
@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, Input, OnChanges, SimpleChange } from '@angular/core';
+import { Component, ElementRef, HostBinding, Input, OnChanges, OnInit, SimpleChange } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { Translate } from '@singletons';
 
@@ -30,7 +30,7 @@ import { Translate } from '@singletons';
  * Example usage:
  *
  * <ion-item class="ion-text-wrap">
- *     <ion-label stacked core-mark-required="true">{{ 'core.login.username' | translate }}</ion-label>
+ *     <ion-label stacked [core-mark-required]="true">{{ 'core.login.username' | translate }}</ion-label>
  *     <ion-input type="text" name="username" formControlName="username"></ion-input>
  *     <core-input-errors [control]="myForm.controls.username" [errorMessages]="usernameErrors"></core-input-errors>
  * </ion-item>
@@ -40,19 +40,32 @@ import { Translate } from '@singletons';
     templateUrl: 'core-input-errors.html',
     styleUrls: ['input-errors.scss'],
 })
-export class CoreInputErrorsComponent implements OnChanges {
+export class CoreInputErrorsComponent implements OnInit, OnChanges {
 
     @Input() control?: FormControl;
-    @Input() errorMessages?: Record<string, string>;
-    @Input() errorText?: string; // Set other non automatic errors.
+    @Input() errorMessages: Record<string, string> = {};
+    @Input() errorText = ''; // Set other non automatic errors.
     errorKeys: string[] = [];
 
+    protected element: HTMLElement;
+
+    @HostBinding('class.has-errors')
+    get hasErrors(): boolean {
+        return (this.control && this.control.dirty && !this.control.valid) || !!this.errorText;
+    }
+
+    @HostBinding('role') role = 'alert';
+
+    constructor(
+        element: ElementRef,
+    ) {
+        this.element = element.nativeElement;
+    }
+
     /**
      * Initialize some common errors if they aren't set.
      */
     protected initErrorMessages(): void {
-        this.errorMessages = this.errorMessages || {};
-
         this.errorMessages.required = this.errorMessages.required || Translate.instant('core.required');
         this.errorMessages.email = this.errorMessages.email || Translate.instant('core.login.invalidemail');
         this.errorMessages.date = this.errorMessages.date || Translate.instant('core.login.invaliddate');
@@ -67,7 +80,14 @@ export class CoreInputErrorsComponent implements OnChanges {
     }
 
     /**
-     * Component being changed.
+     * @inheritdoc
+     */
+    ngOnInit(): void {
+        this.element.closest('ion-item')?.classList.add('has-core-input-errors');
+    }
+
+    /**
+     * @inheritdoc
      */
     ngOnChanges(changes: { [name: string]: SimpleChange }): void {
         if ((changes.control || changes.errorMessages) && this.control) {
diff --git a/src/core/components/local-file/core-local-file.html b/src/core/components/local-file/core-local-file.html
index 01f2dee0a88..a0933b39a58 100644
--- a/src/core/components/local-file/core-local-file.html
+++ b/src/core/components/local-file/core-local-file.html
@@ -18,7 +18,8 @@
 
             <!-- Form to edit the file's name. -->
             <ion-input type="text" name="filename" [placeholder]="'core.filename' | translate" autocapitalize="none" autocorrect="off"
-                (click)="$event.stopPropagation()" core-auto-focus [(ngModel)]="newFileName" *ngIf="editMode" />
+                (click)="$event.stopPropagation()" core-auto-focus [(ngModel)]="newFileName" *ngIf="editMode"
+                [attr.aria-label]="'core.filename' | translate" />
 
             <div class="buttons" slot="end">
                 <ion-button fill="clear" *ngIf="isIOS && !editMode" (click)="openFile($event, true)"
diff --git a/src/core/components/mark-required/mark-required.ts b/src/core/components/mark-required/mark-required.ts
index 8d1ba253a74..5b72cf37820 100644
--- a/src/core/components/mark-required/mark-required.ts
+++ b/src/core/components/mark-required/mark-required.ts
@@ -26,7 +26,7 @@ import { Translate } from '@singletons';
  *
  * This directive should be applied in the label. Example:
  *
- * <ion-label core-mark-required="{{field.required}}">{{ 'core.login.username' | translate }}</ion-label>
+ * <p slot="label" [core-mark-required]="true">Username</p>
  */
 @Component({
     selector: '[core-mark-required]',
@@ -38,7 +38,7 @@ export class CoreMarkRequiredComponent implements OnInit, AfterViewInit {
     @Input('core-mark-required') coreMarkRequired: boolean | string = true;
 
     protected element: HTMLElement;
-    requiredLabel?: string;
+    requiredLabel = Translate.instant('core.required');
 
     constructor(
         element: ElementRef,
@@ -50,12 +50,11 @@ export class CoreMarkRequiredComponent implements OnInit, AfterViewInit {
      * @inheritdoc
      */
     ngOnInit(): void {
-        this.requiredLabel = Translate.instant('core.required');
         this.coreMarkRequired = CoreUtils.isTrueOrOne(this.coreMarkRequired);
     }
 
     /**
-     * Called after the view is initialized.
+     * @inheritdoc
      */
     ngAfterViewInit(): void {
         if (this.coreMarkRequired) {
diff --git a/src/core/components/password-modal/password-modal.html b/src/core/components/password-modal/password-modal.html
index 95629d7ab41..61fbd197252 100644
--- a/src/core/components/password-modal/password-modal.html
+++ b/src/core/components/password-modal/password-modal.html
@@ -14,10 +14,10 @@ <h1>{{ title | translate }}</h1>
     <form (ngSubmit)="submitPassword($event)" #passwordForm>
         <div>
             <ion-item>
-                <ion-label class="sr-only">{{ placeholder | translate }}</ion-label>
                 <core-show-password name="password">
-                    <ion-input class="ion-text-wrap core-ioninput-password" name="password" type="password"
-                        placeholder="{{ placeholder | translate }}" [(ngModel)]="password" core-auto-focus [clearOnEdit]="false" />
+                    <ion-input [attr.aria-label]="placeholder | translate" class="ion-text-wrap core-ioninput-password" name="password"
+                        type="password" placeholder="{{ placeholder | translate }}" [(ngModel)]="password" core-auto-focus
+                        [clearOnEdit]="false" />
                 </core-show-password>
             </ion-item>
             <ion-item *ngIf="error" class="ion-text-wrap ion-padding-top text-danger">
diff --git a/src/core/components/show-password/show-password.ts b/src/core/components/show-password/show-password.ts
index 735a4c4c503..de79a3f960d 100644
--- a/src/core/components/show-password/show-password.ts
+++ b/src/core/components/show-password/show-password.ts
@@ -29,7 +29,7 @@ import { CoreUtils } from '@services/utils/utils';
  *
  * Example:
  *
- * <core-show-password [name]="'password'">
+ * <core-show-password name="password">
  *     <ion-input type="password" name="password"></ion-input>
  * </core-show-password>
  */
diff --git a/src/core/components/site-picker/core-site-picker.html b/src/core/components/site-picker/core-site-picker.html
index 5b94e629165..f6ed756fca9 100644
--- a/src/core/components/site-picker/core-site-picker.html
+++ b/src/core/components/site-picker/core-site-picker.html
@@ -1,7 +1,6 @@
 <ion-item *ngIf="sites && sites.length">
-    <ion-label>{{ 'core.site' | translate }}</ion-label>
-    <ion-select [(ngModel)]="selectedSite" (ngModelChange)="siteSelected.emit(selectedSite)" interface="action-sheet"
-        [cancelText]="'core.cancel' | translate" [interfaceOptions]="{header: 'core.site' | translate}">
+    <ion-select [label]="'core.site' | translate" [(ngModel)]="selectedSite" (ngModelChange)="siteSelected.emit(selectedSite)"
+        interface="action-sheet" [cancelText]="'core.cancel' | translate" [interfaceOptions]="{header: 'core.site' | translate}">
         <ion-select-option *ngFor="let site of sites" [value]="site.id">{{ site.fullNameAndSiteName }}</ion-select-option>
     </ion-select>
 </ion-item>
diff --git a/src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html b/src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html
index 3e8d4cd0b18..8daa430f729 100644
--- a/src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html
+++ b/src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html
@@ -6,7 +6,8 @@
     </div>
 
     <ion-textarea [hidden]="rteEnabled" #textarea class="core-textarea" role="textbox" [attr.name]="name" ngControl="control"
-        [placeholder]="placeholder" (ionChange)="onChange()" (ionFocus)="showToolbar($event)" (ionBlur)="hideToolbar($event)" />
+        [placeholder]="placeholder" [attr.aria-label]="placeholder" (ionChange)="onChange()" (ionFocus)="showToolbar($event)"
+        (ionBlur)="hideToolbar($event)" />
 
     <div class="core-rte-info-message" *ngIf="infoMessage">
         <ion-icon name="fas-circle-info" aria-hidden="true" />
diff --git a/src/core/features/login/pages/credentials/credentials.html b/src/core/features/login/pages/credentials/credentials.html
index 94c9e9c4c69..ade5a36e227 100644
--- a/src/core/features/login/pages/credentials/credentials.html
+++ b/src/core/features/login/pages/credentials/credentials.html
@@ -41,18 +41,16 @@ <h2 *ngIf="siteName" class="ion-margin-top ion-no-padding core-sitename">
 
             <div class="core-login-methods">
                 <form [formGroup]="credForm" (ngSubmit)="login($event)" class="core-login-form" #credentialsForm *ngIf="!isBrowserSSO">
-                    <ion-item>
-                        <ion-label class="sr-only">{{ 'core.login.username' | translate }}</ion-label>
+                    <ion-item lines="inset">
                         <ion-input type="text" name="username" placeholder="{{ 'core.login.username' | translate }}"
                             formControlName="username" autocapitalize="none" autocorrect="off" autocomplete="username" enterkeyhint="next"
-                            required="true" />
+                            required="true" [attr.aria-label]="'core.login.username' | translate " />
                     </ion-item>
-                    <ion-item class="ion-margin-bottom">
-                        <ion-label class="sr-only">{{ 'core.login.password' | translate }}</ion-label>
+                    <ion-item class="ion-margin-bottom" lines="inset">
                         <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" />
+                                required="true" [attr.aria-label]="'core.login.password' | translate " />
                         </core-show-password>
                     </ion-item>
                     <ion-button expand="block" type="submit" [disabled]="!credForm.valid"
diff --git a/src/core/features/login/pages/email-signup/email-signup.html b/src/core/features/login/pages/email-signup/email-signup.html
index a48fb745359..f2cca3ec58d 100644
--- a/src/core/features/login/pages/email-signup/email-signup.html
+++ b/src/core/features/login/pages/email-signup/email-signup.html
@@ -43,18 +43,17 @@ <h2>{{ 'core.agelocationverification' | translate }}</h2>
                     </ion-item-divider>
 
                     <ion-item class="ion-text-wrap">
-                        <ion-label position="stacked">
-                            <span core-mark-required="true">{{ 'core.whatisyourage' | translate }}</span>
-                        </ion-label>
-                        <ion-input type="number" name="age" placeholder="0" formControlName="age" autocapitalize="none" autocorrect="off" />
+                        <ion-input labelPlacement="stacked" type="number" name="age" placeholder="0" formControlName="age"
+                            autocapitalize="none" autocorrect="off">
+                            <div slot="label" [core-mark-required]="true">{{ 'core.whatisyourage' | translate }}</div>
+                        </ion-input>
                     </ion-item>
 
                     <ion-item class="ion-text-wrap">
-                        <ion-label position="stacked">
-                            <span core-mark-required="true">{{ 'core.wheredoyoulive' | translate }}</span>
-                        </ion-label>
-                        <ion-select name="country" formControlName="country" [cancelText]="'core.cancel' | translate"
-                            [okText]="'core.ok' | translate" [placeholder]="'core.login.selectacountry' | translate">
+                        <ion-select labelPlacement="stacked" name="country" formControlName="country"
+                            [cancelText]="'core.cancel' | translate" [okText]="'core.ok' | translate"
+                            [placeholder]="'core.login.selectacountry' | translate">
+                            <div slot="label" [core-mark-required]="true">{{ 'core.wheredoyoulive' | translate }}</div>
                             <ion-select-option value="">{{ 'core.login.selectacountry' | translate }}</ion-select-option>
                             <ion-select-option *ngFor="let country of countries" [value]="country.code">{{country.name}}</ion-select-option>
                         </ion-select>
@@ -97,16 +96,16 @@ <h2>{{ 'core.login.createuserandpass' | translate }}</h2>
                         </ion-label>
                     </ion-item-divider>
                     <ion-item class="ion-text-wrap">
-                        <ion-label position="stacked">
-                            <span core-mark-required="true">{{ 'core.login.username' | translate }}</span>
-                        </ion-label>
-                        <ion-input type="text" name="username" placeholder="{{ 'core.login.username' | translate }}"
-                            formControlName="username" autocapitalize="none" autocorrect="off" />
+                        <ion-input labelPlacement="stacked" type="text" name="username"
+                            placeholder="{{ 'core.login.username' | translate }}" formControlName="username" autocapitalize="none"
+                            autocorrect="off">
+                            <div slot="label" [core-mark-required]="true">{{ 'core.login.username' | translate }}</div>
+                        </ion-input>
                         <core-input-errors [control]="signupForm.controls.username" [errorMessages]="usernameErrors" />
                     </ion-item>
                     <ion-item class="ion-text-wrap">
                         <ion-label position="stacked">
-                            <span core-mark-required="true">{{ 'core.login.password' | translate }}</span>
+                            <p [core-mark-required]="true">{{ 'core.login.password' | translate }}</p>
                         </ion-label>
                         <core-show-password name="password">
                             <ion-input name="password" type="password" placeholder="{{ 'core.login.password' | translate }}"
@@ -125,38 +124,35 @@ <h2>{{ 'core.login.supplyinfo' | translate }}</h2>
                         </ion-label>
                     </ion-item-divider>
                     <ion-item class="ion-text-wrap">
-                        <ion-label position="stacked">
-                            <span core-mark-required="true">{{ 'core.user.email' | translate }}</span>
-                        </ion-label>
-                        <ion-input type="email" name="email" placeholder="{{ 'core.user.email' | translate }}" formControlName="email"
-                            autocapitalize="none" autocorrect="off" />
+                        <ion-input labelPlacement="stacked" type="email" name="email" placeholder="{{ 'core.user.email' | translate }}"
+                            formControlName="email" autocapitalize="none" autocorrect="off">
+                            <div slot="label" [core-mark-required]="true">{{ 'core.user.email' | translate }}</div>
+                        </ion-input>
                         <core-input-errors [control]="signupForm.controls.email" [errorMessages]="emailErrors" />
                     </ion-item>
                     <ion-item class="ion-text-wrap">
-                        <ion-label position="stacked">
-                            <span core-mark-required="true">{{ 'core.user.emailagain' | translate }}</span>
-                        </ion-label>
-                        <ion-input type="email" name="email2" placeholder="{{ 'core.user.emailagain' | translate }}" autocapitalize="none"
-                            formControlName="email2" autocorrect="off" [pattern]="escapeMail(signupForm.controls.email.value)" />
+                        <ion-input labelPlacement="stacked" type="email" name="email2"
+                            placeholder="{{ 'core.user.emailagain' | translate }}" autocapitalize="none" formControlName="email2"
+                            autocorrect="off" [pattern]="escapeMail(signupForm.controls.email.value)">
+                            <div slot="label" [core-mark-required]="true">{{ 'core.user.emailagain' | translate }}</div>
+                        </ion-input>
                         <core-input-errors [control]="signupForm.controls.email2" [errorMessages]="email2Errors" />
                     </ion-item>
                     <ion-item *ngFor="let nameField of settings.namefields" class="ion-text-wrap">
-                        <ion-label position="stacked">
-                            <span core-mark-required="true">{{ 'core.user.' + nameField | translate }}</span>
-                        </ion-label>
-                        <ion-input type="text" [name]="nameField" placeholder="{{ 'core.user.' + nameField | translate }}"
-                            formControlName="{{nameField}}" autocorrect="off" />
+                        <ion-input labelPlacement="stacked" type="text" [name]="nameField" formControlName="{{nameField}}" autocorrect="off"
+                            [placeholder]="'core.user.' + nameField | translate">
+                            <div slot="label" [core-mark-required]="true">{{ 'core.user.' + nameField | translate }}</div>
+                        </ion-input>
                         <core-input-errors [control]="signupForm.controls[nameField]" [errorMessages]="namefieldsErrors![nameField]" />
                     </ion-item>
                     <ion-item class="ion-text-wrap">
-                        <ion-label position="stacked">{{ 'core.user.city' | translate }}</ion-label>
-                        <ion-input type="text" name="city" placeholder="{{ 'core.user.city' | translate }}" formControlName="city"
-                            autocorrect="off" />
+                        <ion-input labelPlacement="stacked" type="text" name="city" placeholder="{{ 'core.user.city' | translate }}"
+                            formControlName="city" autocorrect="off" [label]="'core.user.city' | translate" />
                     </ion-item>
                     <ion-item class="ion-text-wrap">
-                        <ion-label position="stacked">{{ 'core.user.country' | translate }}</ion-label>
-                        <ion-select name="country" formControlName="country" [placeholder]="'core.login.selectacountry' | translate"
-                            [cancelText]="'core.cancel' | translate" [okText]="'core.ok' | translate">
+                        <ion-select labelPlacement="stacked" name="country" formControlName="country"
+                            [placeholder]="'core.login.selectacountry' | translate" [cancelText]="'core.cancel' | translate"
+                            [okText]="'core.ok' | translate" [label]="'core.user.country' | translate">
                             <ion-select-option value="">{{ 'core.login.selectacountry' | translate }}</ion-select-option>
                             <ion-select-option *ngFor="let country of countries" [value]="country.code">{{country.name}}</ion-select-option>
                         </ion-select>
@@ -177,7 +173,7 @@ <h2>{{ 'core.login.supplyinfo' | translate }}</h2>
                     <ng-container *ngIf="settings.recaptchapublickey">
                         <ion-item-divider class="ion-text-wrap">
                             <ion-label>
-                                <h2><span [core-mark-required]="true">{{ 'core.login.security_question' | translate }}</span></h2>
+                                <h2 [core-mark-required]="true">{{ 'core.login.security_question' | translate }}</h2>
                             </ion-label>
                         </ion-item-divider>
                         <core-recaptcha [publicKey]="settings.recaptchapublickey" [model]="captcha" [siteUrl]="site.siteUrl"
@@ -199,11 +195,10 @@ <h2>{{ 'core.login.policyagreement' | translate }}</h2>
                             </ion-label>
                         </ion-item>
                         <ion-item class="ion-text-wrap">
-                            <ion-label>
-                                <span [core-mark-required]="true">{{ 'core.login.policyacceptmandatory' | translate }}</span>
-                                <core-input-errors [control]="signupForm.controls.policyagreed" [errorMessages]="policyErrors" />
-                            </ion-label>
-                            <ion-checkbox slot="end" name="policyagreed" formControlName="policyagreed" />
+                            <ion-checkbox labelPlacement="start" justify="space-between" name="policyagreed" formControlName="policyagreed">
+                                <p [core-mark-required]="true">{{ 'core.login.policyacceptmandatory' | translate }}</p>
+                            </ion-checkbox>
+                            <core-input-errors [control]="signupForm.controls.policyagreed" [errorMessages]="policyErrors" />
                         </ion-item>
                     </ng-container>
 
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 db8ac4b3e25..39022d08d20 100644
--- a/src/core/features/login/pages/forgotten-password/forgotten-password.html
+++ b/src/core/features/login/pages/forgotten-password/forgotten-password.html
@@ -30,18 +30,16 @@ <h1>{{ 'core.login.passwordforgotten' | translate }}</h1>
                 </ion-item-divider>
                 <ion-radio-group formControlName="field">
                     <ion-item>
-                        <ion-label>{{ 'core.login.username' | translate }}</ion-label>
-                        <ion-radio slot="end" value="username" />
+                        <ion-radio value="username">{{ 'core.login.username' | translate }}</ion-radio>
                     </ion-item>
                     <ion-item>
-                        <ion-label>{{ 'core.user.email' | translate }}</ion-label>
-                        <ion-radio slot="end" value="email" />
+                        <ion-radio value="email">{{ 'core.user.email' | translate }}</ion-radio>
                     </ion-item>
                 </ion-radio-group>
-                <ion-item>
-                    <ion-label class="sr-only">{{ 'core.login.usernameoremail' | translate }}</ion-label>
+                <ion-item lines="full">
                     <ion-input type="text" name="value" placeholder="{{ 'core.login.usernameoremail' | translate }}" formControlName="value"
-                        autocapitalize="none" autocorrect="off" [core-auto-focus]="autoFocus" />
+                        autocapitalize="none" autocorrect="off" [core-auto-focus]="autoFocus"
+                        [attr.aria-label]="'core.login.usernameoremail' | translate" />
                 </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 3113d509829..0ea9009d4c0 100644
--- a/src/core/features/login/pages/reconnect/reconnect.html
+++ b/src/core/features/login/pages/reconnect/reconnect.html
@@ -57,12 +57,12 @@ <h1>{{ 'core.login.reconnect' | translate }}</h1>
 
             <div class="core-login-methods">
                 <form *ngIf="!isBrowserSSO" [formGroup]="credForm" (ngSubmit)="login($event)" class="core-login-form" #reconnectForm>
-                    <ion-item class="ion-margin-bottom">
-                        <ion-label class="sr-only">{{ 'core.login.password' | translate }}</ion-label>
+                    <ion-item class="ion-margin-bottom" lines="inset">
                         <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" />
+                                autocomplete="current-password" enterkeyhint="go" required="true"
+                                [attr.aria-label]="'core.login.password' | translate" />
                         </core-show-password>
                     </ion-item>
                     <ion-button type="submit" expand="block" [disabled]="!credForm.valid"
diff --git a/src/core/features/login/pages/site/site.html b/src/core/features/login/pages/site/site.html
index c9e098b7a93..882901ad7ea 100644
--- a/src/core/features/login/pages/site/site.html
+++ b/src/core/features/login/pages/site/site.html
@@ -22,22 +22,18 @@ <h1>{{ 'core.login.connecttomoodle' | translate }}</h1>
         </div>
         <form [formGroup]="siteForm" (ngSubmit)="connect(siteForm.value.siteUrl, $event)" *ngIf="!fixedSites && siteForm" #siteFormEl>
             <!-- Form to input the site URL if there are no fixed sites. -->
-            <ng-container *ngIf=" siteSelector==='url'">
-                <ion-item>
-                    <ion-label position=" stacked">
-                        <h2>{{ 'core.login.siteaddress' | translate }}</h2>
-                    </ion-label>
+            <ng-container *ngIf="siteSelector==='url'">
+                <ion-item lines="inset">
                     <ion-input name="url" type="url" placeholder="{{ 'core.login.siteaddressplaceholder' | translate }}"
-                        formControlName="siteUrl" [core-auto-focus]="showKeyboard && !showScanQR" />
+                        formControlName="siteUrl" [core-auto-focus]="showKeyboard && !showScanQR" labelPlacement="stacked"
+                        [label]="'core.login.siteaddress' | translate" [clearInput]="true" />
                 </ion-item>
             </ng-container>
             <ng-container *ngIf="siteSelector !== 'url'">
-                <ion-item>
-                    <ion-label position="stacked">
-                        <h2>{{ 'core.login.siteaddress' | translate }}</h2>
-                    </ion-label>
+                <ion-item lines="inset">
                     <ion-input name="url" placeholder="{{ 'core.login.siteaddressplaceholder' | translate }}" formControlName="siteUrl"
-                        [core-auto-focus]="showKeyboard && !showScanQR" (ionChange)="searchSite($event, siteForm.value.siteUrl)" />
+                        [core-auto-focus]="showKeyboard && !showScanQR" (ionChange)="searchSite($event, siteForm.value.siteUrl)"
+                        labelPlacement="stacked" [label]="'core.login.siteaddress' | translate" [clearInput]="true" />
                 </ion-item>
 
                 <ion-list [class.hidden]="!hasSites && !enteredSiteUrl" class="core-login-site-list">
diff --git a/src/core/features/rating/components/rate/core-rating-rate.html b/src/core/features/rating/components/rate/core-rating-rate.html
index 525f4c17ffe..f335ad75636 100644
--- a/src/core/features/rating/components/rate/core-rating-rate.html
+++ b/src/core/features/rating/components/rate/core-rating-rate.html
@@ -1,8 +1,7 @@
 <ion-item class="ion-text-wrap" *ngIf="item && (item!.canrate || item!.rating !== null) && !disabled">
-    <ion-label>{{ 'core.rating.rating' | translate }}</ion-label>
     <ion-select class="ion-text-start" [(ngModel)]="rating" (ngModelChange)="userRatingChanged()" interface="action-sheet"
-        [cancelText]="'core.cancel' | translate" [disabled]="!item!.canrate"
-        [interfaceOptions]="{header: 'core.rating.rating' | translate}">
+        [cancelText]="'core.cancel' | translate" [disabled]="!item!.canrate" [interfaceOptions]="{header: 'core.rating.rating' | translate}"
+        [label]="'core.rating.rating' | translate">
         <ion-select-option *ngFor="let scaleItem of scale!.items" [value]="scaleItem.value">{{ scaleItem.name }}</ion-select-option>
     </ion-select>
 </ion-item>
diff --git a/src/core/features/search/components/global-search-filters/global-search-filters.html b/src/core/features/search/components/global-search-filters/global-search-filters.html
index 66a23d8b4a9..61d0c466f0c 100644
--- a/src/core/features/search/components/global-search-filters/global-search-filters.html
+++ b/src/core/features/search/components/global-search-filters/global-search-filters.html
@@ -23,16 +23,14 @@ <h1>{{ 'core.search.filterheader' | translate }}</h1>
                 </ion-label>
             </ion-item>
             <ion-item class="ion-text-wrap">
-                <ion-label>{{ 'core.search.allcategories' | translate }}</ion-label>
-                <ion-checkbox slot="end" [(ngModel)]="allSearchAreaCategories" [indeterminate]="allSearchAreaCategories === null"
-                    (ionChange)="allSearchAreaCategoriesUpdated()" />
+                <ion-checkbox labelPlacement="start" [(ngModel)]="allSearchAreaCategories"
+                    [indeterminate]="allSearchAreaCategories === null" (ionChange)="allSearchAreaCategoriesUpdated()">{{
+                    'core.search.allcategories' | translate }}</ion-checkbox>
             </ion-item>
             <ion-item class="ion-text-wrap" *ngFor="let searchAreaCategory of searchAreaCategories">
-                <ion-label>
-                    <core-format-text [text]="searchAreaCategory.name" />
-                </ion-label>
-                <ion-checkbox slot="end" [(ngModel)]="searchAreaCategory.checked"
-                    (ionChange)="onSearchAreaCategoryInputChanged(searchAreaCategory)" />
+                <ion-checkbox labelPlacement="start" [(ngModel)]="searchAreaCategory.checked"
+                    (ionChange)="onSearchAreaCategoryInputChanged(searchAreaCategory)"><core-format-text
+                        [text]="searchAreaCategory.name" /></ion-checkbox>
             </ion-item>
         </ng-container>
         <ng-container *ngIf="!hideCourses && courses.length > 0">
@@ -43,14 +41,13 @@ <h1>{{ 'core.search.filterheader' | translate }}</h1>
                 </ion-label>
             </ion-item>
             <ion-item class="ion-text-wrap">
-                <ion-label>{{ 'core.search.allcourses' | translate }}</ion-label>
-                <ion-checkbox slot="end" [(ngModel)]="allCourses" [indeterminate]="allCourses === null" (ionChange)="allCoursesUpdated()" />
+                <ion-checkbox labelPlacement="start" [(ngModel)]="allCourses" [indeterminate]="allCourses === null"
+                    (ionChange)="allCoursesUpdated()">
+                    {{ 'core.search.allcourses' | translate }}</ion-checkbox>
             </ion-item>
             <ion-item class="ion-text-wrap" *ngFor="let course of courses">
-                <ion-label>
-                    <core-format-text [text]="course.shortname" />
-                </ion-label>
-                <ion-checkbox slot="end" [(ngModel)]="course.checked" (ionChange)="onCourseInputChanged(course)" />
+                <ion-checkbox labelPlacement="start" [(ngModel)]="course.checked"
+                    (ionChange)="onCourseInputChanged(course)"><core-format-text [text]="course.shortname" /></ion-checkbox>
             </ion-item>
         </ng-container>
     </ion-list>
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 522d9818ca3..e8e8da4eaab 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
@@ -1,8 +1,8 @@
 <form (ngSubmit)="submitForm($event)" role="search" #searchForm>
     <ion-item class="search-box">
-        <ion-label class="sr-only">{{ placeholder }}</ion-label>
-        <ion-input type="search" name="search" [(ngModel)]="searchText" [placeholder]="placeholder" [autocorrect]="autocorrect"
-            [spellcheck]="spellcheck" [core-auto-focus]="autoFocus" [disabled]="disabled" role="searchbox" (ionFocus)="focus($event)" />
+        <ion-input [attr.aria-label]="placeholder" type="search" name="search" [(ngModel)]="searchText" [placeholder]="placeholder"
+            [autocorrect]="autocorrect" [spellcheck]="spellcheck" [core-auto-focus]="autoFocus" [disabled]="disabled" role="searchbox"
+            (ionFocus)="focus($event)" />
         <ion-button slot="end" fill="clear" type="submit" [attr.aria-label]="searchLabel"
             [disabled]="disabled || !searchText || (searchText.length < lengthCheck)">
             <ion-icon name="fas-magnifying-glass" slot="icon-only" aria-hidden="true" />
diff --git a/src/core/features/settings/pages/dev/dev.html b/src/core/features/settings/pages/dev/dev.html
index 107d688b1ac..37484811ffc 100644
--- a/src/core/features/settings/pages/dev/dev.html
+++ b/src/core/features/settings/pages/dev/dev.html
@@ -18,39 +18,33 @@ <h1>{{ 'core.settings.developeroptions' | translate }}</h1>
 <ion-content>
     <ion-list class="list-item-limited-width">
         <ion-item class="ion-text-wrap">
-            <ion-label>
+            <ion-toggle [(ngModel)]="rtl" (ionChange)="RTLChanged()">
                 <p class="item-heading">Change text direction</p>
                 <p>{{ direction }}</p>
-            </ion-label>
-            <ion-toggle [(ngModel)]="rtl" (ionChange)="RTLChanged()" slot="end" />
+            </ion-toggle>
         </ion-item>
         <ion-item class="ion-text-wrap">
-            <ion-label>
+            <ion-toggle [(ngModel)]="forceSafeAreaMargins" (ionChange)="safeAreaChanged()">
                 <p class="item-heading">Force safe area margins</p>
-            </ion-label>
-            <ion-toggle [(ngModel)]="forceSafeAreaMargins" (ionChange)="safeAreaChanged()" slot="end" />
+            </ion-toggle>
         </ion-item>
         <ion-item class="ion-text-wrap" *ngIf="stagingSitesCount && enableStagingSites !== undefined">
-            <ion-label>
-                <h2>Enable staging sites ({{stagingSitesCount}})</h2>
-            </ion-label>
-            <ion-toggle [(ngModel)]="enableStagingSites" (ionChange)="setEnabledStagingSites($event.detail.checked)" slot="end" />
-
+            <ion-toggle [(ngModel)]="enableStagingSites" (ionChange)="setEnabledStagingSites($event.detail.checked)">
+                <p class="item-heading">Enable staging sites <ion-badge>{{stagingSitesCount}}</ion-badge></p>
+            </ion-toggle>
         </ion-item>
         <ng-container *ngIf="siteId">
             <ion-item class="ion-text-wrap">
-                <ion-label>
+                <ion-toggle [(ngModel)]="remoteStyles" (ionChange)="remoteStylesChanged()">
                     <p class="item-heading">Enable remote styles <ion-badge>{{remoteStylesCount}}</ion-badge>
                     </p>
-                </ion-label>
-                <ion-toggle [(ngModel)]="remoteStyles" (ionChange)="remoteStylesChanged()" slot="end" />
+                </ion-toggle>
             </ion-item>
             <ion-item class="ion-text-wrap">
-                <ion-label>
+                <ion-toggle [(ngModel)]="pluginStyles" (ionChange)="pluginStylesChanged()">
                     <p class="item-heading">Enable site plugin styles <ion-badge>{{pluginStylesCount}}</ion-badge>
                     </p>
-                </ion-label>
-                <ion-toggle [(ngModel)]="pluginStyles" (ionChange)="pluginStylesChanged()" slot="end" />
+                </ion-toggle>
             </ion-item>
         </ng-container>
 
diff --git a/src/core/features/settings/pages/general/general.html b/src/core/features/settings/pages/general/general.html
index f73deaa03a0..1a3fa3331e8 100644
--- a/src/core/features/settings/pages/general/general.html
+++ b/src/core/features/settings/pages/general/general.html
@@ -12,11 +12,9 @@ <h1>{{ 'core.settings.general' | translate }}</h1>
 <ion-content>
     <ion-list class="list-item-limited-width">
         <ion-item class="ion-text-wrap" lines="none">
-            <ion-label>
-                <p class="item-heading">{{ 'core.settings.language' | translate }}</p>
-            </ion-label>
             <ion-select [(ngModel)]="selectedLanguage" (ionChange)="languageChanged($event)" interface="action-sheet"
                 [cancelText]="'core.cancel' | translate" [interfaceOptions]="{header: 'core.settings.language' | translate}">
+                <div slot="label" class="item-heading">{{ 'core.settings.language' | translate }}</div>
                 <ion-select-option *ngFor="let entry of languages" [value]="entry.code">{{ entry.name }}</ion-select-option>
             </ion-select>
         </ion-item>
@@ -36,13 +34,13 @@ <h1>{{ 'core.settings.general' | translate }}</h1>
             </ion-segment>
         </ion-item>
         <ion-item class="ion-text-wrap core-settings-general-color-scheme" *ngIf="colorSchemes.length > 0" lines="none">
-            <ion-label>
-                <p class="item-heading">{{ 'core.settings.colorscheme' | translate }}</p>
-                <p *ngIf="colorSchemeDisabled" class="text-danger">{{ 'core.settings.forcedsetting' | translate }}</p>
-            </ion-label>
             <ion-select [(ngModel)]="selectedScheme" (ionChange)="colorSchemeChanged($event)" interface="action-sheet"
                 [cancelText]="'core.cancel' | translate" [disabled]="colorSchemeDisabled"
                 [interfaceOptions]="{header: 'core.settings.colorscheme' | translate}">
+                <div slot="label">
+                    <p class="item-heading">{{ 'core.settings.colorscheme' | translate }}</p>
+                    <p *ngIf="colorSchemeDisabled" class="text-danger">{{ 'core.settings.forcedsetting' | translate }}</p>
+                </div>
                 <ion-select-option *ngFor="let scheme of colorSchemes" [value]="scheme">
                     {{ 'core.settings.colorscheme-' + scheme | translate }}</ion-select-option>
             </ion-select>
@@ -53,11 +51,10 @@ <h1>{{ 'core.settings.general' | translate }}</h1>
             </ion-label>
         </ion-item>
         <ion-item class="ion-text-wrap">
-            <ion-label>
+            <ion-toggle [(ngModel)]="richTextEditor" (ionChange)="richTextEditorChanged($event)">
                 <p class="item-heading">{{ 'core.settings.enablerichtexteditor' | translate }}</p>
                 <p>{{ 'core.settings.enablerichtexteditordescription' | translate }}</p>
-            </ion-label>
-            <ion-toggle [(ngModel)]="richTextEditor" (ionChange)="richTextEditorChanged($event)" slot="end" />
+            </ion-toggle>
         </ion-item>
         <ion-item class="ion-text-wrap" *ngIf="displayIframeHelp">
             <ion-label>
@@ -69,11 +66,10 @@ <h1>{{ 'core.settings.general' | translate }}</h1>
             </ion-label>
         </ion-item>
         <ion-item class="ion-text-wrap">
-            <ion-label>
+            <ion-toggle [(ngModel)]="debugDisplay" (ionChange)="debugDisplayChanged($event)">
                 <p class="item-heading">{{ 'core.settings.debugdisplay' | translate }}</p>
                 <p>{{ 'core.settings.debugdisplaydescription' | translate }}</p>
-            </ion-label>
-            <ion-toggle [(ngModel)]="debugDisplay" (ionChange)="debugDisplayChanged($event)" slot="end" />
+            </ion-toggle>
         </ion-item>
         <ion-item class="ion-text-wrap" *ngIf="analyticsAvailable">
             <ion-label>
diff --git a/src/core/features/settings/pages/synchronization/synchronization.html b/src/core/features/settings/pages/synchronization/synchronization.html
index f46cde682fa..44b02e53776 100644
--- a/src/core/features/settings/pages/synchronization/synchronization.html
+++ b/src/core/features/settings/pages/synchronization/synchronization.html
@@ -24,12 +24,9 @@ <h2>{{ 'core.settings.syncsettings' | translate }}</h2>
                 </ion-label>
             </ion-item-divider>
             <ion-item class="ion-text-wrap">
-                <ion-label>
-                    <p class="item-heading">
-                        {{ 'core.settings.syncdatasaver' | translate }}
-                    </p>
-                </ion-label>
-                <ion-toggle slot="end" [(ngModel)]="dataSaver" (ngModelChange)="syncOnlyOnWifiChanged()" />
+                <ion-toggle [(ngModel)]="dataSaver" (ngModelChange)="syncOnlyOnWifiChanged()">
+                    {{ 'core.settings.syncdatasaver' | translate }}
+                </ion-toggle>
             </ion-item>
 
             <ion-card class="core-warning-card" *ngIf="!isOnline || (dataSaver && limitedConnection)">
diff --git a/src/theme/components/format-text.scss b/src/theme/components/format-text.scss
index 9a1a635f60f..710feebd5ad 100644
--- a/src/theme/components/format-text.scss
+++ b/src/theme/components/format-text.scss
@@ -222,6 +222,10 @@ core-rich-text-editor .core-rte-editor {
         margin-block-start: 0;
     }
 
+    > p:only-child {
+        margin-bottom: 0;
+    }
+
     hr {
         border-top: 1px solid var(--stroke);
     }
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 31fbe0ba54e..929209ef899 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -66,71 +66,60 @@ body {
 .font-lg { font-size: 1.7rem; }
 .font-sm { font-size: 1.2rem; }
 
-// Headings.
+// Item Headings.
 // Some styles taken from ion-label
-.md ion-label .item-heading,
-.ios ion-label .item-heading {
-    text-overflow: inherit;
-    overflow: inherit;
-    --color: initial;
-    color: var(--color);
-    line-height: 20px;
-
-    &.item-heading-secondary {
+.item > ion-label,
+.fake-ion-item > ion-label,
+ion-item .in-item {
+    p {
         --color: var(--subdued-text-color);
+        color: var(--color);
+        @include margin(2px, 0);
+        font-size: 0.875rem;
     }
-}
-
-.ios ion-label > p,
-.md ion-label > p {
-    --color: var(--subdued-text-color);
-    color: var(--color);
-}
-
-.md ion-label .item-heading {
-    @include margin(2px, 0);
 
-    font-size: 16px;
-    font-weight: normal;
-
-    &.item-heading-secondary {
+    .item-heading {
         @include margin(2px, 0);
 
-        font-size: var(--text-size);
+        font-size: 1rem;
         font-weight: normal;
 
-        line-height: normal;
-    }
-}
-
-.ios ion-label .item-heading {
-    @include margin(0, 0, 2px);
-
-    font-size: 17px;
-    font-weight: normal;
+        text-overflow: inherit;
+        overflow: inherit;
+        --color: initial;
+        color: var(--color);
 
-    &.item-heading-secondary {
-        @include margin(0, 0, 3px);
+        &.item-heading-secondary {
+            @include margin(2px, 0);
 
-        font-size: var(--text-size);
-        font-weight: normal;
+            font-size: var(--text-size);
+            font-weight: normal;
+            line-height: normal;
 
-        line-height: normal;
+            --color: var(--subdued-text-color);
+        }
     }
 }
 
 // Correctly inherit ion-text-wrap onto labels.
-.item ion-label core-format-text > *:not(pre),
-.fake-ion-item core-format-text > *:not(pre) {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+.item > ion-label,
+.fake-ion-item {
+    core-format-text,
+    core-format-text > *:not(pre) {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
 }
 
-.item.ion-text-wrap > ion-label core-format-text > *:not(pre),
-.fake-ion-item.ion-text-wrap core-format-text > *:not(pre) {
-    white-space: normal;
-    overflow: inherit;
+.item.ion-text-wrap > ion-label,
+ion-item > .in-item,
+.fake-ion-item.ion-text-wrap {
+    core-format-text,
+    core-format-text > *:not(pre) {
+        white-space: normal;
+        overflow: inherit;
+    }
 }
 
 .item.ion-text-wrap > ion-label {
@@ -1124,12 +1113,16 @@ input[type=checkbox] {
 }
 
 // Select.
-ion-select::part(text) {
-    white-space: normal;
-}
-
-ion-select::part(icon) {
-    opacity: 1;
+ion-select {
+    &::part(text) {
+        white-space: normal;
+    }
+    &::part(icon) {
+        opacity: 1;
+    }
+    &::part(label) {
+        max-width: none;
+    }
 }
 
 ion-select-popover {
@@ -1401,7 +1394,7 @@ audio.core-media-adapt-width {
 }
 
 ion-item {
-    font-size: var(--text-size);
+    // font-size: var(--text-size);
     --inner-border-width: 0px;
 }
 
@@ -1411,7 +1404,7 @@ ion-item.item-lines-full {
 }
 
 ion-item.item-lines-inset {
-    --inner-border-width: 1px;
+    --inner-border-width: 0 0 1px 0;
     --border-width: 0px;
 }
 
@@ -1984,3 +1977,15 @@ ion-item.item-label-stacked ion-datetime-button {
     margin-bottom: 8px;
     align-self: self-end;
 }
+
+// Development styles. Most of them temporary.
+html.development {
+    ion-checkbox.legacy-checkbox,
+    ion-radio.legacy-radio,
+    ion-select.legacy-select,
+    ion-toggle.legacy-toggle,
+    ion-textarea.legacy-textarea,
+    ion-input.legacy-input {
+        background: red !important;
+    }
+}

From be7f86edd2fdeb38b0a75c3dfa3a7a95976d9b00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 12 Dec 2023 11:38:34 +0100
Subject: [PATCH 07/11] MOBILE-3947 core: Slot core-show-password on ion-inputs

---
 .../index/addon-mod-lesson-index.html         |  10 +-
 .../addon-mod-quiz-access-password.html       |  10 +-
 .../password-modal/password-modal.html        |  10 +-
 .../show-password/core-show-password.html     |   2 +-
 .../show-password/show-password.scss          |  33 +++---
 .../components/show-password/show-password.ts | 106 +++++++++++-------
 src/core/features/login/login.scss            |   8 +-
 .../login/pages/credentials/credentials.html  |  10 +-
 .../pages/email-signup/email-signup.html      |  13 +--
 .../login/pages/reconnect/reconnect.html      |  12 +-
 10 files changed, 116 insertions(+), 98 deletions(-)

diff --git a/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html b/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html
index 4dd254e120b..a1de43153d0 100644
--- a/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html
+++ b/src/addons/mod/lesson/components/index/addon-mod-lesson-index.html
@@ -28,11 +28,11 @@
                 <ion-card *ngIf="askPassword">
                     <form (ngSubmit)="submitPassword($event, passwordinput)" #passwordForm>
                         <ion-item class="ion-text-wrap">
-                            <ion-label position="stacked">{{ 'addon.mod_lesson.enterpassword' | translate }}</ion-label>
-                            <core-show-password name="password">
-                                <ion-input name="password" type="password" placeholder="{{ 'core.login.password' | translate }}"
-                                    core-auto-focus #passwordinput [clearOnEdit]="false" />
-                            </core-show-password>
+                            <ion-input labelPlacement="stacked" name="password" type="password"
+                                placeholder="{{ 'core.login.password' | translate }}" core-auto-focus #passwordinput [clearOnEdit]="false"
+                                [label]="'addon.mod_lesson.enterpassword' | translate">
+                                <core-show-password slot="end" />
+                            </ion-input>
                         </ion-item>
                         <ion-button expand="block" type="submit">
                             {{ 'addon.mod_lesson.continue' | translate }}
diff --git a/src/addons/mod/quiz/accessrules/password/component/addon-mod-quiz-access-password.html b/src/addons/mod/quiz/accessrules/password/component/addon-mod-quiz-access-password.html
index 13e00d1dfbc..b2d553869d3 100644
--- a/src/addons/mod/quiz/accessrules/password/component/addon-mod-quiz-access-password.html
+++ b/src/addons/mod/quiz/accessrules/password/component/addon-mod-quiz-access-password.html
@@ -5,9 +5,9 @@
     </ion-label>
 </ion-item>
 <ion-item [formGroup]="form">
-    <ion-label class="sr-only">{{ 'addon.mod_quiz.quizpassword' | translate }}</ion-label>
-    <core-show-password name="quizpassword">
-        <ion-input id="addon-mod_quiz-accessrule-password-input" name="quizpassword" type="password"
-            placeholder="{{ 'addon.mod_quiz.quizpassword' | translate }}" [formControlName]="'quizpassword'" [clearOnEdit]="false" />
-    </core-show-password>
+    <ion-input id="addon-mod_quiz-accessrule-password-input" name="quizpassword" type="password"
+        placeholder="{{ 'addon.mod_quiz.quizpassword' | translate }}" [formControlName]="'quizpassword'" [clearOnEdit]="false"
+        [attr.aria-label]="'addon.mod_quiz.quizpassword' | translate">
+        <core-show-password slot="end" />
+    </ion-input>
 </ion-item>
diff --git a/src/core/components/password-modal/password-modal.html b/src/core/components/password-modal/password-modal.html
index 61fbd197252..d5a1c2deae9 100644
--- a/src/core/components/password-modal/password-modal.html
+++ b/src/core/components/password-modal/password-modal.html
@@ -14,11 +14,11 @@ <h1>{{ title | translate }}</h1>
     <form (ngSubmit)="submitPassword($event)" #passwordForm>
         <div>
             <ion-item>
-                <core-show-password name="password">
-                    <ion-input [attr.aria-label]="placeholder | translate" class="ion-text-wrap core-ioninput-password" name="password"
-                        type="password" placeholder="{{ placeholder | translate }}" [(ngModel)]="password" core-auto-focus
-                        [clearOnEdit]="false" />
-                </core-show-password>
+                <ion-input [attr.aria-label]="placeholder | translate" class="ion-text-wrap core-ioninput-password" name="password"
+                    type="password" placeholder="{{ placeholder | translate }}" [(ngModel)]="password" core-auto-focus
+                    [clearOnEdit]="false">
+                    <core-show-password slot="end" />
+                </ion-input>
             </ion-item>
             <ion-item *ngIf="error" class="ion-text-wrap ion-padding-top text-danger">
                 <core-format-text [text]="error | translate" />
diff --git a/src/core/components/show-password/core-show-password.html b/src/core/components/show-password/core-show-password.html
index ed3fb385f26..362f23d41f4 100644
--- a/src/core/components/show-password/core-show-password.html
+++ b/src/core/components/show-password/core-show-password.html
@@ -1,4 +1,4 @@
-<ng-content></ng-content>
+<ng-content />
 <ion-button fill="clear" [attr.aria-label]="(shown ? 'core.hide' : 'core.show') | translate" core-suppress-events (onClick)="toggle($event)"
     (mousedown)="doNotBlur($event)" (keydown)="doNotBlur($event)" (keyup)="toggle($event)">
     <ion-icon [name]="shown ? 'fas-eye-slash' : 'fas-eye'" slot="icon-only" aria-hidden="true" />
diff --git a/src/core/components/show-password/show-password.scss b/src/core/components/show-password/show-password.scss
index c866c89cd5b..ec8244fb6ee 100644
--- a/src/core/components/show-password/show-password.scss
+++ b/src/core/components/show-password/show-password.scss
@@ -3,30 +3,29 @@
 :host {
     display: contents;
 
-    ion-button {
+    // Only applies to deprecated way (surrounding).
+    ::ng-deep ion-input + ion-button {
         background: transparent;
-        padding: 0 calc(var(--padding-start) / 2);
-        position: absolute;
-        @include safe-area-position(null, 0px, null, null);
+        padding: 0 var(--inner-padding-end) 0 4px;
         margin-top: 0;
         margin-bottom: 0;
-        z-index: 3;
-        bottom: 0;
+        position: absolute;
+        @include safe-area-position(null, 0px, null, null);
+        top: 0;
     }
-}
 
-::ng-deep ion-input {
-    --padding-end: 47px !important;
-}
+    // Only applies to deprecated way (surrounding).
+    ::ng-deep ion-input {
+        --padding-end: 56px !important;
+    }
 
-:host-context(.md.item-label.stacked) ion-button {
-    bottom: 0;
-}
+    ::ng-deep ion-input.input-label-placement-stacked + ion-button {
+        top: 14px;
+    }
 
-:host-context(.iositem-label.stacked) ion-button {
-    bottom: -5px;
 }
 
-:host-context(.ios) ion-button {
-    bottom: 0;
+ion-button {
+    z-index: 5;
+    pointer-events: visible;
 }
diff --git a/src/core/components/show-password/show-password.ts b/src/core/components/show-password/show-password.ts
index de79a3f960d..506f50e6d65 100644
--- a/src/core/components/show-password/show-password.ts
+++ b/src/core/components/show-password/show-password.ts
@@ -18,18 +18,31 @@ import { IonInput } from '@ionic/angular';
 import { CorePlatform } from '@services/platform';
 import { CoreDomUtils } from '@services/utils/dom';
 import { CoreUtils } from '@services/utils/utils';
+import { CoreLogger } from '@singletons/logger';
 
 /**
- * Component to allow showing and hiding a password. The affected input MUST have a name to identify it.
+ * This component allows to show/hide a password.
+ * It's meant to be used with ion-input.
+ * It's recommended to use it as a slot of the input.
  *
  * @description
- * This directive needs to surround the input with the password.
  *
- * You need to supply the name of the input.
+ * There are 2 ways to use ths component:
+ * - Slot it to start or end on the ion-input element.
+ * - Surround the ion-input with the password with this component. This is deprecated.
  *
- * Example:
+ * In order to help finding the input you can specify the name of the input or the ion-input element.
  *
- * <core-show-password name="password">
+ *
+ * Example of new usage:
+ *
+ * <ion-input type="password" name="password">
+ *     <core-show-password slot="end" />
+ * </ion-input>
+ *
+ * Example deprecated usage:
+ *
+ * <core-show-password>
  *     <ion-input type="password" name="password"></ion-input>
  * </core-show-password>
  */
@@ -40,17 +53,30 @@ import { CoreUtils } from '@services/utils/utils';
 })
 export class CoreShowPasswordComponent implements OnInit, AfterViewInit {
 
-    @Input() name?: string; // Name of the input affected.
     @Input() initialShown?: boolean | string; // Whether the password should be shown at start.
-    @ContentChild(IonInput) ionInput?: IonInput;
 
-    shown = false; // Whether the password is shown.
+    @Input() name = ''; // Deprecated. Not used anymore.
+    @ContentChild(IonInput) ionInput?: IonInput | HTMLIonInputElement; // Deprecated. Use slot instead.
 
-    protected input?: HTMLInputElement; // Input affected.
-    protected element: HTMLElement; // Current element.
+    protected input?: HTMLInputElement;
+    protected hostElement: HTMLElement;
+    protected logger: CoreLogger;
 
     constructor(element: ElementRef) {
-        this.element = element.nativeElement;
+        this.hostElement = element.nativeElement;
+        this.logger = CoreLogger.getInstance('CoreShowPasswordComponent');
+    }
+
+    get shown(): boolean {
+        return this.input?.type === 'text';
+    }
+
+    set shown(shown: boolean) {
+        if (!this.input) {
+            return;
+        }
+
+        this.input.type = shown ? 'text' : 'password';
     }
 
     /**
@@ -64,28 +90,12 @@ export class CoreShowPasswordComponent implements OnInit, AfterViewInit {
      * @inheritdoc
      */
     async ngAfterViewInit(): Promise<void> {
-        if (this.ionInput) {
-            try {
-                // It's an ion-input, use it to get the native element.
-                this.input = await this.ionInput.getInputElement();
-                this.setData(this.input);
-            } catch (error) {
-                // This should never fail, but it does in some testing environment because Ionic elements are not
-                // rendered properly. So in case this fails, we'll just ignore the error.
-            }
-
-            return;
-        }
-
-        // Search the input.
-        this.input = this.element.querySelector<HTMLInputElement>('input[name="' + this.name + '"]') ?? undefined;
+        await this.setInputElement();
 
         if (!this.input) {
             return;
         }
 
-        this.setData(this.input);
-
         // By default, don't autocapitalize and autocorrect.
         if (!this.input.getAttribute('autocorrect')) {
             this.input.setAttribute('autocorrect', 'off');
@@ -96,12 +106,33 @@ export class CoreShowPasswordComponent implements OnInit, AfterViewInit {
     }
 
     /**
-     * Set label, icon name and input type.
-     *
-     * @param input The input element.
+     * Set the input element to affect.
      */
-    protected setData(input: HTMLInputElement): void {
-        input.type = this.shown ? 'text' : 'password';
+    protected async setInputElement(): Promise<void> {
+        if (!this.ionInput) {
+            this.ionInput = this.hostElement.closest('ion-input') ?? undefined;
+
+            this.hostElement.setAttribute('slot', 'end');
+        } else {
+            // It's outside ion-input, warn devs.
+            this.logger.warn('Deprecated CoreShowPasswordComponent usage, it\'s not needed to surround ion-input anymore.');
+        }
+
+        if (!this.ionInput) {
+            return;
+        }
+
+        try {
+            this.input = await this.ionInput.getInputElement();
+        } catch {
+            // This should never fail, but it does in some testing environment because Ionic elements are not
+            // rendered properly. So in case this fails it will try to find through the name and ignore the error.
+            const name = this.ionInput.name;
+            if (!name) {
+                return;
+            }
+            this.input = this.hostElement.querySelector<HTMLInputElement>('input[name="' + name + '"]') ?? undefined;
+        }
     }
 
     /**
@@ -110,7 +141,7 @@ export class CoreShowPasswordComponent implements OnInit, AfterViewInit {
      * @param event The mouse event.
      */
     toggle(event: Event): void {
-        if (event.type == 'keyup' && !this.isValidKeyboardKey(<KeyboardEvent>event)) {
+        if (event.type === 'keyup' && !this.isValidKeyboardKey(<KeyboardEvent>event)) {
             return;
         }
 
@@ -120,13 +151,8 @@ export class CoreShowPasswordComponent implements OnInit, AfterViewInit {
         const isFocused = document.activeElement === this.input;
         this.shown = !this.shown;
 
-        if (!this.input) {
-            return;
-        }
-
-        this.setData(this.input);
         // In Android, the keyboard is closed when the input type changes. Focus it again.
-        if (isFocused && CorePlatform.isAndroid()) {
+        if (this.input && isFocused && CorePlatform.isAndroid()) {
             CoreDomUtils.focusElement(this.input);
         }
     }
diff --git a/src/core/features/login/login.scss b/src/core/features/login/login.scss
index 1c9514390d4..1afb8ffed7d 100644
--- a/src/core/features/login/login.scss
+++ b/src/core/features/login/login.scss
@@ -18,15 +18,9 @@
 
     ion-button.core-button-as-link {
         --color: var(--core-login-text-color);
-        text-decoration-color: var(--core-login-text-color);
-
-        ion-label {
-            color: var(--core-login-text-color);
-        }
+        text-decoration-color: var(--color);
     }
 
-
-
     .core-login-reconnect-warning {
         margin: 0px 0px 32px 0px;
     }
diff --git a/src/core/features/login/pages/credentials/credentials.html b/src/core/features/login/pages/credentials/credentials.html
index ade5a36e227..a4a899d0e62 100644
--- a/src/core/features/login/pages/credentials/credentials.html
+++ b/src/core/features/login/pages/credentials/credentials.html
@@ -47,11 +47,11 @@ <h2 *ngIf="siteName" class="ion-margin-top ion-no-padding core-sitename">
                             required="true" [attr.aria-label]="'core.login.username' | translate " />
                     </ion-item>
                     <ion-item class="ion-margin-bottom" lines="inset">
-                        <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" [attr.aria-label]="'core.login.password' | translate " />
-                        </core-show-password>
+                        <ion-input name="password" type="password" placeholder="{{ 'core.login.password' | translate }}"
+                            formControlName="password" [clearOnEdit]="false" autocomplete="current-password" enterkeyhint="go"
+                            required="true" [attr.aria-label]="'core.login.password' | translate ">
+                            <core-show-password slot="end" />
+                        </ion-input>
                     </ion-item>
                     <ion-button expand="block" type="submit" [disabled]="!credForm.valid"
                         class="ion-margin core-login-login-button ion-text-wrap">
diff --git a/src/core/features/login/pages/email-signup/email-signup.html b/src/core/features/login/pages/email-signup/email-signup.html
index f2cca3ec58d..1c721637651 100644
--- a/src/core/features/login/pages/email-signup/email-signup.html
+++ b/src/core/features/login/pages/email-signup/email-signup.html
@@ -104,13 +104,12 @@ <h2>{{ 'core.login.createuserandpass' | translate }}</h2>
                         <core-input-errors [control]="signupForm.controls.username" [errorMessages]="usernameErrors" />
                     </ion-item>
                     <ion-item class="ion-text-wrap">
-                        <ion-label position="stacked">
-                            <p [core-mark-required]="true">{{ 'core.login.password' | translate }}</p>
-                        </ion-label>
-                        <core-show-password name="password">
-                            <ion-input name="password" type="password" placeholder="{{ 'core.login.password' | translate }}"
-                                formControlName="password" [clearOnEdit]="false" autocomplete="new-password" required="true" />
-                        </core-show-password>
+                        <ion-input labelPlacement="stacked" name="password" type="password"
+                            placeholder="{{ 'core.login.password' | translate }}" formControlName="password" [clearOnEdit]="false"
+                            autocomplete="new-password" required="true">
+                            <div slot="label" [core-mark-required]="true">{{ 'core.login.password' | translate }}</div>
+                            <core-show-password slot="end" />
+                        </ion-input>
                         <p *ngIf="settings.passwordpolicy" class="core-input-footnote">
                             {{settings.passwordpolicy}}
                         </p>
diff --git a/src/core/features/login/pages/reconnect/reconnect.html b/src/core/features/login/pages/reconnect/reconnect.html
index 0ea9009d4c0..149e0d45a2a 100644
--- a/src/core/features/login/pages/reconnect/reconnect.html
+++ b/src/core/features/login/pages/reconnect/reconnect.html
@@ -58,12 +58,12 @@ <h1>{{ 'core.login.reconnect' | translate }}</h1>
             <div class="core-login-methods">
                 <form *ngIf="!isBrowserSSO" [formGroup]="credForm" (ngSubmit)="login($event)" class="core-login-form" #reconnectForm>
                     <ion-item class="ion-margin-bottom" lines="inset">
-                        <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"
-                                [attr.aria-label]="'core.login.password' | translate" />
-                        </core-show-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"
+                            [attr.aria-label]="'core.login.password' | translate">
+                            <core-show-password slot="end" />
+                        </ion-input>
                     </ion-item>
                     <ion-button type="submit" expand="block" [disabled]="!credForm.valid"
                         class="ion-margin core-login-login-button ion-text-wrap">

From bea73940edd23e40c888782cbd4168c506fa7f30 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Tue, 12 Dec 2023 16:23:14 +0100
Subject: [PATCH 08/11] MOBILE-3947 core: Avoid item overflow on input errors

---
 .../calendar/pages/edit-event/edit-event.html |  4 +-
 .../calendar/pages/edit-event/edit-event.ts   |  4 --
 .../input-errors/core-input-errors.html       |  2 +-
 .../components/input-errors/input-errors.ts   | 70 ++++++++++++-------
 .../components/mark-required/mark-required.ts | 17 +++--
 .../login/pages/email-signup/email-signup.ts  | 19 +++--
 .../features/login/services/login-helper.ts   | 54 --------------
 src/theme/theme.base.scss                     |  4 ++
 upgrade.txt                                   |  1 +
 9 files changed, 73 insertions(+), 102 deletions(-)

diff --git a/src/addons/calendar/pages/edit-event/edit-event.html b/src/addons/calendar/pages/edit-event/edit-event.html
index bca2701b6a0..fde3faec04c 100644
--- a/src/addons/calendar/pages/edit-event/edit-event.html
+++ b/src/addons/calendar/pages/edit-event/edit-event.html
@@ -21,7 +21,7 @@ <h1>{{ title | translate }}</h1>
                     formControlName="name">
                     <div slot="label" [core-mark-required]="true">{{ 'addon.calendar.eventname' | translate }}</div>
                 </ion-input>
-                <core-input-errors [control]="form.controls.name" [errorMessages]="errors" />
+                <core-input-errors [control]="form.controls.name" />
             </ion-item>
 
             <!-- Date. -->
@@ -37,7 +37,7 @@ <h1>{{ title | translate }}</h1>
                         </ion-datetime>
                     </ng-template>
                 </ion-modal>
-                <core-input-errors [control]="form.controls.timestart" [errorMessages]="errors" />
+                <core-input-errors [control]="form.controls.timestart" />
             </ion-item>
 
             <!-- Type. -->
diff --git a/src/addons/calendar/pages/edit-event/edit-event.ts b/src/addons/calendar/pages/edit-event/edit-event.ts
index 7eb187dc49d..a30321547f8 100644
--- a/src/addons/calendar/pages/edit-event/edit-event.ts
+++ b/src/addons/calendar/pages/edit-event/edit-event.ts
@@ -69,7 +69,6 @@ export class AddonCalendarEditEventPage implements OnInit, OnDestroy, CanLeave {
     groups: CoreGroup[] = [];
     loadingGroups = false;
     courseGroupSet = false;
-    errors: Record<string, string>;
     error = false;
     eventRepeatId?: number;
     otherEventsCount = 0;
@@ -100,9 +99,6 @@ export class AddonCalendarEditEventPage implements OnInit, OnDestroy, CanLeave {
     ) {
         this.currentSite = CoreSites.getRequiredCurrentSite();
         this.remindersEnabled = CoreReminders.isEnabled();
-        this.errors = {
-            required: Translate.instant('core.required'),
-        };
 
         this.form = new FormGroup({});
 
diff --git a/src/core/components/input-errors/core-input-errors.html b/src/core/components/input-errors/core-input-errors.html
index ac6829dff64..c4a3a8a07e3 100644
--- a/src/core/components/input-errors/core-input-errors.html
+++ b/src/core/components/input-errors/core-input-errors.html
@@ -1,7 +1,7 @@
 <ng-container *ngIf="control && control.dirty && !control.valid">
     <ng-container *ngFor="let error of errorKeys">
         <div *ngIf="control.hasError(error)" class="core-input-error">
-            <span *ngIf="errorMessages && errorMessages[error]">{{errorMessages[error]}}</span>
+            <span *ngIf="errorMessages && errorMessages[error]">{{ errorMessages[error] | translate }}</span>
             <span *ngIf="(!errorMessages || !errorMessages[error]) && error === 'max' && control.errors?.max">
                 {{ 'core.login.invalidvaluemax' | translate:{$a: control.errors!.max.max} }}
             </span>
diff --git a/src/core/components/input-errors/input-errors.ts b/src/core/components/input-errors/input-errors.ts
index 1178676491f..570386555a5 100644
--- a/src/core/components/input-errors/input-errors.ts
+++ b/src/core/components/input-errors/input-errors.ts
@@ -14,7 +14,6 @@
 
 import { Component, ElementRef, HostBinding, Input, OnChanges, OnInit, SimpleChange } from '@angular/core';
 import { FormControl } from '@angular/forms';
-import { Translate } from '@singletons';
 
 /**
  * Component to show errors if an input isn't valid.
@@ -30,8 +29,7 @@ import { Translate } from '@singletons';
  * Example usage:
  *
  * <ion-item class="ion-text-wrap">
- *     <ion-label stacked [core-mark-required]="true">{{ 'core.login.username' | translate }}</ion-label>
- *     <ion-input type="text" name="username" formControlName="username"></ion-input>
+ *     <ion-input type="text" name="username" formControlName="username" required="true"></ion-input>
  *     <core-input-errors [control]="myForm.controls.username" [errorMessages]="usernameErrors"></core-input-errors>
  * </ion-item>
  */
@@ -42,12 +40,12 @@ import { Translate } from '@singletons';
 })
 export class CoreInputErrorsComponent implements OnInit, OnChanges {
 
-    @Input() control?: FormControl;
-    @Input() errorMessages: Record<string, string> = {};
+    @Input() control?: FormControl; // Needed to be able to check the validity of the input.
+    @Input() errorMessages: Record<string, string> = {}; // Error messages to show. Keys must be the name of the error.
     @Input() errorText = ''; // Set other non automatic errors.
     errorKeys: string[] = [];
 
-    protected element: HTMLElement;
+    protected hostElement: HTMLElement;
 
     @HostBinding('class.has-errors')
     get hasErrors(): boolean {
@@ -59,31 +57,60 @@ export class CoreInputErrorsComponent implements OnInit, OnChanges {
     constructor(
         element: ElementRef,
     ) {
-        this.element = element.nativeElement;
+        this.hostElement = element.nativeElement;
     }
 
     /**
      * Initialize some common errors if they aren't set.
      */
     protected initErrorMessages(): void {
-        this.errorMessages.required = this.errorMessages.required || Translate.instant('core.required');
-        this.errorMessages.email = this.errorMessages.email || Translate.instant('core.login.invalidemail');
-        this.errorMessages.date = this.errorMessages.date || Translate.instant('core.login.invaliddate');
-        this.errorMessages.datetime = this.errorMessages.datetime || Translate.instant('core.login.invaliddate');
-        this.errorMessages.datetimelocal = this.errorMessages.datetimelocal || Translate.instant('core.login.invaliddate');
-        this.errorMessages.time = this.errorMessages.time || Translate.instant('core.login.invalidtime');
-        this.errorMessages.url = this.errorMessages.url || Translate.instant('core.login.invalidurl');
-
-        // Set empty values by default, the default error messages will be built in the template when needed.
-        this.errorMessages.max = this.errorMessages.max || '';
-        this.errorMessages.min = this.errorMessages.min || '';
+        this.errorMessages = {
+            required: this.errorMessages.required || 'core.required',
+            email: this.errorMessages.email || 'core.login.invalidemail',
+            date: this.errorMessages.date || 'core.login.invaliddate',
+            datetime: this.errorMessages.datetime || 'core.login.invaliddate',
+            datetimelocal: this.errorMessages.datetimelocal || 'core.login.invaliddate',
+            time: this.errorMessages.time || 'core.login.invalidtime',
+            url: this.errorMessages.url || 'core.login.invalidurl',
+            // Set empty values by default, the default error messages will be built in the template when needed.
+            max: this.errorMessages.max || '',
+            min: this.errorMessages.min || '',
+        };
+
+        this.errorMessages.requiredTrue = this.errorMessages.required;
+
+        this.errorKeys = Object.keys(this.errorMessages);
     }
 
     /**
      * @inheritdoc
      */
     ngOnInit(): void {
-        this.element.closest('ion-item')?.classList.add('has-core-input-errors');
+        const parent = this.hostElement.parentElement;
+        let item: HTMLElement | null = null;
+
+        if (parent?.tagName === 'ION-ITEM') {
+            item = parent;
+
+            // Get all elements on the parent and wrap them with a div.
+            // This is needed because otherwise the error message will be shown on the right of the input. Or overflowing the item.
+            const wrapper = document.createElement('div');
+
+            wrapper.classList.add('core-input-errors-wrapper');
+
+            Array.from(parent.children).forEach((child) => {
+                if (!child.slot) {
+                    wrapper.appendChild(child);
+                }
+            });
+
+            parent.appendChild(wrapper);
+        } else {
+            item = this.hostElement.closest('ion-item');
+        }
+
+        item?.classList.add('has-core-input-errors');
+
     }
 
     /**
@@ -92,11 +119,6 @@ export class CoreInputErrorsComponent implements OnInit, OnChanges {
     ngOnChanges(changes: { [name: string]: SimpleChange }): void {
         if ((changes.control || changes.errorMessages) && this.control) {
             this.initErrorMessages();
-
-            this.errorKeys = this.errorMessages ? Object.keys(this.errorMessages) : [];
-        }
-        if (changes.errorText) {
-            this.errorText = changes.errorText.currentValue;
         }
     }
 
diff --git a/src/core/components/mark-required/mark-required.ts b/src/core/components/mark-required/mark-required.ts
index 5b72cf37820..f0bc34b516b 100644
--- a/src/core/components/mark-required/mark-required.ts
+++ b/src/core/components/mark-required/mark-required.ts
@@ -37,13 +37,13 @@ export class CoreMarkRequiredComponent implements OnInit, AfterViewInit {
 
     @Input('core-mark-required') coreMarkRequired: boolean | string = true;
 
-    protected element: HTMLElement;
+    protected hostElement: HTMLElement;
     requiredLabel = Translate.instant('core.required');
 
     constructor(
         element: ElementRef,
     ) {
-        this.element = element.nativeElement;
+        this.hostElement = element.nativeElement;
     }
 
     /**
@@ -59,18 +59,21 @@ export class CoreMarkRequiredComponent implements OnInit, AfterViewInit {
     ngAfterViewInit(): void {
         if (this.coreMarkRequired) {
             // Add the "required" to the aria-label.
-            const ariaLabel = this.element.getAttribute('aria-label') ||
-                CoreTextUtils.cleanTags(this.element.innerHTML, { singleLine: true });
+            const ariaLabel = this.hostElement.getAttribute('aria-label') ||
+                CoreTextUtils.cleanTags(this.hostElement.innerHTML, { singleLine: true });
             if (ariaLabel) {
-                this.element.setAttribute('aria-label', ariaLabel + ' ' + this.requiredLabel);
+                this.hostElement.setAttribute('aria-label', ariaLabel + '. ' + this.requiredLabel);
             }
         } else {
             // Remove the "required" from the aria-label.
-            const ariaLabel = this.element.getAttribute('aria-label');
+            const ariaLabel = this.hostElement.getAttribute('aria-label');
             if (ariaLabel) {
-                this.element.setAttribute('aria-label', ariaLabel.replace(' ' + this.requiredLabel, ''));
+                this.hostElement.setAttribute('aria-label', ariaLabel.replace('. ' + this.requiredLabel, ''));
             }
         }
+
+        const input = this.hostElement.closest('ion-input, ion-textarea');
+        input?.setAttribute('required', this.coreMarkRequired ? 'true' : 'false');
     }
 
 }
diff --git a/src/core/features/login/pages/email-signup/email-signup.ts b/src/core/features/login/pages/email-signup/email-signup.ts
index 8938b13eb33..43797e23334 100644
--- a/src/core/features/login/pages/email-signup/email-signup.ts
+++ b/src/core/features/login/pages/email-signup/email-signup.ts
@@ -105,15 +105,14 @@ export class CoreLoginEmailSignupPage implements OnInit {
         });
 
         // Setup validation errors.
-        this.usernameErrors = CoreLoginHelper.getErrorMessages('core.login.usernamerequired');
-        this.passwordErrors = CoreLoginHelper.getErrorMessages('core.login.passwordrequired');
-        this.emailErrors = CoreLoginHelper.getErrorMessages('core.login.missingemail');
-        this.policyErrors = CoreLoginHelper.getErrorMessages('core.login.policyagree');
-        this.email2Errors = CoreLoginHelper.getErrorMessages(
-            'core.login.missingemail',
-            undefined,
-            'core.login.emailnotmatch',
-        );
+        this.usernameErrors = { required: 'core.login.usernamerequired' };
+        this.passwordErrors = { required: 'core.login.passwordrequired' };
+        this.emailErrors = { required: 'core.login.missingemail' };
+        this.policyErrors = { required: 'core.login.policyagree' };
+        this.email2Errors = {
+            required: 'core.login.missingemail',
+            pattern: 'core.login.emailnotmatch',
+        };
     }
 
     /**
@@ -224,7 +223,7 @@ export class CoreLoginEmailSignupPage implements OnInit {
         const namefieldsErrors = {};
         if (this.settings.namefields) {
             this.settings.namefields.forEach((field) => {
-                namefieldsErrors[field] = CoreLoginHelper.getErrorMessages('core.login.missing' + field);
+                namefieldsErrors[field] = { required: 'core.login.missing' + field };
             });
         }
         this.namefieldsErrors = namefieldsErrors;
diff --git a/src/core/features/login/services/login-helper.ts b/src/core/features/login/services/login-helper.ts
index aed48d58310..a8c22c345ac 100644
--- a/src/core/features/login/services/login-helper.ts
+++ b/src/core/features/login/services/login-helper.ts
@@ -252,60 +252,6 @@ export class CoreLoginHelperProvider {
         return CoreTextUtils.treatDisabledFeatures(disabledFeatures);
     }
 
-    /**
-     * Builds an object with error messages for some common errors.
-     * Please notice that this function doesn't support all possible error types.
-     *
-     * @param requiredMsg Code of the string for required error.
-     * @param emailMsg Code of the string for invalid email error.
-     * @param patternMsg Code of the string for pattern not match error.
-     * @param urlMsg Code of the string for invalid url error.
-     * @param minlengthMsg Code of the string for "too short" error.
-     * @param maxlengthMsg Code of the string for "too long" error.
-     * @param minMsg Code of the string for min value error.
-     * @param maxMsg Code of the string for max value error.
-     * @returns Object with the errors.
-     */
-    getErrorMessages(
-        requiredMsg?: string,
-        emailMsg?: string,
-        patternMsg?: string,
-        urlMsg?: string,
-        minlengthMsg?: string,
-        maxlengthMsg?: string,
-        minMsg?: string,
-        maxMsg?: string,
-    ): Record<string, string> {
-        const errors: Record<string, string> = {};
-
-        if (requiredMsg) {
-            errors.required = errors.requiredTrue = Translate.instant(requiredMsg);
-        }
-        if (emailMsg) {
-            errors.email = Translate.instant(emailMsg);
-        }
-        if (patternMsg) {
-            errors.pattern = Translate.instant(patternMsg);
-        }
-        if (urlMsg) {
-            errors.url = Translate.instant(urlMsg);
-        }
-        if (minlengthMsg) {
-            errors.minlength = Translate.instant(minlengthMsg);
-        }
-        if (maxlengthMsg) {
-            errors.maxlength = Translate.instant(maxlengthMsg);
-        }
-        if (minMsg) {
-            errors.min = Translate.instant(minMsg);
-        }
-        if (maxMsg) {
-            errors.max = Translate.instant(maxMsg);
-        }
-
-        return errors;
-    }
-
     /**
      * Get logo URL from a site public config.
      *
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 929209ef899..c50f2471aec 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -126,6 +126,10 @@ ion-item > .in-item,
     white-space: normal !important;
 }
 
+ion-item .core-input-errors-wrapper {
+    width: 100%;
+}
+
 @each $color-name, $unused in $colors {
     .text-#{$color-name},
     p.text-#{$color-name} {
diff --git a/upgrade.txt b/upgrade.txt
index 76fb4cca7e8..f188871bca9 100644
--- a/upgrade.txt
+++ b/upgrade.txt
@@ -10,6 +10,7 @@ For more information about upgrading, read the official documentation: https://m
  - Removed CoreToLocaleStringPipe deprecated since 3.6.0
  - With the upgrade to Ionic 7 ion-slides is no longer supported and now you need to use swiper-container and swiper-slide. More info here: https://ionicframework.com/docs/angular/slides
  - With the upgrade to Ionic7 ion-datetime has changed its usage. We recommend using ion-datetime-button. More info here: https://ionicframework.com/docs/updating/6-0#datetime
+ - CoreLoginHelper.getErrorMessages has been removed. Please create the messages object yourself.
 
 === 4.3.0 ===
 

From b73e2c874b9349047fb23fb13daf29b2707dae6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 13 Dec 2023 14:55:19 +0100
Subject: [PATCH 09/11] MOBILE-3947 styles: Fix limited width inside loading

---
 src/core/components/loading/loading.scss | 9 ---------
 src/theme/theme.base.scss                | 9 +++++++++
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/core/components/loading/loading.scss b/src/core/components/loading/loading.scss
index 923321dda3c..1c86d60ca3f 100644
--- a/src/core/components/loading/loading.scss
+++ b/src/core/components/loading/loading.scss
@@ -86,12 +86,3 @@
     // Implicit Inline.
     @include inline();
 }
-
-:host-context(.limited-width > *):not([slot]),
-:host-context(.menu > *):not([slot]) {
-    &.core-loading-loaded {
-        --contents-display: flex;
-        flex-direction: column;
-    }
-    min-height: 100%;
-}
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index c50f2471aec..b12d50e1422 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -970,6 +970,15 @@ ion-content.limited-width > :not([slot]) {
     min-height: 100%;
 }
 
+.limited-width > core-loading:not([slot]),
+.menu > core-loading:not([slot]) {
+    &.core-loading-loaded {
+        --contents-display: flex;
+        flex-direction: column;
+    }
+    min-height: 100%;
+}
+
 ion-toolbar h1 img.core-bar-button-image,
 ion-toolbar h1 .core-bar-button-image img {
     padding: 4px;

From d912d9d9af3398458a7739a2bcbd0173a05ed3b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 13 Dec 2023 15:31:42 +0100
Subject: [PATCH 10/11] MOBILE-3947 behat: Fix RTE behat setField

---
 .../rich-text-editor/core-editor-rich-text-editor.html   | 2 +-
 .../components/rich-text-editor/rich-text-editor.ts      | 9 ++++++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html b/src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html
index 8daa430f729..029b97c3d64 100644
--- a/src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html
+++ b/src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html
@@ -6,7 +6,7 @@
     </div>
 
     <ion-textarea [hidden]="rteEnabled" #textarea class="core-textarea" role="textbox" [attr.name]="name" ngControl="control"
-        [placeholder]="placeholder" [attr.aria-label]="placeholder" (ionChange)="onChange()" (ionFocus)="showToolbar($event)"
+        [placeholder]="placeholder" [attr.aria-labelledby]="ariaLabelledBy" (ionChange)="onChange()" (ionFocus)="showToolbar($event)"
         (ionBlur)="hideToolbar($event)" />
 
     <div class="core-rte-info-message" *ngIf="infoMessage">
diff --git a/src/core/features/editor/components/rich-text-editor/rich-text-editor.ts b/src/core/features/editor/components/rich-text-editor/rich-text-editor.ts
index 2d54bd8f63e..48787de7f30 100644
--- a/src/core/features/editor/components/rich-text-editor/rich-text-editor.ts
+++ b/src/core/features/editor/components/rich-text-editor/rich-text-editor.ts
@@ -231,11 +231,18 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterViewInit,
             return;
         }
 
-        const updateArialabelledBy = () => this.ariaLabelledBy = label.getAttribute('id') ?? undefined;
+        const updateArialabelledBy = () => {
+            this.ariaLabelledBy = label.getAttribute('id') ?? undefined;
+        };
 
         this.labelObserver = new MutationObserver(updateArialabelledBy);
         this.labelObserver.observe(label, { attributes: true, attributeFilter: ['id'] });
 
+        // Usually the label won't have an id, so we need to add one.
+        if (!label.getAttribute('id')) {
+            label.setAttribute('id', 'rte-'+CoreUtils.getUniqueId('CoreEditorRichTextEditor'));
+        }
+
         updateArialabelledBy();
     }
 

From 2335ff801042542d21120a124d5bf1a9d22b2ed4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 13 Dec 2023 17:43:28 +0100
Subject: [PATCH 11/11] MOBILE-3947 behat: Fix isSelected function

---
 src/testing/services/behat-dom.ts | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/testing/services/behat-dom.ts b/src/testing/services/behat-dom.ts
index 06f09a91fa2..fe32cb01c1f 100644
--- a/src/testing/services/behat-dom.ts
+++ b/src/testing/services/behat-dom.ts
@@ -77,16 +77,25 @@ export class TestingBehatDomUtilsService {
      *
      * @param element Element.
      * @param container Container.
+     * @param firstCall Whether this is the first call of the function.
      * @returns Whether the element is selected or not.
      */
-    isElementSelected(element: HTMLElement, container: HTMLElement): boolean {
+    isElementSelected(element: HTMLElement, container: HTMLElement, firstCall = true): boolean {
         const ariaCurrent = element.getAttribute('aria-current');
-        if (
-            (ariaCurrent && ariaCurrent !== 'false') ||
-            (element.getAttribute('aria-selected') === 'true') ||
-            (element.getAttribute('aria-checked') === 'true')
-        ) {
-            return true;
+        const ariaSelected = element.getAttribute('aria-selected');
+        const ariaChecked = element.getAttribute('aria-checked');
+
+        if (ariaCurrent || ariaSelected || ariaChecked) {
+            return (!!ariaCurrent && ariaCurrent !== 'false') ||
+                (!!ariaSelected && ariaSelected === 'true') ||
+                (!!ariaChecked && ariaChecked === 'true');
+        }
+
+        if (firstCall) {
+            const inputElement =  element.closest('ion-checkbox, ion-radio, ion-toggle')?.querySelector('input');
+            if (inputElement) {
+                return inputElement.value === 'on';
+            }
         }
 
         const parentElement = this.getParentElement(element);
@@ -94,7 +103,7 @@ export class TestingBehatDomUtilsService {
             return false;
         }
 
-        return this.isElementSelected(parentElement, container);
+        return this.isElementSelected(parentElement, container, false);
     }
 
     /**