feat(combo): make toggle button focusable and add aria label

Author: MonikaKirkova

projects/igniteui-angular/src/lib/combo/combo.common.ts

@@ -1212,6 +1212,19 @@ export abstract class IgxComboBaseDirective implements IgxComboBase, AfterViewCh
         }
     }
 
+    /** @hidden @internal */
+    public handleToggleKeyDown(eventArgs: KeyboardEvent) {
+        if (eventArgs.key === 'Enter' || eventArgs.key === ' ') {
+            eventArgs.preventDefault();
+            this.toggle();
+        }
+    }
+
+    /** @hidden @internal */
+    public getAriaLabel(): string {
+        return this.displayValue ? `Selected options` : 'No options selected';
+    }
+
     /** @hidden @internal */
     public registerOnChange(fn: any): void {
         this._onChangeCallback = fn;

projects/igniteui-angular/src/lib/combo/combo.component.html

@@ -13,6 +13,7 @@
         role="combobox" aria-haspopup="listbox"
         [attr.aria-expanded]="!dropdown.collapsed" [attr.aria-controls]="dropdown.listId"
         [attr.aria-labelledby]="ariaLabelledBy || label?.id || placeholder"
+        [attr.aria-label]="getAriaLabel()"
         (blur)="onBlur()" />
     <ng-container ngProjectAs="igx-suffix">
         <ng-content select="igx-suffix"></ng-content>
@@ -28,7 +29,7 @@
             }
         </igx-suffix>
     }
-    <igx-suffix class="igx-combo__toggle-button">
+    <igx-suffix class="igx-combo__toggle-button" (keydown)="handleToggleKeyDown($event)" [tabindex]="disabled ? -1 : 0" role="button">
         @if (toggleIconTemplate) {
             <ng-container *ngTemplateOutlet="toggleIconTemplate; context: {$implicit: collapsed}"></ng-container>
         }

projects/igniteui-angular/src/lib/combo/combo.component.spec.ts

@@ -1058,6 +1058,7 @@ describe('igxCombo', () => {
                 expect(input.nativeElement.getAttribute('aria-expanded')).toMatch('false');
                 expect(input.nativeElement.getAttribute('aria-controls')).toEqual(combo.dropdown.listId);
                 expect(input.nativeElement.getAttribute('aria-labelledby')).toEqual(combo.placeholder);
+                expect(input.nativeElement.getAttribute('aria-label')).toEqual('No options selected');
 
                 const dropdown = fixture.debugElement.query(By.css(`.${CSS_CLASS_COMBO_DROPDOWN}`));
                 expect(dropdown.nativeElement.getAttribute('ng-reflect-labelled-by')).toEqual(combo.placeholder);
@@ -1079,6 +1080,10 @@ describe('igxCombo', () => {
                 tick();
                 fixture.detectChanges();
                 expect(list.nativeElement.getAttribute('aria-activedescendant')).toEqual(combo.dropdown.focusedItem.id);
+
+                combo.select(['Illinois', 'Mississippi', 'Ohio']);
+                fixture.detectChanges();
+                expect(input.nativeElement.getAttribute('aria-label')).toEqual('Selected options');
             }));
             it('should render aria-expanded attribute properly', fakeAsync(() => {
                 expect(input.nativeElement.getAttribute('aria-expanded')).toMatch('false');
@@ -2269,6 +2274,22 @@ describe('igxCombo', () => {
                         cancel: false
                     });
             });
+            it('should toggle combo dropdown on Enter of the focused toggle icon', fakeAsync(() => {
+                spyOn(combo, 'toggle').and.callThrough();
+                const toggleBtn = fixture.debugElement.query(By.css(`.${CSS_CLASS_TOGGLEBUTTON}`));
+
+                UIInteractions.triggerEventHandlerKeyDown('Enter', toggleBtn);
+                tick();
+                fixture.detectChanges();
+                expect(combo.toggle).toHaveBeenCalledTimes(1);
+                expect(combo.collapsed).toEqual(false);
+
+                UIInteractions.triggerEventHandlerKeyDown('Enter', toggleBtn);
+                tick();
+                fixture.detectChanges();
+                expect(combo.toggle).toHaveBeenCalledTimes(2);
+                expect(combo.collapsed).toEqual(true);
+            }));
             it('should not be able to select group header', () => {
                 spyOn(combo.selectionChanging, 'emit').and.callThrough();
                 combo.toggle();

projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss

@@ -265,6 +265,10 @@
         %igx-combo__toggle-button {
             color: var-get($theme, 'toggle-button-foreground-focus');
             background: var-get($theme, 'toggle-button-background-focus');
+
+            &:focus {
+                color: color($color: 'secondary');
+            }
         }
 
         %igx-combo__clear-button {

projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.html

@@ -17,6 +17,7 @@
         [attr.aria-expanded]="!this.dropdown.collapsed" [attr.aria-controls]="this.dropdown.listId"
         [attr.aria-labelledby]="this.ariaLabelledBy || this.label?.id || this.placeholder"
         [attr.placeholder]="placeholder" [disabled]="disabled" [igxTextSelection]="!composing"
+        [attr.aria-label]="getAriaLabel()"
         (input)="handleInputChange($event)" (click)="handleInputClick()"
         (keyup)="handleKeyUp($event)" (keydown)="handleKeyDown($event)" (blur)="onBlur()" (paste)="handleInputChange($event)"/>
 
@@ -44,7 +45,8 @@
         </igx-suffix>
     }
 
-    <igx-suffix class="igx-combo__toggle-button" (click)="onClick($event)">
+    <igx-suffix class="igx-combo__toggle-button" (click)="onClick($event)" (keydown)="handleToggleKeyDown($event)"
+        [tabindex]="disabled ? -1 : 0" role="button">
         @if (toggleIconTemplate) {
             <ng-container *ngTemplateOutlet="toggleIconTemplate; context: {$implicit: collapsed}"></ng-container>
         }

projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts

@@ -617,6 +617,7 @@ describe('IgxSimpleCombo', () => {
             expect(input.nativeElement.getAttribute('aria-expanded')).toMatch('false');
             expect(input.nativeElement.getAttribute('aria-controls')).toEqual(combo.dropdown.listId);
             expect(input.nativeElement.getAttribute('aria-labelledby')).toEqual(combo.placeholder);
+            expect(input.nativeElement.getAttribute('aria-label')).toEqual('No options selected');
 
             const dropdown = fixture.debugElement.query(By.css(`.${CSS_CLASS_COMBO_DROPDOWN}`));
             expect(dropdown.nativeElement.getAttribute('ng-reflect-labelled-by')).toEqual(combo.placeholder);
@@ -632,6 +633,10 @@ describe('IgxSimpleCombo', () => {
             tick();
             fixture.detectChanges();
             expect(list.nativeElement.getAttribute('aria-activedescendant')).toEqual(combo.dropdown.focusedItem.id);
+
+            combo.select('Illinois');
+            fixture.detectChanges();
+            expect(input.nativeElement.getAttribute('aria-label')).toEqual('Selected options');
         }));
         it('should render aria-expanded attribute properly', fakeAsync(() => {
             expect(input.nativeElement.getAttribute('aria-expanded')).toMatch('false');
@@ -1230,6 +1235,23 @@ describe('IgxSimpleCombo', () => {
             expect(combo.displayValue).toEqual('Wisconsin');
         });
 
+        it('should toggle combo dropdown on Enter of the focused toggle icon', fakeAsync(() => {
+            spyOn(combo, 'toggle').and.callThrough();
+            const toggleBtn = fixture.debugElement.query(By.css(`.${CSS_CLASS_TOGGLEBUTTON}`));
+
+            UIInteractions.triggerEventHandlerKeyDown('Enter', toggleBtn);
+            tick();
+            fixture.detectChanges();
+            expect(combo.toggle).toHaveBeenCalledTimes(1);
+            expect(combo.collapsed).toEqual(false);
+
+            UIInteractions.triggerEventHandlerKeyDown('Enter', toggleBtn);
+            tick();
+            fixture.detectChanges();
+            expect(combo.toggle).toHaveBeenCalledTimes(2);
+            expect(combo.collapsed).toEqual(true);
+        }));
+
         it('should display the AddItem button when allowCustomValues is true and there is a partial match', fakeAsync(() => {
             fixture.componentInstance.allowCustomValues = true;
             fixture.detectChanges();