Merge pull request #8157 from IgniteUI/iganchev/select-aria-8079-10.1.x

Add aria-labelledby for listbox - 10.1.x

Author: Lipata

CHANGELOG.md

@@ -29,6 +29,8 @@ All notable changes for each version of this project will be documented in this
     - Added a disabled style for time parts outside of the minimum and maximum range.
 - `igxDatePicker`
     -  Added new property - `editorTabIndex`, that allows setting tabindex for the default editor.
+- `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.
 
 ### New Theme
 Ignite UI for Angular now has a new theme based on our own design system.

projects/igniteui-angular/src/lib/select/select.component.html

@@ -12,7 +12,7 @@
         [value]="this.selectionValue"
         role="combobox"
         aria-haspopup="listbox"
-        [attr.aria-labelledby]="this.label ? this.label.id : ''"
+        [attr.aria-labelledby]="this.label?.id"
         [attr.aria-expanded]="!this.collapsed"
         [attr.aria-owns]="this.listId"
         [attr.aria-activedescendant]="!this.collapsed ? this.focusedItem?.id : null"
@@ -40,7 +40,8 @@
     </div>
 
     <!-- #7436 LMB scrolling closes items container - unselectable attribute is IE specific  -->
-    <div #scrollContainer class="igx-drop-down__list-scroll" unselectable="on" [style.maxHeight]="maxHeight" [attr.id]="this.listId" role="listbox">
+    <div #scrollContainer class="igx-drop-down__list-scroll" unselectable="on" [style.maxHeight]="maxHeight"
+        [attr.id]="this.listId" role="listbox" [attr.aria-labelledby]="this.label?.id">
         <ng-content select="igx-select-item, igx-select-item-group"></ng-content>
     </div>
 

projects/igniteui-angular/src/lib/select/select.component.spec.ts

@@ -1,5 +1,5 @@
 import { IgxInputState } from './../directives/input/input.directive';
-import { Component, ViewChild, DebugElement, OnInit, ViewChildren, QueryList } from '@angular/core';
+import { Component, ViewChild, DebugElement, OnInit, ViewChildren, QueryList, ElementRef } from '@angular/core';
 import { async, TestBed, tick, fakeAsync } from '@angular/core/testing';
 import { FormsModule, FormGroup, FormBuilder, FormControl, Validators, ReactiveFormsModule, NgForm, NgControl } from '@angular/forms';
 import { By } from '@angular/platform-browser';
@@ -380,8 +380,11 @@ describe('igxSelect', () => {
             const dropdownListElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWN_LIST_SCROLL));
             const dropdownWrapper = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWN_LIST));
             const toggleBtn = fixture.debugElement.query(By.css('.' + CSS_CLASS_TOGGLE_BUTTON));
+            const labelID = fixture.componentInstance.label1.nativeElement.getAttribute('id');
             expect(inputElement.nativeElement.getAttribute('role')).toEqual('combobox');
             expect(inputElement.nativeElement.getAttribute('aria-haspopup')).toEqual('listbox');
+            expect(inputElement.nativeElement.getAttribute('aria-labelledby')).toEqual(labelID);
+            expect(dropdownListElement.nativeElement.getAttribute('aria-labelledby')).toEqual(labelID);
             expect(inputElement.nativeElement.getAttribute('aria-owns')).toEqual(select.listId);
             expect(inputElement.nativeElement.getAttribute('aria-expanded')).toEqual('false');
             expect(toggleBtn.nativeElement.getAttribute('aria-hidden')).toEqual('true');
@@ -2657,15 +2660,18 @@ describe('igxSelect ControlValueAccessor Unit', () => {
 @Component({
     template: `
     <igx-select #select [width]="'300px'" [height]="'200px'" [placeholder]="'Choose a city'" [(ngModel)]="value">
-    <igx-select-item *ngFor="let item of items" [value]="item" [text]="item">
-        {{ item }} {{'©'}}
-    </igx-select-item>
+        <label igxLabel #simpleLabel>Select Simple Component</label>
+        <igx-select-item *ngFor="let item of items" [value]="item" [text]="item">
+            {{ item }} {{'©'}}
+        </igx-select-item>
     </igx-select>
 `
 })
 class IgxSelectSimpleComponent {
     @ViewChild('select', { read: IgxSelectComponent, static: true })
     public select: IgxSelectComponent;
+    @ViewChild('simpleLabel', { read: ElementRef, static: true })
+    public label1: ElementRef;
     public items: string[] = [
         'New York',
         'Sofia',