refactor(time-picker): add aria attributes #6482

Author: PlamenaMiteva

projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts

@@ -225,7 +225,7 @@ export abstract class PickerBaseDirective extends DisplayDensityBase implements
         this.locale = this.locale || this._localeId;
     }
 
-    public abstract select(value: Date | string): void;
+    public abstract select(value: Date | DateRange | string): void;
     public abstract open(settings?: OverlaySettings): void;
     public abstract toggle(settings?: OverlaySettings): void;
     public abstract close(): void;

projects/igniteui-angular/src/lib/time-picker/time-picker.component.html

@@ -2,7 +2,7 @@
 <igx-input-group [suppressInputAutofocus]="this.isDropdown" (click)="!this.isDropdown && this.open()">
     <input igxInput [igxDateTimeEditor]="this.inputFormat" type="text" [readonly]="!this.isDropdown"
         [spinDelta]="this.itemsDelta" [disabled]="this.disabled" [displayFormat]="this.displayFormat"
-        [placeholder]="this.placeholder" role="combobox" aria-haspopup="dialog"
+        role="combobox" aria-haspopup="dialog"
         [attr.aria-expanded]="!this.toggleDirective.collapsed" [attr.aria-labelledby]="this.label?.id" />
 
     <igx-prefix *ngIf="!this.toggleComponents.length" (click)="this.toggle()">
@@ -51,7 +51,7 @@
     </div>
 </ng-template>
 
-<div #toggleDirective="toggle" igxToggle class="igx-time-picker"
+<div #toggleDirective="toggle" igxToggle role="dialog" class="igx-time-picker"
     [ngClass]="{'igx-time-picker--dropdown': this.isDropdown, 'igx-time-picker--vertical': this.isVertical && !this.isDropdown}">
     <div *ngIf="!this.isDropdown" class="igx-time-picker__header">
         <h2 class="igx-time-picker__header-hour">
@@ -61,16 +61,16 @@ <h2 class="igx-time-picker__header-hour">
     <div class="igx-time-picker__main">
         <div class="igx-time-picker__body">
             <div *ngIf="this.showHoursList" #hourList [igxItemList]="'hourList'">
-                <span [igxTimeItem]="hour" *ngFor="let hour of hourView">{{ hour }}</span>
+                <span role="spinbutton" [attr.aria-label]="hour" [igxTimeItem]="hour" *ngFor="let hour of hourView">{{ hour }}</span>
             </div>
             <div *ngIf="this.showMinutesList" #minuteList [igxItemList]="'minuteList'">
-                <span [igxTimeItem]="minute" *ngFor="let minute of minuteView">{{ minute }}</span>
+                <span role="spinbutton" [attr.aria-label]="minute" [igxTimeItem]="minute" *ngFor="let minute of minuteView">{{ minute }}</span>
             </div>
             <div *ngIf="this.showSecondsList" #secondsList [igxItemList]="'secondsList'">
-                <span [igxTimeItem]="seconds" *ngFor="let seconds of secondsView">{{ seconds }}</span>
+                <span role="spinbutton" [attr.aria-label]="seconds" [igxTimeItem]="seconds" *ngFor="let seconds of secondsView">{{ seconds }}</span>
             </div>
             <div *ngIf="this.showAmPmList" #ampmList [igxItemList]="'ampmList'">
-                <span [igxTimeItem]="ampm" *ngFor="let ampm of ampmView">{{ ampm }}</span>
+                <span role="spinbutton" [attr.aria-label]="ampm" [igxTimeItem]="ampm" *ngFor="let ampm of ampmView">{{ ampm }}</span>
             </div>
         </div>
         <ng-container

projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts

@@ -15,11 +15,13 @@ import { IgxToggleDirective, IgxToggleModule } from '../directives/toggle/toggle
 import { IBaseCancelableBrowserEventArgs, IBaseEventArgs, KEYS } from '../core/utils';
 import { DatePart, IgxDateTimeEditorDirective } from '../directives/date-time-editor/public_api';
 import { IgxItemListDirective } from './time-picker.directives';
+import { DateTimeUtil } from '../date-common/util/date-time.util';
+import { time } from 'console';
 
 const CSS_CLASS_TIMEPICKER = 'igx-time-picker';
 const CSS_CLASS_INPUTGROUP = 'igx-input-group';
 const CSS_CLASS_INPUTGROUP_DISABLED = 'igx-input-group--disabled';
-const CSS_CLASS_INPUT = 'igx-input-group__input';
+const CSS_CLASS_INPUT = '.igx-input-group__input';
 const CSS_CLASS_DROPDOWN = '.igx-time-picker--dropdown';
 const CSS_CLASS_HOURLIST = '.igx-time-picker__hourList';
 const CSS_CLASS_MINUTELIST = '.igx-time-picker__minuteList';
@@ -41,7 +43,7 @@ describe('IgxTimePicker', () => {
                 'registerOnTouchedCb',
                 'registerOnValidatorChangeCb']);
         const mockInjector = jasmine.createSpyObj('Injector', { get: mockNgControl });
-        const mockDateTimeEditorDirective = jasmine.createSpyObj('IgxDateTimeEditorDirective', { value: null });
+        const mockDateTimeEditorDirective = jasmine.createSpyObj('IgxDateTimeEditorDirective', ['increment', 'decrement'], { value: null });
 
         it('should open/close the dropdown with open()/close() method', () => {
             timePicker = new IgxTimePickerComponent(elementRef, null, null, null, mockInjector);
@@ -136,7 +138,6 @@ describe('IgxTimePicker', () => {
             const selectedDate = new Date(2020, 12, 12, 6, 45, 0);
             spyOn(timePicker.valueChange, 'emit').and.callThrough();
 
-
             timePicker.select(selectedDate);
             expect(timePicker.value).toEqual(selectedDate);
             expect(timePicker.valueChange.emit).toHaveBeenCalled();
@@ -163,6 +164,24 @@ describe('IgxTimePicker', () => {
             expect(timePicker.validationFailed.emit).toHaveBeenCalled();
             expect(timePicker.validationFailed.emit).toHaveBeenCalledWith(args);
         });
+
+        xit('should change date parts correctly with increment() and decrement() methods', () => {
+            timePicker = new IgxTimePickerComponent(elementRef, null, null, null, null);
+            (timePicker as any).dateTimeEditor = mockDateTimeEditorDirective;
+
+            const date = new Date(2020, 12, 12, 10, 30, 30);
+            timePicker.value = new Date(date);
+            timePicker.minValue = new Date(2020, 12, 12, 6, 0, 0);
+            timePicker.maxValue = new Date(2020, 12, 12, 16, 0, 0);
+            timePicker.itemsDelta = { hour: 2, minute: 20, second: 1 };
+            spyOn(timePicker.valueChange, 'emit').and.callThrough();
+
+            timePicker.increment(DatePart.Hours);
+            date.setHours(date.getHours() + timePicker.itemsDelta.hour);
+            expect(timePicker.value).toEqual(date);
+            expect(timePicker.valueChange.emit).toHaveBeenCalled();
+            expect(timePicker.valueChange.emit).toHaveBeenCalledWith(date);
+        });
     });
 
     describe('Interaction tests', () => {
@@ -171,6 +190,8 @@ describe('IgxTimePicker', () => {
         let inputGroup: DebugElement;
         let input: DebugElement;
         let hourColumn: DebugElement;
+        let minutesColumn: DebugElement;
+        let ampmColumn: DebugElement;
         let toggleDirectiveElement: DebugElement;
         let toggleDirective: IgxToggleDirective;
 
@@ -294,7 +315,7 @@ describe('IgxTimePicker', () => {
                 hourColumn.triggerEventHandler('wheel', event);
                 fixture.detectChanges();
                 hourColumn.triggerEventHandler('wheel', event);
-                fixture.detectChanges();hourColumn.triggerEventHandler('wheel', event);
+                fixture.detectChanges(); hourColumn.triggerEventHandler('wheel', event);
                 fixture.detectChanges();
                 const selectedHour = fixture.componentInstance.date.getHours() - 3;
                 expect((timePicker.value as Date).getHours()).toEqual(selectedHour);
@@ -397,6 +418,34 @@ describe('IgxTimePicker', () => {
 
                 closingSub.unsubscribe();
             }));
+
+            it('should change date parts correctly with increment() and decrement() methods', () => {
+                const date = new Date(2020, 12, 12, 10, 30, 30);
+                timePicker.value = new Date(date);
+                timePicker.minValue = new Date(2020, 12, 12, 6, 0, 0);
+                timePicker.maxValue = new Date(2020, 12, 12, 16, 0, 0);
+                timePicker.itemsDelta = { hour: 2, minute: 20, second: 15 };
+                fixture.detectChanges();
+                spyOn(timePicker.valueChange, 'emit').and.callThrough();
+
+                timePicker.increment(DatePart.Hours);
+                date.setHours(date.getHours() + timePicker.itemsDelta.hour);
+                expect(timePicker.value).toEqual(date);
+                expect(timePicker.valueChange.emit).toHaveBeenCalledTimes(1);
+                expect(timePicker.valueChange.emit).toHaveBeenCalledWith(date);
+
+                timePicker.increment(DatePart.Minutes);
+                date.setMinutes(date.getMinutes() + timePicker.itemsDelta.minute);
+                expect(timePicker.value).toEqual(date);
+                expect(timePicker.valueChange.emit).toHaveBeenCalledTimes(2);
+                expect(timePicker.valueChange.emit).toHaveBeenCalledWith(date);
+
+                timePicker.decrement(DatePart.Seconds);
+                date.setSeconds(date.getSeconds() - timePicker.itemsDelta.second);
+                expect(timePicker.value).toEqual(date);
+                expect(timePicker.valueChange.emit).toHaveBeenCalledTimes(3);
+                expect(timePicker.valueChange.emit).toHaveBeenCalledWith(date);
+            });
         });
 
         describe('Renedering tests', () => {
@@ -419,10 +468,21 @@ describe('IgxTimePicker', () => {
                 timePickerElement = fixture.debugElement.query(By.css(CSS_CLASS_TIMEPICKER)).nativeElement;
                 inputGroup = fixture.debugElement.query(By.css(`.${CSS_CLASS_INPUTGROUP}`));
                 hourColumn = fixture.debugElement.query(By.css(CSS_CLASS_HOURLIST));
+                minutesColumn = fixture.debugElement.query(By.css(CSS_CLASS_MINUTELIST));
+                ampmColumn = fixture.debugElement.query(By.css(CSS_CLASS_AMPMLIST));
                 toggleDirectiveElement = fixture.debugElement.query(By.directive(IgxToggleDirective));
                 toggleDirective = toggleDirectiveElement.injector.get(IgxToggleDirective) as IgxToggleDirective;
             }));
 
+            it('should initialize all input properties with their default values', () => {
+                expect(timePicker.mode).toEqual(PickerInteractionMode.DropDown);
+                expect(timePicker.inputFormat).toEqual(DateTimeUtil.DEFAULT_TIME_INPUT_FORMAT);
+                expect(timePicker.itemsDelta.hour).toEqual(1);
+                expect(timePicker.itemsDelta.minute).toEqual(1);
+                expect(timePicker.itemsDelta.second).toEqual(1);
+                expect(timePicker.disabled).toEqual(false);
+            });
+
             it('should be able to change the mode at runtime', fakeAsync(() => {
                 fixture.componentInstance.timePicker.mode = PickerInteractionMode.DropDown;
                 fixture.detectChanges();
@@ -500,13 +560,52 @@ describe('IgxTimePicker', () => {
 
                 expect(selectedTime).toEqual(`${hours}:${minutes} ${ampm}`);
             }));
+
+            it('should apply all aria attributes correctly', fakeAsync(() => {
+                const input = fixture.nativeElement.querySelector(CSS_CLASS_INPUT);
+                expect(input.getAttribute('role')).toEqual('combobox');
+                expect(input.getAttribute('aria-haspopup')).toEqual('dialog');
+                expect(input.getAttribute('aria-labelledby')).toEqual(timePicker.label.id);
+                expect(input.getAttribute('aria-expanded')).toEqual('false');
+                timePicker.open();
+                tick();
+                fixture.detectChanges();
+                expect(input.getAttribute('aria-expanded')).toEqual('true');
+                let hour = 8;
+                let minutes = 42;
+                let ampm = 0;
+                hourColumn.children.forEach(el => function () {
+                    expect(el.attributes.role).toEqual('spinbutton');
+                    const hours = hour < 10 ? `0${hour}` : `${hour}`;
+                    expect(el.attributes["ariaLabel"]).toEqual(hours);
+                    hour++;
+                });
+                minutesColumn.children.forEach(el => function () {
+                    expect(el.attributes.role).toEqual('spinbutton');
+                    expect(el.attributes["ariaLabel"]).toEqual(`${minutes}`);
+                    minutes++;
+                });
+                ampmColumn.children.forEach(el => function () {
+                    expect(el.attributes.role).toEqual('spinbutton');
+                    const ampmLabel = ampm === 3 ? 'AM' : ampm === 4 ? 'PM' : null;
+                    expect(el.attributes["ariaLabel"]).toEqual(ampmLabel);
+                    ampm++;
+                });
+                timePicker.close();
+                tick();[[]]
+                fixture.detectChanges();
+                expect(input.getAttribute('aria-expanded')).toEqual('false');
+            }));
+
         });
     });
 });
 
 @Component({
     template: `
-        <igx-time-picker #picker [value]="date" [mode]="mode" [minValue]="minValue" [maxValue]="maxValue"></igx-time-picker>
+        <igx-time-picker #picker [value]="date" [mode]="mode" [minValue]="minValue" [maxValue]="maxValue">
+        <label igxLabel>Select time</label>
+        </igx-time-picker>
     `
 })
 export class IgxTimePickerTestComponent {

projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts

@@ -19,7 +19,15 @@ import {
     Injector,
     LOCALE_ID, Optional, ContentChildren, QueryList, OnChanges, SimpleChanges
 } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl, AbstractControl, ValidationErrors, Validator, NG_VALIDATORS } from '@angular/forms';
+import {
+    ControlValueAccessor,
+    NG_VALUE_ACCESSOR,
+    NgControl,
+    AbstractControl,
+    ValidationErrors,
+    Validator,
+    NG_VALIDATORS
+} from '@angular/forms';
 import { HAMMER_GESTURE_CONFIG, HammerGestureConfig } from '@angular/platform-browser';
 import { IgxIconModule } from '../icon/public_api';
 import { IgxInputGroupModule, IgxInputGroupComponent } from '../input-group/input-group.component';
@@ -50,11 +58,10 @@ import { IgxTextSelectionModule } from '../directives/text-selection/text-select
 import { IgxLabelDirective } from '../directives/label/label.directive';
 import { PickerBaseDirective } from '../date-common/picker-base.directive';
 import { DateTimeUtil } from '../date-common/util/date-time.util';
-import { DatePart, DatePartDeltas } from '../directives/date-time-editor/public_api';
+import { DatePart } from '../directives/date-time-editor/public_api';
 import { PickerHeaderOrientation } from '../date-common/types';
 import { IgxPickerToggleComponent } from '../date-common/picker-icons.common';
 import { TimeFormatPipe } from './time-picker.pipes';
-import { defaultCipherList } from 'constants';
 
 
 let NEXT_ID = 0;
@@ -150,7 +157,7 @@ export class IgxTimePickerComponent extends PickerBaseDirective
     /**
      * Gets/Sets the interaction mode - dialog or drop down.
      *
-     *  @example
+     * @example
      * ```html
      * <igx-time-picker mode="dialog"></igx-time-picker>
      * ```
@@ -159,14 +166,14 @@ export class IgxTimePickerComponent extends PickerBaseDirective
     public mode: PickerInteractionMode = PickerInteractionMode.DropDown;
 
     /**
-    * Minimum value required for the picker to remain valid.
+    * The minimum value the picker will accept.
     *
     * @remarks
-    * If a `string` value is passed in, it must be in the defined input format.
+    * If a `string` value is passed in, it must be in ISO format.
     *
     * @example
     * ```html
-    * <igx-time-picker format="HH:mm" [minValue]="18:00"></igx-time-picker>
+    * <igx-time-picker [minValue]="18:00:00"></igx-time-picker>
     * ```
     */
     @Input()
@@ -180,14 +187,14 @@ export class IgxTimePickerComponent extends PickerBaseDirective
     }
 
     /**
-    * Maximum value required for the picker to remain valid.
+    * The maximum value the picker will accept.
     *
     * @remarks
-    * If a `string` value is passed in, it must be in the defined input format.
+    * If a `string` value is passed in, it must be in ISO format.
     *
     * @example
     * ```html
-    * <igx-time-picker format="HH:mm" [maxValue]="20:30"></igx-time-picker>
+    * <igx-time-picker [maxValue]="20:30:00"></igx-time-picker>
     * ```
     */
     @Input()
@@ -572,11 +579,10 @@ export class IgxTimePickerComponent extends PickerBaseDirective
     }
 
     /**
-     * An @Input property that gets/sets the delta by which hour and minute items would be changed <br>
-     * when the user presses the Up/Down keys.
-     * By default `itemsDelta` is set to `{hours: 1, minutes: 1, seconds: 1}`
+     * Delta values used to increment or decrement each editor date part on spin actions and to display time portions in the dropdown/dialog.
+     * By default `itemsDelta` is set to `{hour: 1, minute: 1, second: 1}`
      * ```html
-     * <igx-time-picker [itemsDelta]="{hours:3, minutes:5, seconds:10}" id="time-picker"></igx-time-picker>
+     * <igx-time-picker [itemsDelta]="{hour:3, minute:5, second:10}" id="time-picker"></igx-time-picker>
      * ```
      */
     @Input()