Improved accessibility of material-design checkbox

dev/Component/Checkbox.js

@@ -1,5 +1,7 @@
 export class CheckboxComponent {
 	constructor(params = {}) {
+		this.name = params.name;
+
 		this.value = ko.isObservable(params.value) ? params.value
 			: ko.observable(!!params.value);
 

dev/Styles/Components.less

@@ -57,7 +57,12 @@
 	margin-bottom: 6px;
 	padding: 2px 0;
 
-	&:focus {
+	input {
+		opacity:0;
+		position:absolute;
+	}
+
+	&:focus-within {
 		outline: 1px dotted;
 	}
 
@@ -70,6 +75,7 @@
 .e-checkbox.material-design {
 
 	line-height: 20px;
+	width: auto !important;
 
 	> div {
 		position: relative;
@@ -85,7 +91,7 @@
 		animation: checkmark-to-box 200ms ease-out forwards;
 	}
 
-	div.checked {
+	input:checked + div div {
 		.checkbox-mark-sizes();
 		animation: box-to-checkmark 200ms ease-out forwards;
 	}

snappymail/v/0.0.0/app/templates/Views/Components/Checkbox.html

@@ -1,8 +1,7 @@
-<div class="e-component e-checkbox material-design" tabindex="0" data-bind="click: click, onSpace: click, css: { 'disabled': !enable() }">
-	<div role="checkbox">
-		<div data-bind="css: {'checked': value()}"></div>
-	</div>
+<label class="e-component e-checkbox material-design" data-bind="css: { 'disabled': !enable() }">
+	<input type="checkbox" data-bind="checked: value, enable: enable, attr: {name: name}"/>
+	<div role="checkbox"><div></div></div>
 <!-- ko if: label -->
 	<span data-bind="attr: {'data-i18n': label}"></span>
 <!-- /ko -->
-</div>
+</label>

snappymail/v/0.0.0/app/templates/Views/User/PopupsFolderCreate.html

@@ -17,6 +17,7 @@
 	<div class="control-group" data-bind="component: {
 		name: 'Checkbox',
 		params: {
+			name: 'subscribe',
 			label: 'SETTINGS_FOLDERS/BUTTON_SUBSCRIBE',
 			value: folderSubscribe
 		}

vendors/bootstrap/less/forms.less

@@ -13,7 +13,7 @@ form {
 
 // Identify controls by their labels
 label {
-  display: block;
+  display: inline-block;
   font-weight: normal;
   line-height: 1.43em;
   margin-bottom: 5px;