accessibility: make the shortcuts focusable

Gitlab: #1211
Change-Id: Idf6a9971ceb06d1f9d42a907f948f402623fccd2

src/app/mainview/components/KeyboardShortcutKeyDelegate.qml

@@ -25,6 +25,9 @@ RowLayout {
 
     layoutDirection: UtilsAdapter.isRTL ? Qt.RightToLeft : Qt.LeftToRight
 
+    focus: true
+
+    // Needs to get focus so Orca can read the shortcut
     Rectangle {
         id: descriptionTextRect
 
@@ -36,6 +39,8 @@ RowLayout {
 
         color: JamiTheme.transparentColor
 
+        focus: true
+
         Text {
             id: descriptionText
 
@@ -48,6 +53,7 @@ RowLayout {
         }
     }
 
+    // Needs to get focus as well so Orca can read the shortcut
     Rectangle {
         id: shortcutTextRect
 
@@ -58,6 +64,7 @@ RowLayout {
         Layout.rightMargin: 10
 
         color: JamiTheme.backgroundColor
+
         radius: JamiTheme.primaryRadius
 
         Text {

src/app/mainview/components/KeyboardShortcutTable.qml

@@ -32,137 +32,112 @@ Window {
     height: 480
     minimumHeight: 300
 
+    readonly property list<ListModel> keyboardShortcutsModelList: [
         ListModel {
             id: keyboardGeneralShortcutsModel
 
             ListElement {
                 shortcut: "Ctrl + J"
-            shortcut2: ""
                 description: qsTr("Open account list")
             }
             ListElement {
                 shortcut: "Ctrl + L"
-            shortcut2: ""
                 description: qsTr("Focus conversations list")
             }
             ListElement {
                 shortcut: "Ctrl + R"
-            shortcut2: ""
                 description: qsTr("Requests list")
             }
             ListElement {
                 shortcut: "Ctrl + ↑"
-            shortcut2: ""
                 description: qsTr("Previous conversation")
             }
             ListElement {
                 shortcut: "Ctrl + ↓"
-            shortcut2: ""
                 description: qsTr("Next conversation")
             }
             ListElement {
                 shortcut: "Ctrl + F"
-            shortcut2: ""
                 description: qsTr("Search bar")
             }
             ListElement {
                 shortcut: "F11"
-            shortcut2: ""
                 description: qsTr("Full screen")
             }
             ListElement {
                 shortcut: "Ctrl + +"
-            shortcut2: ""
                 description: qsTr("Increase font size")
             }
             ListElement {
                 shortcut: "Ctrl + -"
-            shortcut2: ""
                 description: qsTr("Decrease font size")
             }
             ListElement {
                 shortcut: "Ctrl + 0"
-            shortcut2: ""
                 description: qsTr("Reset font size")
             }
-    }
+        },
-
         ListModel {
             id: keyboardConversationShortcutsModel
 
             ListElement {
                 shortcut: "Ctrl + Shift + C"
-            shortcut2: ""
                 description: qsTr("Start an audio call")
             }
             ListElement {
                 shortcut: "Ctrl + Shift + X"
-            shortcut2: ""
                 description: qsTr("Start a video call")
             }
             ListElement {
                 shortcut: "Ctrl + Shift + L"
-            shortcut2: ""
                 description: qsTr("Clear history")
             }
             ListElement {
                 shortcut: "Ctrl + Shift + F"
-            shortcut2: ""
                 description: qsTr("Search messages/files")
             }
             ListElement {
                 shortcut: "Ctrl + Shift + B"
-            shortcut2: ""
                 description: qsTr("Block contact")
             }
             ListElement {
                 shortcut: "Ctrl + Shift + Delete"
-            shortcut2: ""
                 description: qsTr("Remove conversation")
             }
             ListElement {
                 shortcut: "Ctrl + Shift + A"
-            shortcut2: ""
                 description: qsTr("Accept contact request")
             }
             ListElement {
                 shortcut: "↑"
-            shortcut2: ""
                 description: qsTr("Edit last message")
             }
             ListElement {
                 shortcut: "Esc"
-            shortcut2: ""
                 description: qsTr("Cancel message edition")
             }
-    }
+        },
-
         ListModel {
             id: keyboardSettingsShortcutsModel
 
             ListElement {
                 shortcut: "Ctrl + M"
-            shortcut2: ""
                 description: qsTr("Media settings")
             }
             ListElement {
                 shortcut: "Ctrl + G"
-            shortcut2: ""
                 description: qsTr("General settings")
             }
             ListElement {
                 shortcut: "Ctrl + Alt + I"
-            shortcut2: ""
                 description: qsTr("Account settings")
             }
             ListElement {
                 shortcut: "Ctrl + P"
-            shortcut2: ""
                 description: qsTr("Plugin settings")
             }
             ListElement {
                 shortcut: "Ctrl + Shift + N"
-            shortcut2: ""
                 description: qsTr("Open account creation wizard")
             }
             ListElement {
@@ -170,204 +145,204 @@ Window {
                 shortcut2: ""
                 description: qsTr("Open keyboard shortcut table")
             }
-    }
+        },
-
         ListModel {
             id: keyboardCallsShortcutsModel
 
             ListElement {
                 shortcut: "Ctrl + Y"
-            shortcut2: ""
                 description: qsTr("Answer an incoming call")
             }
             ListElement {
                 shortcut: "Ctrl + D"
-            shortcut2: ""
                 description: qsTr("End call")
             }
             ListElement {
                 shortcut: "Ctrl + Shift + D"
-            shortcut2: ""
                 description: qsTr("Decline the call request")
             }
             ListElement {
                 shortcut: "M"
-            shortcut2: ""
                 description: qsTr("Mute microphone")
             }
             ListElement {
                 shortcut: "V"
-            shortcut2: ""
                 description: qsTr("Stop camera")
             }
             ListElement {
                 shortcut: "Ctrl"
-            shortcut2: qsTr("Mouse middle click")
                 description: qsTr("Take tile screenshot")
             }
-    }
+        },
-
         ListModel {
             id: keyboardMarkdownShortcutsModel
 
             ListElement {
                 shortcut: "Ctrl + B"
-            shortcut2: ""
                 description: qsTr("Bold")
             }
             ListElement {
                 shortcut: "Ctrl + I"
-            shortcut2: ""
                 description: qsTr("Italic")
             }
             ListElement {
                 shortcut: "Shift + Alt + X"
-            shortcut2: ""
                 description: qsTr("Strikethrough")
             }
             ListElement {
                 shortcut: "Ctrl + Alt + H"
-            shortcut2: ""
                 description: qsTr("Heading")
             }
             ListElement {
                 shortcut: "Ctrl + Alt + K"
-            shortcut2: ""
                 description: qsTr("Link")
             }
             ListElement {
                 shortcut: "Ctrl + Alt + C"
-            shortcut2: ""
                 description: qsTr("Code")
             }
             ListElement {
                 shortcut: "Shift + Alt + 9"
-            shortcut2: ""
                 description: qsTr("Quote")
             }
             ListElement {
                 shortcut: "Shift + Alt + 8"
-            shortcut2: ""
                 description: qsTr("Unordered list")
             }
             ListElement {
                 shortcut: "Shift + Alt + 7"
-            shortcut2: ""
                 description: qsTr("Ordered list")
             }
             ListElement {
                 shortcut: "Shift + Alt + T"
-            shortcut2: ""
                 description: qsTr("Show formatting")
             }
             ListElement {
                 shortcut: "Shift + Alt + P"
-            shortcut2: ""
                 description: qsTr("Show preview")
             }
         }
+    ]
 
-    Rectangle {
+    Page {
-        id: windowRect
+        id: page
 
         anchors.fill: parent
 
-        color: JamiTheme.secondaryBackgroundColor
+        // make a list view of keyboardShortcutsModelList[selectionBar.currentIndex]
-
-        Rectangle {
-            id: titleRect
-
-            anchors.top: parent.top
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.topMargin: JamiTheme.titleRectMargin
-
-            height: titleName.contentHeight + JamiTheme.titleRectMargin
-            width: titleName.contentWidth + JamiTheme.titleRectMargin
-
-            color: JamiTheme.backgroundColor
-            radius: JamiTheme.primaryRadius
-
-            Text {
-                id: titleName
-
-                anchors.centerIn: parent
-
-                font.pointSize: JamiTheme.titleFontSize
-                text: {
-                    var modelId = UtilsAdapter.isRTL ? 4 - selectionBar.currentIndex : selectionBar.currentIndex
-                    switch (modelId) {
-                    case 0:
-                        return JamiStrings.generalSettingsTitle;
-                    case 1:
-                        return JamiStrings.conversationKeyboardShortcuts;
-                    case 2:
-                        return JamiStrings.callKeyboardShortcuts;
-                    case 3:
-                        return JamiStrings.settings;
-                    case 4:
-                        return JamiStrings.markdownKeyboardShortcuts;
-                    }
-                }
-                color: JamiTheme.textColor
-            }
-        }
-
         JamiListView {
-            id: keyboardShortCutList
+            id: keyboardShortcutsListView
 
-            anchors.top: titleRect.bottom
+            anchors.fill: parent
-            anchors.topMargin: 10
+            anchors.leftMargin: 48
-            anchors.horizontalCenter: parent.horizontalCenter
+            anchors.rightMargin: 48
 
-            width: parent.width
+            Keys.onUpPressed: keyboardShortcutsListView.decrementCurrentIndex()
-            height: parent.height - titleRect.height - JamiTheme.titleRectMargin - keyboardShortCutList.anchors.topMargin - selectionBar.height - selectionBar.anchors.bottomMargin
+            Keys.onDownPressed: keyboardShortcutsListView.incrementCurrentIndex()
 
-            model: {
+            // on key tab forceActiveFocus
-                var modelId = UtilsAdapter.isRTL ? 4 - selectionBar.currentIndex : selectionBar.currentIndex
+            Keys.onTabPressed: if (activeFocus)
-                switch (modelId) {
+                selectionBar.forceActiveFocus()
-                case 0:
+
-                    return keyboardGeneralShortcutsModel;
+            model: keyboardShortcutsModelList[selectionBar.currentIndex]
-                case 1:
+            spacing: 24
-                    return keyboardConversationShortcutsModel;
+            delegate: FocusScope {
-                case 2:
+                id: fs
-                    return keyboardCallsShortcutsModel;
+                height: childrenRect.height
-                case 3:
+                focus: true
-                    return keyboardSettingsShortcutsModel;
+
-                case 4:
+                // Accessible.role: Accessible.Button
-                    return keyboardMarkdownShortcutsModel;
+                Accessible.name: descriptionLabel.text
+                Accessible.description: shortcutLabel.text
+
+                RowLayout {
+                    width: keyboardShortcutsListView.width
+                    Label {
+                        id: descriptionLabel
+                        Layout.alignment: Qt.AlignLeft
+                        Layout.topMargin: 8
+                        Layout.leftMargin: 20
+                        text: description
+                        background: Rectangle {
+                            width: parent.width + 16
+                            height: parent.height + 16
+                            border.color: fs.activeFocus ? "darkblue" : "transparent"
+                            border.width: 2
+                            radius: 5
+                            anchors.centerIn: parent
+                        }
+                    }
+                    Label {
+                        id: shortcutLabel
+                        Layout.alignment: Qt.AlignRight
+                        Layout.topMargin: 8
+                        Layout.rightMargin: 20
+                        text: shortcut
+                        background: Rectangle {
+                            width: parent.width + 16
+                            height: parent.height + 16
+                            border.color: fs.activeFocus ? "darkblue" : "transparent"
+                            border.width: 2
+                            radius: 5
+                            anchors.centerIn: parent
+                        }
                     }
                 }
-            delegate: KeyboardShortcutKeyDelegate {
-                width: keyboardShortCutList.width
-                height: Math.max(JamiTheme.keyboardShortcutDelegateSize, implicitHeight)
             }
         }
 
-        TabBar {
+        header: TabBar {
             id: selectionBar
 
-            anchors.bottom: parent.bottom
+            readonly property real lambda: 12
-            anchors.bottomMargin: 10
-            anchors.horizontalCenter: parent.horizontalCenter
 
-            width: 96
+            spacing: lambda
-            height: JamiTheme.keyboardShortcutTabBarSize
+            padding: lambda
-            contentHeight: JamiTheme.keyboardShortcutTabBarSize
+
-            background: Rectangle {
+            focus: true
-                color: windowRect.color
-            }
 
             Repeater {
-                model: UtilsAdapter.isRTL ? ["5", "4", "3", "2", "1"] : ["1", "2", "3", "4", "5"]
+                model: [JamiStrings.generalSettingsTitle, JamiStrings.conversationKeyboardShortcuts, JamiStrings.callKeyboardShortcuts, JamiStrings.settings, JamiStrings.markdownKeyboardShortcuts]
 
-                KeyboardShortcutTabButton {
+                TabButton {
-                    currentIndex: selectionBar.currentIndex
+                    id: tabButton
+
+                    Accessible.name: modelData + "shortcuts category"
+
+                    Keys.onTabPressed: if (activeFocus)
+                        keyboardShortcutsListView.forceActiveFocus()
+
+                    contentItem: Text {
                         text: modelData
+                        color: JamiTheme.textColor
+                        font.pixelSize: JamiTheme.titleFontSize
+                        horizontalAlignment: Text.AlignHCenter
+                    }
+
+                    background: Rectangle {
+                        border.color: tabButton.activeFocus ? "darkblue" : "transparent"
+                        border.width: 2
+
+                        color: {
+                            if (tabButton.checked || tabButton.pressed)
+                                return JamiTheme.pressedButtonColor;
+                            if (tabButton.hovered)
+                                return JamiTheme.hoveredButtonColor;
+                            else
+                                return JamiTheme.normalButtonColor;
+                        }
+                        radius: JamiTheme.primaryRadius
+                    }
+                }
             }
         }
 
-            Component.onCompleted: {
+        footer: Item {
-                setCurrentIndex(UtilsAdapter.isRTL ? 4 : 0);
+            height: JamiTheme.keyboardShortcutTabBarSize
+            PageIndicator {
+                anchors.centerIn: parent
+                count: selectionBar.count
+                currentIndex: selectionBar.currentIndex
             }
         }
     }