Merge pull request #3878 from crazyserver/MOBILE-3947

Mobile 3947
moodlehq · Dec 14, 2023 · a2f49c5 · a2f49c5
2 parents 96d0b5a + 2335ff8
commit a2f49c5
Show file tree

Hide file tree

Showing 97 changed files with 851 additions and 846 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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",

diff --git 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
@@ -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
@@ -17,11 +17,11 @@ <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" />
-                <core-input-errors [control]="form.controls.name" [errorMessages]="errors" />
+                <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" />
             </ion-item>
 
             <!-- Date. -->
@@ -37,17 +37,18 @@ <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. -->
             <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/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/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
@@ -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
@@ -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>