diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down-item.base.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down-item.base.ts index b18d65bf2d2..b218cad041c 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down-item.base.ts +++ b/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; } diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts index e5d919c0c1b..aad58934647 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts @@ -1039,6 +1039,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', () => { configureTestSuite(); beforeAll(waitForAsync(() => {