Improve accessibility of form controls

packages/ui/src/atoms/Checkbox.local.scss

@@ -21,8 +21,9 @@
 }
 
 .root .input {
-  display: none;
   margin-right: 0.25rem;
+  opacity: 0;
+  position: absolute;
 }
 
 .root span::before {
@@ -37,6 +38,7 @@
   width: 9px;
 }
 
+.root input:focus + span::before,
 .root:hover span::before {
   //background-size: 100%;
   background: var(--color-primary);

packages/ui/src/atoms/Menu.js

@@ -30,6 +30,12 @@ class Menu extends React.Component {
     this.props.onChange(selected)
   }
 
+  handleKeyPress = (event, selected) => {
+    if (event.which === 13) {
+      this.handleSelect(selected)
+    }
+  }
+
   optionLabel = value => {
     const { options } = this.props
 
@@ -48,7 +54,7 @@ class Menu extends React.Component {
       >
         {label && <span className={classes.label}>{label}</span>}
 
-        <div className={classes.main}>
+        <div className={classes.main} role="listbox">
           <div className={classes.openerContainer}>
             <button
               className={classes.opener}
@@ -69,11 +75,17 @@ class Menu extends React.Component {
               <div className={classes.options}>
                 {options.map(option => (
                   <div
+                    aria-selected={option.value === selected}
                     className={classnames(classes.option, {
                       [classes.active]: option.value === selected,
                     })}
                     key={option.value}
                     onClick={() => this.handleSelect(option.value)}
+                    onKeyPress={event =>
+                      this.handleKeyPress(event, option.value)
+                    }
+                    role="option"
+                    tabIndex="0"
                   >
                     {option.label || option.value}
                   </div>

packages/ui/src/atoms/Radio.local.scss

@@ -34,7 +34,8 @@
 // hide the input
 
 .input {
-  display: none;
+  opacity: 0;
+  position: absolute;
 }
 
 /* pseudo-input */

packages/ui/test/__snapshots__/Menu.test.js.snap

@@ -6,6 +6,7 @@ exports[`Menu Snapshot 1`] = `
 >
   <div
     className="main"
+    role="listbox"
   >
     <div
       className="openerContainer"