Merge pull request #15879 from IgniteUI/ikitanov/fix-15839

Preventing aria-label to defualt to id - 20.0.x

Author: ChronosSF

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

@@ -1074,7 +1074,7 @@ describe('igxCombo', () => {
 
                 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('');
+                expect(list.nativeElement.getAttribute('aria-activedescendant')).toEqual(null);
 
                 UIInteractions.triggerEventHandlerKeyDown('ArrowDown', list);
                 tick();

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

@@ -34,11 +34,11 @@ export class IgxDropDownItemBaseDirective implements DoCheck {
 
     @HostBinding('attr.aria-label')
     @Input()
-    public get ariaLabel(): string {
-        return this._label ? this._label : this.value ? this.value : this.id;
+    public get ariaLabel(): string | null{
+        return this._label ? this._label : this.value ? this.value : null;
     }
 
-    public set ariaLabel(value: string) {
+    public set ariaLabel(value: string | null) {
         this._label = value;
     }
 

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

@@ -1034,6 +1034,81 @@ describe('IgxDropDown ', () => {
         });
     });
     describe('Rendering', () => {
+        describe('Accessibility', () => {
+            beforeEach(waitForAsync(() => {
+                TestBed.configureTestingModule({
+                    imports: [
+                        NoopAnimationsModule,
+                        IgxDropDownTestComponent,
+                    ]
+                }).compileComponents();
+            }));
+            beforeEach(() => {
+                fixture = TestBed.createComponent(IgxDropDownTestComponent);
+                fixture.detectChanges();
+                dropdown = fixture.componentInstance.dropdown;
+            });
+            it('should set the aria-label property correctly', () => {
+                // Initially aria-label should be null
+                dropdown.toggle();
+                fixture.detectChanges();
+                let items = document.querySelectorAll(`.${CSS_CLASS_ITEM}`);
+                items.forEach(item => {
+                    expect(item.getAttribute('aria-label')).toBeNull();
+                });
+
+                // Set value and check if aria-label reflects it
+                dropdown.toggle();
+                fixture.detectChanges();
+                dropdown.items.forEach((item, index) => item.value = `value ${index}`);
+                dropdown.toggle();
+                fixture.detectChanges();
+                items = document.querySelectorAll(`.${CSS_CLASS_ITEM}`);
+                items.forEach((item, index) => {
+                    expect(item.getAttribute('aria-label')).toBe(`value ${index}`);
+                });
+
+                // Phase 3: Set explicit ariaLabel and verify it overrides value
+                dropdown.toggle();
+                fixture.detectChanges();
+                dropdown.items.forEach((item, index) => item.ariaLabel = `label ${index}`);
+                dropdown.toggle();
+                fixture.detectChanges();
+                items = document.querySelectorAll(`.${CSS_CLASS_ITEM}`);
+                items.forEach((item, index) => {
+                    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(() => {
                 TestBed.configureTestingModule({

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