From abd1a32f63d033b84cd55d41a62dd2f948bddf83 Mon Sep 17 00:00:00 2001
From: Dani Palou <dani@moodle.com>
Date: Fri, 8 Mar 2024 12:07:20 +0100
Subject: [PATCH] MOBILE-3947 datetime: Improve a11y of datetime-button

---
 src/addons/calendar/pages/edit-event/edit-event.html | 12 ++++++------
 .../component/addon-user-profile-field-datetime.html | 10 +++++-----
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/addons/calendar/pages/edit-event/edit-event.html b/src/addons/calendar/pages/edit-event/edit-event.html
index 75f3667c6..a26e827e9 100644
--- a/src/addons/calendar/pages/edit-event/edit-event.html
+++ b/src/addons/calendar/pages/edit-event/edit-event.html
@@ -27,9 +27,9 @@
             <!-- Date. -->
             <ion-item class="ion-text-wrap">
                 <ion-label position="stacked">
-                    <p class="item-heading" [core-mark-required]="true">{{ 'core.date' | translate }}</p>
+                    <label class="item-heading" [core-mark-required]="true" for="timestart-button">{{ 'core.date' | translate }}</label>
                 </ion-label>
-                <ion-datetime-button datetime="timestart" />
+                <ion-datetime-button datetime="timestart" id="timestart-button" />
                 <ion-modal [keepContentsMounted]="true">
                     <ng-template>
                         <ion-datetime id="timestart" formControlName="timestart" presentation="date-time" [max]="maxDate" [min]="minDate"
@@ -147,12 +147,12 @@
                     </ion-item>
                     <ion-item>
                         <ion-radio [value]="1">
-                            <p>{{ 'addon.calendar.durationuntil' | translate }}</p>
+                            <p><label for="timedurationuntil-button">{{ 'addon.calendar.durationuntil' | translate }}</label></p>
                         </ion-radio>
                     </ion-item>
                     <ion-item *ngIf="form.controls.duration.value === 1">
                         <ion-label position="stacked" />
-                        <ion-datetime-button datetime="timedurationuntil" />
+                        <ion-datetime-button datetime="timedurationuntil" id="timedurationuntil-button" />
                         <ion-modal [keepContentsMounted]="true">
                             <ng-template>
                                 <ion-datetime id="timedurationuntil" formControlName="timedurationuntil" [max]="maxDate" [min]="minDate"
@@ -164,11 +164,11 @@
                     </ion-item>
                     <ion-item>
                         <ion-radio [value]="2">
-                            <p id="durationinminutes">{{ 'addon.calendar.durationminutes' | translate }}</p>
+                            <p><label for="timedurationminutes">{{ 'addon.calendar.durationminutes' | translate }}</label></p>
                         </ion-radio>
                     </ion-item>
                     <ion-item *ngIf="form.controls.duration.value === 2">
-                        <ion-input type="number" name="timedurationminutes" labelPlacement="start" aria-labelledby="durationinminutes"
+                        <ion-input type="number" name="timedurationminutes" labelPlacement="start" id="timedurationminutes"
                             [placeholder]="'addon.calendar.durationminutes' | translate" formControlName="timedurationminutes" />
                     </ion-item>
                 </ion-radio-group>
diff --git a/src/addons/userprofilefield/datetime/component/addon-user-profile-field-datetime.html b/src/addons/userprofilefield/datetime/component/addon-user-profile-field-datetime.html
index 563e186cf..08e8498a2 100644
--- a/src/addons/userprofilefield/datetime/component/addon-user-profile-field-datetime.html
+++ b/src/addons/userprofilefield/datetime/component/addon-user-profile-field-datetime.html
@@ -13,17 +13,17 @@
 <!-- Edit. -->
 <ion-item *ngIf="edit && field && field.shortname && form" class="ion-text-wrap" [formGroup]="form">
     <ion-label position="stacked">
-        <span [core-mark-required]="required">
+        <label [core-mark-required]="required" for="profile-field-datetime-{{field.shortname}}-button">
             <core-format-text [text]="field.name" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId"
                 [courseId]="courseId" [wsNotFiltered]="true" />
-        </span>
+        </label>
     </ion-label>
 
-    <ion-datetime-button datetime="datetime" />
+    <ion-datetime-button datetime="profile-field-datetime-{{field.shortname}}" id="profile-field-datetime-{{field.shortname}}-button" />
     <ion-modal [keepContentsMounted]="true">
         <ng-template>
-            <ion-datetime id="datetime" [formControlName]="modelName" [presentation]="ionDateTimePresentation" [max]="max" [min]="min"
-                [showDefaultButtons]="true">
+            <ion-datetime id="profile-field-datetime-{{field.shortname}}" [formControlName]="modelName"
+                [presentation]="ionDateTimePresentation" [max]="max" [min]="min" [showDefaultButtons]="true">
                 <span slot="title">
                     <core-format-text [text]="field.name" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId"
                         [courseId]="courseId" [wsNotFiltered]="true" />