fix(button): add focus state to buttons

ZopaPublic · Jul 17, 2019 · 9f1480c · 9f1480c
1 parent 83493b7
commit 9f1480c
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 13 deletions.
diff --git a/src/components/atoms/Button/Button.tsx b/src/components/atoms/Button/Button.tsx
@@ -65,6 +65,7 @@ const boxShadows: Partial<TButtonStylingMapping> = {
 const activeBoxShadows: Partial<TButtonStylingMapping> = {
   alert: `${smallInset} ${statusColors.error}, ${largeInset} ${colors.base.white}`,
   contrastPrimary: `${smallInset} ${colors.base.white}, ${largeInset} ${colors.extended.navy700}`,
+  contrastSecondary: `${largeInset} ${colors.base.white}`,
   primary: `${smallInset} ${colors.extended.blue500}, ${largeInset} ${colors.base.white}`,
   secondary: `${largeInset} ${colors.primary.blue500}`,
   warning: `${smallInset} ${colors.alert.alerty500}, ${largeInset} ${colors.alert.alerty900}`,
@@ -125,9 +126,14 @@ const SButton = styled.button<IButtonProps>`
     box-shadow: none;
   }
 
+  &:active:enabled,
+  &:focus:enabled {
+    box-shadow: ${({ styling }) => styling && activeBoxShadows[styling]};
+    ${({ styling }) => (styling === 'contrastLink' || styling === 'link' ? null : 'outline: none')};
+  }
+
   &:active:enabled {
     opacity: 0.4;
-    box-shadow: ${({ styling }) => styling && activeBoxShadows[styling]};
   }
 
   &:disabled {

diff --git a/src/components/atoms/Button/__snapshots__/Button.test.tsx.snap b/src/components/atoms/Button/__snapshots__/Button.test.tsx.snap
@@ -42,9 +42,14 @@ exports[`Alert button renders the component with props 1`] = `
   box-shadow: none;
 }
 
+.c0:active:enabled,
+.c0:focus:enabled {
+  box-shadow: inset 0 0 0 2px #F52D2D,inset 0 0 0 4px #fff;
+  outline: none;
+}
+
 .c0:active:enabled {
   opacity: 0.4;
-  box-shadow: inset 0 0 0 2px #F52D2D,inset 0 0 0 4px #fff;
 }
 
 .c0:disabled {
@@ -106,9 +111,14 @@ exports[`Compact button renders the component with props 1`] = `
   box-shadow: none;
 }
 
+.c0:active:enabled,
+.c0:focus:enabled {
+  box-shadow: inset 0 0 0 2px #4B3CFA,inset 0 0 0 4px #fff;
+  outline: none;
+}
+
 .c0:active:enabled {
   opacity: 0.4;
-  box-shadow: inset 0 0 0 2px #4B3CFA,inset 0 0 0 4px #fff;
 }
 
 .c0:disabled {
@@ -170,9 +180,14 @@ exports[`Disabled button renders the component with props 1`] = `
   box-shadow: none;
 }
 
+.c0:active:enabled,
+.c0:focus:enabled {
+  box-shadow: inset 0 0 0 2px #4B3CFA,inset 0 0 0 4px #fff;
+  outline: none;
+}
+
 .c0:active:enabled {
   opacity: 0.4;
-  box-shadow: inset 0 0 0 2px #4B3CFA,inset 0 0 0 4px #fff;
 }
 
 .c0:disabled {
@@ -236,9 +251,14 @@ exports[`Full width button renders the component with props 1`] = `
   box-shadow: none;
 }
 
+.c0:active:enabled,
+.c0:focus:enabled {
+  box-shadow: inset 0 0 0 2px #4B3CFA,inset 0 0 0 4px #fff;
+  outline: none;
+}
+
 .c0:active:enabled {
   opacity: 0.4;
-  box-shadow: inset 0 0 0 2px #4B3CFA,inset 0 0 0 4px #fff;
 }
 
 .c0:disabled {
@@ -300,9 +320,14 @@ exports[`Large button renders the component with props 1`] = `
   box-shadow: none;
 }
 
+.c0:active:enabled,
+.c0:focus:enabled {
+  box-shadow: inset 0 0 0 2px #4B3CFA,inset 0 0 0 4px #fff;
+  outline: none;
+}
+
 .c0:active:enabled {
   opacity: 0.4;
-  box-shadow: inset 0 0 0 2px #4B3CFA,inset 0 0 0 4px #fff;
 }
 
 .c0:disabled {
@@ -365,9 +390,14 @@ exports[`Left icon button renders the component with props 1`] = `
   box-shadow: none;
 }
 
+.c0:active:enabled,
+.c0:focus:enabled {
+  box-shadow: inset 0 0 0 2px #4B3CFA,inset 0 0 0 4px #fff;
+  outline: none;
+}
+
 .c0:active:enabled {
   opacity: 0.4;
-  box-shadow: inset 0 0 0 2px #4B3CFA,inset 0 0 0 4px #fff;
 }
 
 .c0:disabled {
@@ -558,9 +588,14 @@ exports[`Primary button renders the component with props with no a11y violations
   box-shadow: none;
 }
 
+.c0:active:enabled,
+.c0:focus:enabled {
+  box-shadow: inset 0 0 0 2px #4B3CFA,inset 0 0 0 4px #fff;
+  outline: none;
+}
+
 .c0:active:enabled {
   opacity: 0.4;
-  box-shadow: inset 0 0 0 2px #4B3CFA,inset 0 0 0 4px #fff;
 }
 
 .c0:disabled {
@@ -621,9 +656,14 @@ exports[`Primary contrast button renders the component with props 1`] = `
   box-shadow: none;
 }
 
+.c0:active:enabled,
+.c0:focus:enabled {
+  box-shadow: inset 0 0 0 2px #fff,inset 0 0 0 4px #293272;
+  outline: none;
+}
+
 .c0:active:enabled {
   opacity: 0.4;
-  box-shadow: inset 0 0 0 2px #fff,inset 0 0 0 4px #293272;
 }
 
 .c0:disabled {
@@ -686,9 +726,14 @@ exports[`Right icon button renders the component with props 1`] = `
   box-shadow: none;
 }
 
+.c0:active:enabled,
+.c0:focus:enabled {
+  box-shadow: inset 0 0 0 2px #4B3CFA,inset 0 0 0 4px #fff;
+  outline: none;
+}
+
 .c0:active:enabled {
   opacity: 0.4;
-  box-shadow: inset 0 0 0 2px #4B3CFA,inset 0 0 0 4px #fff;
 }
 
 .c0:disabled {
@@ -755,9 +800,14 @@ exports[`Secondary button renders the component with props 1`] = `
   box-shadow: none;
 }
 
+.c0:active:enabled,
+.c0:focus:enabled {
+  box-shadow: inset 0 0 0 4px #4B3CFA;
+  outline: none;
+}
+
 .c0:active:enabled {
   opacity: 0.4;
-  box-shadow: inset 0 0 0 4px #4B3CFA;
 }
 
 .c0:disabled {
@@ -820,6 +870,12 @@ exports[`Secondary contrast button renders the component with props 1`] = `
   box-shadow: none;
 }
 
+.c0:active:enabled,
+.c0:focus:enabled {
+  box-shadow: inset 0 0 0 4px #fff;
+  outline: none;
+}
+
 .c0:active:enabled {
   opacity: 0.4;
 }
@@ -883,9 +939,14 @@ exports[`Small button renders the component with props 1`] = `
   box-shadow: none;
 }
 
+.c0:active:enabled,
+.c0:focus:enabled {
+  box-shadow: inset 0 0 0 2px #4B3CFA,inset 0 0 0 4px #fff;
+  outline: none;
+}
+
 .c0:active:enabled {
   opacity: 0.4;
-  box-shadow: inset 0 0 0 2px #4B3CFA,inset 0 0 0 4px #fff;
 }
 
 .c0:disabled {
@@ -947,9 +1008,14 @@ exports[`Warning button renders the component with props 1`] = `
   box-shadow: none;
 }
 
+.c0:active:enabled,
+.c0:focus:enabled {
+  box-shadow: inset 0 0 0 2px #FFDE25,inset 0 0 0 4px #383108;
+  outline: none;
+}
+
 .c0:active:enabled {
   opacity: 0.4;
-  box-shadow: inset 0 0 0 2px #FFDE25,inset 0 0 0 4px #383108;
 }
 
 .c0:disabled {