fix: button: removes focus outline and border style when not in keybo…

…ard mode (EightfoldAI#205) * fix: button: removes focus outline and border style when not in keyboard mode * chore: button: adds additional keyboard focus styles * chore: a11y: updates focus outline width to 2 pixels * chore: button�: remove dupe
thiyagaraj-eightfold · Jun 24, 2022 · 42d331b · 42d331b
1 parent 77c9e6c
commit 42d331b
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 67 deletions.
diff --git a/src/components/Button/button.module.scss b/src/components/Button/button.module.scss
@@ -6,9 +6,9 @@
     --button-visited-foreground-color: var(--primary-color-80);
     --button-default-outline-color: var(--primary-color);
     --button-hover-outline-color: var(--primary-color-60);
-    --button-focus-outline-color: var(--primary-color-80);
     --button-active-outline-color: var(--primary-color-80);
     --button-visited-outline-color: var(--primary-color-80);
+    --button-focus-outline-color: var(--primary-color-40);
     --button-primary-default-background-color: var(--primary-color);
     --button-primary-hover-background-color: var(--primary-color-60);
     --button-primary-focus-background-color: var(--primary-color-80);
@@ -176,17 +176,11 @@
     }
 
     &:active {
-        .counter {
-            background-color: var(--button-counter-active-background-color);
-        }
-    }
-
-    &:focus {
         outline: 1px solid var(--button-focus-outline-color);
         outline-offset: -1px;
 
         .counter {
-            background-color: var(--button-counter-focus-background-color);
+            background-color: var(--button-counter-active-background-color);
         }
     }
 }
@@ -279,10 +273,6 @@
         border-color: var(--button-primary-active-border-color);
         color: var(--text-inverse-color);
     }
-
-    &:focus-visible {
-        outline-color: var(--button-primary-focus-border-color);
-    }
 }
 
 .button-secondary {
@@ -302,12 +292,6 @@
         color: var(--button-active-foreground-color);
         outline-color: var(--button-active-outline-color);
     }
-
-    &:focus {
-        background-color: var(--button-focus-background-color);
-        color: var(--button-focus-foreground-color);
-        outline-color: var(--button-focus-outline-color);
-    }
 }
 
 .button-primary-disruptive {
@@ -324,10 +308,6 @@
         background-color: var(--disruptive-color-80);
         border-color: var(--disruptive-color-80);
     }
-
-    &:focus {
-        outline-color: var(--disruptive-color-80);
-    }
 }
 
 .button-secondary-disruptive {
@@ -346,11 +326,6 @@
         color: var(--disruptive-color-80);
         outline-color: var(--disruptive-color-80);
     }
-
-    &:focus {
-        color: var(--disruptive-color-80);
-        outline-color: var(--disruptive-color-80);
-    }
 }
 
 .button-default {
@@ -370,12 +345,6 @@
         color: var(--button-active-foreground-color);
         outline-color: var(--button-active-background-color);
     }
-
-    &:focus {
-        background-color: var(--button-focus-background-color);
-        color: var(--button-focus-foreground-color);
-        outline-color: var(--button-focus-outline-color);
-    }
 }
 
 .button-disruptive {
@@ -395,12 +364,6 @@
         color: var(--disruptive-color-80);
         outline-color: var(--disruptive-color-10);
     }
-
-    &:focus {
-        background-color: var(--disruptive-color-10);
-        color: var(--disruptive-color-80);
-        outline-color: var(--disruptive-color-80);
-    }
 }
 
 .button-neutral {
@@ -420,12 +383,6 @@
         color: var(--text-secondary-color);
         outline-color: var(--grey-color-10);
     }
-
-    &:focus {
-        background-color: var(--grey-color-10);
-        color: var(--text-secondary-color);
-        outline-color: var(--grey-color-80);
-    }
 }
 
 .split-button {
@@ -560,43 +517,89 @@
             background-color: var(--button-counter-checked-background-color);
         }
     }
-
-    &:focus {
-        background-color: var(--button-two-state-focus-background-color);
-        color: var(--button-two-state-focus-foreground-color);
-        outline: 1px solid var(--button-two-state-focus-outline-color);
-
-        &.checked {
-            background-color: var(--button-two-state-checked-background-color);
-            color: var(--button-two-state-checked-foreground-color);
-            outline: 1px solid var(--button-two-state-focus-outline-color);
-        }
-
-        .counter {
-            background-color: var(--button-counter-focus-background-color);
-        }
-    }
 }
 
 :global(.focus-visible) {
     .button {
         &:focus-visible {
             outline-width: $focus-visible-outline-width;
             outline-offset: $focus-visible-outline-offset-inner;
-            outline-color: var(--primary-color-40);
+            outline-color: var(--button-focus-outline-color);
+        }
+
+        // Primary button doesn't have an outline. Add one for keyboard focus modality.
+        &.button-primary {
+            &:focus-visible {
+                outline: $focus-visible-outline-width solid
+                    var(--button-primary-focus-border-color);
+            }
+        }
+
+        &.button-primary-disruptive {
+            &:focus-visible {
+                outline: $focus-visible-outline-width solid
+                    var(--disruptive-color-80);
+            }
+        }
+
+        &.button-secondary {
+            &:focus-visible {
+                background-color: var(--button-focus-background-color);
+                color: var(--button-focus-foreground-color);
+            }
+        }
+
+        &.button-secondary-disruptive {
+            &:focus-visible {
+                color: var(--disruptive-color-80);
+                outline-color: var(--disruptive-color-80);
+            }
+        }
+
+        &.button-default {
+            &:focus-visible {
+                background-color: var(--button-focus-background-color);
+                color: var(--button-focus-foreground-color);
+            }
+        }
+
+        &.button-disruptive {
+            &:focus-visible {
+                background-color: var(--disruptive-color-10);
+                color: var(--disruptive-color-80);
+                outline-color: var(--disruptive-color-80);
+            }
+        }
+
+        &.button-neutral {
+            &:focus-visible {
+                background-color: var(--grey-color-10);
+                color: var(--text-secondary-color);
+                outline-color: var(--grey-color-80);
+            }
         }
     }
 
     .two-state-button {
         &:focus-visible {
+            background-color: var(--button-two-state-focus-background-color);
+            color: var(--button-two-state-focus-foreground-color);
             outline-width: $focus-visible-outline-width;
             outline-offset: $focus-visible-outline-offset-inner;
-            outline-color: var(--primary-color-40);
+            outline-color: var(--button-focus-outline-color);
 
             &.checked {
+                background-color: var(
+                    --button-two-state-checked-background-color
+                );
+                color: var(--button-two-state-checked-foreground-color);
                 outline-width: $focus-visible-outline-width;
                 outline-offset: $focus-visible-outline-offset-inner;
-                outline-color: var(--primary-color-40);
+                outline-color: var(--button-focus-outline-color);
+            }
+
+            .counter {
+                background-color: var(--button-counter-focus-background-color);
             }
         }
     }

diff --git a/src/shared/variables.ts b/src/shared/variables.ts
@@ -166,9 +166,10 @@ export interface CSSVariables extends React.CSSProperties {
 
     '--button-default-outline-color'?: string;
     '--button-hover-outline-color'?: string;
-    '--button-focus-outline-color'?: string;
     '--button-active-outline-color'?: string;
     '--button-visited-outline-color'?: string;
 
+    '--button-focus-outline-color'?: string;
+
     '--font-size'?: string;
 }
diff --git a/src/styles/themes/_definitions-light.scss b/src/styles/themes/_definitions-light.scss
@@ -163,6 +163,7 @@ $button-hover-outline-color: var(--button-hover-outline-color);
 $button-focus-outline-color: var(--button-focus-outline-color);
 $button-active-outline-color: var(--button-active-outline-color);
 $button-visited-outline-color: var(--button-visited-outline-color);
+$button-focus-outline-color: var(--button-focus-outline-color);
 
 $text-color-primary: var(--grey-color-90);
 $text-color-secondary: var(--grey-color-80);
@@ -295,8 +296,8 @@ $corner-radius-xl: 24px;
 
 // Focus visible Definitions
 
-$focus-visible-outline-width: 4px;
-$focus-visible-outline-offset-inner: -4px;
+$focus-visible-outline-width: 2px;
+$focus-visible-outline-offset-inner: -2px;
 $focus-visible-outline-offset-outer: 2px;
 
 // Speed / Duration Definitions