fix(select, combo): update focus styles for toggle and clear buttons (#16153)

Co-authored-by: Nikolay Alipiev <[email protected]>
Co-authored-by: Simeon Simeonoff <[email protected]>

Author: 3 people

projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss

@@ -182,19 +182,11 @@
         %igx-combo__toggle-button {
             color: var-get($theme, 'toggle-button-foreground-focus');
             background: var-get($theme, 'toggle-button-background-focus');
-
-            &:focus {
-                color: color($color: 'secondary');
-            }
         }
 
         %igx-combo__clear-button {
             color: var-get($theme, 'clear-button-foreground-focus');
             background: var-get($theme, 'clear-button-background-focus');
-
-            &:focus {
-                color: color($color: 'secondary');
-            }
         }
     }
 
@@ -225,13 +217,29 @@
     }
 
     .igx-input-group.igx-input-group--focused:not(.igx-input-group--box) {
-        @if $variant != 'fluent' {
+        @if $variant == 'material' {
             %igx-combo__toggle-button {
                 background: var-get($theme, 'toggle-button-background-focus--border');
             }
         }
     }
 
+    %form-group-bundle:not(%form-group-bundle--disabled) {
+        %igx-combo__clear-button:focus-visible,
+        %igx-combo__toggle-button:focus-visible {
+            color: color($color: 'secondary');
+            background: var-get($theme, 'toggle-button-background');
+        }
+    }
+
+    //.igx-input-group:not(.igx-input-group--box) {
+    //    %igx-combo__toggle-button:focus {
+    //        @if $variant == 'material' {
+    //            background: var-get($theme, 'toggle-button-background-focus--border');
+    //        }
+    //    }
+    //}
+
     .igx-input-group--disabled {
         %igx-combo__toggle-button {
             background: var-get($theme, 'toggle-button-background-disabled') !important;

projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss

@@ -46,7 +46,7 @@
     }
 
     .igx-input-group.igx-input-group--focused:not(.igx-input-group--box) {
-        @if $variant != 'fluent' and $variant != 'material' {
+        @if $variant == 'material' {
             %igx-select__toggle-button {
                 background: var-get($theme, 'toggle-button-background-focus--border');
             }