feat(combo, simple-combo): improve combo accessibility #11077, #11077 (#11714)

Author: PlamenaMiteva

CHANGELOG.md

@@ -4,6 +4,10 @@ All notable changes for each version of this project will be documented in this
 
 ## 14.0.0
 - `IgxDatePicker` and `IgxDateRangePicker` now expose a `weekStart` input property like the `IgxCalendar`
+- `IgxCombo` and  `IgxSimpleComboComponent`
+    - The combobox `role`, `aria-haspopup`, `aria-expanded`, `aria-controls` and `aria-labelledby` attributes have been moved from combo wrapper to the combo input. Additionally the  `IgxSimpleComboComponent` input is marked with `aria-readonly="false"` and `aria-autocomplete="list"` attributes. The `aria-expanded` attribute is applied to the combo dropdown as well and can be set by the `ariaLabelledBy` property, the combo label or placeholder. The serach input within the combo dropdown is now marked as `role="searchbox"`, `aria-label="search"` and `aria-autocomplete="list"`. The dropdown item container has `aria-activedescendant` attribute to identify the currently active element of the item list. The `IgxCombo` container is also marked as `aria-multiselectable="true"`. The dropdown header items role has been changed to `group`.
+- `IgxDropDown`
+    - The `label` attribute has been changed to `aria-labelledby` and can be set by a latterly added input property `labelledBy`.
 
 ### New Features
 

projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts

@@ -91,13 +91,15 @@ export class IgxComboDropDownComponent extends IgxDropDownComponent implements I
      */
     public onFocus() {
         this.focusedItem = this._focusedItem || this.items[0];
+        this.combo.setActiveDescendant();
     }
 
     /**
      * @hidden @internal
      */
     public onBlur(_evt?) {
         this.focusedItem = null;
+        this.combo.setActiveDescendant();
     }
 
     /**
@@ -112,6 +114,7 @@ export class IgxComboDropDownComponent extends IgxDropDownComponent implements I
      */
     public navigateFirst() {
         this.navigateItem(this.virtDir.igxForOf.findIndex(e => !e.isHeader));
+        this.combo.setActiveDescendant();
     }
 
     /**
@@ -123,6 +126,7 @@ export class IgxComboDropDownComponent extends IgxDropDownComponent implements I
         } else {
             super.navigatePrev();
         }
+        this.combo.setActiveDescendant();
     }
 
 
@@ -136,6 +140,7 @@ export class IgxComboDropDownComponent extends IgxDropDownComponent implements I
         } else {
             super.navigateNext();
         }
+        this.combo.setActiveDescendant();
     }
 
     /**
@@ -147,6 +152,7 @@ export class IgxComboDropDownComponent extends IgxDropDownComponent implements I
         }
         this.comboAPI.set_selected_item(item.itemID);
         this._focusedItem = item;
+        this.combo.setActiveDescendant();
     }
 
     /**

projects/igniteui-angular/src/lib/combo/combo-item.component.ts

@@ -26,6 +26,13 @@ export class IgxComboItemComponent extends IgxDropDownItemComponent {
     @HostBinding('style.height.px')
     public itemHeight: string | number = '';
 
+    @HostBinding('attr.aria-label')
+    @Input()
+    public get ariaLabel(): string {
+        const valueKey = this.comboAPI.valueKey;
+        return (valueKey !== null && this.value != null) ? this.value[valueKey] : this.value;
+    }
+
     /** @hidden @internal */
     @Input()
     public singleMode: boolean;

projects/igniteui-angular/src/lib/combo/combo.common.ts

@@ -6,6 +6,7 @@ import {
     DoCheck,
     ElementRef,
     EventEmitter,
+    forwardRef,
     HostBinding,
     HostListener,
     Inject,
@@ -30,7 +31,7 @@ import { SortingDirection } from '../data-operations/sorting-strategy';
 import { IForOfState, IgxForOfDirective } from '../directives/for-of/for_of.directive';
 import { IgxIconService } from '../icon/public_api';
 import { IgxInputGroupType, IGX_INPUT_GROUP_TYPE } from '../input-group/inputGroupType';
-import { IgxInputDirective, IgxInputGroupComponent, IgxInputState } from '../input-group/public_api';
+import { IgxInputDirective, IgxInputGroupComponent, IgxInputState, IgxLabelDirective } from '../input-group/public_api';
 import { AbsoluteScrollStrategy, AutoPositionStrategy, OverlaySettings } from '../services/public_api';
 import { IgxComboDropDownComponent } from './combo-dropdown.component';
 import { IgxComboAPIService } from './combo.api';
@@ -71,6 +72,7 @@ export interface IgxComboBase {
     select(item: any): void;
     select(itemIDs: any[], clearSelection?: boolean, event?: Event): void;
     deselect(...args: [] | [itemIDs: any[], event?: Event]): void;
+    setActiveDescendant(): void;
 }
 
 let NEXT_ID = 0;
@@ -391,35 +393,12 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
      * ```
      */
     @Input()
-    @HostBinding('attr.aria-labelledby')
     public ariaLabelledBy: string;
 
     /** @hidden @internal */
     @HostBinding('class.igx-combo')
     public cssClass = 'igx-combo'; // Independent of display density for the time being
 
-    /** @hidden @internal */
-    @HostBinding(`attr.role`)
-    public role = 'combobox';
-
-    /** @hidden @internal */
-    @HostBinding('attr.aria-expanded')
-    public get ariaExpanded(): boolean {
-        return !this.dropdown.collapsed;
-    }
-
-    /** @hidden @internal */
-    @HostBinding('attr.aria-haspopup')
-    public get hasPopUp() {
-        return 'listbox';
-    }
-
-    /** @hidden @internal */
-    @HostBinding('attr.aria-owns')
-    public get ariaOwns() {
-        return this.dropdown.id;
-    }
-
     /**
      * An @Input property that enabled/disables combo. The default is `false`.
      * ```html
@@ -694,6 +673,9 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
     @ContentChild(IgxComboClearIconDirective, { read: TemplateRef })
     public clearIconTemplate: TemplateRef<any> = null;
 
+    /** @hidden @internal */
+    @ContentChild(forwardRef(() => IgxLabelDirective), { static: true }) public label: IgxLabelDirective;
+
     /** @hidden @internal */
     @ViewChild('inputGroup', { read: IgxInputGroupComponent, static: true })
     public inputGroup: IgxInputGroupComponent;
@@ -862,6 +844,9 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
     public filteringOptions: IComboFilteringOptions = {
         caseSensitive: false
     };
+    /** @hidden @internal */
+    public activeDescendant = '';
+
 
     protected _data = [];
     protected _value = '';
@@ -882,7 +867,7 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
     private _itemsMaxHeight = null;
     private _overlaySettings: OverlaySettings;
     private _groupSortingDirection: SortingDirection = SortingDirection.Asc;
-
+    
     public abstract dropdown: IgxComboDropDownComponent;
 
     public abstract selectionChanging: EventEmitter<any>;
@@ -958,6 +943,9 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
     public toggle(): void {
         const overlaySettings = Object.assign({}, this._overlaySettings, this.overlaySettings);
         this.dropdown.toggle(overlaySettings);
+        if (!this.collapsed){
+            this.setActiveDescendant();
+        }
     }
 
     /**
@@ -971,6 +959,7 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
     public open(): void {
         const overlaySettings = Object.assign({}, this._overlaySettings, this.overlaySettings);
         this.dropdown.open(overlaySettings);
+        this.setActiveDescendant();
     }
 
     /**
@@ -1147,6 +1136,11 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
         }
     }
 
+    /** @hidden @internal */
+    public setActiveDescendant() : void  {
+        this.activeDescendant = this.dropdown.focusedItem?.id || '';
+    }
+
     /** @hidden @internal */
     public toggleCaseSensitive() {
         this.filteringOptions = { caseSensitive: !this.filteringOptions.caseSensitive };

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

@@ -8,8 +8,12 @@
     <ng-container ngProjectAs="igx-hint, [igxHint]">
         <ng-content select="igx-hint, [igxHint]"></ng-content>
     </ng-container>
-    <input igxInput #comboInput name="comboInput" type="text" [value]="value" readonly [attr.placeholder]="placeholder"
-        [disabled]="disabled" (blur)="onBlur()" />
+    <input igxInput #comboInput name="comboInput" type="text" [value]="value" readonly
+            [attr.placeholder]="placeholder" [disabled]="disabled"
+            role="combobox" aria-haspopup="listbox"
+            [attr.aria-expanded]="!this.dropdown.collapsed" [attr.aria-controls]="this.dropdown.listId"
+            [attr.aria-labelledby]="this.ariaLabelledBy || this.label?.id || this.placeholder"
+            (blur)="onBlur()" />
     <ng-container ngProjectAs="igx-suffix">
         <ng-content select="igx-suffix"></ng-content>
     </ng-container>
@@ -32,13 +36,14 @@
     </igx-suffix>
 </igx-input-group>
 <igx-combo-drop-down #igxComboDropDown class="igx-combo__drop-down" [displayDensity]="displayDensity"
+    [labelledBy]="this.ariaLabelledBy || this.label?.id || this.placeholder || ''"
     [width]="itemsWidth || '100%'" (opening)="handleOpening($event)" (closing)="handleClosing($event)"
     (opened)="handleOpened()" (closed)="handleClosed()">
     <igx-input-group *ngIf="displaySearchInput" [displayDensity]="displayDensity" theme="material" class="igx-combo__search">
         <input class="igx-combo-input" igxInput #searchInput name="searchInput" autocomplete="off" type="text"
             [(ngModel)]="searchValue" (ngModelChange)="handleInputChange($event)" (keyup)="handleKeyUp($event)"
             (keydown)="handleKeyDown($event)" (focus)="dropdown.onBlur($event)" [attr.placeholder]="searchPlaceholder"
-            aria-autocomplete="both" [attr.aria-owns]="dropdown.id" [attr.aria-labelledby]="ariaLabelledBy" />
+            aria-autocomplete="list" role="searchbox" aria-label="search"/>
         <igx-suffix *ngIf="showSearchCaseIcon">
             <igx-icon family="imx-icons" name="case-sensitive" [active]="filteringOptions.caseSensitive"
                 (click)="toggleCaseSensitive()">
@@ -49,12 +54,13 @@
     </ng-container>
     <div #dropdownItemContainer class="igx-combo__content" [style.overflow]="'hidden'"
         [style.maxHeight.px]="itemsMaxHeight" [igxDropDownItemNavigation]="dropdown" (focus)="dropdown.onFocus()"
-        [tabindex]="dropdown.collapsed ? -1 : 0" role="listbox" [attr.id]="dropdown.id">
-        <igx-combo-item role="option" [itemHeight]='itemHeight' *igxFor="let item of data
+        [tabindex]="dropdown.collapsed ? -1 : 0" [attr.id]="dropdown.id" aria-multiselectable="true"
+        [attr.aria-activedescendant]="this.activeDescendant">
+        <igx-combo-item [itemHeight]='itemHeight' *igxFor="let item of data
             | comboFiltering:filterValue:displayKey:filteringOptions:filterable
             | comboGrouping:groupKey:valueKey:groupSortingDirection;
             index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight"
-            [value]="item" [isHeader]="item.isHeader" [index]="rowIndex">
+            [value]="item" [isHeader]="item.isHeader" [index]="rowIndex" [role]="item.isHeader? 'group' : 'option'">
             <ng-container *ngIf="item.isHeader">
                 <ng-container
                     *ngTemplateOutlet="headerItemTemplate ? headerItemTemplate : headerItemBase;

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

@@ -842,55 +842,13 @@ describe('igxCombo', () => {
             expect(combo.allowCustomValues).toEqual(false);
             expect(combo.cssClass).toEqual(CSS_CLASS_COMBO);
             expect(combo.type).toEqual('box');
-            expect(combo.role).toEqual('combobox');
         });
         it('should apply all appropriate classes on combo initialization', () => {
             const comboWrapper = fixture.nativeElement.querySelector(CSS_CLASS_COMBO);
             expect(comboWrapper).not.toBeNull();
-            expect(comboWrapper.attributes.getNamedItem('ng-reflect-placeholder').nodeValue).toEqual('Location');
-            expect(comboWrapper.attributes.getNamedItem('ng-reflect-value-key').nodeValue).toEqual('field');
-            expect(comboWrapper.attributes.getNamedItem('ng-reflect-group-key').nodeValue).toEqual('region');
-            expect(comboWrapper.attributes.getNamedItem('ng-reflect-filterable')).toBeTruthy();
-            expect(comboWrapper.childElementCount).toEqual(2); // Input Group + Dropdown
-            expect(comboWrapper.attributes.getNamedItem('class').nodeValue).toEqual(CSS_CLASS_COMBO);
-            expect(comboWrapper.attributes.getNamedItem('role').nodeValue).toEqual('combobox');
-            expect(comboWrapper.attributes.getNamedItem('aria-haspopup').nodeValue).toEqual('listbox');
-            expect(comboWrapper.attributes.getNamedItem('aria-expanded').nodeValue).toEqual('false');
-            expect(comboWrapper.attributes.getNamedItem('aria-owns').nodeValue).toEqual(fixture.componentInstance.combo.dropdown.id);
+            expect(comboWrapper.classList.contains(CSS_CLASS_COMBO)).toBeTruthy();
             expect(comboWrapper.childElementCount).toEqual(2);
 
-            const inputGroupElement = comboWrapper.children[0];
-            expect(inputGroupElement.attributes.getNamedItem('ng-reflect-type').nodeValue).toEqual('box');
-            expect(inputGroupElement.classList.contains(CSS_CLASS_INPUTGROUP)).toBeTruthy();
-            expect(inputGroupElement.classList.contains('igx-input-group--box')).toBeTruthy();
-            expect(inputGroupElement.classList.contains('igx-input-group--placeholder')).toBeTruthy();
-            expect(inputGroupElement.childElementCount).toEqual(3);
-
-            const inputGroupWrapper = inputGroupElement.children[0];
-            expect(inputGroupWrapper.classList.contains(CSS_CLASS_INPUTGROUP_WRAPPER)).toBeTruthy();
-            expect(inputGroupWrapper.childElementCount).toEqual(1);
-
-            const inputGroupBundle = inputGroupWrapper.children[0];
-            expect(inputGroupBundle.classList.contains(CSS_CLASS_INPUTGROUP_BUNDLE)).toBeTruthy();
-            expect(inputGroupBundle.childElementCount).toEqual(2);
-
-            const mainInputGroupBundle = inputGroupBundle.children[0];
-            expect(mainInputGroupBundle.classList.contains(CSS_CLASS_INPUTGROUP_MAINBUNDLE)).toBeTruthy();
-            expect(mainInputGroupBundle.childElementCount).toEqual(1);
-
-            const inputElement = mainInputGroupBundle.children[0];
-            expect(inputElement.classList.contains('igx-input-group__input')).toBeTruthy();
-            expect(inputElement.attributes.getNamedItem('type').nodeValue).toEqual('text');
-            expect(inputElement.attributes['readonly']).toBeDefined();
-
-            const dropDownButton = inputGroupBundle.children[1];
-            expect(dropDownButton.classList.contains(CSS_CLASS_TOGGLEBUTTON)).toBeTruthy();
-            expect(dropDownButton.childElementCount).toEqual(1);
-
-            const inputGroupBorder = inputGroupElement.children[1];
-            expect(inputGroupBorder.classList.contains(CSS_CLASS_INPUTGROUP_BORDER)).toBeTruthy();
-            expect(inputGroupBorder.childElementCount).toEqual(0);
-
             const dropDownElement = comboWrapper.children[1];
             expect(dropDownElement.classList.contains(CSS_CLASS_COMBO_DROPDOWN)).toBeTruthy();
             expect(dropDownElement.classList.contains(CSS_CLASS_DROPDOWN)).toBeTruthy();
@@ -902,17 +860,44 @@ describe('igxCombo', () => {
             expect(dropDownList.classList.contains('igx-toggle--hidden')).toBeTruthy();
             expect(dropDownScrollList.childElementCount).toEqual(0);
         });
+        it('should render aria attributes properly', fakeAsync(() => {
+            expect(input.nativeElement.getAttribute('role')).toEqual('combobox');
+            expect(input.nativeElement.getAttribute('aria-haspopup')).toEqual('listbox');
+            expect(input.nativeElement.getAttribute('aria-expanded')).toMatch('false');
+            expect(input.nativeElement.getAttribute('aria-controls')).toEqual(combo.dropdown.listId);
+            expect(input.nativeElement.getAttribute('aria-labelledby')).toEqual(combo.placeholder);
+
+            const dropdown = fixture.debugElement.query(By.css(`.${CSS_CLASS_COMBO_DROPDOWN}`));
+            expect(dropdown.nativeElement.getAttribute('ng-reflect-labelled-by')).toEqual(combo.placeholder);
+
+            combo.open();
+            tick();
+            fixture.detectChanges();
+
+            const searchInput = fixture.debugElement.query(By.css(CSS_CLASS_SEARCHINPUT));
+            expect(searchInput.nativeElement.getAttribute('role')).toEqual('searchbox');
+            expect(searchInput.nativeElement.getAttribute('aria-label')).toEqual('search');
+            expect(searchInput.nativeElement.getAttribute('aria-autocomplete')).toEqual('list');
+            
+            const list = fixture.debugElement.query(By.css(`.${CSS_CLASS_CONTENT}`));
+            expect(list.nativeElement.getAttribute('aria-multiselectable')).toEqual('true');
+            expect(list.nativeElement.getAttribute('aria-activedescendant')).toEqual('');
+
+            UIInteractions.triggerEventHandlerKeyDown('ArrowDown', list);
+            tick();
+            fixture.detectChanges();
+            expect(list.nativeElement.getAttribute('aria-activedescendant')).toEqual(combo.dropdown.focusedItem.id);
+        }));
         it('should render aria-expanded attribute properly', fakeAsync(() => {
-            const comboContainer = fixture.nativeElement.querySelector('.' + CSS_CLASS_COMBO);
-            expect(comboContainer.getAttribute('aria-expanded')).toMatch('false');
+            expect(input.nativeElement.getAttribute('aria-expanded')).toMatch('false');
             combo.open();
             tick();
             fixture.detectChanges();
-            expect(comboContainer.getAttribute('aria-expanded')).toMatch('true');
+            expect(input.nativeElement.getAttribute('aria-expanded')).toMatch('true');
             combo.close();
             tick();
             fixture.detectChanges();
-            expect(comboContainer.getAttribute('aria-expanded')).toMatch('false');
+            expect(input.nativeElement.getAttribute('aria-expanded')).toMatch('false');
         }));
         it('should render placeholder values for inputs properly', () => {
             combo.toggle();

projects/igniteui-angular/src/lib/drop-down/drop-down.component.html

@@ -3,7 +3,7 @@
 (appended)="onToggleContentAppended($event)"
 (opening)="onToggleOpening($event)" (opened)="onToggleOpened()"
 (closing)="onToggleClosing($event)" (closed)="onToggleClosed()">
-    <div class="igx-drop-down__list-scroll" #scrollContainer [attr.id]="this.listId" role="listbox" [attr.aria-label]="this.listId"
+    <div class="igx-drop-down__list-scroll" #scrollContainer [attr.id]="this.listId" role="listbox" [attr.aria-labelledby]="this.labelledBy"
     [style.height]="height"
     [style.maxHeight]="maxHeight">
         <ng-container *ngIf="!collapsed">

projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts

@@ -122,6 +122,15 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID
     @Input()
     public allowItemsFocus = false;
 
+    /**
+     * An @Input property that set aria-labelledby attribute
+     * ```html
+     * <igx-drop-down [labelledby]="labelId"></igx-drop-down>
+     * ```
+     */
+    @Input()
+    public labelledBy: string;
+
     @ContentChild(IgxForOfDirective, { read: IgxForOfDirective })
     protected virtDir: IgxForOfDirective<any>;