feat(timepicker): add aria-label to input (#5604)

Add aria label attribute to inputs in timepicker component
Add ability to set aria labels via CimpickerConfig

Close #4149

Co-authored-by: Dmitriy Shekhovtsov <valorkin@gmail.com>

demo/src/app/components/+timepicker/demos/config/config.ts

@@ -11,7 +11,10 @@ export function getTimepickerConfig(): TimepickerConfig {
     readonlyInput: false,
     mousewheel: true,
     showMinutes: true,
-    showSeconds: false
+    showSeconds: false,
+    labelHours: 'Hours',
+    labelMinutes: 'Minutes',
+    labelSeconds: 'Seconds'
   });
 }
 

src/timepicker/timepicker.component.html

@@ -42,7 +42,7 @@
              (wheel)="prevDef($event);changeHours(hourStep * wheelSign($event), 'wheel')"
              (keydown.ArrowUp)="changeHours(hourStep, 'key')"
              (keydown.ArrowDown)="changeHours(-hourStep, 'key')"
-             (change)="updateHours($event.target.value)"></td>
+             (change)="updateHours($event.target.value)" [attr.aria-label]="labelHours"></td>
     <!-- divider -->
     <td *ngIf="showMinutes">&nbsp;:&nbsp;</td>
     <!-- minutes -->
@@ -57,7 +57,7 @@
              (wheel)="prevDef($event);changeMinutes(minuteStep * wheelSign($event), 'wheel')"
              (keydown.ArrowUp)="changeMinutes(minuteStep, 'key')"
              (keydown.ArrowDown)="changeMinutes(-minuteStep, 'key')"
-             (change)="updateMinutes($event.target.value)">
+             (change)="updateMinutes($event.target.value)" [attr.aria-label]="labelMinutes">
     </td>
     <!-- divider -->
     <td *ngIf="showSeconds">&nbsp;:&nbsp;</td>
@@ -73,7 +73,7 @@
              (wheel)="prevDef($event);changeSeconds(secondsStep * wheelSign($event), 'wheel')"
              (keydown.ArrowUp)="changeSeconds(secondsStep, 'key')"
              (keydown.ArrowDown)="changeSeconds(-secondsStep, 'key')"
-             (change)="updateSeconds($event.target.value)">
+             (change)="updateSeconds($event.target.value)" [attr.aria-label]="labelSeconds">
     </td>
     <!-- space between -->
     <td *ngIf="showMeridian">&nbsp;&nbsp;&nbsp;</td>

src/timepicker/timepicker.component.ts

@@ -145,6 +145,11 @@ export class TimepickerComponent
   invalidMinutes = false;
   invalidSeconds = false;
 
+  // aria-label variables
+  labelHours: string;
+  labelMinutes: string;
+  labelSeconds: string;
+
   // time picker controls state
   canIncrementHours: boolean;
   canIncrementMinutes: boolean;

src/timepicker/timepicker.config.ts

@@ -37,4 +37,10 @@ export class TimepickerConfig {
   minutesPlaceholder = 'MM';
   /** placeholder for seconds field in timepicker */
   secondsPlaceholder = 'SS';
+  /** hours aria label */
+  ariaLabelHours = 'hours';
+  /** minutes aria label */
+  ariaLabelMinutes = 'minutes';
+  /** seconds aria label */
+  ariaLabelSeconds = 'seconds';
 }