diff --git a/projects/igniteui-angular-i18n/src/i18n/BG/combo-resources.ts b/projects/igniteui-angular-i18n/src/i18n/BG/combo-resources.ts index 61ab96a1b15..a898a660578 100644 --- a/projects/igniteui-angular-i18n/src/i18n/BG/combo-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/BG/combo-resources.ts @@ -8,5 +8,7 @@ export const ComboResourceStringsBG = { igx_combo_empty_message: 'Списъкът е празен', igx_combo_filter_search_placeholder: 'Въведете термин за търсене', igx_combo_addCustomValues_placeholder: 'Добавяне на елемент', - igx_combo_clearItems_placeholder: 'Изчистване на избора' + igx_combo_clearItems_placeholder: 'Изчистване на избора', + igx_combo_aria_label_options: 'Има избрани опции', + igx_combo_aria_label_no_options: 'Няма избрани опции' } satisfies MakeRequired; diff --git a/projects/igniteui-angular-i18n/src/i18n/CS/combo-resources.ts b/projects/igniteui-angular-i18n/src/i18n/CS/combo-resources.ts index 5d071081123..c4a808f142f 100644 --- a/projects/igniteui-angular-i18n/src/i18n/CS/combo-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/CS/combo-resources.ts @@ -8,5 +8,7 @@ export const ComboResourceStringsCS = { igx_combo_empty_message: 'Seznam je prázdný', igx_combo_filter_search_placeholder: 'Zadejte hledaný výraz', igx_combo_addCustomValues_placeholder: 'Přidat položku', - igx_combo_clearItems_placeholder: 'Vymazat výběr' + igx_combo_clearItems_placeholder: 'Vymazat výběr', + igx_combo_aria_label_options: 'Vybrané možnosti', + igx_combo_aria_label_no_options: 'Žádné možnosti nejsou vybrány' } satisfies MakeRequired; diff --git a/projects/igniteui-angular-i18n/src/i18n/DA/combo-resources.ts b/projects/igniteui-angular-i18n/src/i18n/DA/combo-resources.ts index b2854a9f4bb..f4eb7291813 100644 --- a/projects/igniteui-angular-i18n/src/i18n/DA/combo-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/DA/combo-resources.ts @@ -8,5 +8,7 @@ export const ComboResourceStringsDA = { igx_combo_empty_message: 'Listen er tom', igx_combo_filter_search_placeholder: 'Indtast en søgeterm', igx_combo_addCustomValues_placeholder: 'Tilføj element', - igx_combo_clearItems_placeholder: 'Ryd markering' + igx_combo_clearItems_placeholder: 'Ryd markering', + igx_combo_aria_label_options: 'Valgte muligheder', + igx_combo_aria_label_no_options: 'Ingen valgte muligheder' } satisfies MakeRequired; diff --git a/projects/igniteui-angular-i18n/src/i18n/DE/combo-resources.ts b/projects/igniteui-angular-i18n/src/i18n/DE/combo-resources.ts index 141b897390a..2039ca49099 100644 --- a/projects/igniteui-angular-i18n/src/i18n/DE/combo-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/DE/combo-resources.ts @@ -8,5 +8,7 @@ export const ComboResourceStringsDE = { igx_combo_empty_message: 'Die Liste ist leer', igx_combo_filter_search_placeholder: 'Suchbegriff eingeben', igx_combo_addCustomValues_placeholder: 'Element hinzufügen', - igx_combo_clearItems_placeholder: 'Auswahl löschen' + igx_combo_clearItems_placeholder: 'Auswahl löschen', + igx_combo_aria_label_options: 'Ausgewählte Optionen', + igx_combo_aria_label_no_options: 'Keine Optionen ausgewählt' } satisfies MakeRequired; diff --git a/projects/igniteui-angular-i18n/src/i18n/ES/combo-resources.ts b/projects/igniteui-angular-i18n/src/i18n/ES/combo-resources.ts index 4fa8fa651ed..cc305d830e5 100644 --- a/projects/igniteui-angular-i18n/src/i18n/ES/combo-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/ES/combo-resources.ts @@ -8,5 +8,7 @@ export const ComboResourceStringsES = { igx_combo_empty_message: 'La lista está vacía', igx_combo_filter_search_placeholder: 'Escriba un término de búsqueda', igx_combo_addCustomValues_placeholder: 'Agregar elemento', - igx_combo_clearItems_placeholder: 'Borrar selección' + igx_combo_clearItems_placeholder: 'Borrar selección', + igx_combo_aria_label_options: 'Opciones seleccionadas', + igx_combo_aria_label_no_options: 'No hay opciones seleccionadas' } satisfies MakeRequired; diff --git a/projects/igniteui-angular-i18n/src/i18n/FR/combo-resources.ts b/projects/igniteui-angular-i18n/src/i18n/FR/combo-resources.ts index 802f3b46477..b6755ea40cd 100644 --- a/projects/igniteui-angular-i18n/src/i18n/FR/combo-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/FR/combo-resources.ts @@ -8,5 +8,7 @@ export const ComboResourceStringsFR = { igx_combo_empty_message: 'La liste est vide', igx_combo_filter_search_placeholder: 'Entrez un terme de recherche', igx_combo_addCustomValues_placeholder: 'Ajouter un élément', - igx_combo_clearItems_placeholder: 'Effacer la sélection' + igx_combo_clearItems_placeholder: 'Effacer la sélection', + igx_combo_aria_label_options: 'Options sélectionnées', + igx_combo_aria_label_no_options: 'Aucune option sélectionnée' } satisfies MakeRequired; diff --git a/projects/igniteui-angular-i18n/src/i18n/HU/combo-resources.ts b/projects/igniteui-angular-i18n/src/i18n/HU/combo-resources.ts index 6116a490a40..64596d302e9 100644 --- a/projects/igniteui-angular-i18n/src/i18n/HU/combo-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/HU/combo-resources.ts @@ -8,5 +8,7 @@ export const ComboResourceStringsHU = { igx_combo_empty_message: 'Üres a lista', igx_combo_filter_search_placeholder: 'Írjon be egy keresési kifejezést', igx_combo_addCustomValues_placeholder: 'Elem hozzáadása', - igx_combo_clearItems_placeholder: 'Kiválasztás törlése' + igx_combo_clearItems_placeholder: 'Kiválasztás törlése', + igx_combo_aria_label_options: 'Kiválasztott lehetőségek', + igx_combo_aria_label_no_options: 'Nincsenek kiválasztott lehetőségek' } satisfies MakeRequired; diff --git a/projects/igniteui-angular-i18n/src/i18n/IT/combo-resources.ts b/projects/igniteui-angular-i18n/src/i18n/IT/combo-resources.ts index 4fda91d6b7a..dea01ab9463 100644 --- a/projects/igniteui-angular-i18n/src/i18n/IT/combo-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/IT/combo-resources.ts @@ -8,5 +8,7 @@ export const ComboResourceStringsIT = { igx_combo_empty_message: 'L\'elenco è vuoto', igx_combo_filter_search_placeholder: 'Immettere il testo di ricerca', igx_combo_addCustomValues_placeholder: 'Aggiungi elemento', - igx_combo_clearItems_placeholder: 'Cancella selezione' + igx_combo_clearItems_placeholder: 'Cancella selezione', + igx_combo_aria_label_options: 'Opzioni selezionate', + igx_combo_aria_label_no_options: 'Nessuna opzione selezionata' } satisfies MakeRequired; diff --git a/projects/igniteui-angular-i18n/src/i18n/JA/combo-resources.ts b/projects/igniteui-angular-i18n/src/i18n/JA/combo-resources.ts index 2e71e3a7831..9a85705a7df 100644 --- a/projects/igniteui-angular-i18n/src/i18n/JA/combo-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/JA/combo-resources.ts @@ -8,5 +8,7 @@ export const ComboResourceStringsJA = { igx_combo_empty_message: 'リストが空です', igx_combo_filter_search_placeholder: '検索条件の入力', igx_combo_addCustomValues_placeholder: '項目の追加', - igx_combo_clearItems_placeholder: '選択のクリア' + igx_combo_clearItems_placeholder: '選択のクリア', + igx_combo_aria_label_options: '選択されたオプション', + igx_combo_aria_label_no_options: '選択されたオプションはありません' } satisfies MakeRequired; diff --git a/projects/igniteui-angular-i18n/src/i18n/KO/combo-resources.ts b/projects/igniteui-angular-i18n/src/i18n/KO/combo-resources.ts index 09ecbda4849..77ff1c15c1f 100644 --- a/projects/igniteui-angular-i18n/src/i18n/KO/combo-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/KO/combo-resources.ts @@ -8,5 +8,7 @@ export const ComboResourceStringsKO = { igx_combo_empty_message: '목록이 비어 있음', igx_combo_filter_search_placeholder: '검색어 입력', igx_combo_addCustomValues_placeholder: '항목 추가', - igx_combo_clearItems_placeholder: '선택 지우기' + igx_combo_clearItems_placeholder: '선택 지우기', + igx_combo_aria_label_options: '선택된 옵션', + igx_combo_aria_label_no_options: '선택된 옵션 없음' } satisfies MakeRequired; diff --git a/projects/igniteui-angular-i18n/src/i18n/NB/combo-resources.ts b/projects/igniteui-angular-i18n/src/i18n/NB/combo-resources.ts index 51bf60a23a3..685413faeec 100644 --- a/projects/igniteui-angular-i18n/src/i18n/NB/combo-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/NB/combo-resources.ts @@ -8,5 +8,7 @@ export const ComboResourceStringsNB = { igx_combo_empty_message: 'Listen er tom', igx_combo_filter_search_placeholder: 'Skriv inn søkeord', igx_combo_addCustomValues_placeholder: 'Legg til element', - igx_combo_clearItems_placeholder: 'Fjern valg' + igx_combo_clearItems_placeholder: 'Fjern valg', + igx_combo_aria_label_options: 'Valgte alternativer', + igx_combo_aria_label_no_options: 'Ingen valgte alternativer' } satisfies MakeRequired; diff --git a/projects/igniteui-angular-i18n/src/i18n/NL/combo-resources.ts b/projects/igniteui-angular-i18n/src/i18n/NL/combo-resources.ts index d82a0cb45cf..9d147b71e07 100644 --- a/projects/igniteui-angular-i18n/src/i18n/NL/combo-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/NL/combo-resources.ts @@ -8,5 +8,7 @@ export const ComboResourceStringsNL = { igx_combo_empty_message: 'De lijst is leeg', igx_combo_filter_search_placeholder: 'Typ een zoekterm', igx_combo_addCustomValues_placeholder: 'Item toevoegen', - igx_combo_clearItems_placeholder: 'Selectie wissen' + igx_combo_clearItems_placeholder: 'Selectie wissen', + igx_combo_aria_label_options: 'Geselecteerde opties', + igx_combo_aria_label_no_options: 'Geen geselecteerde opties' } satisfies MakeRequired; diff --git a/projects/igniteui-angular-i18n/src/i18n/PL/combo-resources.ts b/projects/igniteui-angular-i18n/src/i18n/PL/combo-resources.ts index 9dc71ee4274..c9549c22d8f 100644 --- a/projects/igniteui-angular-i18n/src/i18n/PL/combo-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/PL/combo-resources.ts @@ -8,5 +8,7 @@ export const ComboResourceStringsPL = { igx_combo_empty_message: 'Lista jest pusta', igx_combo_filter_search_placeholder: 'Wprowadź tekst wyszukiwania', igx_combo_addCustomValues_placeholder: 'Dodaj element', - igx_combo_clearItems_placeholder: 'Wyczyść wybór' + igx_combo_clearItems_placeholder: 'Wyczyść wybór', + igx_combo_aria_label_options: 'Wybrane opcje', + igx_combo_aria_label_no_options: 'Brak wybranych opcji' } satisfies MakeRequired; diff --git a/projects/igniteui-angular-i18n/src/i18n/PT/combo-resources.ts b/projects/igniteui-angular-i18n/src/i18n/PT/combo-resources.ts index 94e20ad2b09..0b342f6b665 100644 --- a/projects/igniteui-angular-i18n/src/i18n/PT/combo-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/PT/combo-resources.ts @@ -8,5 +8,7 @@ export const ComboResourceStringsPT = { igx_combo_empty_message: 'A lista está vazia', igx_combo_filter_search_placeholder: 'Digite um termo de pesquisa', igx_combo_addCustomValues_placeholder: 'Adicionar item', - igx_combo_clearItems_placeholder: 'Limpar seleção' + igx_combo_clearItems_placeholder: 'Limpar seleção', + igx_combo_aria_label_options: 'Opções selecionadas', + igx_combo_aria_label_no_options: 'Nenhuma opção selecionada' } satisfies MakeRequired; diff --git a/projects/igniteui-angular-i18n/src/i18n/RO/combo-resources.ts b/projects/igniteui-angular-i18n/src/i18n/RO/combo-resources.ts index 1de0cea33c6..6ba4bc08a7e 100644 --- a/projects/igniteui-angular-i18n/src/i18n/RO/combo-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/RO/combo-resources.ts @@ -8,5 +8,7 @@ export const ComboResourceStringsRO = { igx_combo_empty_message: 'Lista este goală', igx_combo_filter_search_placeholder: 'Introduceți termenul de căutare', igx_combo_addCustomValues_placeholder: 'Adăugați element', - igx_combo_clearItems_placeholder: 'Ștergeți selecția' + igx_combo_clearItems_placeholder: 'Ștergeți selecția', + igx_combo_aria_label_options: 'Opțiuni selectate', + igx_combo_aria_label_no_options: 'Nicio opțiune selectată' } satisfies MakeRequired; diff --git a/projects/igniteui-angular-i18n/src/i18n/SV/combo-resources.ts b/projects/igniteui-angular-i18n/src/i18n/SV/combo-resources.ts index 327f7be806a..e857350215f 100644 --- a/projects/igniteui-angular-i18n/src/i18n/SV/combo-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/SV/combo-resources.ts @@ -8,5 +8,7 @@ export const ComboResourceStringsSV = { igx_combo_empty_message: 'Listan är tom', igx_combo_filter_search_placeholder: 'Ange sökterm', igx_combo_addCustomValues_placeholder: 'Lägg till objekt', - igx_combo_clearItems_placeholder: 'Rensa urval' + igx_combo_clearItems_placeholder: 'Rensa urval', + igx_combo_aria_label_options: 'Valda alternativ', + igx_combo_aria_label_no_options: 'Inga valda alternativ' } satisfies MakeRequired; diff --git a/projects/igniteui-angular-i18n/src/i18n/TR/combo-resources.ts b/projects/igniteui-angular-i18n/src/i18n/TR/combo-resources.ts index bb5fa2ffbc5..4f7a6167e9f 100644 --- a/projects/igniteui-angular-i18n/src/i18n/TR/combo-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/TR/combo-resources.ts @@ -8,5 +8,7 @@ export const ComboResourceStringsTR = { igx_combo_empty_message: 'Liste boş', igx_combo_filter_search_placeholder: 'Arama terimi girin', igx_combo_addCustomValues_placeholder: 'Öğe ekle', - igx_combo_clearItems_placeholder: 'Seçimi temizle' + igx_combo_clearItems_placeholder: 'Seçimi temizle', + igx_combo_aria_label_options: 'Seçilen seçenekler', + igx_combo_aria_label_no_options: 'Seçilen seçenek yok' } satisfies MakeRequired; diff --git a/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/combo-resources.ts b/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/combo-resources.ts index 481fc3a3186..f8d6de7873a 100644 --- a/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/combo-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/combo-resources.ts @@ -8,5 +8,7 @@ export const ComboResourceStringsZHHANS = { igx_combo_empty_message: '列表为空', igx_combo_filter_search_placeholder: '输入搜索字符串', igx_combo_addCustomValues_placeholder: '添加项目', - igx_combo_clearItems_placeholder: '清除选择' + igx_combo_clearItems_placeholder: '清除选择', + igx_combo_aria_label_options: '选定的选项', + igx_combo_aria_label_no_options: '没有选定的选项' } satisfies MakeRequired; diff --git a/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/combo-resources.ts b/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/combo-resources.ts index 08b1d6ab845..7ca83831ef4 100644 --- a/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/combo-resources.ts +++ b/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/combo-resources.ts @@ -8,5 +8,7 @@ export const ComboResourceStringsZHHANT = { igx_combo_empty_message: '清單是空的', igx_combo_filter_search_placeholder: '輸入搜尋字串', igx_combo_addCustomValues_placeholder: '新增項目', - igx_combo_clearItems_placeholder: '清除選擇' + igx_combo_clearItems_placeholder: '清除選擇', + igx_combo_aria_label_options: '已選擇的選項', + igx_combo_aria_label_no_options: '沒有已選擇的選項' } satisfies MakeRequired; diff --git a/projects/igniteui-angular/src/lib/combo/combo.common.ts b/projects/igniteui-angular/src/lib/combo/combo.common.ts index 1221e1f43ed..90573431d03 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.common.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.common.ts @@ -1223,6 +1223,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 ? this.resourceStrings.igx_combo_aria_label_options : this.resourceStrings.igx_combo_aria_label_no_options; + } + /** @hidden @internal */ public registerOnChange(fn: any): void { this._onChangeCallback = fn; diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.html b/projects/igniteui-angular/src/lib/combo/combo.component.html index e9603f47cb4..a1fc067e50a 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.html +++ b/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()" /> @@ -28,7 +29,7 @@ } } - + @if (toggleIconTemplate) { } diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts b/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts index a3cfa04b310..e75dce09b88 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.spec.ts +++ b/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(); diff --git a/projects/igniteui-angular/src/lib/core/i18n/combo-resources.ts b/projects/igniteui-angular/src/lib/core/i18n/combo-resources.ts index f60507bc555..1df1321d629 100644 --- a/projects/igniteui-angular/src/lib/core/i18n/combo-resources.ts +++ b/projects/igniteui-angular/src/lib/core/i18n/combo-resources.ts @@ -3,12 +3,15 @@ export interface IComboResourceStrings { igx_combo_filter_search_placeholder?: string; igx_combo_addCustomValues_placeholder?: string; igx_combo_clearItems_placeholder?: string; + igx_combo_aria_label_options?: string; + igx_combo_aria_label_no_options?: string; } export const ComboResourceStringsEN: IComboResourceStrings = { igx_combo_empty_message: 'The list is empty', igx_combo_filter_search_placeholder: 'Enter a Search Term', igx_combo_addCustomValues_placeholder: 'Add Item', - igx_combo_clearItems_placeholder: 'Clear Selection' - + igx_combo_clearItems_placeholder: 'Clear Selection', + igx_combo_aria_label_options: 'Selected options', + igx_combo_aria_label_no_options: 'No options selected' }; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss index 865c08c571b..44fb4483f2d 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss @@ -276,6 +276,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 { diff --git a/projects/igniteui-angular/src/lib/query-builder/query-builder-functions.spec.ts b/projects/igniteui-angular/src/lib/query-builder/query-builder-functions.spec.ts index 917a630ffaf..c02971905aa 100644 --- a/projects/igniteui-angular/src/lib/query-builder/query-builder-functions.spec.ts +++ b/projects/igniteui-angular/src/lib/query-builder/query-builder-functions.spec.ts @@ -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++; diff --git a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.html b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.html index a5d56f0cd59..5f59689482c 100644 --- a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.html +++ b/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 @@ } - + @if (toggleIconTemplate) { } diff --git a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts index 1f3b0722636..1affeba9aea 100644 --- a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts +++ b/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();