Improve mobile checkbox/switch accessibility

js/src/common/components/Checkbox.js

@@ -33,7 +33,9 @@ export default class Checkbox extends Component {
     return (
       <label className={className}>
         <input type="checkbox" checked={this.attrs.state} disabled={this.attrs.disabled} onchange={withAttr('checked', this.onchange.bind(this))} />
-        <div className="Checkbox-display">{this.getDisplay()}</div>
+        <div className="Checkbox-display" aria-hidden="true">
+          {this.getDisplay()}
+        </div>
         {vnode.children}
       </label>
     );

less/common/Checkbox.less

@@ -2,19 +2,42 @@
   display: block;
   cursor: pointer;
   margin: 0;
+  position: relative;
 
   input[type="checkbox"] {
-    .visually-hidden();
+    position: absolute;
+    z-index: 1;
+
+    opacity: 0;
+
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    width: 100%;
+    height: 100%;
+
+    cursor: pointer;
+
     .add-keyboard-focus-ring-nearby("+ .Checkbox-display");
   }
 }
 .Checkbox--switch {
-  padding-left: 65px;
+  @left-pad: 65px;
+
+  padding-left: @left-pad;
   margin: 5px 0;
 
+  input[type="checkbox"] {
+    top: -4px;
+    width: 50px;
+    height: 28px;
+  }
+
   .Checkbox-display {
     float: left;
-    margin-left: -65px;
+    margin-left: -@left-pad;
     margin-top: -4px;
   }
 }