Add role input property to the dropdown (#15912)

* feat(drop-down): add role input property

* chore(*): move the role prop to the drop-down component

* chore(*): update CHANGELOG

---------

Co-authored-by: Stamen Stoychev <[email protected]>

Author: MonikaKirkova

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 20.1.0
+### General
+- `IgxDropDown` now exposes a `role` input property, allowing users to customize the role attribute based on the use case. The default is `listbox`.
+
 ## 20.0.6
 ### General
 - `IgxSimpleCombo`

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()">
-    <div class="igx-drop-down__list-scroll" #scrollContainer [attr.id]="listId" role="listbox" [attr.aria-labelledby]="labelledBy"
+    <div class="igx-drop-down__list-scroll" #scrollContainer [attr.id]="listId" [attr.role]="role" [attr.aria-labelledby]="labelledBy"
         [style.height]="height"
         [style.maxHeight]="maxHeight">
         @if (!collapsed) {

projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts

@@ -1260,6 +1260,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';

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
+     *  <igx-drop-down [role]="customRole"></igx-drop-down-item>
+     * ```
+     */
+    @Input()
+    public role = 'listbox';
+
     @ContentChild(IgxForOfToken)
     protected virtDir: IgxForOfToken<any>;