diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.html b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.html index ea1e07c9c46..a89e2163282 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.html +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.html @@ -3,7 +3,7 @@ (appended)="onToggleContentAppended($event)" (opening)="onToggleOpening($event)" (opened)="onToggleOpened()" (closing)="onToggleClosing($event)" (closed)="onToggleClosed()"> -
@if (!collapsed) { 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 4aa4089fef9..da05829c602 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 @@ -1185,6 +1185,14 @@ describe('IgxDropDown ', () => { expect(parseInt(ddList.style.maxHeight, 10)).toBeGreaterThan(ddList.offsetHeight); expect(ddList.style.maxHeight).toBe('700px'); }); + it('should properly set role option', () => { + const ddList = fixture.debugElement.query(By.css(`.${CSS_CLASS_SCROLL}`)).nativeElement; + expect(ddList.getAttribute('role')).toBe('listbox'); + dropdown.role = 'menu'; + fixture.detectChanges(); + expect(ddList.getAttribute('role')).toBe('menu'); + + }); it('should set custom id, width/height properties runtime', () => { fixture.componentInstance.dropdown.width = '80%'; fixture.componentInstance.dropdown.height = '400px'; diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts index a40f395835d..3f7a0e87fbf 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts @@ -134,6 +134,16 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID @Input() public labelledBy: string; + /** + * Gets/sets the `role` attribute of the drop down. Default is 'listbox'. + * + * ```html + * + * ``` + */ + @Input() + public role = 'listbox'; + @ContentChild(IgxForOfToken) protected virtDir: IgxForOfToken;