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

Author: IvayloG

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 10.1.7
+
+### 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.
+
 ## 10.1.0
 
 ### General

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,
@@ -287,6 +287,43 @@ describe('IgxDatePicker', () => {
 
     });
 
+    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', () => {
         // configureTestSuite();
         let fixture: ComponentFixture<IgxDatePickerWithPassedDateComponent>;
@@ -1423,6 +1460,7 @@ describe('IgxDatePicker', () => {
         let moduleRef;
         let injector;
         let inputGroup: IgxInputGroupComponent;
+        let renderer2: Renderer2;
 
         beforeEach(() => {
             ngModel = {
@@ -1445,11 +1483,16 @@ describe('IgxDatePicker', () => {
             };
             moduleRef = {};
             injector = { get: () => ngModel };
+
             inputGroup = new IgxInputGroupComponent(null, null);
+            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();
             ngModel.control.validator = () => ({ required: true });
@@ -1462,7 +1505,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();
             ngModel.control.validator = () => ({ required: true });
@@ -1475,7 +1518,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();
             datePicker.ngOnInit();
@@ -1572,14 +1615,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,7 @@ 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 +32,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';
@@ -394,7 +400,8 @@ 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.
@@ -647,6 +654,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
      */
@@ -792,6 +806,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 = {
@@ -909,6 +928,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() {