fix(Checkbox): accessibility, add check

blockchain · Jun 5, 2018 · ebbe6d0 · ebbe6d0
1 parent 89c68a9
commit ebbe6d0
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/packages/blockchain-info-components/src/Form/CheckBoxInput.js b/packages/blockchain-info-components/src/Form/CheckBoxInput.js
@@ -37,6 +37,7 @@ const BaseCheckBoxInput = styled.input.attrs({
 const Label = styled.label`
   display: flex;
   cursor: pointer;
+  position: relative;
   align-items: center;
   &:before {
     content: '';
@@ -48,6 +49,15 @@ const Label = styled.label`
     transition: background .2s;
     border: 1px solid ${props => props.theme['brand-secondary']};
   }
+  &:after {
+    content: '\\e90a';
+    font-family: 'icomoon';
+    position: absolute;
+    color: ${props => props.theme['white']};
+    font-weight: 600;
+    font-size: 10px;
+    left: 2px;
+  }
 `
 
 const CheckBoxInput = props => {

diff --git a/packages/blockchain-info-components/src/Form/RadioButtonInput.js b/packages/blockchain-info-components/src/Form/RadioButtonInput.js
@@ -40,8 +40,8 @@ const Label = styled.label`
   align-items: center;
   &:before {
     content: '';
-    width: 15px;
-    height: 15px;
+    width: 12px;
+    height: 12px;
     margin-right: 5px;
     background: white;
     border-radius: 2px;