Checkbox gets keyboard accessibility

.testconfig/testSetup.js

@@ -5,6 +5,7 @@
 const Enzyme = require('enzyme')
 const EnzymeAdapter = require('enzyme-adapter-react-16')
 require('jest-styled-components')
+require('@testing-library/jest-dom')
 
 // Setup enzyme's react adapter
 Enzyme.configure({ adapter: new EnzymeAdapter() })

package.json

@@ -62,6 +62,9 @@
     "@storybook/addons": "^5.0.6",
     "@storybook/react": "^5.3.17",
     "@storybook/storybook-deployer": "^2.8.6",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^13.5.0",
     "@types/enzyme": "^3.1.9",
     "@types/jest": "^26.0.20",
     "@types/react": "^16.4.10",

src/components/formControls/checkbox/__snapshots__/spec.tsx.snap

@@ -2,6 +2,13 @@
 
 exports[`Checkbox tests basic tests matches the snapshot 1`] = `
 .c0 {
+  --checkbox-border-color: #A1A8F2;
+  --checkbox-border-size: 1px;
+  --checkbox-box-size: 18px;
+  --checkbox-box-color: #696FDC;
+  --checkbox-box-spacing: 12px;
+  --checkbox-label-color: #686978;
+  --checkbox-label-size: 14px;
   font-family: Muli,sans-serif;
   display: -webkit-box;
   display: -webkit-flex;
@@ -12,16 +19,31 @@ exports[`Checkbox tests basic tests matches the snapshot 1`] = `
   -ms-flex-align: center;
   align-items: center;
   margin-bottom: 4px;
-  --checkbox-label-color: #686978;
-  --checkbox-label-size: 14px;
   color: var(--checkbox-label-color);
   font-size: var(--checkbox-label-size);
   cursor: pointer;
 }
 
-.c1 {
-  border-radius: 2px;
-  text-align: center;
+.c0:focus,
+.c0:hover:not([disabled]) {
+  outline: none;
+  --checkbox-border-color: #A0A5EB;
+  --checkbox-border-size: 3px;
+}
+
+.c0:focus {
+  outline: none;
+}
+
+.c4 {
+  --checkbox-border-color: #D1D1DB;
+  --checkbox-border-size: 1px;
+  --checkbox-box-size: 18px;
+  --checkbox-box-color: #696FDC;
+  --checkbox-box-spacing: 12px;
+  --checkbox-label-color: #686978;
+  --checkbox-label-size: 14px;
+  font-family: Muli,sans-serif;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -30,27 +52,26 @@ exports[`Checkbox tests basic tests matches the snapshot 1`] = `
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  padding: 2px;
-  --checkbox-box-size: 18px;
-  --checkbox-box-borderColor: #A1A8F2;
-  --checkbox-box-color: #696FDC;
-  --checkbox-box-spacing: 12px;
-  -webkit-flex-basis: var(--checkbox-box-size);
-  -ms-flex-preferred-size: var(--checkbox-box-size);
-  flex-basis: var(--checkbox-box-size);
-  width: var(--checkbox-box-size);
-  height: var(--checkbox-box-size);
-  color: var(--checkbox-box-color);
-  border: 1px solid var(--checkbox-box-borderColor);
-  margin: 8px;
+  margin-bottom: 4px;
+  color: var(--checkbox-label-color);
+  font-size: var(--checkbox-label-size);
+  cursor: pointer;
 }
 
-.c4 {
-  border-radius: 2px;
+.c4:focus,
+.c4:hover:not([disabled]) {
+  outline: none;
+  --checkbox-border-color: #A0A5EB;
+  --checkbox-border-size: 3px;
+}
+
+.c4:focus {
+  outline: none;
+}
+
+.c1 {
+  border-radius: 4px;
+  position: relative;
   text-align: center;
   display: -webkit-box;
   display: -webkit-flex;
@@ -64,21 +85,30 @@ exports[`Checkbox tests basic tests matches the snapshot 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  padding: 2px;
-  --checkbox-box-size: 18px;
-  --checkbox-box-borderColor: #D1D1DB;
-  --checkbox-box-color: #696FDC;
-  --checkbox-box-spacing: 12px;
+  padding: 3px;
   -webkit-flex-basis: var(--checkbox-box-size);
   -ms-flex-preferred-size: var(--checkbox-box-size);
   flex-basis: var(--checkbox-box-size);
   width: var(--checkbox-box-size);
   height: var(--checkbox-box-size);
   color: var(--checkbox-box-color);
-  border: 1px solid var(--checkbox-box-borderColor);
   margin: 8px;
 }
 
+.c1:after {
+  -webkit-transition: border .1s ease-in-out;
+  transition: border .1s ease-in-out;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border: var(--checkbox-border-size) solid var(--checkbox-border-color);
+  content: '';
+  display: block;
+  border-radius: 4px;
+}
+
 .c3 {
   -webkit-flex: 1;
   -ms-flex: 1;
@@ -101,20 +131,23 @@ exports[`Checkbox tests basic tests matches the snapshot 1`] = `
 }
 
 <div
-  id="checkbox"
+  data-test-id="checkbox"
 >
-  <div
+  <label
+    aria-checked="true"
     className="c0"
+    data-testid="checkbox-child-0"
+    disabled={false}
     onClick={[Function]}
+    onKeyPress={[Function]}
+    role="checkbox"
+    selected={true}
     size="small"
+    tabIndex="0"
     type="light"
   >
     <span
       className="c1"
-      disabled={false}
-      selected={true}
-      size="small"
-      type="light"
     >
       <svg
         aria-hidden="true"
@@ -134,19 +167,22 @@ exports[`Checkbox tests basic tests matches the snapshot 1`] = `
     >
       YouTube
     </span>
-  </div>
-  <div
-    className="c0"
+  </label>
+  <label
+    aria-checked="false"
+    className="c4"
+    data-testid="checkbox-child-1"
+    disabled={false}
     onClick={[Function]}
+    onKeyPress={[Function]}
+    role="checkbox"
+    selected={false}
     size="small"
+    tabIndex="0"
     type="light"
   >
     <span
-      className="c4"
-      disabled={false}
-      selected={false}
-      size="small"
-      type="light"
+      className="c1"
     />
     <span
       className="c3"
@@ -155,19 +191,22 @@ exports[`Checkbox tests basic tests matches the snapshot 1`] = `
     >
       Twitter
     </span>
-  </div>
-  <div
-    className="c0"
+  </label>
+  <label
+    aria-checked="false"
+    className="c4"
+    data-testid="checkbox-child-2"
+    disabled={false}
     onClick={[Function]}
+    onKeyPress={[Function]}
+    role="checkbox"
+    selected={false}
     size="small"
+    tabIndex="0"
     type="light"
   >
     <span
-      className="c4"
-      disabled={false}
-      selected={false}
-      size="small"
-      type="light"
+      className="c1"
     />
     <span
       className="c3"
@@ -176,6 +215,6 @@ exports[`Checkbox tests basic tests matches the snapshot 1`] = `
     >
       Instagram
     </span>
-  </div>
+  </label>
 </div>
 `;

src/components/formControls/checkbox/index.tsx

@@ -21,6 +21,13 @@ export interface Props {
   onChange?: (key: string, selected: boolean, child: React.ReactNode, all: {[key: string]: boolean}) => void
 }
 
+function onKeyPressForAction (handler: Function, event: React.KeyboardEvent) {
+  // Invoke for space or enter, just like a regular input or button
+  if ([' ', 'Enter'].includes(event.key)) {
+    handler()
+  }
+}
+
 export default class Checkbox extends React.PureComponent<Props, {}> {
   static defaultProps = {
     type: 'light',
@@ -39,19 +46,22 @@ export default class Checkbox extends React.PureComponent<Props, {}> {
       const element = child.props.children
       const key = child.props['data-key']
       const selected = self.props.value[key] || false
+      const onClick = self.onOptionClick.bind(self, key, child, selected)
       return (
         <StyledLabel
           key={`checkbox-${i}`}
-          onClick={!self.props.disabled ? self.onOptionClick.bind(self, key, child, selected) : undefined}
+          data-testid={`checkbox-child-${i}`}
+          role='checkbox'
+          aria-checked={selected ? 'true' : 'false'}
+          tabIndex={self.props.disabled ? undefined : '0'}
+          onClick={!self.props.disabled ? onClick : undefined}
+          onKeyPress={!self.props.disabled ? onKeyPressForAction.bind(null, onClick) : undefined}
           type={self.props.type}
           size={self.props.size}
+          disabled={self.props.disabled}
+          selected={selected}
         >
-          <StyledBox
-            selected={selected}
-            type={self.props.type}
-            disabled={self.props.disabled}
-            size={self.props.size}
-          >
+          <StyledBox>
             {selected ? <CheckIcon /> : null}
           </StyledBox>
           <StyledText