Added tab navigation functional. (#721)

- Added tab navigation functional.
- In basic types added parentFlickable property, which will help to ensure, that the item is visible within flickable parent during tab navigation.
- Added focus state for some basic types.
- In PageType qml file added lastItemTabClicked function, which will help to focus tab bar buttons when the last tab on the current page clicked.
- Added Focus for back button for all pages and drawers.
- Added scroll on tab for Servers ListView on PageHome.

client/ui/qml/Components/SelectLanguageDrawer.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts
 
 import "../Controls2"
 import "../Controls2/TextTypes"
+import "../Config"
 
 DrawerType2 {
     id: root
@@ -17,8 +18,21 @@ DrawerType2 {
             root.expandedHeight = container.implicitHeight
         }
 
+        Connections {
+            target: root
+            enabled: !GC.isMobile()
+            function onOpened() {
+                focusItem.forceActiveFocus()
+            }
+        }
+
+        Item {
+            id: focusItem
+            KeyNavigation.tab: backButton
+        }
+
         ColumnLayout {
-            id: backButton
+            id: backButtonLayout
 
             anchors.top: parent.top
             anchors.left: parent.left
@@ -26,15 +40,15 @@ DrawerType2 {
             anchors.topMargin: 16
 
             BackButtonType {
+                id: backButton
                 backButtonImage: "qrc:/images/controls/arrow-left.svg"
-                backButtonFunction: function() {
-                    root.close()
-                }
+                backButtonFunction: function() { root.close() }
+                KeyNavigation.tab: listView
             }
         }
 
         FlickableType {
-            anchors.top: backButton.bottom
+            anchors.top: backButtonLayout.bottom
             anchors.left: parent.left
             anchors.right: parent.right
             anchors.bottom: parent.bottom
@@ -71,10 +85,50 @@ DrawerType2 {
                         id: buttonGroup
                     }
 
+                    property int currentFocusIndex: 0
+
+                    activeFocusOnTab: true
+                    onActiveFocusChanged: {
+                        if (activeFocus) {
+                            this.currentFocusIndex = 0
+                            this.itemAtIndex(currentFocusIndex).forceActiveFocus()
+                        }
+                    }
+
+                    Keys.onTabPressed: {
+                        if (currentFocusIndex < this.count - 1) {
+                            currentFocusIndex += 1
+                            this.itemAtIndex(currentFocusIndex).forceActiveFocus()
+                        } else {
+                            listViewFocusItem.forceActiveFocus()
+                            focusItem.forceActiveFocus()
+                        }
+                    }
+
+                    Item {
+                        id: listViewFocusItem
+                        Keys.onTabPressed: {
+                            root.forceActiveFocus()
+                        }
+                    }
+
+                    onVisibleChanged: {
+                        if (visible) {
+                            listViewFocusItem.forceActiveFocus()
+                            focusItem.forceActiveFocus()
+                        }
+                    }
+
                     delegate: Item {
                         implicitWidth: root.width
                         implicitHeight: delegateContent.implicitHeight
 
+                        onActiveFocusChanged: {
+                            if (activeFocus) {
+                                radioButton.forceActiveFocus()
+                            }
+                        }
+
                         ColumnLayout {
                             id: delegateContent
 
@@ -89,12 +143,18 @@ DrawerType2 {
                                 hoverEnabled: true
 
                                 indicator: Rectangle {
-                                    anchors.fill: parent
+                                    width: parent.width - 1
+                                    height: parent.height
                                     color: radioButton.hovered ? "#2C2D30" : "#1C1D21"
+                                    border.color: radioButton.focus ? "#D7D8DB" : "transparent"
+                                    border.width: radioButton.focus ? 1 : 0
 
                                     Behavior on color {
                                         PropertyAnimation { duration: 200 }
                                     }
+                                    Behavior on border.color {
+                                        PropertyAnimation { duration: 200 }
+                                    }
                                 }
 
                                 RowLayout {
@@ -137,6 +197,9 @@ DrawerType2 {
                                 }
                             }
                         }
+
+                        Keys.onEnterPressed: radioButton.clicked()
+                        Keys.onReturnPressed: radioButton.clicked()
                     }
                 }
             }