Add extra visual indicator for Checkbox/Radio keyboard focus

Summary:
This draws a line underneath a Plasma checkbox label when it has
keyboard focus. This is needed as when an item is checked, the focus
shadow is practically invisible.

Visuals when clicking is completely unchanged
This brings it more in line with our QStyle.

Test Plan: Attached runtime tests

Reviewers: #plasma, #vdg, mart

Reviewed By: #plasma, mart

Subscribers: plasma-devel, #frameworks

Tags: #plasma, #frameworks

Differential Revision: https://phabricator.kde.org/D7819

src/declarativeimports/plasmastyle/CheckBoxStyle.qml

@@ -29,6 +29,14 @@ QtQuickControlStyle.CheckBoxStyle {
 
     label: PlasmaComponents.Label {
         text: control.text
+        Rectangle {
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.top: parent.bottom
+            height: 1 * units.devicePixelRatio
+            color: theme.highlightColor
+            visible: control.activeFocus
+        }
     }
     background: Item {}
 

src/declarativeimports/plasmastyle/RadioButtonStyle.qml

@@ -29,6 +29,14 @@ QtQuickControlStyle.RadioButtonStyle {
 
     label: PlasmaComponents.Label {
         text: control.text
+        Rectangle {
+            anchors.left: parent.left
+            anchors.right: parent.right
+            anchors.top: parent.bottom
+            height: 1 * units.devicePixelRatio
+            color: theme.highlightColor
+            visible: control.activeFocus
+        }
     }
     //Not needed?
     background: Item {}

tests/components/checkbox.qml

@@ -0,0 +1,68 @@
+import QtQuick 2.0
+
+import org.kde.plasma.components 2.0 as PlasmaComponents
+import QtQuick.Controls 1.2
+import QtQuick.Layouts 1.2
+
+Rectangle
+{
+    width: 500
+    height: 500
+    color: "white"
+
+    Grid {
+        anchors.fill: parent
+        anchors.margins: 20
+        spacing: 4
+        columns: 2
+
+        Label {
+            text: "text"
+        }
+        PlasmaComponents.CheckBox {
+            text: "Some awesome checkbox"
+        }
+
+        Label {
+            text: "focus"
+        }
+        PlasmaComponents.CheckBox {
+            text: "Some awesome checkbox"
+            focus: true
+        }
+
+        Label {
+            text: "checked"
+        }
+        PlasmaComponents.CheckBox {
+            text: "Some awesome checkbox"
+            checkedState: Qt.Checked
+        }
+
+        Label {
+            text: "tri-state"
+        }
+        PlasmaComponents.CheckBox {
+            text: "Some awesome checkbox"
+            checkedState: Qt.PartiallyChecked
+        }
+
+        Label {
+            text: "disabled"
+        }
+        PlasmaComponents.CheckBox {
+            text: "Some awesome checkbox"
+            enabled: false
+        }
+
+        Label {
+            text: "disabled and checked"
+        }
+        PlasmaComponents.CheckBox {
+            text: "Some awesome checkbox"
+            enabled: false
+            checkedState: Qt.Checked
+        }
+    }
+}
+

tests/components/radiobutton.qml

@@ -0,0 +1,60 @@
+import QtQuick 2.0
+
+import org.kde.plasma.components 2.0 as PlasmaComponents
+import QtQuick.Controls 1.2
+import QtQuick.Layouts 1.2
+
+Rectangle
+{
+    width: 500
+    height: 500
+    color: "white"
+
+    Grid {
+        anchors.fill: parent
+        anchors.margins: 20
+        spacing: 4
+        columns: 2
+
+        Label {
+            text: "text"
+        }
+        PlasmaComponents.RadioButton {
+            text: "Some awesome radiobutton"
+        }
+
+        Label {
+            text: "focus"
+        }
+        PlasmaComponents.RadioButton {
+            text: "Some awesome radiobutton"
+            focus: true
+        }
+
+        Label {
+            text: "checked"
+        }
+        PlasmaComponents.RadioButton {
+            text: "Some awesome radiobutton"
+            checked: true
+        }
+
+        Label {
+            text: "disabled"
+        }
+        PlasmaComponents.RadioButton {
+            text: "Some awesome radiobutton"
+            enabled: false
+        }
+
+        Label {
+            text: "disabled and checked"
+        }
+        PlasmaComponents.RadioButton {
+            text: "Some awesome radiobutton"
+            enabled: false
+            checked: true
+        }
+    }
+}
+