Skip to content

Make toggle button focusable and add aria label to the combo input #15921

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: 20.0.x
Choose a base branch
from
Open

Make toggle button focusable and add aria label to the combo input #15921

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
21f05db
feat(combo): make toggle button focusable and add aria label
MonikaKirkova Jun 9, 2025
832ebfb
chore(*): fix failing test
MonikaKirkova Jun 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions projects/igniteui-angular/src/lib/combo/combo.common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1212,6 +1212,20 @@ 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;
Expand Down
3 changes: 2 additions & 1 deletion projects/igniteui-angular/src/lib/combo/combo.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
}
Expand Down
21 changes: 21 additions & 0 deletions projects/igniteui-angular/src/lib/combo/combo.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(`div[role="listbox"]`));
expect(dropdown.nativeElement.getAttribute('aria-labelledby')).toEqual(combo.placeholder);
Expand All @@ -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');
Expand Down Expand Up @@ -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();
Expand Down
4 changes: 4 additions & 0 deletions projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
25 changes: 13 additions & 12 deletions projects/igniteui-angular/src/lib/query-builder/query-builder-functions.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -626,20 +626,21 @@ export class QueryBuilderFunctions {
switch (i) {
case 0: expect(element).toHaveClass('igx-input-group__input'); break;
case 1: expect(element).toHaveClass('igx-input-group__input'); break;
case 2: expect(element).toHaveClass('igx-button');
case 2: expect(element).toHaveClass('igx-combo__toggle-button'); break;
case 3: expect(element).toHaveClass('igx-button');
expect(element.innerText).toContain('and'); break;
case 3: expect(element).toHaveClass('igx-chip'); break;
case 4: expect(element).toHaveClass('igx-icon'); break;
case 5: expect(element).toHaveClass('igx-chip__remove'); break;
case 6: expect(element).toHaveClass('igx-chip'); break;
case 7: expect(element).toHaveClass('igx-icon'); break;
case 8: expect(element).toHaveClass('igx-chip__remove'); break;
case 9: expect(element).toHaveClass('igx-chip'); break;
case 10: expect(element).toHaveClass('igx-icon'); break;
case 11: expect(element).toHaveClass('igx-chip__remove'); break;
case 12: expect(element).toHaveClass('igx-button');
expect(element.innerText).toContain('Condition'); break;
case 4: expect(element).toHaveClass('igx-chip'); break;
case 5: expect(element).toHaveClass('igx-icon'); break;
case 6: expect(element).toHaveClass('igx-chip__remove'); break;
case 7: expect(element).toHaveClass('igx-chip'); break;
case 8: expect(element).toHaveClass('igx-icon'); break;
case 9: expect(element).toHaveClass('igx-chip__remove'); break;
case 10: expect(element).toHaveClass('igx-chip'); break;
case 11: expect(element).toHaveClass('igx-icon'); break;
case 12: expect(element).toHaveClass('igx-chip__remove'); break;
case 13: expect(element).toHaveClass('igx-button');
expect(element.innerText).toContain('Condition'); break;
case 14: expect(element).toHaveClass('igx-button');
expect(element.innerText).toContain('Group'); break;
}
i++;
Expand Down
4 changes: 3 additions & 1 deletion projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)"/>

Expand Down Expand Up @@ -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>
}
Expand Down
22 changes: 22 additions & 0 deletions projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 dropdownListBox = fixture.debugElement.query(By.css(`[role='listbox']`));
expect(dropdownListBox.nativeElement.getAttribute('aria-labelledby')).toEqual(combo.placeholder);
Expand All @@ -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');
Expand Down Expand Up @@ -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();
Expand Down
Loading