feat(datepcker): Add aria-labelledby attribute #8080 (#8199)

Author: IvayloG

CHANGELOG.md

@@ -4,6 +4,8 @@ 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.

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

@@ -4,12 +4,12 @@
 
 <ng-template #readOnlyDatePickerTemplate>
     <igx-input-group (click)="openDialog()">
-        <label igxLabel *ngIf="!labelDirective&&!labelVisibility">Date</label>
+        <label igxLabel *ngIf="!_labelDirectiveUserTemplate&&!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 +24,12 @@
 
 <ng-template #editableDatePickerTemplate>
     <igx-input-group #editableInputGroup>
-        <label igxLabel *ngIf="!labelDirective&&!labelVisibility">Date</label>
+        <label igxLabel *ngIf="!_labelDirectiveUserTemplate&&!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,
@@ -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;
@@ -429,7 +435,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 +664,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 +691,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 +843,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 +966,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() {