MOBILE-3947 datetime: Improve a11y of datetime-button

main
Dani Palou 2024-03-08 12:07:20 +01:00
parent f0bb576920
commit abd1a32f63
2 changed files with 11 additions and 11 deletions

View File

@ -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>

View File

@ -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" />