Improve example with key navigation.

Generally this is a redo of many of the details.

Change-Id: I08c4f58966507232220bb10892041b9e39d54e37
Reviewed-by: Jan Arve Sæther <jan-arve.saether@digia.com>

3 files changed, 59 insertions, 18 deletions

diff --git a/examples/quick/accessibility/content/Button.qml b/examples/quick/accessibility/content/Button.qml
index 2d17e18ae3..fa26177d32 100644
--- a/examples/quick/accessibility/content/Button.qml
+++ b/examples/quick/accessibility/content/Button.qml
@@ -61,11 +61,12 @@ Rectangle {
     height: 30
     gradient: Gradient {
         GradientStop { position: 0.0; color: "lightsteelblue" }
-        GradientStop { position: 1.0; color: "blue" }
+        GradientStop { position: 1.0;
+            color: button.focus ? "red" : "blue" }
     }
-    border.width: 2
-    border.color: "black";
-    radius: 10
+   // border.width: 1
+    //border.color: "black";
+    radius: 5
     antialiasing: true
 
     Text {
@@ -73,14 +74,15 @@ Rectangle {
         text: parent.description
         anchors.centerIn: parent
         font.pixelSize: parent.height * .5
-        style: Text.Sunken; color: "white"; styleColor: "black"
+        style: Text.Sunken
+        color: "white"
+        styleColor: "black"
     }
 
     MouseArea {
         id: mouseArea
         anchors.fill: parent
-        onClicked: {
-            parent.clicked()
-        }
+        onClicked: parent.clicked()
     }
+    Keys.onSpacePressed: clicked()
 }
diff --git a/examples/quick/accessibility/content/Checkbox.qml b/examples/quick/accessibility/content/Checkbox.qml
index 273e38b239..f16f66ebb2 100644
--- a/examples/quick/accessibility/content/Checkbox.qml
+++ b/examples/quick/accessibility/content/Checkbox.qml
@@ -43,20 +43,37 @@
 import QtQuick 2.0
 
 
-Rectangle {
+FocusScope {
     id: checkbox
 
     Accessible.role: Accessible.CheckBox
 
+    property string text: "CheckBox"
     property bool checked // required variable
 
-    width: 30
+    width: 100
     height: 30
 
-
-    Text {
-        id: checkboxText
-        text: parent.checked ? "on" : "off"
-        anchors.centerIn: parent
+    Row {
+        spacing: 2
+        Rectangle {
+            width: 12
+            height: 12
+            border.width: checkbox.focus ? 2 : 1
+            border.color: "black"
+            Text {
+                id: checkboxText
+                text: checkbox.checked ? "x" : ""
+                anchors.centerIn: parent
+            }
+        }
+        Text {
+            text: checkbox.text
+        }
+    }
+    MouseArea {
+        anchors.fill: parent
+        onClicked: checkbox.checked = !checkbox.checked
     }
+    Keys.onSpacePressed: checkbox.checked = !checkbox.checked
 }
diff --git a/examples/quick/accessibility/content/Slider.qml b/examples/quick/accessibility/content/Slider.qml
index fdbfd399b9..a116308a14 100644
--- a/examples/quick/accessibility/content/Slider.qml
+++ b/examples/quick/accessibility/content/Slider.qml
@@ -46,17 +46,30 @@ import QtQuick 2.0
 Rectangle {
     id: slider
 
-    property alias text : buttonText.text
+    property alias text: buttonText.text
     Accessible.role: Accessible.Slider
 
-    property int value             // required
+    property int value : 5         // required
     property int minimumValue : 0  // optional (default INT_MIN)
     property int maximumValue : 20 // optional (default INT_MAX)
     property int stepSize : 1      // optional (default 1)
 
-    width: 30
+    width: 100
     height: 30
+    border.color: "black"
+    border.width: 1
 
+    Rectangle {
+        id: indicator
+        x: 1
+        y: 1
+        height: parent.height - 2
+        width: ((parent.width - 2) / maximumValue) * value
+        color: "lightgrey"
+        Behavior on width {
+            NumberAnimation { duration: 50 }
+        }
+    }
 
     Text {
         id: buttonText
@@ -64,4 +77,13 @@ Rectangle {
         anchors.centerIn: parent
         font.pixelSize: parent.height * .5
     }
+    MouseArea {
+        anchors.fill: parent
+        onClicked: {
+            var pos = mouse.x / slider.width * (maximumValue - minimumValue) + minimumValue
+            slider.value = pos
+        }
+    }
+    Keys.onLeftPressed: value > minimumValue ? value = value - stepSize : minimumValue
+    Keys.onRightPressed: value < maximumValue ? value = value + stepSize : maximumValue
 }