fix(query-builder): replace expression icons with icon buttons to imp…

…rove accessibility and interaction styles.
IgniteUI · Oct 8, 2024 · 78dd862 · 78dd862
1 parent 96f89c3
commit 78dd862
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 24 deletions.
diff --git a/...s/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss b/...s/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss
@@ -225,7 +225,7 @@
             .igx-filter-tree__expression-column {
                 padding-inline: pad-inline(rem(3px), rem(6px), rem(8px));
             }
-            
+
             igx-prefix {
                 display: flex;
             }
@@ -239,20 +239,10 @@
     %filter-tree__expression-actions {
         display: inline-flex;
         margin: 0 rem(8px);
+        gap: rem(8px);
 
-        igx-icon {
-            cursor: pointer;
-            color: color(null, 'gray', 500);
-            outline-style: none;
-
-            &:hover,
-            &:focus {
-                color: color(null, 'gray', 800);
-            }
-        }
-
-        igx-icon + igx-icon {
-            margin-inline-start: rem(8px);
+        %igx-icon-button-display {
+            --size: #{sizable(rem(20px), rem(24px), rem(32px))};
         }
     }
 

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
@@ -147,17 +147,20 @@ <h6 class="igx-filter-empty__title">
                     expressionItem.hovered
                 "
             >
-                <igx-icon
-                    role="button"
-                    tabindex="0"
+                <button
+                    igxIconButton="flat"
+                    aria-labelledby="edit-expression"
+                    [style.--component-size]="getComponentSizeStyles()"
                     (keydown)="invokeClick($event)"
                     (click)="enterExpressionEdit(expressionItem)">
-                    edit
-                </igx-icon>
+                    <igx-icon id="edit-expression">edit</igx-icon>
+                </button>
 
-                <igx-icon
-                    role="button"
-                    tabindex="0"
+                <button
+                    igxIconButton="flat"
+                    igxButton="icon"
+                    aria-labelledby="add-expression"
+                    [style.--component-size]="getComponentSizeStyles()"
                     (keydown)="invokeClick($event)"
                     (click)="enterExpressionAdd(expressionItem)"
                     *ngIf="
@@ -169,8 +172,8 @@ <h6 class="igx-filter-empty__title">
                                 ])
                     "
                 >
-                    add
-                </igx-icon>
+                    <igx-icon id="add-expression">add</igx-icon>
+                </button>
             </div>
         </div>