feat(drop-down): add role input property

Author: MonikaKirkova

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
+     *  <igx-drop-down [role]="customRole"></igx-drop-down-item>
+     * ```
+     */
+    @Input()
+    @HostBinding('attr.role')
+    public role = 'listbox';
+
     /**
      * Get all non-header items
      *

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[];

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

@@ -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';