Improve ability to navigate with TAB key

There was little to no visual indication that buttons where focused when TAB was pressed. I added visual queues and made so the expected inputs would be focused when pressing TAB Contribution Sponsor: Firestorm (launchfirestorm.com)
mavlink · Sep 18, 2024 · 51873d4 · 51873d4
1 parent 9ad442f
commit 51873d4
Show file tree

Hide file tree

Showing 13 changed files with 101 additions and 23 deletions.
diff --git a/src/FlightMap/MapScale.qml b/src/FlightMap/MapScale.qml
@@ -192,7 +192,7 @@ Item {
         anchors.left:       buttonsOnLeft ? parent.left : rightEnd.right
         text:               qsTr("T")
         width:              height
-        opacity:            0.75
+        fillOpacity:        0.75
         visible:            terrainButtonVisible
         onClicked:          terrainButtonClicked()
     }
@@ -205,7 +205,7 @@ Item {
         anchors.left:       terrainButton.visible ? terrainButton.right : terrainButton.left
         text:               qsTr("+")
         width:              height
-        opacity:            0.75
+        fillOpacity:        0.75
         visible:            _zoomButtonsVisible
         onClicked:          mapControl.zoomLevel += 0.5
     }
@@ -218,7 +218,7 @@ Item {
         anchors.left:       zoomUpButton.right
         text:               qsTr("-")
         width:              height
-        opacity:            0.75
+        fillOpacity:        0.75
         visible:            _zoomButtonsVisible
         onClicked:          mapControl.zoomLevel -= 0.5
     }

diff --git a/src/QmlControls/QGCButton.qml b/src/QmlControls/QGCButton.qml
@@ -15,7 +15,7 @@ Button {
     bottomPadding:  _verticalPadding
     leftPadding:    _horizontalPadding
     rightPadding:   _horizontalPadding
-    focusPolicy:    Qt.ClickFocus
+    focusPolicy:    Qt.TabFocus
     font.family:    ScreenTools.normalFontFamily
     text:           ""
 
@@ -26,6 +26,7 @@ Button {
     property string iconSource:     ""
     property real   fontWeight:     Font.Normal // default for qml Text
     property real   pointSize:      ScreenTools.defaultFontPointSize
+    property real   fillOpacity:    1
 
     property alias wrapMode:            text.wrapMode
     property alias horizontalAlignment: text.horizontalAlignment
@@ -42,9 +43,9 @@ Button {
         radius:         backRadius
         implicitWidth:  ScreenTools.implicitButtonWidth
         implicitHeight: ScreenTools.implicitButtonHeight
-        border.width:   showBorder ? 1 : 0
-        border.color:   qgcPal.buttonBorder
-        color:          primary ? qgcPal.primaryButton : qgcPal.button
+        border.width:   showBorder  || control.activeFocus ? 1 : 0
+        border.color:   control.activeFocus ? qgcPal.text : qgcPal.buttonBorder
+        color:          applyOpacity(primary ? qgcPal.primaryButton : qgcPal.button, fillOpacity)
 
         Rectangle {
             anchors.fill:   parent
@@ -80,4 +81,8 @@ Button {
                 visible:                control.text !== "" 
             }
     }
+
+    function applyOpacity(colorIn, opacity){
+        return Qt.rgba(colorIn.r, colorIn.g, colorIn.b, opacity)
+    }
 }
diff --git a/src/QmlControls/QGCCheckBox.qml b/src/QmlControls/QGCCheckBox.qml
@@ -7,7 +7,7 @@ import QGroundControl.ScreenTools
 CheckBox {
     id:             control
     spacing:        _noText ? 0 : ScreenTools.defaultFontPixelWidth
-    focusPolicy:    Qt.ClickFocus
+    focusPolicy:    Qt.TabFocus
 
     property color  textColor:          _qgcPal.text
     property bool   textBold:           false
@@ -57,5 +57,13 @@ CheckBox {
             visible:            control.checked
             anchors.centerIn:   parent
         }
+
+        Rectangle {
+            anchors.fill:   parent
+            color:          "transparent"
+            border.color:   "black"
+            border.width:   control.activeFocus ? 1 : 0
+            radius:         width
+        }
     }
 }
diff --git a/src/QmlControls/QGCCheckBoxSlider.qml b/src/QmlControls/QGCCheckBoxSlider.qml
@@ -20,6 +20,7 @@ AbstractButton   {
     padding:        0
 
     property bool   _showBorder: qgcPal.globalTheme === QGCPalette.Light
+    focusPolicy:    Qt.TabFocus
 
     QGCPalette { id: qgcPal; colorGroupEnabled: control.enabled }
 
@@ -42,8 +43,8 @@ AbstractButton   {
             width:                  height * 2
             radius:                 height / 2
             color:                  control.checked ? qgcPal.primaryButton : qgcPal.button
-            border.width:           _showBorder ? 1 : 0
-            border.color:           qgcPal.buttonBorder
+            border.width:           _showBorder || control.activeFocus ? 1 : 0
+            border.color:           control.activeFocus ? qgcPal.text : qgcPal.buttonBorder
 
             Rectangle {
                 anchors.verticalCenter: parent.verticalCenter

diff --git a/src/QmlControls/QGCColumnButton.qml b/src/QmlControls/QGCColumnButton.qml
@@ -13,8 +13,8 @@ QGCButton {
         width:          control.width
         height:         control.height
         radius:         backRadius
-        border.width:   showBorder ? 1 : 0
-        border.color:   qgcPal.buttonText
+        border.width:   showBorder  || control.activeFocus ? 1 : 0
+        border.color:   control.activeFocus ? qgcPal.text : qgcPal.buttonBorder
         color:          _showHighlight ?
                             qgcPal.buttonHighlight :
                             (primary ? qgcPal.primaryButton : qgcPal.button)

diff --git a/src/QmlControls/QGCComboBox.qml b/src/QmlControls/QGCComboBox.qml
@@ -29,6 +29,7 @@ T.ComboBox {
     baselineOffset: contentItem.y + text.baselineOffset
     leftPadding:    padding + (!control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width + spacing)
     rightPadding:   padding + (control.mirrored || !indicator || !indicator.visible ? 0 : indicator.width)
+    focusPolicy:    Qt.TabFocus
 
     property bool   centeredLabel:  false
     property bool   sizeToContents: false
@@ -121,8 +122,8 @@ T.ComboBox {
 
     background: Rectangle {
         color:          qgcPal.button
-        border.color:   qgcPal.buttonBorder
-        border.width:   _showBorder ? 1 : 0
+        border.color:   control.activeFocus ? qgcPal.buttonText : qgcPal.buttonBorder
+        border.width:   _showBorder || control.activeFocus ? 1 : 0
         radius:         ScreenTools.buttonBorderRadius
     }
 

diff --git a/src/QmlControls/QGCFlickable.qml b/src/QmlControls/QGCFlickable.qml
@@ -18,4 +18,35 @@ Flickable {
         indicatorComponent = Qt.createComponent("QGCFlickableHorizontalIndicator.qml")
         indicatorComponent.createObject(root)
     }
+
+    // Make so the flickable repositions the content if the user is navigating using the TAB key 
+    // so that the active item is centered in the screen. This is especially helpful when 
+    // the item being tabbed to is offscreen.
+    property var activeFocusItemCopy: activeFocusItem
+    onActiveFocusItemCopyChanged: centerActiveFocusItemInFlickable()
+    function centerActiveFocusItemInFlickable(){
+        if(activeFocusItem !== 'undefined' && isDescendant(activeFocusItem, root)){
+            let posThatWouldCenterItemInFlickable = activeFocusItem.mapToItem(root.contentItem, 0, 0).y
+                - root.height/2 + activeFocusItem.height/2
+            if(posThatWouldCenterItemInFlickable < 0 || root.contentHeight < root.height){
+                root.contentY = 0
+            }
+            else if(posThatWouldCenterItemInFlickable > root.contentHeight - root.height){ 
+                root.contentY = root.contentHeight - root.height
+            }
+            else {
+                root.contentY = posThatWouldCenterItemInFlickable
+            }
+        }
+    }
+    function isDescendant(item, potentialAncestor) {
+        var currentItem = item
+        while (currentItem) {
+            if (currentItem === potentialAncestor) {
+                return true
+            }
+            currentItem = currentItem.parent
+        }
+        return false
+    }
 }
diff --git a/src/QmlControls/QGCRadioButton.qml b/src/QmlControls/QGCRadioButton.qml
@@ -8,6 +8,7 @@ RadioButton {
     id:             control
     font.family:    ScreenTools.normalFontFamily
     font.pointSize: ScreenTools.defaultFontPointSize
+    focusPolicy:    Qt.TabFocus
 
     property color  textColor:  _qgcPal.text
     property var    _qgcPal:    QGCPalette { colorGroupEnabled: enabled }
@@ -32,6 +33,13 @@ RadioButton {
             color:              "black"
             visible:            control.checked
         }
+
+        Rectangle {
+            anchors.fill:   parent
+            color:          "transparent"
+            border.width:   control.activeFocus ? 1 : 0
+            border.color:   qgcPal.text
+        }
     }
 
     contentItem: Text {

diff --git a/src/QmlControls/QGCTextField.qml b/src/QmlControls/QGCTextField.qml
@@ -53,8 +53,8 @@ TextField {
     }
 
     background: Rectangle {
-        border.width:   qgcPal.globalTheme === QGCPalette.Light ? 1 : 0
-        border.color:   qgcPal.buttonBorder
+        border.width:   qgcPal.globalTheme === QGCPalette.Light || control.activeFocus ? 1 : 0
+        border.color:   control.activeFocus ? qgcPal.textFieldText : qgcPal.buttonBorder
         radius:         ScreenTools.buttonBorderRadius
         color:          qgcPal.textField
         implicitWidth:  ScreenTools.implicitTextFieldWidth

diff --git a/src/QmlControls/QGCToolBarButton.qml b/src/QmlControls/QGCToolBarButton.qml
@@ -24,6 +24,7 @@ Button {
     leftPadding:        _horizontalMargin
     rightPadding:       _horizontalMargin
     checkable:          false
+    focusPolicy:        Qt.TabFocus
 
     property bool logo: false
 
@@ -34,8 +35,8 @@ Button {
     background: Rectangle {
         anchors.fill:   parent
         color:          button.checked ? qgcPal.buttonHighlight : Qt.rgba(0,0,0,0)
-        border.color:   "red"
-        border.width:   QGroundControl.corePlugin.showTouchAreas ? 3 : 0
+        border.color:   qgcPal.text
+        border.width:   button.activeFocus ? 1 : 0
     }
 
     contentItem: Row {

diff --git a/src/QmlControls/SubMenuButton.qml b/src/QmlControls/SubMenuButton.qml
@@ -16,7 +16,7 @@ Button {
     property size   sourceSize:     Qt.size(ScreenTools.defaultFontPixelHeight * 2, ScreenTools.defaultFontPixelHeight * 2)
 
     text:               "Button"  ///< Pass in your own button text
-    focusPolicy:    Qt.ClickFocus
+    focusPolicy:    Qt.TabFocus
     hoverEnabled:   !ScreenTools.isMobile
 
     implicitHeight: ScreenTools.isTinyScreen ? ScreenTools.defaultFontPixelHeight * 3.5 : ScreenTools.defaultFontPixelHeight * 2.5
@@ -50,6 +50,13 @@ Button {
             opacity:        showHighlight ? 1 : control.enabled && control.hovered ? .2 : 0
         }
 
+        Rectangle {
+            anchors.fill:   parent
+            color:          "transparent"
+            border.width:   control.activeFocus ? 1 : 0
+            border.color:   qgcPal.text
+        }
+
         QGCColoredImage {
             id:                     image
             anchors.leftMargin:     ScreenTools.defaultFontPixelWidth

diff --git a/src/QmlControls/ToolStripHoverButton.qml b/src/QmlControls/ToolStripHoverButton.qml
@@ -24,6 +24,7 @@ Button {
     text:           toolStripAction.text
     checked:        toolStripAction.checked
     checkable:      toolStripAction.dropPanelComponent || modelData.checkable
+    focusPolicy:    Qt.TabFocus
 
     property var    toolStripAction:    undefined
     property var    dropPanel:          undefined
@@ -129,5 +130,7 @@ Button {
                             qgcPal.buttonHighlight :
                             (control.hovered ? qgcPal.toolStripHoverColor : qgcPal.toolbarBackground)
         anchors.fill:   parent
+        border.width:   control.activeFocus ? 1 : 0
+        border.color:   qgcPal.text
     }
 }
diff --git a/src/UI/AppSettings.qml b/src/UI/AppSettings.qml
@@ -80,6 +80,7 @@ Rectangle {
                 model:  settingsPagesModel
 
                 Button {
+                    id: control
                     Layout.fillWidth:   true
                     text:               name
                     padding:            ScreenTools.defaultFontPixelWidth / 2
@@ -88,10 +89,22 @@ Rectangle {
                     icon.source:        iconUrl
                     visible:            pageVisible()
 
-                    background: Rectangle {
-                        color:      qgcPal.buttonHighlight
-                        opacity:    checked || pressed ? 1 : enabled && hovered ? .2 : 0
-                        radius:     ScreenTools.defaultFontPixelWidth / 2
+                    background: Item {
+
+                        Rectangle {
+                            anchors.fill:   parent
+                            color:          qgcPal.buttonHighlight
+                            opacity:        checked || pressed ? 1 : enabled && hovered ? .2 : 0
+                            radius:         ScreenTools.defaultFontPixelWidth / 2
+                        }
+
+                        Rectangle {
+                            anchors.fill:   parent
+                            color:          "transparent"
+                            border.color:   qgcPal.buttonText
+                            border.width:   control.activeFocus ? 1 : 0
+                            radius:         ScreenTools.defaultFontPixelWidth / 2
+                        }
                     }
 
                     contentItem: RowLayout {