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>

6 files changed, 56 insertions, 23 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];
 };
 
 /**
diff --git a/ipatests/test_webui/test_dns.py b/ipatests/test_webui/test_dns.py
index c832190d3..dbcb2622e 100644
--- a/ipatests/test_webui/test_dns.py
+++ b/ipatests/test_webui/test_dns.py
@@ -37,10 +37,10 @@ ZONE_DATA = {
         ('textbox', 'idnsname', ZONE_PKEY),
         ('textbox', 'idnssoamname', 'ns'),
         ('textbox', 'ip_address', '192.168.1.1'),
-        ('checkbox', 'force', ''),
+        ('checkbox', 'force', 'checked'),
     ],
     'mod': [
-        ('checkbox', 'idnsallowsyncptr', ''),
+        ('checkbox', 'idnsallowsyncptr', 'checked'),
     ],
 }
 
@@ -63,7 +63,7 @@ RECORD_MOD_DATA = {
 
 CONFIG_MOD_DATA = {
     'mod': [
-        ('checkbox', 'idnsallowsyncptr', ''),
+        ('checkbox', 'idnsallowsyncptr', 'checked'),
     ],
 }
 
diff --git a/ipatests/test_webui/test_host.py b/ipatests/test_webui/test_host.py
index 09200061b..055224a0d 100644
--- a/ipatests/test_webui/test_host.py
+++ b/ipatests/test_webui/test_host.py
@@ -61,14 +61,14 @@ class host_tasks(UI_driver):
             ]
             if ip:
                 add_data.append(('textbox', 'ip_address', ip))
-            add_data.append(('checkbox', 'force', ''))
+            add_data.append(('checkbox', 'force', None))
             del_data = [
-                ('checkbox', 'updatedns', '')
+                ('checkbox', 'updatedns', None)
             ]
         else:
             add_data = [
                 ('textbox', 'fqdn', '%s.%s' % (host, domain)),
-                ('checkbox', 'force', ''),
+                ('checkbox', 'force', None),
             ]
             del_data = None
 
@@ -204,7 +204,7 @@ class test_host(host_tasks):
         http://www.freeipa.org/page/V3/Kerberos_Flags
         """
         name = 'ipakrbokasdelegate'
-        mod = {'mod': [('checkbox', name, '')]}
+        mod = {'mod': [('checkbox', name, None)]}
         checked = ['checked']
 
         self.init_app()
diff --git a/ipatests/test_webui/test_service.py b/ipatests/test_webui/test_service.py
index d2e7ad772..8ed2e15b5 100644
--- a/ipatests/test_webui/test_service.py
+++ b/ipatests/test_webui/test_service.py
@@ -41,7 +41,7 @@ class sevice_tasks(UI_driver):
                 ('combobox', 'host', host)
             ],
             'mod': [
-                ('checkbox', 'ipakrbokasdelegate', ''),
+                ('checkbox', 'ipakrbokasdelegate', None),
             ],
         }
 
@@ -177,7 +177,7 @@ class test_service(sevice_tasks):
         """
         pkey = self.get_http_pkey()
         name = 'ipakrbokasdelegate'
-        mod = {'mod': [('checkbox', name, '')]}
+        mod = {'mod': [('checkbox', name, None)]}
         checked = ['checked']
 
         self.init_app()
diff --git a/ipatests/test_webui/ui_driver.py b/ipatests/test_webui/ui_driver.py
index a416658ed..f0b9b4362 100644
--- a/ipatests/test_webui/ui_driver.py
+++ b/ipatests/test_webui/ui_driver.py
@@ -1005,7 +1005,7 @@ class UI_driver(object):
             elif widget_type == 'radio':
                 self.check_option(key, val, parent)
             elif widget_type == 'checkbox':
-                self.check_option(key, parent=parent)
+                self.check_option(key, val, parent=parent)
             elif widget_type == 'selectbox':
                 self.select('select[name=%s]' % key, val, parent)
             elif widget_type == 'combobox':