Merge pull request #13558 from IgniteUI/ibarakov/feat-13524-master

ChronosSF · web-flow · commit 1aa28b7869b3 · 2023-11-08T16:00:42.000+02:00
feat(esf): improve search results accessibility - 16.1.x
diff --git a/projects/igniteui-angular-i18n/src/i18n/BG/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/BG/grid-resources.ts
@@ -90,6 +90,7 @@ const GridResourceStringsBG_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_excel_currency_filter: 'Филтър по валута',
     igx_grid_excel_custom_filter: 'Персонализиран филтър...',
     igx_grid_excel_no_matches: 'Няма съвпадения',
+    igx_grid_excel_matches_count: '{0} matches.',
     igx_grid_advanced_filter_title: 'Разширено филтриране',
     igx_grid_advanced_filter_and_group: '"And" група',
     igx_grid_advanced_filter_or_group: '"Or" група',
diff --git a/projects/igniteui-angular-i18n/src/i18n/CS/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/CS/grid-resources.ts
@@ -90,6 +90,7 @@ const GridResourceStringsCS_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_excel_currency_filter: 'Filtr měn',
     igx_grid_excel_custom_filter: 'Vlastní filtr ...',
     igx_grid_excel_no_matches: 'Žádné výsledky',
+    igx_grid_excel_matches_count: '{0} matches.',
     igx_grid_advanced_filter_title: 'Pokročilé filtrování',
     igx_grid_advanced_filter_and_group: '"A" skupina',
     igx_grid_advanced_filter_or_group: '"Nebo" skupina',
diff --git a/projects/igniteui-angular-i18n/src/i18n/DA/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/DA/grid-resources.ts
@@ -90,6 +90,7 @@ const GridResourceStringsDA_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_excel_currency_filter: 'Valutafilter',
     igx_grid_excel_custom_filter: 'Brugerdefineret filter',
     igx_grid_excel_no_matches: 'Ingen forekomster',
+    igx_grid_excel_matches_count: '{0} matches.',
     igx_grid_advanced_filter_title: 'Avanceret filtrering',
     igx_grid_advanced_filter_and_group: '"Og" gruppe',
     igx_grid_advanced_filter_or_group: '"Eller" gruppe',
diff --git a/projects/igniteui-angular-i18n/src/i18n/DE/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/DE/grid-resources.ts
@@ -88,6 +88,7 @@ const GridResourceStringsDE_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_excel_currency_filter: 'Währungs Filter',
     igx_grid_excel_custom_filter: 'Benutzerdefinierter Filter...',
     igx_grid_excel_no_matches: 'Keine Treffer',
+    igx_grid_excel_matches_count: '{0} matches.',
     igx_grid_advanced_filter_title: 'Erweiterte Filterung',
     igx_grid_advanced_filter_and_group: '"Und" Gruppe',
     igx_grid_advanced_filter_or_group: '"Oder" Gruppe',
diff --git a/projects/igniteui-angular-i18n/src/i18n/ES/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/ES/grid-resources.ts
@@ -88,6 +88,7 @@ const GridResourceStringsES_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_excel_currency_filter: 'Filtro divisa',
     igx_grid_excel_custom_filter: 'Filtro personalizado...',
     igx_grid_excel_no_matches: 'Ninguna coincidencia',
+    igx_grid_excel_matches_count: '{0} matches.',
     igx_grid_advanced_filter_title: 'Filtro Avanzado',
     igx_grid_advanced_filter_and_group: 'Grupo "Y"',
     igx_grid_advanced_filter_or_group: '"Grupo "O"',
diff --git a/projects/igniteui-angular-i18n/src/i18n/FR/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/FR/grid-resources.ts
@@ -88,6 +88,7 @@ const GridResourceStringsFR_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_excel_currency_filter: 'Filtre devise',
     igx_grid_excel_custom_filter: 'Filtre personnalisé...',
     igx_grid_excel_no_matches: 'Aucune correspondance',
+    igx_grid_excel_matches_count: '{0} matches.',
     igx_grid_advanced_filter_title: 'Filtrage avancé',
     igx_grid_advanced_filter_and_group: 'Groupe "Et"',
     igx_grid_advanced_filter_or_group: 'Groupe "Ou"',
diff --git a/projects/igniteui-angular-i18n/src/i18n/HU/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/HU/grid-resources.ts
@@ -91,6 +91,7 @@ const GridResourceStringsHU_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_excel_currency_filter: 'Pénznemszűrő',
     igx_grid_excel_custom_filter: 'Egyéni szűrő...',
     igx_grid_excel_no_matches: 'Nincs találat',
+    igx_grid_excel_matches_count: '{0} matches.',
     igx_grid_advanced_filter_title: 'Speciális szűrés',
     igx_grid_advanced_filter_and_group: '"És" csoport',
     igx_grid_advanced_filter_or_group: '"Vagy" Csoport',
diff --git a/projects/igniteui-angular-i18n/src/i18n/IT/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/IT/grid-resources.ts
@@ -88,6 +88,7 @@ const GridResourceStringsIT_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_excel_currency_filter: 'Filtro valuta',
     igx_grid_excel_custom_filter: 'Filtro personalizzato…',
     igx_grid_excel_no_matches: 'Nessuna corrispondenza',
+    igx_grid_excel_matches_count: '{0} matches.',
     igx_grid_advanced_filter_title: 'Filtro avanzato',
     igx_grid_advanced_filter_and_group: 'Gruppo "And"',
     igx_grid_advanced_filter_or_group: 'Gruppo "Or"',
diff --git a/projects/igniteui-angular-i18n/src/i18n/JA/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/JA/grid-resources.ts
@@ -88,6 +88,7 @@ const GridResourceStringsJA_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_excel_currency_filter: '通貨フィルター',
     igx_grid_excel_custom_filter: 'カスタム フィルター...',
     igx_grid_excel_no_matches: '一致がありませんでした',
+    igx_grid_excel_matches_count: '{0} matches.',
     igx_grid_advanced_filter_title: '高度なフィルター',
     igx_grid_advanced_filter_and_group: '"And" グループ',
     igx_grid_advanced_filter_or_group: '"Or" グループ',
diff --git a/projects/igniteui-angular-i18n/src/i18n/KO/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/KO/grid-resources.ts
@@ -88,6 +88,7 @@ const GridResourceStringsKO_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_excel_currency_filter: '통화 필터',
     igx_grid_excel_custom_filter: '사용자 필터...',
     igx_grid_excel_no_matches: '일치 항목 없음',
+    igx_grid_excel_matches_count: '{0} matches.',
     igx_grid_advanced_filter_title: '고급 필터링',
     igx_grid_advanced_filter_and_group: '그룹 "그리고"',
     igx_grid_advanced_filter_or_group: '그룹 "또는"',
diff --git a/projects/igniteui-angular-i18n/src/i18n/NB/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/NB/grid-resources.ts
@@ -90,6 +90,7 @@ const GridResourceStringsNB_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_excel_currency_filter: 'Valutafilter',
     igx_grid_excel_custom_filter: 'Tilpasset filter...',
     igx_grid_excel_no_matches: 'Ingen treff',
+    igx_grid_excel_matches_count: '{0} matches.',
     igx_grid_advanced_filter_title: 'Avansert filtrering',
     igx_grid_advanced_filter_and_group: '"Og"-gruppe',
     igx_grid_advanced_filter_or_group: '"Eller"-gruppe',
diff --git a/projects/igniteui-angular-i18n/src/i18n/NL/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/NL/grid-resources.ts
@@ -90,6 +90,7 @@ const GridResourceStringsNL_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_excel_currency_filter: 'Valutafilter',
     igx_grid_excel_custom_filter: 'Aangepast filter ...',
     igx_grid_excel_no_matches: 'Geen overeenkomsten',
+    igx_grid_excel_matches_count: '{0} matches.',
     igx_grid_advanced_filter_title: 'Geavanceerd filteren',
     igx_grid_advanced_filter_and_group: 'En-groep',
     igx_grid_advanced_filter_or_group: 'Of-groep',
diff --git a/projects/igniteui-angular-i18n/src/i18n/PL/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/PL/grid-resources.ts
@@ -90,6 +90,7 @@ const GridResourceStringsPL_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_excel_currency_filter: 'Filtr walutowy',
     igx_grid_excel_custom_filter: 'Filtr niestandardowy...',
     igx_grid_excel_no_matches: 'Brak dopasowań',
+    igx_grid_excel_matches_count: '{0} matches.',
     igx_grid_advanced_filter_title: 'Zaawansowane filtrowanie',
     igx_grid_advanced_filter_and_group: '"I" grupuj',
     igx_grid_advanced_filter_or_group: '"Lub" grupuj',
diff --git a/projects/igniteui-angular-i18n/src/i18n/PT/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/PT/grid-resources.ts
@@ -90,6 +90,7 @@ const GridResourceStringsPT_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_excel_currency_filter: 'Filtro de moeda',
     igx_grid_excel_custom_filter: 'Filtro personalizado...',
     igx_grid_excel_no_matches: 'Sem correspondências',
+    igx_grid_excel_matches_count: '{0} matches.',
     igx_grid_advanced_filter_title: 'Filtragem avançada',
     igx_grid_advanced_filter_and_group: '"E" grupo',
     igx_grid_advanced_filter_or_group: '"Ou" grupo',
diff --git a/projects/igniteui-angular-i18n/src/i18n/RO/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/RO/grid-resources.ts
@@ -90,6 +90,7 @@ const GridResourceStringsRO_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_excel_currency_filter: 'Filtru valutar',
     igx_grid_excel_custom_filter: 'Filtru customizat...',
     igx_grid_excel_no_matches: 'Nicio potrivire',
+    igx_grid_excel_matches_count: '{0} matches.',
     igx_grid_advanced_filter_title: 'Filtrare avansată',
     igx_grid_advanced_filter_and_group: '"Și" Grup',
     igx_grid_advanced_filter_or_group: '"Sau" grup',
diff --git a/projects/igniteui-angular-i18n/src/i18n/SV/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/SV/grid-resources.ts
@@ -90,6 +90,7 @@ const GridResourceStringsSV_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_excel_currency_filter: 'Valutafilter',
     igx_grid_excel_custom_filter: 'Anpassat filter ...',
     igx_grid_excel_no_matches: 'Inga träffar',
+    igx_grid_excel_matches_count: '{0} matches.',
     igx_grid_advanced_filter_title: 'Avancerad filtrering',
     igx_grid_advanced_filter_and_group: '"Och" -grupp',
     igx_grid_advanced_filter_or_group: '"Eller" -grupp',
diff --git a/projects/igniteui-angular-i18n/src/i18n/TR/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/TR/grid-resources.ts
@@ -90,6 +90,7 @@ const GridResourceStringsTR_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_excel_currency_filter: 'Para birimi filtresi',
     igx_grid_excel_custom_filter: 'Özel filtre...',
     igx_grid_excel_no_matches: 'Eşleşme yok',
+    igx_grid_excel_matches_count: '{0} matches.',
     igx_grid_advanced_filter_title: 'Gelişmiş Filtreleme',
     igx_grid_advanced_filter_and_group: '"Ve" Grubu',
     igx_grid_advanced_filter_or_group: '"Veya" Grubu',
diff --git a/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/ZH-HANS/grid-resources.ts
@@ -88,6 +88,7 @@ const GridResourceStringsZHHANS_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_excel_currency_filter: '货币筛选器',
     igx_grid_excel_custom_filter: '自定义筛选器...',
     igx_grid_excel_no_matches: '无匹配项',
+    igx_grid_excel_matches_count: '{0} matches.',
     igx_grid_advanced_filter_title: '高级筛选',
     igx_grid_advanced_filter_and_group: '"And" 组',
     igx_grid_advanced_filter_or_group: '"Or" 组',
diff --git a/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/grid-resources.ts b/projects/igniteui-angular-i18n/src/i18n/ZH-HANT/grid-resources.ts
@@ -88,6 +88,7 @@ const GridResourceStringsZHHANT_: ExpandRequire<IGridResourceStrings> = {
     igx_grid_excel_currency_filter: '貨幣篩選條件',
     igx_grid_excel_custom_filter: '自訂篩選條件...',
     igx_grid_excel_no_matches: '沒有相符項目',
+    igx_grid_excel_matches_count: '{0} matches.',
     igx_grid_advanced_filter_title: '進階篩選',
     igx_grid_advanced_filter_and_group: '“And” 群組',
     igx_grid_advanced_filter_or_group: '“Or” 群組',
diff --git a/projects/igniteui-angular/src/lib/core/i18n/grid-resources.ts b/projects/igniteui-angular/src/lib/core/i18n/grid-resources.ts
@@ -87,6 +87,7 @@ export interface IGridResourceStrings {
     igx_grid_excel_currency_filter?: string;
     igx_grid_excel_custom_filter?: string;
     igx_grid_excel_no_matches?: string;
+    igx_grid_excel_matches_count?: string;
     igx_grid_advanced_filter_title?: string;
     igx_grid_advanced_filter_and_group?: string;
     igx_grid_advanced_filter_or_group?: string;
@@ -254,6 +255,7 @@ export const GridResourceStringsEN: IGridResourceStrings = {
     igx_grid_excel_currency_filter: 'Currency filter',
     igx_grid_excel_custom_filter: 'Custom filter...',
     igx_grid_excel_no_matches: 'No matches',
+    igx_grid_excel_matches_count: '{0} matches.',
     igx_grid_advanced_filter_title: 'Advanced Filtering',
     igx_grid_advanced_filter_and_group: '"And" Group',
     igx_grid_advanced_filter_or_group: '"Or" Group',
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-component.scss
@@ -164,5 +164,9 @@
         @include m(inline) {
             @extend %grid-excel-filter--inline !optional;
         }
+
+        @include e(filter-results) {
+            @extend %grid-excel-menu__filter-results !optional;
+        }
     }
 }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss
@@ -490,6 +490,13 @@
         }
     }
 
+    %grid-excel-menu__filter-results {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+    }
+
     igx-excel-style-filter-operations,
     [igxExcelStyleFilterOperations] {
         display: flex;
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.html
@@ -47,6 +47,10 @@
     <ng-template igxEmptyList>
         <ng-container *ngTemplateOutlet="emptySearch"></ng-container>
     </ng-template>
+
+    <div class="igx-excel-filter__filter-results" aria-live="polite" aria-atomic="true">
+        {{ esf.grid?.resourceStrings.igx_grid_excel_matches_count.replace('{0}', matchesCount) }}
+    </div>
 </igx-list>
 
 <div class="igx-excel-filter__tree" *ngIf="isHierarchical()">
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts
@@ -180,6 +180,11 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
      */
     public displayedListData: FilterListItem[] = [];
 
+    /**
+     * @hidden @internal
+     */
+    public matchesCount: number;
+
     /**
      * @hidden @internal
      */
@@ -437,6 +442,7 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
                 }
             }
             selectAllBtn.label = this.esf.grid.resourceStrings.igx_grid_excel_select_all;
+            this.matchesCount = this.displayedListData.length - 1;
             this.cdr.detectChanges();
 
             return;
@@ -469,6 +475,12 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
             }
         }
 
+        if (this.displayedListData.length > 2) {
+            this.matchesCount = this.displayedListData.length - 2;
+        } else {
+            this.matchesCount = 0;
+        }
+
         selectAllBtn.indeterminate = false;
         selectAllBtn.isSelected = true;
         selectAllBtn.label = this.esf.grid.resourceStrings.igx_grid_excel_select_all_search_results;
