Merge pull request #4606 from netchampfaris/Tab-focus-checkbox

Tab focus checkbox

frappe/public/css/desk.css

@@ -971,7 +971,6 @@ li.user-progress .progress-bar {
   color: #36414C;
 }
 input[type="checkbox"] {
-  visibility: hidden;
   position: relative;
 }
 input[type="checkbox"]:before {
@@ -990,12 +989,21 @@ input[type="checkbox"]:before {
   -webkit-transition: 150ms color;
   -o-transition: 150ms color;
   transition: 150ms color;
+  background-color: white;
+  padding: 1px;
+  margin: -1px;
+}
+input[type="checkbox"]:focus:before {
+  color: #8D99A6;
 }
 input[type="checkbox"]:checked:before {
   content: '\f14a';
   font-size: 13px;
   color: #3b99fc;
 }
+input[type="checkbox"]:focus {
+  outline: none;
+}
 .multiselect-empty-state {
   min-height: 300px;
   display: flex;

frappe/public/less/desk.less

@@ -896,7 +896,6 @@ li.user-progress {
 
 // custom font awesome checkbox
 input[type="checkbox"] {
-	visibility: hidden;
 	position: relative;
 
 	&:before {
@@ -913,6 +912,13 @@ input[type="checkbox"] {
 		font-size: 14px;
 		color: @text-extra-muted;
 		.transition(150ms color);
+		background-color: white;
+		padding: 1px;
+		margin: -1px;
+	}
+
+	&:focus:before {
+		color: @text-muted;
 	}
 
 	&:checked:before {
@@ -920,6 +926,10 @@ input[type="checkbox"] {
 		font-size: 13px;
 		color: @checkbox-color;
 	}
+
+	&:focus {
+		outline: none;
+	}
 }
 
 // Will not be required after commonifying lists with empty state