Mass Merging 20.0.x to master

.github/workflows/codeql-analysis.yml

@@ -13,10 +13,10 @@ name: "CodeQL"
 
 on:
   push:
-    branches: [ master, 19.2.x, 18.2.x, 17.2.x, 16.1.x, 15.1.x ]
+    branches: [ master, '[0-9]+.[0-9]+.x' ]
   pull_request:
     # The branches below must be a subset of the branches above
-    branches: [ master, 19.2.x, 18.2.x, 17.2.x, 16.1.x, 15.1.x ]
+    branches: [ master, '[0-9]+.[0-9]+.x' ]
   schedule:
     - cron: '33 4 * * 4'
 

package.json

@@ -74,7 +74,7 @@
     "@types/source-map": "0.5.2",
     "express": "^5.1.0",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^19.1.2",
+    "igniteui-theming": "^19.2.1",
     "igniteui-trial-watermark": "^3.1.0",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.2",

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<IComboResourceStrings>;

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<IComboResourceStrings>;

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<IComboResourceStrings>;

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<IComboResourceStrings>;

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<IComboResourceStrings>;

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<IComboResourceStrings>;

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<IComboResourceStrings>;

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<IComboResourceStrings>;

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<IComboResourceStrings>;

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<IComboResourceStrings>;

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<IComboResourceStrings>;

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<IComboResourceStrings>;

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<IComboResourceStrings>;

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<IComboResourceStrings>;

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<IComboResourceStrings>;

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<IComboResourceStrings>;

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<IComboResourceStrings>;

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<IComboResourceStrings>;

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<IComboResourceStrings>;

projects/igniteui-angular/package.json

@@ -73,7 +73,7 @@
         "tslib": "^2.3.0",
         "igniteui-trial-watermark": "^3.1.0",
         "lodash-es": "^4.17.21",
-        "igniteui-theming": "^19.1.2",
+        "igniteui-theming": "^19.2.1",
         "@igniteui/material-icons-extended": "^3.1.0"
     },
     "peerDependencies": {

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

@@ -177,6 +177,7 @@ export class IgxComboDropDownComponent extends IgxDropDownComponent implements I
                 this.handleSpace();
                 break;
             case DropDownActionKey.ESCAPE:
+            case DropDownActionKey.TAB:
                 this.close();
         }
     }

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

@@ -1230,6 +1230,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 ? 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;

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

@@ -13,13 +13,14 @@
         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,[igxSuffix]"></ng-content>
     </ng-container>
     @if (displayValue) {
         <igx-suffix [attr.aria-label]="resourceStrings.igx_combo_clearItems_placeholder" class="igx-combo__clear-button"
-            (click)="handleClearItems($event)">
+            (click)="handleClearItems($event)" (keydown)="handleClearKeyDown($event)" [tabindex]="disabled ? -1 : 0" role="button">
             @if (clearIconTemplate) {
                 <ng-container *ngTemplateOutlet="clearIconTemplate"></ng-container>
             }
@@ -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(`div[role="listbox"]`));
                 expect(dropdown.nativeElement.getAttribute('aria-labelledby')).toEqual(combo.placeholder);
@@ -1073,12 +1074,16 @@ describe('igxCombo', () => {
 
                 const list = fixture.debugElement.query(By.css(`.${CSS_CLASS_CONTENT}`));
                 expect(list.nativeElement.getAttribute('aria-multiselectable')).toEqual('true');
-                expect(list.nativeElement.getAttribute('aria-activedescendant')).toEqual('');
+                expect(list.nativeElement.getAttribute('aria-activedescendant')).toEqual(null);
 
                 UIInteractions.triggerEventHandlerKeyDown('ArrowDown', list);
                 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');
@@ -1938,6 +1943,16 @@ describe('igxCombo', () => {
                     fixture.detectChanges();
                     expect(firstVisibleItem.classList.contains(CSS_CLASS_FOCUSED)).toBeTruthy();
                 }));
+                it('should close the dropdown list on pressing Tab key', fakeAsync(() => {
+                    combo.toggle();
+                    fixture.detectChanges();
+
+                    const dropdownContent = fixture.debugElement.query(By.css(`.${CSS_CLASS_CONTENT}`));
+                    UIInteractions.triggerEventHandlerKeyDown('Tab', dropdownContent);
+                    tick();
+                    fixture.detectChanges();
+                    expect(combo.collapsed).toBeTruthy();
+                }));
             });
             describe('primitive data dropdown: ', () => {
                 it('should properly navigate with HOME/END keys when no virtScroll is necessary', async () => {
@@ -2269,6 +2284,37 @@ 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 clear the selection on Enter of the focused clear icon', () => {
+                const selectedItem_1 = combo.dropdown.items[1];
+                combo.toggle();
+                fixture.detectChanges();
+                simulateComboItemClick(1);
+                expect(combo.selection[0]).toEqual(selectedItem_1.value);
+                expect(combo.value[0]).toEqual(selectedItem_1.value[combo.valueKey]);
+
+                const clearBtn = fixture.debugElement.query(By.css(`.${CSS_CLASS_CLEARBUTTON}`));
+                UIInteractions.triggerEventHandlerKeyDown('Enter', clearBtn);
+                fixture.detectChanges();
+                expect(input.nativeElement.value).toEqual('');
+                expect(combo.selection.length).toEqual(0);
+                expect(combo.value.length).toEqual(0);
+            });
             it('should not be able to select group header', () => {
                 spyOn(combo.selectionChanging, 'emit').and.callThrough();
                 combo.toggle();

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

@@ -265,10 +265,7 @@ export class IgxComboComponent extends IgxComboBaseDirective implements AfterVie
     /**
      * @hidden @internal
      */
-    public handleClearItems(event: Event): void {
-        if (this.disabled) {
-            return;
-        }
+    public clearInput(event: Event): void {
         this.deselectAllItems(true, event);
         if (this.collapsed) {
             this.getEditElement().focus();
@@ -278,6 +275,26 @@ export class IgxComboComponent extends IgxComboBaseDirective implements AfterVie
         event.stopPropagation();
     }
 
+    /**
+     * @hidden @internal
+     */
+    public handleClearItems(event: Event): void {
+        if (this.disabled) {
+            return;
+        }
+        this.clearInput(event);
+    }
+
+    /**
+     * @hidden @internal
+     */
+    public handleClearKeyDown(eventArgs: KeyboardEvent) {
+        if (eventArgs.key === 'Enter' || eventArgs.key === ' ') {
+            eventArgs.preventDefault();
+            this.clearInput(eventArgs);
+        }
+    }
+
     /**
      * Select defined items
      *