fix Ui keyboard navigation

various fixes to allow some support for keyboard navigation in message boxes and dialogs
2025-04-29 21:42:42 +02:00 · 2018-01-10 22:30:43 +00:00 · 2018-01-10 22:30:43 +00:00 · 24f1fc3546
commit 24f1fc3546
parent ac1c398b9d
6 changed files with 83 additions and 26 deletions
--- a/interface/resources/qml/controls-uit/Button.qml
+++ b/interface/resources/qml/controls-uit/Button.qml
@ -57,7 +57,7 @@ Original.Button {
                            hifi.buttons.disabledColorStart[control.colorScheme]
                        } else if (control.pressed) {
                            hifi.buttons.pressedColor[control.color]
-                        } else if (control.hovered) {
+                        } else if (control.hovered || control.focus) {
                            hifi.buttons.hoveredColor[control.color]
                        } else {
                            hifi.buttons.colorStart[control.color]
@ -71,7 +71,7 @@ Original.Button {
                            hifi.buttons.disabledColorFinish[control.colorScheme]
                        } else if (control.pressed) {
                            hifi.buttons.pressedColor[control.color]
-                        } else if (control.hovered) {
+                        } else if (control.hovered || control.focus) {
                            hifi.buttons.hoveredColor[control.color]
                        } else {
                            hifi.buttons.colorFinish[control.color]
--- a/interface/resources/qml/dialogs/FileDialog.qml
+++ b/interface/resources/qml/dialogs/FileDialog.qml
@ -704,7 +704,7 @@ ModalWindow {
                KeyNavigation.up: selectionType
                KeyNavigation.left: openButton
                KeyNavigation.right: fileTableView.contentItem
-                Keys.onReturnPressed: { canceled(); root.enabled = false }
+                Keys.onReturnPressed: { cancelAction.trigger() }
            }
        }

--- a/interface/resources/qml/dialogs/MessageDialog.qml
+++ b/interface/resources/qml/dialogs/MessageDialog.qml
@ -37,6 +37,16 @@ ModalWindow {
        return OffscreenUi.waitForMessageBoxResult(root);
    }

+    Keys.onRightPressed: if(defaultButton === OriginalDialogs.StandardButton.Yes) {
+       yesButton.forceActiveFocus()
+    } else if(defaultButton === OriginalDialogs.StandardButton.Ok) {
+       okButton.forceActiveFocus()
+    }
+    Keys.onTabPressed: if(defaultButton === OriginalDialogs.StandardButton.Yes) {
+       yesButton.forceActiveFocus()
+    } else if(defaultButton === OriginalDialogs.StandardButton.Ok) {
+       okButton.forceActiveFocus()
+    }
    property alias detailedText: detailedText.text
    property alias text: mainTextContainer.text
    property alias informativeText: informativeTextContainer.text
@ -47,7 +57,6 @@ ModalWindow {
    onIconChanged: updateIcon();
    property int defaultButton: OriginalDialogs.StandardButton.NoButton;
    property int clickedButton: OriginalDialogs.StandardButton.NoButton;
-    focus: defaultButton === OriginalDialogs.StandardButton.NoButton

    property int titleWidth: 0
    onTitleWidthChanged: d.resize();
@ -134,16 +143,35 @@ ModalWindow {
            MessageDialogButton { dialog: root; text: qsTr("Reset"); button: OriginalDialogs.StandardButton.Reset; }
            MessageDialogButton { dialog: root; text: qsTr("Discard"); button: OriginalDialogs.StandardButton.Discard; }
            MessageDialogButton { dialog: root; text: qsTr("No to All"); button: OriginalDialogs.StandardButton.NoToAll; }
-            MessageDialogButton { dialog: root; text: qsTr("No"); button: OriginalDialogs.StandardButton.No; }
+            MessageDialogButton {
+                id: noButton
+                dialog: root
+                text: qsTr("No")
+                button: OriginalDialogs.StandardButton.No
+                KeyNavigation.left: yesButton
+                KeyNavigation.backtab: yesButton
+            }
            MessageDialogButton { dialog: root; text: qsTr("Yes to All"); button: OriginalDialogs.StandardButton.YesToAll; }
-            MessageDialogButton { dialog: root; text: qsTr("Yes"); button: OriginalDialogs.StandardButton.Yes; }
+            MessageDialogButton {
+                id: yesButton
+                dialog: root
+                text: qsTr("Yes") 
+                button: OriginalDialogs.StandardButton.Yes
+                KeyNavigation.right: noButton
+                KeyNavigation.tab: noButton
+            }
            MessageDialogButton { dialog: root; text: qsTr("Apply"); button: OriginalDialogs.StandardButton.Apply; }
            MessageDialogButton { dialog: root; text: qsTr("Ignore"); button: OriginalDialogs.StandardButton.Ignore; }
            MessageDialogButton { dialog: root; text: qsTr("Retry"); button: OriginalDialogs.StandardButton.Retry; }
            MessageDialogButton { dialog: root; text: qsTr("Save All"); button: OriginalDialogs.StandardButton.SaveAll; }
            MessageDialogButton { dialog: root; text: qsTr("Save"); button: OriginalDialogs.StandardButton.Save; }
            MessageDialogButton { dialog: root; text: qsTr("Open"); button: OriginalDialogs.StandardButton.Open; }
-            MessageDialogButton { dialog: root; text: qsTr("OK"); button: OriginalDialogs.StandardButton.Ok; }
+            MessageDialogButton {
+                id: okButton
+                dialog: root 
+                text: qsTr("OK")
+                button: OriginalDialogs.StandardButton.Ok
+            }

            Button {
                id: moreButton
@ -230,12 +258,6 @@ ModalWindow {
                event.accepted = true
                root.click(OriginalDialogs.StandardButton.Cancel)
                break
-
-            case Qt.Key_Enter:
-            case Qt.Key_Return:
-                event.accepted = true
-                root.click(root.defaultButton)
-                break
        }
    }
 }
--- a/interface/resources/qml/dialogs/QueryDialog.qml
+++ b/interface/resources/qml/dialogs/QueryDialog.qml
@ -95,19 +95,19 @@ ModalWindow {
            TextField {
                id: textResult
                label: root.label
-                focus: items ? false : true
                visible: items ? false : true
                anchors {
                    left: parent.left;
                    right: parent.right;
                    bottom: parent.bottom
                }
+                KeyNavigation.down: acceptButton
+                KeyNavigation.tab: acceptButton
            }

            ComboBox {
                id: comboBox
                label: root.label
-                focus: true
                visible: items ? true : false
                anchors {
                    left: parent.left
@ -115,6 +115,8 @@ ModalWindow {
                    bottom: parent.bottom
                }
                model: items ? items : []
+                KeyNavigation.down: acceptButton
+                KeyNavigation.tab: acceptButton
            }
        }

@ -135,7 +137,6 @@ ModalWindow {

        Flow {
            id: buttons
-            focus: true
            spacing: hifi.dimensions.contentSpacing.x
            onHeightChanged: d.resize(); onWidthChanged: d.resize();
            layoutDirection: Qt.RightToLeft
@ -145,8 +146,21 @@ ModalWindow {
                margins: 0
                bottomMargin: hifi.dimensions.contentSpacing.y
            }
-            Button { action: cancelAction }
-            Button { action: acceptAction }
+            Button {
+                id: cancelButton
+                action: cancelAction
+                KeyNavigation.left: acceptButton
+                KeyNavigation.up: items ? comboBox : textResult
+                KeyNavigation.backtab: acceptButton
+            }
+            Button {
+                id: acceptButton
+                action: acceptAction
+                KeyNavigation.right: cancelButton
+                KeyNavigation.up: items ? comboBox : textResult
+                KeyNavigation.tab: cancelButton
+                KeyNavigation.backtab: items ? comboBox : textResult
+            }
        }

        Action {
@ -184,7 +198,13 @@ ModalWindow {

        case Qt.Key_Return:
        case Qt.Key_Enter:
+            if (acceptButton.focus) {
                acceptAction.trigger()
+            } else if(cancelButton.focus) {
+                cancelAction.trigger()
+            } else if(comboBox.focus || comboBox.popup.focus) {
+                comboBox.showList()
+            }
            event.accepted = true;
            break;
        }
@ -194,6 +214,10 @@ ModalWindow {
        keyboardEnabled = HMD.active;
        updateIcon();
        d.resize();
-        textResult.forceActiveFocus();
+        if (items) {
+            comboBox.forceActiveFocus()
+        } else {
+            textResult.forceActiveFocus()
+        }
    }
 }
--- a/interface/resources/qml/dialogs/messageDialog/MessageDialogButton.qml
+++ b/interface/resources/qml/dialogs/messageDialog/MessageDialogButton.qml
@ -16,10 +16,21 @@ import "../../controls-uit"

 Button {
    property var dialog;
-    property int button: StandardButton.NoButton;
+    property int button: StandardButton.Ok;

-    color: dialog.defaultButton === button ? hifi.buttons.blue : hifi.buttons.white
-    focus: dialog.defaultButton === button
+    color: focus ? hifi.buttons.blue : hifi.buttons.white
    onClicked: dialog.click(button)
    visible: dialog.buttons & button
+    Keys.onPressed: {
+        if (!focus) {
+            return
+        }
+        switch (event.key) {
+        case Qt.Key_Enter:
+        case Qt.Key_Return:
+            event.accepted = true
+            dialog.click(button)
+            break
+        }
+    }
 }
--- a/interface/src/scripting/WindowScriptingInterface.cpp
+++ b/interface/src/scripting/WindowScriptingInterface.cpp
@ -103,14 +103,14 @@ void WindowScriptingInterface::raiseMainWindow() {
 /// \param const QString& message message to display
 /// \return QScriptValue::UndefinedValue
 void WindowScriptingInterface::alert(const QString& message) {
-    OffscreenUi::asyncWarning("", message);
+    OffscreenUi::asyncWarning("", message, QMessageBox::Ok, QMessageBox::Ok);
 }

 /// Display a confirmation box with the options 'Yes' and 'No'
 /// \param const QString& message message to display
 /// \return QScriptValue `true` if 'Yes' was clicked, `false` otherwise
 QScriptValue WindowScriptingInterface::confirm(const QString& message) {
-    return QScriptValue((QMessageBox::Yes == OffscreenUi::question("", message, QMessageBox::Yes | QMessageBox::No)));
+    return QScriptValue((QMessageBox::Yes == OffscreenUi::question("", message, QMessageBox::Yes | QMessageBox::No, QMessageBox::Yes)));
 }

 /// Display a prompt with a text box