Adding activedescendants to toggles for screen readers

feat(dropdown): Adding activedescendants to toggles for screen readers

Author: IvanKitanov17

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

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"
             >