fix(dropdown): Preventing aria-label to defualt to id

Author: Ivan Kitanov

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.component.spec.ts

@@ -1034,6 +1034,56 @@ 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', () => {
+                fixture = TestBed.createComponent(IgxDropDownTestComponent);
+                fixture.detectChanges();
+                dropdown = fixture.componentInstance.dropdown;
+
+                // 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}`);
+                });
+            });
+        });
         describe('Grouped items', () => {
             beforeEach(waitForAsync(() => {
                 TestBed.configureTestingModule({