webui-css: improve radio,checkbox keyboard support and color

checkboxes and radio buttons:
- do not change color on hover when disabled
- are focusable and checkable be keyboard again. This uses a little
  trick where the real checkbox is hidden under the artificial
  checkbox. That way it has the same position and therefore it
  works even in containers with overflow set.

https://fedorahosted.org/freeipa/ticket/4217

Reviewed-By: Adam Misnyovszki <amisnyov@redhat.com>

2 files changed, 46 insertions, 13 deletions

diff --git a/install/ui/less/forms-override.less b/install/ui/less/forms-override.less
index ac442bb0b..b8c2e5d35 100644
--- a/install/ui/less/forms-override.less
+++ b/install/ui/less/forms-override.less
@@ -30,9 +30,27 @@
 @checkbox-selected-color: darken(@checkbox-hover-color, 20%);
 
 /* Checkboxes and Radios */
+
+.radio, .checkbox {
+    position: relative;
+    padding: 0;
+}
+
 input[type="checkbox"],
 input[type="radio"] {
-    display: none;
+    display: inline;
+    position: absolute;
+    overflow: hidden;
+    margin:0;
+    padding:0;
+    border:0;
+    outline:0;
+    opacity:0;
+}
+
+input[type="checkbox"]:focus + label:before,
+input[type="radio"]:focus + label:before {
+    outline: thin dotted @checkbox-selected-color;
 }
 
 input[type="checkbox"] + label,
@@ -45,7 +63,7 @@ input[type="radio"] + label {
         .fa;
 
         font-size: 125%;
-        vertical-align: -11%;
+        vertical-align: -7%;
         margin-right: 5px;
     }
 }
@@ -81,12 +99,22 @@ input[type="checkbox"]:disabled + label {
     }
 }
 
+input[type="radio"]:disabled:checked + label,
+input[type="checkbox"]:disabled:checked + label {
+    color: @checkbox-color;
+
+    &:before,
+    &:hover:before {
+        color: @checkbox-color;
+    }
+}
+
 input[type="checkbox"] + label:before {
-    content: "@{fa-var-square-o} ";
+    content: @fa-var-square-o;
 }
 
 input[type="checkbox"]:checked + label:before {
-    content: "@{fa-var-check-square-o} ";
+    content: @fa-var-check-square-o;
     color: @checkbox-selected-color;
 }
 
@@ -99,10 +127,6 @@ input[type="radio"]:checked + label:before {
     color: @checkbox-selected-color;
 }
 
-input[type="radio"]:disabled + label {
-    color: @checkbox-disabled-color;
-}
-
 .form-horizontal {
 
     .controls {
diff --git a/install/ui/src/freeipa/widget.js b/install/ui/src/freeipa/widget.js
index 6ee61c658..f3b6c97d7 100644
--- a/install/ui/src/freeipa/widget.js
+++ b/install/ui/src/freeipa/widget.js
@@ -1166,6 +1166,10 @@ IPA.option_widget_base = function(spec, that) {
         var id = that._option_next_id + input_name;
         var enabled = that.enabled && option.enabled;
 
+        var opt_cont = $('<span/>', {
+            "class": that.intput_type
+        }).appendTo(container);
+
         option.input_node = $('<input/>', {
             id: id,
             type: that.input_type,
@@ -1174,13 +1178,13 @@ IPA.option_widget_base = function(spec, that) {
             value: option.value,
             title: option.tooltip || that.tooltip,
             change: that.on_input_change
-        }).appendTo(container);
+        }).appendTo(opt_cont);
 
         option.label_node =  $('<label/>', {
             html: option.label || '',
             title: option.tooltip || that.tooltip,
             'for': id
-        }).appendTo(container);
+        }).appendTo(opt_cont);
 
         that.new_option_id();
     };
@@ -1557,6 +1561,10 @@ IPA.standalone_option = function(spec, container, label) {
 
     spec.type = spec.type || 'checkbox';
 
+    var opt_cont = $('<span/>', {
+        'class': spec.type
+    });
+
     var input = $('<input/>', spec);
 
     if (!label) {
@@ -1571,11 +1579,12 @@ IPA.standalone_option = function(spec, container, label) {
     });
 
     if (container) {
-        input.appendTo(container);
-        label_el.appendTo(container);
+        input.appendTo(opt_cont);
+        label_el.appendTo(opt_cont);
+        opt_cont.appendTo(container);
     }
 
-    return [input, label_el];
+    return [input, label_el, opt_cont];
 };
 
 /**