feat(dropdown): Adding active descendant fo screen readers

Author: Ivan Kitanov

projects/igniteui-angular/src/lib/drop-down/drop-down-navigation.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, Optional, Self, Input, HostListener, Inject } from '@angular/core';
+import { Directive, Optional, Self, Input, HostListener, Inject, HostBinding  } from '@angular/core';
 import { IGX_DROPDOWN_BASE } from './drop-down.common';
 import { IDropDownNavigationDirective } from './drop-down.common';
 import { IgxDropDownBaseDirective } from './drop-down.base';
@@ -53,6 +53,11 @@ export class IgxDropDownItemNavigationDirective implements IDropDownNavigationDi
         this._target = target ? target : this.dropdown;
     }
 
+     @HostBinding('attr.aria-activedescendant')
+    public get activeDescendant(): string {
+        return this._target?.activeDescendant;
+    }
+
     /**
      * Captures keydown events and calls the appropriate handlers on the target component
      */

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

@@ -162,6 +162,16 @@ export abstract class IgxDropDownBaseDirective implements IDropDownList, OnInit
         return this.element;
     }
 
+    /**
+     * @hidden @internal
+     * Gets the id of the focused item during dropdown navigation.
+     * This is used to update the `aria-activedescendant` attribute of
+     * the IgxDropDownNavigationDirective host element.
+     */
+    public get activeDescendant (): string {
+        return this.focusedItem ? this.focusedItem.id : null;
+    }
+
     /**
      * @hidden
      * @internal

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

@@ -1046,13 +1046,9 @@ describe('IgxDropDown ', () => {
             beforeEach(() => {
                 fixture = TestBed.createComponent(IgxDropDownTestComponent);
                 fixture.detectChanges();
-                dropdown = fixture.componentInstance.dropDown;
+                dropdown = fixture.componentInstance.dropdown;
             });
             it('should set the aria-label property correctly', () => {
-                fixture = TestBed.createComponent(IgxDropDownTestComponent);
-                fixture.detectChanges();
-                dropdown = fixture.componentInstance.dropdown;
-
                 // Initially aria-label should be null
                 dropdown.toggle();
                 fixture.detectChanges();
@@ -1083,6 +1079,35 @@ describe('IgxDropDown ', () => {
                     expect(item.getAttribute('aria-label')).toBe(`label ${index}`);
                 });
             });
+            it('should update aria-activedescendant to the id of the focused item', fakeAsync(() => {
+                dropdown.toggle();
+                tick();
+                fixture.detectChanges();
+
+                const dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`)).nativeElement;
+                let focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`)).nativeElement;
+
+                expect(focusedItem).toBeTruthy();
+                let focusedItemId = focusedItem.getAttribute('id');
+                expect(focusedItemId).toBeTruthy();
+                expect(dropdownElement.getAttribute('aria-activedescendant')).toBe(focusedItemId);
+
+                dropdown.toggle();
+                tick();
+                fixture.detectChanges();
+                dropdown.toggle();
+                tick();
+                fixture.detectChanges();
+
+                UIInteractions.triggerEventHandlerKeyDown('ArrowDown', fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`)));
+                tick();
+                fixture.detectChanges();
+
+                focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`)).nativeElement;
+                focusedItemId = focusedItem.getAttribute('id');
+
+                expect(dropdownElement.getAttribute('aria-activedescendant')).toBe(focusedItemId);
+            }));
         });
         describe('Grouped items', () => {
             beforeEach(waitForAsync(() => {

src/app/drop-down/drop-down.sample.html

@@ -16,6 +16,7 @@
         >
             @for(item of items; track item) {
             <igx-drop-down-item
+                [ariaLabel]="item.field"
                 [disabled]="item.disabled"
                 [isHeader]="item.header"
             >
@@ -161,6 +162,7 @@ <h5>Angular Dropdown With Action directive</h5>
         @for(item of items; track item) {
         <igx-drop-down-item
             [value]="item"
+            [ariaLabel]="item.field"
             [disabled]="item.disabled"
             [isHeader]="item.header"
         >