Merge pull request #14718 from IgniteUI/ganastasov/fix-14650-17.2.x

fix(query-builder): prevent aria-hidden error on the edit icon - 17.2.x

Author: kacheshmarova

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.

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>