Merge branch 'master' into ibarakov/fix-7090-master

Author: igdmdimitrov

CHANGELOG.md

@@ -4,15 +4,17 @@ All notable changes for each version of this project will be documented in this
 ## 10.2.0
 
 ### General
+- `IgxDatePicker`
+    - Added `aria-labelledby` property for the input field. This will ensure the users of assistive technologies will also know what component is used for, upon input focus.
 - `IgxInputGroup`
     - **Breaking Change** - Removed `fluent`, `fluent_search`, `bootstrap`, and `indigo` as possible values for the `type` input property. 
     - **Behavioral Change** - The styling of the input group is now dictated by the theme being used. The remaining `types` - `line`, `border`, and `box` will only have effect on the styling when used with the `material` theme. The `search` type will affect styling when used with all themes. Changing the theme at runtime will not change the styling of the input group, a page refresh is required.
 - `IgxOverlay`
     - **Breaking Change** - `target` property in `PositionSettings` has been deprecated. You can set the attaching target for the component to show in `OverlaySettings` instead.
 - `IgxSelect`
     - Added `aria-labelledby` property for the items list container(marked as `role="listbox"`). This will ensure the users of assistive technologies will also know what the list items container is used for, upon opening.
-- `IgxDatePicker`
-    - **Breaking Change** - Deprecated the `label` and `labelVisibility` properties.
+- `IgxDatePicker`	
+    - **Breaking Change** - Deprecated the `label` property.
 
 
 ### New Features
@@ -23,7 +25,7 @@ All notable changes for each version of this project will be documented in this
 - ` IgxExcelExporterService`
     - Added `worksheetName` property to the `IgxExcelExporterOptions`, that allows setting the name of the worksheet.
 - `IgxDatePicker`
-    - The `labelVisibility` and the `label` property have been deprecated and now a custom label is set by nesting a <label igxLabel></label> inside the <igx-date-picker><igx-date-picker> tags.
+    - The the `label` property have been deprecated and a custom label can also be set by nesting a <label igxLabel></label> inside the <igx-date-picker><igx-date-picker> tags.
 - `IgxTimePicker`
     - Added a custom label functionality.
 - `IgxCalendar` and `IgxDatePicker` - new `showWeekNumbers` input, that allows showing of the week number at left side of content area.

projects/igniteui-angular/src/lib/date-picker/README.md

@@ -41,7 +41,7 @@ DatePicker with cancel and today buttons
 </igx-date-picker>
 ```
 
-The DatePicker's custom label can be set in the way shown below. If `labelVisibility` is set to `false` and a custom label is not used, a default one will be set.
+The DatePicker's custom label can be set in two ways, either by changing the `label` property or in the way shown below.
 ````html
 <igx-date-picker>
     <label igxLabel>Custom label</label>

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

@@ -4,12 +4,11 @@
 
 <ng-template #readOnlyDatePickerTemplate>
     <igx-input-group (click)="openDialog()">
-        <label igxLabel *ngIf="!labelDirective&&!labelVisibility">Date</label>
         <ng-container ngProjectAs="[igxLabel]" *ngTemplateOutlet="labelTemplate"></ng-container>
         <igx-prefix>
             <igx-icon>today</igx-icon>
         </igx-prefix>
-        <label *ngIf="labelVisibility&&!labelDirective" igxLabel>{{label}}</label>
+        <label *ngIf="labelVisibility&&!_labelDirectiveUserTemplate" igxLabel>{{label}}</label>
         <input
             class="igx-date-picker__input-date"
             igxInput
@@ -24,12 +23,11 @@
 
 <ng-template #editableDatePickerTemplate>
     <igx-input-group #editableInputGroup>
-        <label igxLabel *ngIf="!labelDirective&&!labelVisibility">Date</label>
         <ng-container ngProjectAs="[igxLabel]" *ngTemplateOutlet="labelTemplate"></ng-container>
         <igx-prefix (click)="onOpenClick($event)">
             <igx-icon>today</igx-icon>
         </igx-prefix>
-        <label *ngIf="labelVisibility&&!labelDirective" igxLabel>{{label}}</label>
+        <label *ngIf="labelVisibility&&!_labelDirectiveUserTemplate" igxLabel>{{label}}</label>
         <input
             class="igx-date-picker__input-date"
             igxInput

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

@@ -1,5 +1,5 @@
-import { Component, ViewChild, ElementRef, EventEmitter, QueryList } from '@angular/core';
-import { async, fakeAsync, TestBed, tick, flush, ComponentFixture } from '@angular/core/testing';
+import { Component, ViewChild, ElementRef, EventEmitter, QueryList, Renderer2, DebugElement } from '@angular/core';
+import { fakeAsync, TestBed, tick, flush, ComponentFixture, waitForAsync } from '@angular/core/testing';
 import { FormsModule, FormGroup, FormBuilder, ReactiveFormsModule, Validators, NgControl } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -23,7 +23,7 @@ import {
 
 describe('IgxDatePicker', () => {
     configureTestSuite();
-    beforeAll(async(() => {
+    beforeAll(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [
                 IgxDatePickerTestComponent,
@@ -159,7 +159,7 @@ describe('IgxDatePicker', () => {
             fixture.detectChanges();
 
             label = fixture.debugElement.query(By.directive(IgxLabelDirective));
-            expect(label.nativeElement.innerText).toBe('Date');
+            expect(label).toBeNull();
         });
 
         it('When update label property it should reflect on the label text of the datepicker', () => {
@@ -179,7 +179,7 @@ describe('IgxDatePicker', () => {
             fixture.detectChanges();
 
             let label = fixture.debugElement.query(By.directive(IgxLabelDirective));
-            expect(label.nativeElement.innerText).toBe('Date');
+            expect(label).toBeNull();
 
             fixture.componentInstance.labelVisibility = true;
             fixture.detectChanges();
@@ -207,9 +207,9 @@ describe('IgxDatePicker', () => {
             fixtureProjectedLabel.detectChanges();
             testComponent.customLabelVisibility = false;
             fixtureProjectedLabel.detectChanges();
-            label = dom.query(By.directive(IgxLabelDirective)).nativeElement.innerText;
+            label = dom.query(By.directive(IgxLabelDirective));
             fixtureProjectedLabel.detectChanges();
-            expect(label).toEqual('Date');
+            expect(label).toBeNull();
 
             testComponent.customLabelVisibility = true;
             fixtureProjectedLabel.detectChanges();
@@ -314,7 +314,43 @@ describe('IgxDatePicker', () => {
                 const input = fixture.debugElement.query(By.directive(IgxInputDirective)).nativeElement;
                 expect(input.tabIndex).toBe(3);
             });
+    });
+
+    describe('ARIA Tests', () => {
+        let labelID: string;
+        let inputLabelledBy: string;
+        let dom: DebugElement;
+
+        it('ARIA Test for a picker with an input group template', () => {
+            const fixture = TestBed.createComponent(IgxDatePickerRetemplatedComponent);
+            fixture.detectChanges();
+            dom = fixture.debugElement;
+
+            labelID = dom.query(By.directive(IgxLabelDirective)).nativeElement.id;
+            inputLabelledBy = dom.query(By.directive(IgxInputDirective)).nativeElement.getAttribute('aria-labelledby');
+            expect(inputLabelledBy).toEqual(labelID);
+        });
 
+        it('ARIA Test for picker with a dialog mode', () => {
+            const fixture = TestBed.createComponent(IgxDatePickerTestComponent);
+            fixture.detectChanges();
+            dom = fixture.debugElement;
+
+            labelID = dom.query(By.directive(IgxLabelDirective)).nativeElement.id;
+            inputLabelledBy = dom.query(By.directive(IgxInputDirective)).nativeElement.getAttribute('aria-labelledby');
+            expect(inputLabelledBy).toEqual(labelID);
+        });
+
+
+        it('ARIA Test for picker with a dropdown mode', () => {
+            const fixture = TestBed.createComponent(IgxDatePickerOpeningComponent);
+            fixture.detectChanges();
+            dom = fixture.debugElement;
+
+            labelID = dom.query(By.directive(IgxLabelDirective)).nativeElement.id;
+            inputLabelledBy = dom.query(By.directive(IgxInputDirective)).nativeElement.getAttribute('aria-labelledby');
+            expect(inputLabelledBy).toEqual(labelID);
+        });
     });
 
     describe('DatePicker with passed date', () => {
@@ -1453,6 +1489,7 @@ describe('IgxDatePicker', () => {
         let moduleRef;
         let injector;
         let inputGroup: IgxInputGroupComponent;
+        let renderer2: Renderer2;
 
         beforeEach(() => {
             ngModel = {
@@ -1476,10 +1513,13 @@ describe('IgxDatePicker', () => {
             moduleRef = {};
             injector = { get: () => ngModel };
             inputGroup = new IgxInputGroupComponent(null, null, null, document);
+            renderer2 = jasmine.createSpyObj('Renderer2', ['setAttribute'], [{}, 'aria-labelledby', 'test-label-id-1']);
+            spyOn(renderer2, 'setAttribute').and.callFake(() => {
+            });
         });
 
         it('should initialize date picker with required correctly', () => {
-            const datePicker = new IgxDatePickerComponent(overlay, element, cdr, moduleRef, injector);
+            const datePicker = new IgxDatePickerComponent(overlay, element, cdr, moduleRef, injector, renderer2);
             datePicker['_inputGroup'] = inputGroup;
             datePicker['_inputDirectiveUserTemplates'] = new QueryList();
             spyOnProperty(datePicker, 'inputGroupElement').and.returnValue(null);
@@ -1493,7 +1533,7 @@ describe('IgxDatePicker', () => {
         });
 
         it('should initialize date picker with required correctly with user template input-group', () => {
-            const datePicker = new IgxDatePickerComponent(overlay, element, cdr, moduleRef, injector);
+            const datePicker = new IgxDatePickerComponent(overlay, element, cdr, moduleRef, injector, renderer2);
             datePicker['_inputGroupUserTemplate'] = inputGroup;
             datePicker['_inputDirectiveUserTemplates'] = new QueryList();
             spyOnProperty(datePicker, 'inputGroupElement').and.returnValue(null);
@@ -1507,7 +1547,7 @@ describe('IgxDatePicker', () => {
         });
 
         it('should update inputGroup isRequired correctly', () => {
-            const datePicker = new IgxDatePickerComponent(overlay, element, cdr, moduleRef, injector);
+            const datePicker = new IgxDatePickerComponent(overlay, element, cdr, moduleRef, injector, renderer2);
             datePicker['_inputGroup'] = inputGroup;
             datePicker['_inputDirectiveUserTemplates'] = new QueryList();
             spyOnProperty(datePicker, 'inputGroupElement').and.returnValue(null);
@@ -1619,14 +1659,16 @@ export class IgxDatePickerNgModelComponent {
 <igx-date-picker>
     <ng-template igxDatePickerTemplate let-displayData="displayData">
         <igx-input-group>
-            <label igxLabel>Date</label>
+            <label igxLabel>Custom Date Label</label>
             <input igxInput [value]="displayData" required />
         </igx-input-group>
     </ng-template>
 </igx-date-picker>
     `
 })
-export class IgxDatePickerRetemplatedComponent { }
+export class IgxDatePickerRetemplatedComponent {
+    @ViewChild(IgxDatePickerComponent, { static: true }) public datePicker: IgxDatePickerComponent;
+ }
 
 @Component({
     template: `

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

@@ -20,7 +20,8 @@ import {
     Injector,
     AfterViewChecked,
     ContentChildren,
-    QueryList
+    QueryList,
+    Renderer2
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl, AbstractControl, NG_VALIDATORS, ValidationErrors } from '@angular/forms';
 import {
@@ -32,7 +33,13 @@ import {
     isDateInRanges
 } from '../calendar/public_api';
 import { IgxIconModule } from '../icon/public_api';
-import { IgxInputGroupModule, IgxInputDirective, IgxInputGroupComponent, IgxInputState } from '../input-group/public_api';
+import {
+    IgxInputGroupModule,
+    IgxInputDirective,
+    IgxInputGroupComponent,
+    IgxInputState,
+    IgxLabelDirective
+} from '../input-group/public_api';
 import { Subject, fromEvent, animationFrameScheduler, interval, Subscription } from 'rxjs';
 import { filter, takeUntil, throttle } from 'rxjs/operators';
 import { IgxOverlayOutletDirective } from '../directives/toggle/toggle.directive';
@@ -61,7 +68,6 @@ import { IgxDatePickerTemplateDirective, IgxDatePickerActionsDirective } from '.
 import { IgxCalendarContainerComponent } from './calendar-container.component';
 import { InteractionMode } from '../core/enums';
 import { fadeIn, fadeOut } from '../animations/fade';
-import { IgxLabelDirective } from '../directives/label/label.directive';
 import { DeprecateProperty } from '../core/deprecateDecorators';
 
 let NEXT_ID = 0;
@@ -184,18 +190,7 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
      * By default the visibility is set to true.
      * @example
      * <igx-date-picker [labelVisibility]="false"></igx-date-picker>
-     * @deprecated Use
-     * ````html
-     * <igx-date-picker>
-     *      <label igxLabel>Custom label</label>
-     * </igx-date-picker>
-     * ````
-     * to set a custom label.
      */
-    @DeprecateProperty(`Deprecated. Use
-    <igx-date-picker>
-        <label igxLabel>Custom label</label>
-    </igx-date-picker> to set a label.` )
     @Input()
     public labelVisibility = true;
 
@@ -429,7 +424,10 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
         public element: ElementRef,
         private _cdr: ChangeDetectorRef,
         private _moduleRef: NgModuleRef<any>,
-        private _injector: Injector) { }
+        private _injector: Injector,
+        private _renderer: Renderer2) {
+        }
+
 
     /**
      * Gets the input group template.
@@ -655,20 +653,14 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
     @ViewChild('readOnlyDatePickerTemplate', { read: TemplateRef, static: true })
     protected readOnlyDatePickerTemplate: TemplateRef<any>;
 
-    /*
-     * @hidden @internal
-     */
-    @ContentChild(IgxLabelDirective)
-    public labelDirective: IgxLabelDirective;
-
     /*
      * @hidden
      */
     @ViewChild('editableDatePickerTemplate', { read: TemplateRef, static: true })
     protected editableDatePickerTemplate: TemplateRef<any>;
 
     /*
-     * @hidden
+     * @hidden @internal
      */
     @ViewChild(IgxInputGroupComponent)
     protected _inputGroup: IgxInputGroupComponent;
@@ -688,6 +680,13 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
     @ContentChildren(IgxInputDirective, { descendants: true })
     private _inputDirectiveUserTemplates: QueryList<IgxInputDirective>;
 
+    @ViewChild(IgxLabelDirective)
+    protected _labelDirective: IgxLabelDirective;
+
+    /** @hidden @internal */
+    @ContentChild(IgxLabelDirective)
+    public _labelDirectiveUserTemplate: IgxLabelDirective;
+
     /**
      * @hidden
      */
@@ -833,6 +832,11 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
         return this._inputDirective || this._inputDirectiveUserTemplates.first || null;
     }
 
+    /** @hidden @internal */
+    public get labelDirective(): IgxLabelDirective {
+        return this._labelDirective || this._labelDirectiveUserTemplate || null;
+    }
+
     /** @hidden @internal */
     public ngOnInit(): void {
         this._positionSettings = {
@@ -951,6 +955,10 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
         }
         // TODO: persist validation state when dynamically changing 'dropdown' to 'dialog' ot vice versa.
         // For reference -> it is currently persisted if a user template is passed (as template is not recreated)
+
+        if (this.labelDirective) {
+            this._renderer.setAttribute(this.inputDirective.nativeElement, 'aria-labelledby', this.labelDirective.id);
+        }
     }
 
     protected onStatusChanged() {