fix(query-builder): fix edti/add button event handlers shifted up on parent span

Author: ivanvpetrov

projects/igniteui-angular/src/lib/query-builder/query-builder-functions.spec.ts

@@ -689,11 +689,11 @@ export class QueryBuilderFunctions {
         let i = 0;
         tabElements.forEach((element: HTMLElement) => {
             switch (i) {
-                case 0: expect(element).toHaveClass('igx-icon');
-                    expect(element.innerText).toContain('edit');
+                case 0: expect(element.firstChild).toHaveClass('igx-icon');
+                    expect(element.firstChild.textContent).toContain('edit');
                     break;
-                case 1: expect(element).toHaveClass('igx-icon');
-                    expect(element.innerText).toContain('add');
+                case 1: expect(element.firstChild).toHaveClass('igx-icon');
+                    expect(element.firstChild.textContent).toContain('add');
                     break;
             }
             i++;

projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.html

@@ -147,23 +147,21 @@ <h6 class="igx-filter-empty__title">
                     expressionItem.hovered
                 "
             >
-                <span tabindex="-1">
+                <span tabindex="0"
+                    (keydown)="invokeClick($event)"
+                    (click)="enterExpressionEdit(expressionItem)">
                     <igx-icon
-                        tabindex="0"
                         family="default"
-                        name="edit"
-                        (keydown)="invokeClick($event)"
-                        (click)="enterExpressionEdit(expressionItem)"
+                        name="edit"                        
                     >
                     </igx-icon>
                 </span>
-                <span tabindex="-1">
+                <span tabindex="0"
+                    (keydown)="invokeClick($event)"
+                    (click)="enterExpressionAdd(expressionItem)">
                     <igx-icon
-                        tabindex="0"
                         family="default"
-                        name="add"
-                        (keydown)="invokeClick($event)"
-                        (click)="enterExpressionAdd(expressionItem)"
+                        name="add"                        
                         *ngIf="
                             !expressionItem.inAddMode &&
                             (expressionItem.parent !== currentGroup ||