From ed826ba4ef23f6e88d3ac6e6c219ce7f59d9eae2 Mon Sep 17 00:00:00 2001 From: MonikaKirkova Date: Fri, 6 Jun 2025 12:03:04 +0300 Subject: [PATCH 1/2] feat(drop-down): add role input property --- .../src/lib/drop-down/drop-down.base.ts | 11 +++++++++++ .../src/lib/drop-down/drop-down.common.ts | 1 + .../src/lib/drop-down/drop-down.component.html | 2 +- .../src/lib/drop-down/drop-down.component.spec.ts | 8 ++++++++ 4 files changed, 21 insertions(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts index 4fe729f4dac..263b7e244d3 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts @@ -104,6 +104,17 @@ export abstract class IgxDropDownBaseDirective implements IDropDownList, OnInit @HostBinding('class.igx-drop-down') public cssClass = true; + /** + * Gets/sets the `role` attribute of the drop down. Default is 'listbox'. + * + * ```html + * + * ``` + */ + @Input() + @HostBinding('attr.role') + public role = 'listbox'; + /** * Get all non-header items * diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.common.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.common.ts index 896d9bd7ba2..6f0539d26cb 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.common.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.common.ts @@ -52,6 +52,7 @@ export interface IDropDownList { height: string; id: string; maxHeight: string; + role: string; collapsed: boolean; items: IgxDropDownItemBaseDirective[]; headers: IgxDropDownItemBaseDirective[]; 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'; From 0582436a0f9b38a7774b5bc4555ce6829bae30d1 Mon Sep 17 00:00:00 2001 From: MonikaKirkova Date: Fri, 6 Jun 2025 13:58:34 +0300 Subject: [PATCH 2/2] chore(*): move the role prop to the drop-down component --- .../src/lib/drop-down/drop-down.base.ts | 11 ----------- .../src/lib/drop-down/drop-down.common.ts | 1 - .../src/lib/drop-down/drop-down.component.ts | 10 ++++++++++ 3 files changed, 10 insertions(+), 12 deletions(-) diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts index 263b7e244d3..4fe729f4dac 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.base.ts @@ -104,17 +104,6 @@ export abstract class IgxDropDownBaseDirective implements IDropDownList, OnInit @HostBinding('class.igx-drop-down') public cssClass = true; - /** - * Gets/sets the `role` attribute of the drop down. Default is 'listbox'. - * - * ```html - * - * ``` - */ - @Input() - @HostBinding('attr.role') - public role = 'listbox'; - /** * Get all non-header items * diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.common.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.common.ts index 6f0539d26cb..896d9bd7ba2 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.common.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.common.ts @@ -52,7 +52,6 @@ export interface IDropDownList { height: string; id: string; maxHeight: string; - role: string; collapsed: boolean; items: IgxDropDownItemBaseDirective[]; headers: IgxDropDownItemBaseDirective[]; 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;