From 9a80c6357cecaeb666dcb7c1fe78925f73e72634 Mon Sep 17 00:00:00 2001
From: Daniel Silva <daniel5055@gmail.com>
Date: Wed, 3 Apr 2019 16:39:23 -0300
Subject: [PATCH] fix(Radio Button Group): Focus style

---
 components/Button/buttonStyle.js              | 103 +--
 .../__snapshots__/Modal.unit.test.jsx.snap    |   7 +
 components/RadioGroup/HiddenRadio.jsx         |  14 -
 components/RadioGroup/Radio.jsx               |   2 +-
 components/RadioGroup/RadioButton.jsx         |  29 +-
 .../__snapshots__/Radio.unit.test.jsx.snap    |  63 ++
 .../RadioButton.unit.test.jsx.snap            | 664 ++++++++++++------
 .../RadioGroup.unit.test.jsx.snap             | 510 ++++++++++----
 components/shared/ButtonGroupLabel.jsx        |  29 +-
 components/shared/HiddenRadio.jsx             |  38 +
 .../sub-components/buttonGroupError.jsx       |   4 +-
 11 files changed, 1026 insertions(+), 437 deletions(-)
 delete mode 100644 components/RadioGroup/HiddenRadio.jsx
 create mode 100644 components/shared/HiddenRadio.jsx

diff --git a/components/Button/buttonStyle.js b/components/Button/buttonStyle.js
index e093292dd..95e08c247 100644
--- a/components/Button/buttonStyle.js
+++ b/components/Button/buttonStyle.js
@@ -36,21 +36,33 @@ const height = ({ size }) => {
   return `height: ${heights[size] || heights.medium};`;
 };
 
-const skin = props => {
+const _interactiveStyle = (props, skinProp) => {
   const {
-    unselected,
-    selected,
-    disabled,
-    focused,
-    hovered,
-    decoration,
-    borderRadius,
+    [skinProp]: { shadow, background, border, color },
   } = skins(props);
+  const { disabled } = props;
+
+  return !disabled
+    ? `
+    box-shadow: ${shadow};
+    background-color: ${background};
+    border-color: ${border};
+    color: ${color};
+  `
+    : '';
+};
+
+const hover = props => _interactiveStyle(props, 'hovered');
+const focus = props => _interactiveStyle(props, 'focused');
+const active = props => _interactiveStyle(props, 'selected');
 
-  return `${`
-    background-color: ${
-      props.disabled ? disabled.background : unselected.background
-    };
+const skin = props => {
+  const { unselected, disabled, decoration, borderRadius } = skins(props);
+
+  return css`
+    background-color: ${props.disabled
+      ? disabled.background
+      : unselected.background};
     border: 1.5px solid ${props.disabled ? disabled.border : unselected.border};
 
     box-shadow: ${props.disabled ? disabled.shadow : unselected.shadow};
@@ -59,38 +71,10 @@ const skin = props => {
 
     ${decoration ? `text-decoration: ${decoration};` : ''}
     ${borderRadius ? `border-radius: ${borderRadius};` : ''}
-  `}
-
-    ${
-      !props.disabled
-        ? `
-      &:hover {
-        box-shadow: ${hovered.shadow};
-        background-color: ${hovered.background};
-        border-color: ${hovered.border};
-        color: ${hovered.color};
-      }
-
-      &:focus {
-        box-shadow: ${focused.shadow};
-        background-color: ${focused.background};
-        border-color: ${focused.border};
-        color: ${focused.color};
-      }
-
-      &:active {
-        box-shadow: ${selected.shadow};
-        background-color: ${selected.background};
-        border-color: ${selected.border};
-        color: ${selected.color};
-      }
-    `
-        : ''
-    }
   `;
 };
 
-export default css`
+const DEFAULT_STYLE = css`
   align-items: center;
   ${props => `cursor: ${props.disabled ? 'not-allowed' : 'pointer'};`}
   display: flex;
@@ -115,6 +99,43 @@ export default css`
   transition: all 0.2s ease-in-out;
 
   ${props => props.full && `width: 100%;`}
+`;
 
+const SKIN_STYLE = css`
   ${skin}
 `;
+const HOVER_STYLE = css`
+  ${hover}
+`;
+const FOCUS_STYLE = css`
+  ${focus}
+`;
+const ACTIVE_STYLE = css`
+  ${active}
+`;
+
+const BUTTON_STYLE = css`
+  ${DEFAULT_STYLE}
+  ${SKIN_STYLE}
+
+  :hover {
+    ${HOVER_STYLE}
+  }
+
+  :focus {
+    ${FOCUS_STYLE}
+  }
+
+  :active {
+    ${ACTIVE_STYLE}
+  }
+`;
+
+export {
+  DEFAULT_STYLE,
+  SKIN_STYLE,
+  HOVER_STYLE,
+  FOCUS_STYLE,
+  ACTIVE_STYLE,
+  BUTTON_STYLE as default,
+};
diff --git a/components/Modal/__snapshots__/Modal.unit.test.jsx.snap b/components/Modal/__snapshots__/Modal.unit.test.jsx.snap
index 030fed95a..fde1e7389 100644
--- a/components/Modal/__snapshots__/Modal.unit.test.jsx.snap
+++ b/components/Modal/__snapshots__/Modal.unit.test.jsx.snap
@@ -1006,6 +1006,13 @@ exports[`<Modal /> Snapshots should match the snapshot 1`] = `
                                         [Function],
                                         " ",
                                         [Function],
+                                        ":hover{",
+                                        [Function],
+                                        "}:focus{",
+                                        [Function],
+                                        "}:active{",
+                                        [Function],
+                                        "}",
                                         " ",
                                         ".c12",
                                         "{",
diff --git a/components/RadioGroup/HiddenRadio.jsx b/components/RadioGroup/HiddenRadio.jsx
deleted file mode 100644
index bdd818f31..000000000
--- a/components/RadioGroup/HiddenRadio.jsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import styled from 'styled-components';
-
-export default styled.input.attrs({
-  type: 'radio',
-})`
-  border: 0;
-  height: 0;
-  margin: 0;
-  opacity: 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 0;
-`;
diff --git a/components/RadioGroup/Radio.jsx b/components/RadioGroup/Radio.jsx
index 78bb75587..ea199564d 100644
--- a/components/RadioGroup/Radio.jsx
+++ b/components/RadioGroup/Radio.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import Colors from '../Colors';
 import Label from '../shared/Label';
-import HiddenRadio from './HiddenRadio';
+import HiddenRadio from '../shared/HiddenRadio';
 
 const RadioMark = styled.span`
   background-color: ${Colors.WHITE};
diff --git a/components/RadioGroup/RadioButton.jsx b/components/RadioGroup/RadioButton.jsx
index cd8545a28..78adbb25f 100644
--- a/components/RadioGroup/RadioButton.jsx
+++ b/components/RadioGroup/RadioButton.jsx
@@ -2,8 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import ButtonGroupLabel from '../shared/ButtonGroupLabel';
-import HiddenRadio from './HiddenRadio';
+import HiddenRadio from '../shared/HiddenRadio';
 import Icon from '../Icon';
+import uniqId from '../shared/uniqId';
 
 const LockIcon = styled(Icon).attrs({
   name: 'lock',
@@ -41,27 +42,33 @@ const Radio = ({
   value,
   checked,
   icon,
+  id,
   inline,
   ...rest
 }) => {
   const skin = checked ? 'primary' : 'secondary';
+  const _id = id || uniqId('radio-button-');
 
   return (
     <Wrapper inline={inline}>
-      <ButtonGroupLabel
-        error={error}
+      <HiddenRadio
+        checked={checked}
         disabled={disabled}
+        id={_id}
+        onChange={e => onChange({ value, label }, e)}
+        value={value}
         skin={skin}
+        error={error}
+        {...rest}
+      />
+      <ButtonGroupLabel
         checked={checked}
+        disabled={disabled}
+        error={error}
+        htmlFor={_id}
+        skin={skin}
       >
         {icon && <ButtonIcon name={icon} />}
-        <HiddenRadio
-          checked={checked}
-          disabled={disabled}
-          onChange={e => onChange({ value, label }, e)}
-          value={value}
-          {...rest}
-        />
         {children || label}
         {disabled && <LockIcon />}
       </ButtonGroupLabel>
@@ -77,6 +84,7 @@ Radio.defaultProps = {
   disabled: false,
   error: false,
   icon: undefined,
+  id: undefined,
   inline: false,
   label: undefined,
   onChange: () => {},
@@ -88,6 +96,7 @@ Radio.propTypes = {
   disabled: PropTypes.bool,
   error: PropTypes.bool,
   icon: PropTypes.string,
+  id: PropTypes.string,
   inline: PropTypes.bool,
   label: PropTypes.string,
   onChange: PropTypes.func,
diff --git a/components/RadioGroup/__snapshots__/Radio.unit.test.jsx.snap b/components/RadioGroup/__snapshots__/Radio.unit.test.jsx.snap
index 15d2c76b3..1ac38474b 100644
--- a/components/RadioGroup/__snapshots__/Radio.unit.test.jsx.snap
+++ b/components/RadioGroup/__snapshots__/Radio.unit.test.jsx.snap
@@ -12,6 +12,27 @@ exports[`<RadioGroup.Radio /> snapshot children 1`] = `
   width: 0;
 }
 
+.c2:focus ~ .c7 {
+  box-shadow: 0 2px 6px 0 rgba(19,85,208,0.5);
+  background-color: #1355d0;
+  border-color: #1355d0;
+  color: #FFFFFF;
+}
+
+.c2:hover ~ .c7 {
+  box-shadow: 0 2px 4px 0 #cccccc;
+  background-color: #002f7b;
+  border-color: #002f7b;
+  color: #FFFFFF;
+}
+
+.c2:active ~ .c7 {
+  box-shadow: 0 2px 4px 0 #4c4c4c;
+  background-color: #002f7b;
+  border-color: #002f7b;
+  color: #FFFFFF;
+}
+
 .c4 {
   background-color: #FFFFFF;
   border: 1.5px solid #999999;
@@ -367,6 +388,27 @@ exports[`<RadioGroup.Radio /> snapshot error 1`] = `
   width: 0;
 }
 
+.c2:focus ~ .c7 {
+  box-shadow: 0 2px 6px 0 rgba(19,85,208,0.5);
+  background-color: #1355d0;
+  border-color: #1355d0;
+  color: #FFFFFF;
+}
+
+.c2:hover ~ .c7 {
+  box-shadow: 0 2px 4px 0 #cccccc;
+  background-color: #002f7b;
+  border-color: #002f7b;
+  color: #FFFFFF;
+}
+
+.c2:active ~ .c7 {
+  box-shadow: 0 2px 4px 0 #4c4c4c;
+  background-color: #002f7b;
+  border-color: #002f7b;
+  color: #FFFFFF;
+}
+
 .c4 {
   background-color: #FFFFFF;
   border: 1.5px solid #999999;
@@ -567,6 +609,27 @@ exports[`<RadioGroup.Radio /> snapshot simple 1`] = `
   width: 0;
 }
 
+.c2:focus ~ .c5 {
+  box-shadow: 0 2px 6px 0 rgba(19,85,208,0.5);
+  background-color: #1355d0;
+  border-color: #1355d0;
+  color: #FFFFFF;
+}
+
+.c2:hover ~ .c5 {
+  box-shadow: 0 2px 4px 0 #cccccc;
+  background-color: #002f7b;
+  border-color: #002f7b;
+  color: #FFFFFF;
+}
+
+.c2:active ~ .c5 {
+  box-shadow: 0 2px 4px 0 #4c4c4c;
+  background-color: #002f7b;
+  border-color: #002f7b;
+  color: #FFFFFF;
+}
+
 .c4 {
   background-color: #FFFFFF;
   border: 1.5px solid #999999;
diff --git a/components/RadioGroup/__snapshots__/RadioButton.unit.test.jsx.snap b/components/RadioGroup/__snapshots__/RadioButton.unit.test.jsx.snap
index 2ed87cce8..18ddc913e 100644
--- a/components/RadioGroup/__snapshots__/RadioButton.unit.test.jsx.snap
+++ b/components/RadioGroup/__snapshots__/RadioButton.unit.test.jsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<RadioGroup.Radio /> snapshot checked 1`] = `
-.c1 {
+.c3 {
   display: block;
   margin-bottom: 5px;
   -webkit-align-items: center;
@@ -41,32 +41,32 @@ exports[`<RadioGroup.Radio /> snapshot checked 1`] = `
   display: inline-flex;
 }
 
-.c1 *:nth-child(2) {
+.c3 *:nth-child(2) {
   margin-left: 5px;
 }
 
-.c1:hover {
-  box-shadow: 0 2px 4px 0 #cccccc;
-  background-color: #002f7b;
-  border-color: #002f7b;
-  color: #FFFFFF;
+.c4:focus ~ .c2 {
+  box-shadow: 0 2px 4px 0 rgba(19,85,208,0.5);
+  background-color: #FFFFFF;
+  border-color: #1355d0;
+  color: #1355d0;
 }
 
-.c1:focus {
-  box-shadow: 0 2px 6px 0 rgba(19,85,208,0.5);
-  background-color: #1355d0;
+.c4:hover ~ .c2 {
+  box-shadow: 0 2px 4px 0 #cccccc;
+  background-color: #e5edfc;
   border-color: #1355d0;
-  color: #FFFFFF;
+  color: #1355d0;
 }
 
-.c1:active {
+.c4:active ~ .c2 {
   box-shadow: 0 2px 4px 0 #4c4c4c;
-  background-color: #002f7b;
-  border-color: #002f7b;
-  color: #FFFFFF;
+  background-color: #e5edfc;
+  border-color: #1355d0;
+  color: #1355d0;
 }
 
-.c2 {
+.c1 {
   border: 0;
   height: 0;
   margin: 0;
@@ -77,7 +77,28 @@ exports[`<RadioGroup.Radio /> snapshot checked 1`] = `
   width: 0;
 }
 
-.c0 .c3 {
+.c1:focus ~ .c2 {
+  box-shadow: 0 2px 6px 0 rgba(19,85,208,0.5);
+  background-color: #1355d0;
+  border-color: #1355d0;
+  color: #FFFFFF;
+}
+
+.c1:hover ~ .c2 {
+  box-shadow: 0 2px 4px 0 #cccccc;
+  background-color: #002f7b;
+  border-color: #002f7b;
+  color: #FFFFFF;
+}
+
+.c1:active ~ .c2 {
+  box-shadow: 0 2px 4px 0 #4c4c4c;
+  background-color: #002f7b;
+  border-color: #002f7b;
+  color: #FFFFFF;
+}
+
+.c0 .c5 {
   margin-left: 8px;
   font-size: 17px;
 }
@@ -85,26 +106,28 @@ exports[`<RadioGroup.Radio /> snapshot checked 1`] = `
 <div
   className="c0"
 >
-  <label
+  <input
     checked={true}
     className="c1"
     disabled={false}
+    id="radio-button-1"
+    onChange={[Function]}
+    type="radio"
+    value="Foo"
+  />
+  <label
+    checked={true}
+    className="c2 c3"
+    disabled={false}
+    htmlFor="radio-button-1"
   >
-    <input
-      checked={true}
-      className="c2"
-      disabled={false}
-      onChange={[Function]}
-      type="radio"
-      value="Foo"
-    />
     Foo
   </label>
 </div>
 `;
 
 exports[`<RadioGroup.Radio /> snapshot children 1`] = `
-.c1 {
+.c3 {
   display: block;
   margin-bottom: 5px;
   -webkit-align-items: center;
@@ -144,43 +167,88 @@ exports[`<RadioGroup.Radio /> snapshot children 1`] = `
   display: inline-flex;
 }
 
-.c1 *:nth-child(2) {
+.c3 *:nth-child(2) {
   margin-left: 5px;
 }
 
-.c1:hover {
-  box-shadow: 0 2px 4px 0 #cccccc;
-  background-color: #e5edfc;
-  border-color: #1355d0;
-  color: #1355d0;
+.c1 {
+  border: 0;
+  height: 0;
+  margin: 0;
+  opacity: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 0;
 }
 
-.c1:focus {
+.c1:focus ~ .c2 {
   box-shadow: 0 2px 4px 0 rgba(19,85,208,0.5);
   background-color: #FFFFFF;
   border-color: #1355d0;
   color: #1355d0;
 }
 
-.c1:active {
+.c1:hover ~ .c2 {
+  box-shadow: 0 2px 4px 0 #cccccc;
+  background-color: #e5edfc;
+  border-color: #1355d0;
+  color: #1355d0;
+}
+
+.c1:active ~ .c2 {
   box-shadow: 0 2px 4px 0 #4c4c4c;
   background-color: #e5edfc;
   border-color: #1355d0;
   color: #1355d0;
 }
 
-.c2 {
-  border: 0;
-  height: 0;
-  margin: 0;
-  opacity: 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 0;
+.c4:focus ~ .c2 {
+  box-shadow: 0 2px 6px 0 rgba(19,85,208,0.5);
+  background-color: #1355d0;
+  border-color: #1355d0;
+  color: #FFFFFF;
+}
+
+.c4:hover ~ .c2 {
+  box-shadow: 0 2px 4px 0 #cccccc;
+  background-color: #002f7b;
+  border-color: #002f7b;
+  color: #FFFFFF;
+}
+
+.c4:active ~ .c2 {
+  box-shadow: 0 2px 4px 0 #4c4c4c;
+  background-color: #002f7b;
+  border-color: #002f7b;
+  color: #FFFFFF;
+}
+
+.c5:focus ~ .c2 {
+  border-color: #ff2d4d;
+  box-shadow: 0 2px 6px 0 #ff2d4d;
+  background-color: #ffe5e9;
+  border-color: #ff2d4d;
+  color: #ff2d4d;
+}
+
+.c5:hover ~ .c2 {
+  border-color: #ff2d4d;
+  box-shadow: 0 2px 6px 0 #ff2d4d;
+  background-color: #ffe5e9;
+  border-color: #ff2d4d;
+  color: #ff2d4d;
 }
 
-.c0 .c3 {
+.c5:active ~ .c2 {
+  border-color: #ff2d4d;
+  box-shadow: 0 2px 6px 0 #ff2d4d;
+  background-color: #ffe5e9;
+  border-color: #ff2d4d;
+  color: #ff2d4d;
+}
+
+.c0 .c6 {
   margin-left: 8px;
   font-size: 17px;
 }
@@ -188,26 +256,28 @@ exports[`<RadioGroup.Radio /> snapshot children 1`] = `
 <div
   className="c0"
 >
-  <label
+  <input
     checked={false}
     className="c1"
     disabled={false}
+    id="radio-button-7"
+    onChange={[Function]}
+    type="radio"
+    value="Foo"
+  />
+  <label
+    checked={false}
+    className="c2 c3"
+    disabled={false}
+    htmlFor="radio-button-7"
   >
-    <input
-      checked={false}
-      className="c2"
-      disabled={false}
-      onChange={[Function]}
-      type="radio"
-      value="Foo"
-    />
     Foo
   </label>
 </div>
 `;
 
 exports[`<RadioGroup.Radio /> snapshot disabled 1`] = `
-.c1 {
+.c3 {
   display: block;
   margin-bottom: 5px;
   -webkit-align-items: center;
@@ -247,11 +317,53 @@ exports[`<RadioGroup.Radio /> snapshot disabled 1`] = `
   display: inline-flex;
 }
 
-.c1 *:nth-child(2) {
+.c3 *:nth-child(2) {
   margin-left: 5px;
 }
 
-.c2 {
+.c5:focus ~ .c2 {
+  box-shadow: 0 2px 4px 0 rgba(19,85,208,0.5);
+  background-color: #FFFFFF;
+  border-color: #1355d0;
+  color: #1355d0;
+}
+
+.c5:hover ~ .c2 {
+  box-shadow: 0 2px 4px 0 #cccccc;
+  background-color: #e5edfc;
+  border-color: #1355d0;
+  color: #1355d0;
+}
+
+.c5:active ~ .c2 {
+  box-shadow: 0 2px 4px 0 #4c4c4c;
+  background-color: #e5edfc;
+  border-color: #1355d0;
+  color: #1355d0;
+}
+
+.c6:focus ~ .c2 {
+  box-shadow: 0 2px 6px 0 rgba(19,85,208,0.5);
+  background-color: #1355d0;
+  border-color: #1355d0;
+  color: #FFFFFF;
+}
+
+.c6:hover ~ .c2 {
+  box-shadow: 0 2px 4px 0 #cccccc;
+  background-color: #002f7b;
+  border-color: #002f7b;
+  color: #FFFFFF;
+}
+
+.c6:active ~ .c2 {
+  box-shadow: 0 2px 4px 0 #4c4c4c;
+  background-color: #002f7b;
+  border-color: #002f7b;
+  color: #FFFFFF;
+}
+
+.c1 {
   border: 0;
   height: 0;
   margin: 0;
@@ -262,12 +374,12 @@ exports[`<RadioGroup.Radio /> snapshot disabled 1`] = `
   width: 0;
 }
 
-.c0 .c3 {
+.c0 .c4 {
   margin-left: 8px;
   font-size: 17px;
 }
 
-.c4 .c3 {
+.c7 .c4 {
   margin-left: 8px;
   font-size: 17px;
 }
@@ -275,23 +387,25 @@ exports[`<RadioGroup.Radio /> snapshot disabled 1`] = `
 <div
   className="c0"
 >
-  <label
+  <input
     checked={false}
     className="c1"
     disabled={true}
+    id="radio-button-4"
+    onChange={[Function]}
+    type="radio"
+    value="Foo"
+  />
+  <label
+    checked={false}
+    className="c2 c3"
+    disabled={true}
+    htmlFor="radio-button-4"
   >
-    <input
-      checked={false}
-      className="c2"
-      disabled={true}
-      onChange={[Function]}
-      type="radio"
-      value="Foo"
-    />
     Foo
     <span
       aria-hidden="true"
-      className="material-icons MuiIcon-root-1 c3 "
+      className="material-icons MuiIcon-root-1 c4 "
       style={
         Object {
           "color": "",
@@ -305,7 +419,7 @@ exports[`<RadioGroup.Radio /> snapshot disabled 1`] = `
 `;
 
 exports[`<RadioGroup.Radio /> snapshot disabled with an error 1`] = `
-.c1 {
+.c3 {
   display: block;
   margin-bottom: 5px;
   -webkit-align-items: center;
@@ -345,11 +459,53 @@ exports[`<RadioGroup.Radio /> snapshot disabled with an error 1`] = `
   display: inline-flex;
 }
 
-.c1 *:nth-child(2) {
+.c3 *:nth-child(2) {
   margin-left: 5px;
 }
 
-.c2 {
+.c5:focus ~ .c2 {
+  box-shadow: 0 2px 4px 0 rgba(19,85,208,0.5);
+  background-color: #FFFFFF;
+  border-color: #1355d0;
+  color: #1355d0;
+}
+
+.c5:hover ~ .c2 {
+  box-shadow: 0 2px 4px 0 #cccccc;
+  background-color: #e5edfc;
+  border-color: #1355d0;
+  color: #1355d0;
+}
+
+.c5:active ~ .c2 {
+  box-shadow: 0 2px 4px 0 #4c4c4c;
+  background-color: #e5edfc;
+  border-color: #1355d0;
+  color: #1355d0;
+}
+
+.c6:focus ~ .c2 {
+  box-shadow: 0 2px 6px 0 rgba(19,85,208,0.5);
+  background-color: #1355d0;
+  border-color: #1355d0;
+  color: #FFFFFF;
+}
+
+.c6:hover ~ .c2 {
+  box-shadow: 0 2px 4px 0 #cccccc;
+  background-color: #002f7b;
+  border-color: #002f7b;
+  color: #FFFFFF;
+}
+
+.c6:active ~ .c2 {
+  box-shadow: 0 2px 4px 0 #4c4c4c;
+  background-color: #002f7b;
+  border-color: #002f7b;
+  color: #FFFFFF;
+}
+
+.c1 {
   border: 0;
   height: 0;
   margin: 0;
@@ -360,12 +516,36 @@ exports[`<RadioGroup.Radio /> snapshot disabled with an error 1`] = `
   width: 0;
 }
 
-.c0 .c3 {
+.c1:focus ~ .c2 {
+  border-color: #ff2d4d;
+  box-shadow: 0 2px 6px 0 #ff2d4d;
+  background-color: #ffe5e9;
+  border-color: #ff2d4d;
+  color: #ff2d4d;
+}
+
+.c1:hover ~ .c2 {
+  border-color: #ff2d4d;
+  box-shadow: 0 2px 6px 0 #ff2d4d;
+  background-color: #ffe5e9;
+  border-color: #ff2d4d;
+  color: #ff2d4d;
+}
+
+.c1:active ~ .c2 {
+  border-color: #ff2d4d;
+  box-shadow: 0 2px 6px 0 #ff2d4d;
+  background-color: #ffe5e9;
+  border-color: #ff2d4d;
+  color: #ff2d4d;
+}
+
+.c0 .c4 {
   margin-left: 8px;
   font-size: 17px;
 }
 
-.c4 .c3 {
+.c7 .c4 {
   margin-left: 8px;
   font-size: 17px;
 }
@@ -373,23 +553,25 @@ exports[`<RadioGroup.Radio /> snapshot disabled with an error 1`] = `
 <div
   className="c0"
 >
-  <label
+  <input
     checked={false}
     className="c1"
     disabled={true}
+    id="radio-button-6"
+    onChange={[Function]}
+    type="radio"
+    value="Foo"
+  />
+  <label
+    checked={false}
+    className="c2 c3"
+    disabled={true}
+    htmlFor="radio-button-6"
   >
-    <input
-      checked={false}
-      className="c2"
-      disabled={true}
-      onChange={[Function]}
-      type="radio"
-      value="Foo"
-    />
     Foo
     <span
       aria-hidden="true"
-      className="material-icons MuiIcon-root-1 c3 "
+      className="material-icons MuiIcon-root-1 c4 "
       style={
         Object {
           "color": "",
@@ -403,7 +585,7 @@ exports[`<RadioGroup.Radio /> snapshot disabled with an error 1`] = `
 `;
 
 exports[`<RadioGroup.Radio /> snapshot error 1`] = `
-.c1 {
+.c3 {
   display: block;
   margin-bottom: 5px;
   -webkit-align-items: center;
@@ -445,41 +627,53 @@ exports[`<RadioGroup.Radio /> snapshot error 1`] = `
   border-color: #ff2d4d;
 }
 
-.c1 *:nth-child(2) {
+.c3 *:nth-child(2) {
   margin-left: 5px;
 }
 
-.c1:hover {
-  box-shadow: 0 2px 4px 0 #cccccc;
-  background-color: #e5edfc;
+.c4:focus ~ .c2 {
+  box-shadow: 0 2px 4px 0 rgba(19,85,208,0.5);
+  background-color: #FFFFFF;
   border-color: #1355d0;
   color: #1355d0;
 }
 
-.c1:focus {
-  box-shadow: 0 2px 4px 0 rgba(19,85,208,0.5);
-  background-color: #FFFFFF;
+.c4:hover ~ .c2 {
+  box-shadow: 0 2px 4px 0 #cccccc;
+  background-color: #e5edfc;
   border-color: #1355d0;
   color: #1355d0;
 }
 
-.c1:active {
+.c4:active ~ .c2 {
   box-shadow: 0 2px 4px 0 #4c4c4c;
   background-color: #e5edfc;
   border-color: #1355d0;
   color: #1355d0;
 }
 
-.c1:hover,
-.c1:focus {
-  border-color: #ff2d4d;
-  box-shadow: 0 2px 6px 0 #ff2d4d;
-  color: #ff2d4d;
-  border-color: #ff2d4d;
-  background-color: #ffe5e9;
+.c5:focus ~ .c2 {
+  box-shadow: 0 2px 6px 0 rgba(19,85,208,0.5);
+  background-color: #1355d0;
+  border-color: #1355d0;
+  color: #FFFFFF;
+}
+
+.c5:hover ~ .c2 {
+  box-shadow: 0 2px 4px 0 #cccccc;
+  background-color: #002f7b;
+  border-color: #002f7b;
+  color: #FFFFFF;
 }
 
-.c2 {
+.c5:active ~ .c2 {
+  box-shadow: 0 2px 4px 0 #4c4c4c;
+  background-color: #002f7b;
+  border-color: #002f7b;
+  color: #FFFFFF;
+}
+
+.c1 {
   border: 0;
   height: 0;
   margin: 0;
@@ -490,7 +684,31 @@ exports[`<RadioGroup.Radio /> snapshot error 1`] = `
   width: 0;
 }
 
-.c0 .c3 {
+.c1:focus ~ .c2 {
+  border-color: #ff2d4d;
+  box-shadow: 0 2px 6px 0 #ff2d4d;
+  background-color: #ffe5e9;
+  border-color: #ff2d4d;
+  color: #ff2d4d;
+}
+
+.c1:hover ~ .c2 {
+  border-color: #ff2d4d;
+  box-shadow: 0 2px 6px 0 #ff2d4d;
+  background-color: #ffe5e9;
+  border-color: #ff2d4d;
+  color: #ff2d4d;
+}
+
+.c1:active ~ .c2 {
+  border-color: #ff2d4d;
+  box-shadow: 0 2px 6px 0 #ff2d4d;
+  background-color: #ffe5e9;
+  border-color: #ff2d4d;
+  color: #ff2d4d;
+}
+
+.c0 .c6 {
   margin-left: 8px;
   font-size: 17px;
 }
@@ -498,26 +716,28 @@ exports[`<RadioGroup.Radio /> snapshot error 1`] = `
 <div
   className="c0"
 >
-  <label
+  <input
     checked={false}
     className="c1"
     disabled={false}
+    id="radio-button-5"
+    onChange={[Function]}
+    type="radio"
+    value="Foo"
+  />
+  <label
+    checked={false}
+    className="c2 c3"
+    disabled={false}
+    htmlFor="radio-button-5"
   >
-    <input
-      checked={false}
-      className="c2"
-      disabled={false}
-      onChange={[Function]}
-      type="radio"
-      value="Foo"
-    />
     Foo
   </label>
 </div>
 `;
 
 exports[`<RadioGroup.Radio /> snapshot icon 1`] = `
-.c1 {
+.c3 {
   display: block;
   margin-bottom: 5px;
   -webkit-align-items: center;
@@ -557,47 +777,68 @@ exports[`<RadioGroup.Radio /> snapshot icon 1`] = `
   display: inline-flex;
 }
 
-.c1 *:nth-child(2) {
+.c3 *:nth-child(2) {
   margin-left: 5px;
 }
 
-.c1:hover {
-  box-shadow: 0 2px 4px 0 #cccccc;
-  background-color: #e5edfc;
-  border-color: #1355d0;
-  color: #1355d0;
+.c1 {
+  border: 0;
+  height: 0;
+  margin: 0;
+  opacity: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 0;
 }
 
-.c1:focus {
+.c1:focus ~ .c2 {
   box-shadow: 0 2px 4px 0 rgba(19,85,208,0.5);
   background-color: #FFFFFF;
   border-color: #1355d0;
   color: #1355d0;
 }
 
-.c1:active {
+.c1:hover ~ .c2 {
+  box-shadow: 0 2px 4px 0 #cccccc;
+  background-color: #e5edfc;
+  border-color: #1355d0;
+  color: #1355d0;
+}
+
+.c1:active ~ .c2 {
   box-shadow: 0 2px 4px 0 #4c4c4c;
   background-color: #e5edfc;
   border-color: #1355d0;
   color: #1355d0;
 }
 
-.c3 {
-  border: 0;
-  height: 0;
-  margin: 0;
-  opacity: 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 0;
+.c5:focus ~ .c2 {
+  box-shadow: 0 2px 6px 0 rgba(19,85,208,0.5);
+  background-color: #1355d0;
+  border-color: #1355d0;
+  color: #FFFFFF;
+}
+
+.c5:hover ~ .c2 {
+  box-shadow: 0 2px 4px 0 #cccccc;
+  background-color: #002f7b;
+  border-color: #002f7b;
+  color: #FFFFFF;
+}
+
+.c5:active ~ .c2 {
+  box-shadow: 0 2px 4px 0 #4c4c4c;
+  background-color: #002f7b;
+  border-color: #002f7b;
+  color: #FFFFFF;
 }
 
-.c2 {
+.c4 {
   margin-right: 8px;
 }
 
-.c0 .c4 {
+.c0 .c6 {
   margin-left: 8px;
   font-size: 17px;
 }
@@ -605,14 +846,24 @@ exports[`<RadioGroup.Radio /> snapshot icon 1`] = `
 <div
   className="c0"
 >
-  <label
+  <input
     checked={false}
     className="c1"
     disabled={false}
+    id="radio-button-3"
+    onChange={[Function]}
+    type="radio"
+    value="Foo"
+  />
+  <label
+    checked={false}
+    className="c2 c3"
+    disabled={false}
+    htmlFor="radio-button-3"
   >
     <span
       aria-hidden="true"
-      className="material-icons MuiIcon-root-1 c2"
+      className="material-icons MuiIcon-root-1 c4"
       style={
         Object {
           "color": "",
@@ -621,21 +872,13 @@ exports[`<RadioGroup.Radio /> snapshot icon 1`] = `
     >
       check
     </span>
-    <input
-      checked={false}
-      className="c3"
-      disabled={false}
-      onChange={[Function]}
-      type="radio"
-      value="Foo"
-    />
     Foo
   </label>
 </div>
 `;
 
 exports[`<RadioGroup.Radio /> snapshot inline 1`] = `
-.c1 {
+.c3 {
   display: block;
   margin-bottom: 5px;
   -webkit-align-items: center;
@@ -675,40 +918,61 @@ exports[`<RadioGroup.Radio /> snapshot inline 1`] = `
   display: inline-flex;
 }
 
-.c1 *:nth-child(2) {
+.c3 *:nth-child(2) {
   margin-left: 5px;
 }
 
-.c1:hover {
-  box-shadow: 0 2px 4px 0 #cccccc;
-  background-color: #e5edfc;
-  border-color: #1355d0;
-  color: #1355d0;
+.c1 {
+  border: 0;
+  height: 0;
+  margin: 0;
+  opacity: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 0;
 }
 
-.c1:focus {
+.c1:focus ~ .c2 {
   box-shadow: 0 2px 4px 0 rgba(19,85,208,0.5);
   background-color: #FFFFFF;
   border-color: #1355d0;
   color: #1355d0;
 }
 
-.c1:active {
+.c1:hover ~ .c2 {
+  box-shadow: 0 2px 4px 0 #cccccc;
+  background-color: #e5edfc;
+  border-color: #1355d0;
+  color: #1355d0;
+}
+
+.c1:active ~ .c2 {
   box-shadow: 0 2px 4px 0 #4c4c4c;
   background-color: #e5edfc;
   border-color: #1355d0;
   color: #1355d0;
 }
 
-.c2 {
-  border: 0;
-  height: 0;
-  margin: 0;
-  opacity: 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 0;
+.c4:focus ~ .c2 {
+  box-shadow: 0 2px 6px 0 rgba(19,85,208,0.5);
+  background-color: #1355d0;
+  border-color: #1355d0;
+  color: #FFFFFF;
+}
+
+.c4:hover ~ .c2 {
+  box-shadow: 0 2px 4px 0 #cccccc;
+  background-color: #002f7b;
+  border-color: #002f7b;
+  color: #FFFFFF;
+}
+
+.c4:active ~ .c2 {
+  box-shadow: 0 2px 4px 0 #4c4c4c;
+  background-color: #002f7b;
+  border-color: #002f7b;
+  color: #FFFFFF;
 }
 
 .c0 {
@@ -721,7 +985,7 @@ exports[`<RadioGroup.Radio /> snapshot inline 1`] = `
   margin-right: 0;
 }
 
-.c0 .c3 {
+.c0 .c5 {
   margin-left: 8px;
   font-size: 17px;
 }
@@ -729,26 +993,28 @@ exports[`<RadioGroup.Radio /> snapshot inline 1`] = `
 <div
   className="c0"
 >
-  <label
+  <input
     checked={false}
     className="c1"
     disabled={false}
+    id="radio-button-2"
+    onChange={[Function]}
+    type="radio"
+    value="Foo"
+  />
+  <label
+    checked={false}
+    className="c2 c3"
+    disabled={false}
+    htmlFor="radio-button-2"
   >
-    <input
-      checked={false}
-      className="c2"
-      disabled={false}
-      onChange={[Function]}
-      type="radio"
-      value="Foo"
-    />
     Foo
   </label>
 </div>
 `;
 
 exports[`<RadioGroup.Radio /> snapshot simple 1`] = `
-.c1 {
+.c3 {
   display: block;
   margin-bottom: 5px;
   -webkit-align-items: center;
@@ -788,43 +1054,43 @@ exports[`<RadioGroup.Radio /> snapshot simple 1`] = `
   display: inline-flex;
 }
 
-.c1 *:nth-child(2) {
+.c3 *:nth-child(2) {
   margin-left: 5px;
 }
 
-.c1:hover {
-  box-shadow: 0 2px 4px 0 #cccccc;
-  background-color: #e5edfc;
-  border-color: #1355d0;
-  color: #1355d0;
+.c1 {
+  border: 0;
+  height: 0;
+  margin: 0;
+  opacity: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 0;
 }
 
-.c1:focus {
+.c1:focus ~ .c2 {
   box-shadow: 0 2px 4px 0 rgba(19,85,208,0.5);
   background-color: #FFFFFF;
   border-color: #1355d0;
   color: #1355d0;
 }
 
-.c1:active {
-  box-shadow: 0 2px 4px 0 #4c4c4c;
+.c1:hover ~ .c2 {
+  box-shadow: 0 2px 4px 0 #cccccc;
   background-color: #e5edfc;
   border-color: #1355d0;
   color: #1355d0;
 }
 
-.c2 {
-  border: 0;
-  height: 0;
-  margin: 0;
-  opacity: 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 0;
+.c1:active ~ .c2 {
+  box-shadow: 0 2px 4px 0 #4c4c4c;
+  background-color: #e5edfc;
+  border-color: #1355d0;
+  color: #1355d0;
 }
 
-.c0 .c3 {
+.c0 .c4 {
   margin-left: 8px;
   font-size: 17px;
 }
@@ -832,19 +1098,21 @@ exports[`<RadioGroup.Radio /> snapshot simple 1`] = `
 <div
   className="c0"
 >
-  <label
+  <input
     checked={false}
     className="c1"
     disabled={false}
+    id="radio-button-0"
+    onChange={[Function]}
+    type="radio"
+    value="Foo"
+  />
+  <label
+    checked={false}
+    className="c2 c3"
+    disabled={false}
+    htmlFor="radio-button-0"
   >
-    <input
-      checked={false}
-      className="c2"
-      disabled={false}
-      onChange={[Function]}
-      type="radio"
-      value="Foo"
-    />
     Foo
   </label>
 </div>
diff --git a/components/RadioGroup/__snapshots__/RadioGroup.unit.test.jsx.snap b/components/RadioGroup/__snapshots__/RadioGroup.unit.test.jsx.snap
index 2a13f8dd2..6555944f5 100644
--- a/components/RadioGroup/__snapshots__/RadioGroup.unit.test.jsx.snap
+++ b/components/RadioGroup/__snapshots__/RadioGroup.unit.test.jsx.snap
@@ -7,11 +7,90 @@ exports[`<RadioGroup /> snapshot should render the same 1`] = `
 
 exports[`<RadioGroup /> snapshot should render the same, with <RadioGroup.Button /> 1`] = `
 "Snapshot Diff:
- Compared values have no visual difference."
+ - Expected
++ Received
+
+  <div
+    className=\\"FieldGroup-sc-18uoi37-0 RadioGroup__Group-sc-1l7wvp0-0 fJKEVN\\"
+    role=\\"radiogroup\\"
+  >
+    <div
+      className=\\"RadioButton__Wrapper-sc-1q7g63p-2 diXnRa\\"
+    >
+      <input
+        checked={false}
+        className=\\"HiddenRadio-sc-1ptfasu-0 liKeGo\\"
+        disabled={false}
+-       id=\\"radio-button-9\\"
++       id=\\"radio-button-12\\"
+        name=\\"foo\\"
+        onChange={[Function onChange]}
+        type=\\"radio\\"
+        value=\\"Foo\\"
+      />
+      <label
+        checked={false}
+        className=\\"Label-sc-1ny5bqy-0 ButtonGroupLabel-c89ie7-0 XDOfc\\"
+        disabled={false}
+-       htmlFor=\\"radio-button-9\\"
++       htmlFor=\\"radio-button-12\\"
+      >
+        Foo
+      </label>
+    </div>
+    <div
+      className=\\"RadioButton__Wrapper-sc-1q7g63p-2 diXnRa\\"
+    >
+      <input
+        checked={false}
+        className=\\"HiddenRadio-sc-1ptfasu-0 liKeGo\\"
+        disabled={false}
+-       id=\\"radio-button-10\\"
++       id=\\"radio-button-13\\"
+        name=\\"foo\\"
+        onChange={[Function onChange]}
+        type=\\"radio\\"
+        value=\\"Bar\\"
+      />
+      <label
+        checked={false}
+        className=\\"Label-sc-1ny5bqy-0 ButtonGroupLabel-c89ie7-0 XDOfc\\"
+        disabled={false}
+-       htmlFor=\\"radio-button-10\\"
++       htmlFor=\\"radio-button-13\\"
+      >
+        Bar
+      </label>
+    </div>
+    <div
+      className=\\"RadioButton__Wrapper-sc-1q7g63p-2 diXnRa\\"
+    >
+      <input
+        checked={false}
+        className=\\"HiddenRadio-sc-1ptfasu-0 liKeGo\\"
+        disabled={false}
+-       id=\\"radio-button-11\\"
++       id=\\"radio-button-14\\"
+        name=\\"foo\\"
+        onChange={[Function onChange]}
+        type=\\"radio\\"
+        value=\\"Baz\\"
+      />
+      <label
+        checked={false}
+        className=\\"Label-sc-1ny5bqy-0 ButtonGroupLabel-c89ie7-0 XDOfc\\"
+        disabled={false}
+-       htmlFor=\\"radio-button-11\\"
++       htmlFor=\\"radio-button-14\\"
+      >
+        Baz
+      </label>
+    </div>
+  </div>"
 `;
 
 exports[`<RadioGroup /> snapshot simple with <RadioGroup.Button /> 1`] = `
-.c2 {
+.c5 {
   display: block;
   margin-bottom: 5px;
   -webkit-align-items: center;
@@ -51,32 +130,32 @@ exports[`<RadioGroup /> snapshot simple with <RadioGroup.Button /> 1`] = `
   display: inline-flex;
 }
 
-.c2 *:nth-child(2) {
+.c5 *:nth-child(2) {
   margin-left: 5px;
 }
 
-.c2:hover {
-  box-shadow: 0 2px 4px 0 #cccccc;
-  background-color: #e5edfc;
+.c6:focus ~ .c4 {
+  box-shadow: 0 2px 6px 0 rgba(19,85,208,0.5);
+  background-color: #1355d0;
   border-color: #1355d0;
-  color: #1355d0;
+  color: #FFFFFF;
 }
 
-.c2:focus {
-  box-shadow: 0 2px 4px 0 rgba(19,85,208,0.5);
-  background-color: #FFFFFF;
-  border-color: #1355d0;
-  color: #1355d0;
+.c6:hover ~ .c4 {
+  box-shadow: 0 2px 4px 0 #cccccc;
+  background-color: #002f7b;
+  border-color: #002f7b;
+  color: #FFFFFF;
 }
 
-.c2:active {
+.c6:active ~ .c4 {
   box-shadow: 0 2px 4px 0 #4c4c4c;
-  background-color: #e5edfc;
-  border-color: #1355d0;
-  color: #1355d0;
+  background-color: #002f7b;
+  border-color: #002f7b;
+  color: #FFFFFF;
 }
 
-.c4 {
+.c3 {
   border: 0;
   height: 0;
   margin: 0;
@@ -87,27 +166,48 @@ exports[`<RadioGroup /> snapshot simple with <RadioGroup.Button /> 1`] = `
   width: 0;
 }
 
-.c5 .c3:checked ~ .c6 {
+.c3:focus ~ .c4 {
+  box-shadow: 0 2px 4px 0 rgba(19,85,208,0.5);
+  background-color: #FFFFFF;
+  border-color: #1355d0;
+  color: #1355d0;
+}
+
+.c3:hover ~ .c4 {
+  box-shadow: 0 2px 4px 0 #cccccc;
+  background-color: #e5edfc;
+  border-color: #1355d0;
+  color: #1355d0;
+}
+
+.c3:active ~ .c4 {
+  box-shadow: 0 2px 4px 0 #4c4c4c;
+  background-color: #e5edfc;
   border-color: #1355d0;
+  color: #1355d0;
 }
 
-.c5 .c3:checked ~ .c6:after {
+.c7 .c2:checked ~ .c8 {
+  border-color: #1355d0;
+}
+
+.c7 .c2:checked ~ .c8:after {
   background-color: #1355d0;
   display: block;
 }
 
-.c5 .c3:focus ~ .c6 {
+.c7 .c2:focus ~ .c8 {
   border-color: #1355d0;
   box-shadow: 0 2px 6px 0 rgba(19,85,208,0.5);
 }
 
-.c5 .c3:checked:disabled ~ .c6 {
+.c7 .c2:checked:disabled ~ .c8 {
   background-color: #999999;
   border-color: #999999;
   box-shadow: inset 0 0 0 3.5px #FFFFFF;
 }
 
-.c1 .c7 {
+.c1 .c9 {
   margin-left: 8px;
   font-size: 17px;
 }
@@ -127,60 +227,66 @@ exports[`<RadioGroup /> snapshot simple with <RadioGroup.Button /> 1`] = `
   <div
     className="c1"
   >
+    <input
+      checked={false}
+      className="c2 c3"
+      disabled={false}
+      id="radio-button-3"
+      name="groceries"
+      onChange={[Function]}
+      type="radio"
+      value="Foo"
+    />
     <label
       checked={false}
-      className="c2"
+      className="c4 c5"
       disabled={false}
+      htmlFor="radio-button-3"
     >
-      <input
-        checked={false}
-        className="c3 c4"
-        disabled={false}
-        name="groceries"
-        onChange={[Function]}
-        type="radio"
-        value="Foo"
-      />
       Foo
     </label>
   </div>
   <div
     className="c1"
   >
+    <input
+      checked={false}
+      className="c2 c3"
+      disabled={false}
+      id="radio-button-4"
+      name="groceries"
+      onChange={[Function]}
+      type="radio"
+      value="Bar"
+    />
     <label
       checked={false}
-      className="c2"
+      className="c4 c5"
       disabled={false}
+      htmlFor="radio-button-4"
     >
-      <input
-        checked={false}
-        className="c3 c4"
-        disabled={false}
-        name="groceries"
-        onChange={[Function]}
-        type="radio"
-        value="Bar"
-      />
       Bar
     </label>
   </div>
   <div
     className="c1"
   >
+    <input
+      checked={false}
+      className="c2 c3"
+      disabled={false}
+      id="radio-button-5"
+      name="groceries"
+      onChange={[Function]}
+      type="radio"
+      value="Baz"
+    />
     <label
       checked={false}
-      className="c2"
+      className="c4 c5"
       disabled={false}
+      htmlFor="radio-button-5"
     >
-      <input
-        checked={false}
-        className="c3 c4"
-        disabled={false}
-        name="groceries"
-        onChange={[Function]}
-        type="radio"
-        value="Baz"
-      />
       Baz
     </label>
   </div>
@@ -188,7 +294,7 @@ exports[`<RadioGroup /> snapshot simple with <RadioGroup.Button /> 1`] = `
 `;
 
 exports[`<RadioGroup /> snapshot simple with <RadioGroup.Button /> inline 1`] = `
-.c2 {
+.c5 {
   display: block;
   margin-bottom: 5px;
   -webkit-align-items: center;
@@ -228,32 +334,32 @@ exports[`<RadioGroup /> snapshot simple with <RadioGroup.Button /> inline 1`] =
   display: inline-flex;
 }
 
-.c2 *:nth-child(2) {
+.c5 *:nth-child(2) {
   margin-left: 5px;
 }
 
-.c2:hover {
-  box-shadow: 0 2px 4px 0 #cccccc;
-  background-color: #e5edfc;
+.c6:focus ~ .c4 {
+  box-shadow: 0 2px 6px 0 rgba(19,85,208,0.5);
+  background-color: #1355d0;
   border-color: #1355d0;
-  color: #1355d0;
+  color: #FFFFFF;
 }
 
-.c2:focus {
-  box-shadow: 0 2px 4px 0 rgba(19,85,208,0.5);
-  background-color: #FFFFFF;
-  border-color: #1355d0;
-  color: #1355d0;
+.c6:hover ~ .c4 {
+  box-shadow: 0 2px 4px 0 #cccccc;
+  background-color: #002f7b;
+  border-color: #002f7b;
+  color: #FFFFFF;
 }
 
-.c2:active {
+.c6:active ~ .c4 {
   box-shadow: 0 2px 4px 0 #4c4c4c;
-  background-color: #e5edfc;
-  border-color: #1355d0;
-  color: #1355d0;
+  background-color: #002f7b;
+  border-color: #002f7b;
+  color: #FFFFFF;
 }
 
-.c4 {
+.c3 {
   border: 0;
   height: 0;
   margin: 0;
@@ -264,21 +370,42 @@ exports[`<RadioGroup /> snapshot simple with <RadioGroup.Button /> inline 1`] =
   width: 0;
 }
 
-.c5 .c3:checked ~ .c6 {
+.c3:focus ~ .c4 {
+  box-shadow: 0 2px 4px 0 rgba(19,85,208,0.5);
+  background-color: #FFFFFF;
+  border-color: #1355d0;
+  color: #1355d0;
+}
+
+.c3:hover ~ .c4 {
+  box-shadow: 0 2px 4px 0 #cccccc;
+  background-color: #e5edfc;
   border-color: #1355d0;
+  color: #1355d0;
 }
 
-.c5 .c3:checked ~ .c6:after {
+.c3:active ~ .c4 {
+  box-shadow: 0 2px 4px 0 #4c4c4c;
+  background-color: #e5edfc;
+  border-color: #1355d0;
+  color: #1355d0;
+}
+
+.c7 .c2:checked ~ .c8 {
+  border-color: #1355d0;
+}
+
+.c7 .c2:checked ~ .c8:after {
   background-color: #1355d0;
   display: block;
 }
 
-.c5 .c3:focus ~ .c6 {
+.c7 .c2:focus ~ .c8 {
   border-color: #1355d0;
   box-shadow: 0 2px 6px 0 rgba(19,85,208,0.5);
 }
 
-.c5 .c3:checked:disabled ~ .c6 {
+.c7 .c2:checked:disabled ~ .c8 {
   background-color: #999999;
   border-color: #999999;
   box-shadow: inset 0 0 0 3.5px #FFFFFF;
@@ -294,7 +421,7 @@ exports[`<RadioGroup /> snapshot simple with <RadioGroup.Button /> inline 1`] =
   margin-right: 0;
 }
 
-.c1 .c7 {
+.c1 .c9 {
   margin-left: 8px;
   font-size: 17px;
 }
@@ -314,60 +441,66 @@ exports[`<RadioGroup /> snapshot simple with <RadioGroup.Button /> inline 1`] =
   <div
     className="c1"
   >
+    <input
+      checked={false}
+      className="c2 c3"
+      disabled={false}
+      id="radio-button-6"
+      name="groceries"
+      onChange={[Function]}
+      type="radio"
+      value="Foo"
+    />
     <label
       checked={false}
-      className="c2"
+      className="c4 c5"
       disabled={false}
+      htmlFor="radio-button-6"
     >
-      <input
-        checked={false}
-        className="c3 c4"
-        disabled={false}
-        name="groceries"
-        onChange={[Function]}
-        type="radio"
-        value="Foo"
-      />
       Foo
     </label>
   </div>
   <div
     className="c1"
   >
+    <input
+      checked={false}
+      className="c2 c3"
+      disabled={false}
+      id="radio-button-7"
+      name="groceries"
+      onChange={[Function]}
+      type="radio"
+      value="Bar"
+    />
     <label
       checked={false}
-      className="c2"
+      className="c4 c5"
       disabled={false}
+      htmlFor="radio-button-7"
     >
-      <input
-        checked={false}
-        className="c3 c4"
-        disabled={false}
-        name="groceries"
-        onChange={[Function]}
-        type="radio"
-        value="Bar"
-      />
       Bar
     </label>
   </div>
   <div
     className="c1"
   >
+    <input
+      checked={false}
+      className="c2 c3"
+      disabled={false}
+      id="radio-button-8"
+      name="groceries"
+      onChange={[Function]}
+      type="radio"
+      value="Baz"
+    />
     <label
       checked={false}
-      className="c2"
+      className="c4 c5"
       disabled={false}
+      htmlFor="radio-button-8"
     >
-      <input
-        checked={false}
-        className="c3 c4"
-        disabled={false}
-        name="groceries"
-        onChange={[Function]}
-        type="radio"
-        value="Baz"
-      />
       Baz
     </label>
   </div>
@@ -386,6 +519,27 @@ exports[`<RadioGroup /> snapshot simple with <RadioGroup.Radio /> 1`] = `
   width: 0;
 }
 
+.c3:focus ~ .c6 {
+  box-shadow: 0 2px 6px 0 rgba(19,85,208,0.5);
+  background-color: #1355d0;
+  border-color: #1355d0;
+  color: #FFFFFF;
+}
+
+.c3:hover ~ .c6 {
+  box-shadow: 0 2px 4px 0 #cccccc;
+  background-color: #002f7b;
+  border-color: #002f7b;
+  color: #FFFFFF;
+}
+
+.c3:active ~ .c6 {
+  box-shadow: 0 2px 4px 0 #4c4c4c;
+  background-color: #002f7b;
+  border-color: #002f7b;
+  color: #FFFFFF;
+}
+
 .c5 {
   background-color: #FFFFFF;
   border: 1.5px solid #999999;
@@ -514,7 +668,7 @@ exports[`<RadioGroup /> snapshot simple with <RadioGroup.Radio /> 1`] = `
 `;
 
 exports[`<RadioGroup /> snapshot simple with button options 1`] = `
-.c2 {
+.c5 {
   display: block;
   margin-bottom: 5px;
   -webkit-align-items: center;
@@ -554,32 +708,32 @@ exports[`<RadioGroup /> snapshot simple with button options 1`] = `
   display: inline-flex;
 }
 
-.c2 *:nth-child(2) {
+.c5 *:nth-child(2) {
   margin-left: 5px;
 }
 
-.c2:hover {
-  box-shadow: 0 2px 4px 0 #cccccc;
-  background-color: #e5edfc;
+.c6:focus ~ .c4 {
+  box-shadow: 0 2px 6px 0 rgba(19,85,208,0.5);
+  background-color: #1355d0;
   border-color: #1355d0;
-  color: #1355d0;
+  color: #FFFFFF;
 }
 
-.c2:focus {
-  box-shadow: 0 2px 4px 0 rgba(19,85,208,0.5);
-  background-color: #FFFFFF;
-  border-color: #1355d0;
-  color: #1355d0;
+.c6:hover ~ .c4 {
+  box-shadow: 0 2px 4px 0 #cccccc;
+  background-color: #002f7b;
+  border-color: #002f7b;
+  color: #FFFFFF;
 }
 
-.c2:active {
+.c6:active ~ .c4 {
   box-shadow: 0 2px 4px 0 #4c4c4c;
-  background-color: #e5edfc;
-  border-color: #1355d0;
-  color: #1355d0;
+  background-color: #002f7b;
+  border-color: #002f7b;
+  color: #FFFFFF;
 }
 
-.c4 {
+.c3 {
   border: 0;
   height: 0;
   margin: 0;
@@ -590,27 +744,48 @@ exports[`<RadioGroup /> snapshot simple with button options 1`] = `
   width: 0;
 }
 
-.c5 .c3:checked ~ .c6 {
+.c3:focus ~ .c4 {
+  box-shadow: 0 2px 4px 0 rgba(19,85,208,0.5);
+  background-color: #FFFFFF;
+  border-color: #1355d0;
+  color: #1355d0;
+}
+
+.c3:hover ~ .c4 {
+  box-shadow: 0 2px 4px 0 #cccccc;
+  background-color: #e5edfc;
   border-color: #1355d0;
+  color: #1355d0;
 }
 
-.c5 .c3:checked ~ .c6:after {
+.c3:active ~ .c4 {
+  box-shadow: 0 2px 4px 0 #4c4c4c;
+  background-color: #e5edfc;
+  border-color: #1355d0;
+  color: #1355d0;
+}
+
+.c7 .c2:checked ~ .c8 {
+  border-color: #1355d0;
+}
+
+.c7 .c2:checked ~ .c8:after {
   background-color: #1355d0;
   display: block;
 }
 
-.c5 .c3:focus ~ .c6 {
+.c7 .c2:focus ~ .c8 {
   border-color: #1355d0;
   box-shadow: 0 2px 6px 0 rgba(19,85,208,0.5);
 }
 
-.c5 .c3:checked:disabled ~ .c6 {
+.c7 .c2:checked:disabled ~ .c8 {
   background-color: #999999;
   border-color: #999999;
   box-shadow: inset 0 0 0 3.5px #FFFFFF;
 }
 
-.c1 .c7 {
+.c1 .c9 {
   margin-left: 8px;
   font-size: 17px;
 }
@@ -630,60 +805,66 @@ exports[`<RadioGroup /> snapshot simple with button options 1`] = `
   <div
     className="c1"
   >
+    <input
+      checked={false}
+      className="c2 c3"
+      disabled={false}
+      id="radio-button-0"
+      name="foo"
+      onChange={[Function]}
+      type="radio"
+      value="Foo"
+    />
     <label
       checked={false}
-      className="c2"
+      className="c4 c5"
       disabled={false}
+      htmlFor="radio-button-0"
     >
-      <input
-        checked={false}
-        className="c3 c4"
-        disabled={false}
-        name="foo"
-        onChange={[Function]}
-        type="radio"
-        value="Foo"
-      />
       Foo
     </label>
   </div>
   <div
     className="c1"
   >
+    <input
+      checked={false}
+      className="c2 c3"
+      disabled={false}
+      id="radio-button-1"
+      name="foo"
+      onChange={[Function]}
+      type="radio"
+      value="Bar"
+    />
     <label
       checked={false}
-      className="c2"
+      className="c4 c5"
       disabled={false}
+      htmlFor="radio-button-1"
     >
-      <input
-        checked={false}
-        className="c3 c4"
-        disabled={false}
-        name="foo"
-        onChange={[Function]}
-        type="radio"
-        value="Bar"
-      />
       Bar
     </label>
   </div>
   <div
     className="c1"
   >
+    <input
+      checked={false}
+      className="c2 c3"
+      disabled={false}
+      id="radio-button-2"
+      name="foo"
+      onChange={[Function]}
+      type="radio"
+      value="Baz"
+    />
     <label
       checked={false}
-      className="c2"
+      className="c4 c5"
       disabled={false}
+      htmlFor="radio-button-2"
     >
-      <input
-        checked={false}
-        className="c3 c4"
-        disabled={false}
-        name="foo"
-        onChange={[Function]}
-        type="radio"
-        value="Baz"
-      />
       Baz
     </label>
   </div>
@@ -702,6 +883,27 @@ exports[`<RadioGroup /> snapshot simple with options 1`] = `
   width: 0;
 }
 
+.c3:focus ~ .c6 {
+  box-shadow: 0 2px 6px 0 rgba(19,85,208,0.5);
+  background-color: #1355d0;
+  border-color: #1355d0;
+  color: #FFFFFF;
+}
+
+.c3:hover ~ .c6 {
+  box-shadow: 0 2px 4px 0 #cccccc;
+  background-color: #002f7b;
+  border-color: #002f7b;
+  color: #FFFFFF;
+}
+
+.c3:active ~ .c6 {
+  box-shadow: 0 2px 4px 0 #4c4c4c;
+  background-color: #002f7b;
+  border-color: #002f7b;
+  color: #FFFFFF;
+}
+
 .c5 {
   background-color: #FFFFFF;
   border: 1.5px solid #999999;
diff --git a/components/shared/ButtonGroupLabel.jsx b/components/shared/ButtonGroupLabel.jsx
index 37b5e73c1..45e4da584 100644
--- a/components/shared/ButtonGroupLabel.jsx
+++ b/components/shared/ButtonGroupLabel.jsx
@@ -1,11 +1,14 @@
 import styled, { css } from 'styled-components';
 import Colors from '../Colors';
-import buttonStyle from '../Button/buttonStyle';
+import { DEFAULT_STYLE, SKIN_STYLE } from '../Button/buttonStyle';
 import Label from './Label';
-import { ERROR_HOVER_STYLE, ERROR_STYLE } from './inputStyle';
+import { ERROR_STYLE } from './inputStyle';
 
-export default styled(Label)`
-  ${buttonStyle}
+export default styled(Label).attrs({
+  tabindex: 0,
+})`
+  ${DEFAULT_STYLE}
+  ${SKIN_STYLE}
 
   margin-bottom: 16px;
   display: inline-flex;
@@ -14,22 +17,14 @@ export default styled(Label)`
     !disabled &&
     error &&
     css`
-    color: ${Colors.ERROR['500']};
+      color: ${Colors.ERROR['500']};
 
-    ${ERROR_STYLE}
+      ${ERROR_STYLE}
 
-    :hover, :focus {
-      ${ERROR_HOVER_STYLE}
-
-      color: ${checked ? Colors.WHITE : Colors.ERROR['500']};
-      border-color: ${checked ? Colors.ERROR['900'] : Colors.ERROR['500']};
-      background-color: ${checked ? Colors.ERROR['900'] : Colors.ERROR['200']};
-    }
-
-    ${checked &&
-      `
+      ${checked &&
+        `
       background-color: ${Colors.ERROR['500']};
       color: ${Colors.ERROR['200']};
     `}
-  `}
+    `}
 `;
diff --git a/components/shared/HiddenRadio.jsx b/components/shared/HiddenRadio.jsx
new file mode 100644
index 000000000..6696a7b6c
--- /dev/null
+++ b/components/shared/HiddenRadio.jsx
@@ -0,0 +1,38 @@
+import styled, { css } from 'styled-components';
+import ButtonGroupLabel from './ButtonGroupLabel';
+import { ERROR_HOVER_STYLE } from './inputStyle';
+import { FOCUS_STYLE, HOVER_STYLE, ACTIVE_STYLE } from '../Button/buttonStyle';
+import Colors from '../Colors';
+
+const _errorInteractiveStyle = ({ checked }) => css`
+  ${ERROR_HOVER_STYLE}
+
+  background-color: ${checked ? Colors.ERROR['900'] : Colors.ERROR['200']};
+  border-color: ${checked ? Colors.ERROR['900'] : Colors.ERROR['500']};
+  color: ${checked ? Colors.WHITE : Colors.ERROR['500']};
+`;
+
+export default styled.input.attrs({
+  type: 'radio',
+})`
+  border: 0;
+  height: 0;
+  margin: 0;
+  opacity: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 0;
+
+  :focus ~ ${ButtonGroupLabel} {
+    ${({ error }) => (error ? _errorInteractiveStyle : FOCUS_STYLE)}
+  }
+
+  :hover ~ ${ButtonGroupLabel} {
+    ${({ error }) => (error ? _errorInteractiveStyle : HOVER_STYLE)}
+  }
+
+  :active ~ ${ButtonGroupLabel} {
+    ${({ error }) => (error ? _errorInteractiveStyle : ACTIVE_STYLE)}
+  }
+`;
diff --git a/stories/RadioGroup/sub-components/buttonGroupError.jsx b/stories/RadioGroup/sub-components/buttonGroupError.jsx
index 2df944dbc..b5c6397f7 100644
--- a/stories/RadioGroup/sub-components/buttonGroupError.jsx
+++ b/stories/RadioGroup/sub-components/buttonGroupError.jsx
@@ -23,7 +23,7 @@ class Group extends React.Component {
         onChange={({ value: opValue }) => this.setState({ value: opValue })}
         options={options}
         type="button"
-        error="Some message error"
+        error="Example error message"
       />
     );
   }
@@ -34,7 +34,7 @@ const buttonGroup = {
   name="groceries"
   type="button"
   options={options}
-  error="Some message error"
+  error="Example error message"
 >
 ...
 </RadioGroup>`,