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>

diff --git a/examples/quick/accessibility/accessibility.qml b/examples/quick/accessibility/accessibility.qml
index 248d17a..fe9e03d 100644 (file)
--- a/examples/quick/accessibility/accessibility.qml
+++ b/examples/quick/accessibility/accessibility.qml
@@ -55,17 +55,13 @@ Rectangle {
         anchors.fill: parent
         anchors.margins: 10
         width: parent.width
-        Row {
-            spacing: 6
-            width: column.width
-            Button { width: 100; height: column.h + 20; text: "Send"; onClicked : { status.text = "Send" } }
-            Button { width: 100; height: column.h + 20; text: "Discard";  onClicked : { status.text = "Discard" } }
-        }
+
 
         Row {
             spacing: 6
             width: column.width
             height: column.h
+
             Text {
                 id: subjectLabel
                 //! [text]
@@ -73,6 +69,7 @@ Rectangle {
                 Accessible.name: text
                 //! [text]
                 text: "Subject:"
+                y: 3
             }
             Rectangle {
                 id: subjectBorder
@@ -80,13 +77,20 @@ Rectangle {
                 Accessible.name: subjectEdit.text
                 border.width: 1
                 border.color: "black"
-                height: subjectEdit.height
+                height: subjectEdit.height + 6
                 width: 240
                 TextInput {
+                    focus: true
+                    y: 3
+                    x: 3
+                    width: parent.width - 6
                     id: subjectEdit
                     text: "Vacation plans"
+                    KeyNavigation.tab: textEdit
                 }
+
             }
+
         }
         Rectangle {
             id: textBorder
@@ -95,12 +99,18 @@ Rectangle {
             border.width: 1
             border.color: "black"
             width: parent.width - 2
-            height: parent.height - (textBorder.y + column.spacing)
+
+            height: 200
             TextEdit {
                 id: textEdit
-                text: "Hi, we're going to the Dolomites this summer. Weren't you also going to northern Italy? \n\nbest wishes, your friend Luke"
-                width: parent.width
+                y: 3
+                x: 3
+                width: parent.width - 6
+                height: parent.height - 6
+                text: "Hi, we're going to the Dolomites this summer. Weren't you also going to northern Italy? \n\nBest wishes, your friend Luke"
                 wrapMode: TextEdit.WordWrap
+                KeyNavigation.tab: sendButton
+                KeyNavigation.priority: KeyNavigation.BeforeItem
             }
         }
         Text {
@@ -110,9 +120,28 @@ Rectangle {
 
         Row {
             spacing: 6
-            width: column.width
-            Checkbox { checked: false }
-            Slider { value: 10 }
+            Button { id: sendButton; width: 100; height: column.h + 20; text: "Send";
+                onClicked : { status.text = "Send" }
+                KeyNavigation.tab: discardButton
+            }
+            Button { id: discardButton; width: 100; height: column.h + 20; text: "Discard";
+                onClicked : { status.text = "Discard" }
+                KeyNavigation.tab: checkBox
+            }
+        }
+
+        Row {
+            spacing: 6
+            Checkbox {
+                id: checkBox
+                checked: false
+                KeyNavigation.tab: slider
+            }
+            Slider {
+                id: slider
+                value: 10
+                KeyNavigation.tab: subjectEdit
+            }
         }
     }
 }

diff --git a/examples/quick/accessibility/content/Button.qml b/examples/quick/accessibility/content/Button.qml
index 2d17e18..fa26177 100644 (file)
--- 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 273e38b..f16f66e 100644 (file)
--- 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 fdbfd39..a116308 100644 (file)
--- 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
 }