From a1749512772c4d4916d90186a9edc4b868ac2393 Mon Sep 17 00:00:00 2001
From: Georgi Anastasov <ggeorgianastasov@gmail.com>
Date: Wed, 4 Sep 2024 11:41:52 +0300
Subject: [PATCH 1/3] fix(query-builder): prevent aria-hidden error on the edit
 icon

---
 .../grid/grid-filtering-advanced.spec.ts      | 30 +++++++++++-
 .../query-builder.component.html              | 46 ++++++++++---------
 2 files changed, 53 insertions(+), 23 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts
index 1e8f27ca0a3..16bbd70e21b 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts
@@ -2125,6 +2125,34 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
             expect(consoleSpy).not.toHaveBeenCalled();
         }));
 
+        it('should not trigger accessibility errors when interacting with the edit icon in the advanced filtering expression chip', fakeAsync(() => {
+            // Apply advanced filter through API to generate chips.
+            const tree = new FilteringExpressionsTree(FilteringLogic.Or);
+            tree.filteringOperands.push({
+                fieldName: 'Downloads', searchVal: 1, condition: IgxNumberFilteringOperand.instance().condition('equals')
+            });
+            grid.advancedFilteringExpressionsTree = tree;
+            fix.detectChanges();
+
+            // Open Advanced Filtering dialog.
+            GridFunctions.clickAdvancedFilteringButton(fix);
+            tick(50);
+            fix.detectChanges();
+
+            // Hover over the first visible expression chip to show edit icon.
+            const expressionItem = fix.nativeElement.querySelectorAll(`.${ADVANCED_FILTERING_EXPRESSION_ITEM_CLASS}`)[0];
+            expressionItem.dispatchEvent(new MouseEvent('mouseenter'));
+            tick(50);
+            fix.detectChanges();
+
+            // Click the edit icon on the hovered and focused edit icon.
+            const editIcon = GridFunctions.getAdvancedFilteringTreeExpressionEditIcon(fix, [0]);
+            tick(50);
+            fix.detectChanges();
+            expect(editIcon.getAttribute('aria-hidden')).toBe('true');
+            expect(editIcon.getAttribute('tabIndex')).toBeFalsy();
+        }));
+
         describe('Context Menu - ', () => {
             it('Should discard added group when clicking its operator line without having a single expression.', fakeAsync(() => {
                 // Open Advanced Filtering dialog.
@@ -3133,7 +3161,7 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
             tree.filteringOperands.push({
                 fieldName: 'ProductName', searchVal: 'a', condition: IgxStringFilteringOperand.instance().condition('contains')
             });
-            
+
             grid.advancedFilteringExpressionsTree = tree;
             fix.detectChanges();
 
diff --git a/projects/igniteui-angular/src/lib/query-builder/query-builder.component.html b/projects/igniteui-angular/src/lib/query-builder/query-builder.component.html
index d7074f0b41c..cab5f8cde57 100644
--- a/projects/igniteui-angular/src/lib/query-builder/query-builder.component.html
+++ b/projects/igniteui-angular/src/lib/query-builder/query-builder.component.html
@@ -147,28 +147,30 @@ <h6 class="igx-filter-empty__title">
                     expressionItem.hovered
                 "
             >
-                <igx-icon
-                    tabindex="0"
-                    (keydown)="invokeClick($event)"
-                    (click)="enterExpressionEdit(expressionItem)"
-                >
-                    edit
-                </igx-icon>
-                <igx-icon
-                    tabindex="0"
-                    (keydown)="invokeClick($event)"
-                    (click)="enterExpressionAdd(expressionItem)"
-                    *ngIf="
-                        !expressionItem.inAddMode &&
-                        (expressionItem.parent !== currentGroup ||
-                            expressionItem !==
-                                currentGroup.children[
-                                    currentGroup.children.length - 1
-                                ])
-                    "
-                >
-                    add
-                </igx-icon>
+                <span tabindex="0">
+                    <igx-icon
+                        (keydown)="invokeClick($event)"
+                        (click)="enterExpressionEdit(expressionItem)"
+                    >
+                        edit
+                    </igx-icon>
+                </span>
+                <span tabindex="0">
+                    <igx-icon
+                        (keydown)="invokeClick($event)"
+                        (click)="enterExpressionAdd(expressionItem)"
+                        *ngIf="
+                            !expressionItem.inAddMode &&
+                            (expressionItem.parent !== currentGroup ||
+                                expressionItem !==
+                                    currentGroup.children[
+                                        currentGroup.children.length - 1
+                                    ])
+                        "
+                    >
+                        add
+                    </igx-icon>
+                </span>
             </div>
         </div>
 

From b6219c7b699f324879b8cabeb0c9294d2dbfadfa Mon Sep 17 00:00:00 2001
From: Georgi Anastasov <ggeorgianastasov@gmail.com>
Date: Wed, 4 Sep 2024 11:45:30 +0300
Subject: [PATCH 2/3] test(query-builder): remove unnecessary line break

---
 .../src/lib/grids/grid/grid-filtering-advanced.spec.ts           | 1 -
 1 file changed, 1 deletion(-)

diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts
index 16bbd70e21b..2eca738d2f1 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts
@@ -3161,7 +3161,6 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
             tree.filteringOperands.push({
                 fieldName: 'ProductName', searchVal: 'a', condition: IgxStringFilteringOperand.instance().condition('contains')
             });
-
             grid.advancedFilteringExpressionsTree = tree;
             fix.detectChanges();
 

From 9709a507bf137444afff13f768138195f75a0e16 Mon Sep 17 00:00:00 2001
From: Georgi Anastasov <ggeorgianastasov@gmail.com>
Date: Wed, 4 Sep 2024 11:57:18 +0300
Subject: [PATCH 3/3] test(query-builder): adjust spacing for consistent
 formatting

---
 .../src/lib/grids/grid/grid-filtering-advanced.spec.ts           | 1 +
 1 file changed, 1 insertion(+)

diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts
index 2eca738d2f1..5dd2a4e8fe1 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts
@@ -3161,6 +3161,7 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
             tree.filteringOperands.push({
                 fieldName: 'ProductName', searchVal: 'a', condition: IgxStringFilteringOperand.instance().condition('contains')
             });
+            
             grid.advancedFilteringExpressionsTree = tree;
             fix.detectChanges();