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..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 @@ -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. 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 @@
expressionItem.hovered " > - - edit - - - add - + + + edit + + + + + add + +