Fix focus indicator

This improve considerably the keyboard navigation in the SystemTray.
But this is still not as good as the golden standard that is recommended
by this article: https://www.sarasoueidan.com/blog/focus-indicators/

Signed-off-by: Carl Schwan <carl@carlschwan.eu>

src/gui/tray/HeaderButton.qml

@@ -25,7 +25,7 @@ Button {
     Layout.preferredHeight: Style.trayWindowHeaderHeight
 
     background: Rectangle {
-        color: root.hovered ? "white" : "transparent"
+        color: root.hovered || root.visualFocus ? "white" : "transparent"
         opacity: 0.2
     }
 }

src/gui/tray/Window.qml

@@ -142,187 +142,180 @@ Window {
                     Accessible.name: qsTr("Current account")
                     Accessible.onPressAction: currentAccountButton.clicked()
 
-                    MouseArea {
-                        id: accountBtnMouseArea
-
-                        anchors.fill:   parent
-                        hoverEnabled:   Style.hoverEffectsEnabled
-
-                        // We call open() instead of popup() because we want to position it
-                        // exactly below the dropdown button, not the mouse
-                        onClicked: {
-                            syncPauseButton.text = Systray.syncIsPaused() ? qsTr("Resume sync for all") : qsTr("Pause sync for all")
-                            if (accountMenu.visible) {
-                                accountMenu.close()
-                            } else {
-                                accountMenu.open()
-                            }
+                    // We call open() instead of popup() because we want to position it
+                    // exactly below the dropdown button, not the mouse
+                    onClicked: {
+                        syncPauseButton.text = Systray.syncIsPaused() ? qsTr("Resume sync for all") : qsTr("Pause sync for all")
+                        if (accountMenu.visible) {
+                            accountMenu.close()
+                        } else {
+                            accountMenu.open()
                         }
+                    }
 
-                        Loader {
-                            id: userStatusSelectorDialogLoader
-                        }
+                    Loader {
+                        id: userStatusSelectorDialogLoader
+                    }
 
-                        Menu {
-                            id: accountMenu
+                    Menu {
+                        id: accountMenu
 
-                            // x coordinate grows towards the right
-                            // y coordinate grows towards the bottom
-                            x: (currentAccountButton.x + 2)
-                            y: (currentAccountButton.y + Style.trayWindowHeaderHeight + 2)
+                        // x coordinate grows towards the right
+                        // y coordinate grows towards the bottom
+                        x: (currentAccountButton.x + 2)
+                        y: (currentAccountButton.y + Style.trayWindowHeaderHeight + 2)
 
-                            width: (Style.currentAccountButtonWidth - 2)
-                            height: Math.min(implicitHeight, maxMenuHeight)
-                            closePolicy: Menu.CloseOnPressOutsideParent | Menu.CloseOnEscape
+                        width: (Style.currentAccountButtonWidth - 2)
+                        height: Math.min(implicitHeight, maxMenuHeight)
+                        closePolicy: Menu.CloseOnPressOutsideParent | Menu.CloseOnEscape
 
-                            background: Rectangle {
-                                border.color: Style.menuBorder
-                                radius: Style.currentAccountButtonRadius
-                            }
+                        background: Rectangle {
+                            border.color: Style.menuBorder
+                            radius: Style.currentAccountButtonRadius
+                        }
 
-                            onClosed: {
-                                // HACK: reload account Instantiator immediately by restting it - could be done better I guess
-                                // see also onVisibleChanged above
-                                userLineInstantiator.active = false;
-                                userLineInstantiator.active = true;
-                            }
+                        onClosed: {
+                            // HACK: reload account Instantiator immediately by restting it - could be done better I guess
+                            // see also onVisibleChanged above
+                            userLineInstantiator.active = false;
+                            userLineInstantiator.active = true;
+                        }
 
-                            Instantiator {
-                                id: userLineInstantiator
-                                model: UserModel
-                                delegate: UserLine {
-                                    onShowUserStatusSelectorDialog: {
-                                        userStatusSelectorDialogLoader.source = "qrc:/qml/src/gui/UserStatusSelectorDialog.qml"
-                                        userStatusSelectorDialogLoader.item.title = qsTr("Set user status")
-                                        userStatusSelectorDialogLoader.item.model.load(index)
-                                        userStatusSelectorDialogLoader.item.show()
-                                    }
+                        Instantiator {
+                            id: userLineInstantiator
+                            model: UserModel
+                            delegate: UserLine {
+                                onShowUserStatusSelectorDialog: {
+                                    userStatusSelectorDialogLoader.source = "qrc:/qml/src/gui/UserStatusSelectorDialog.qml"
+                                    userStatusSelectorDialogLoader.item.title = qsTr("Set user status")
+                                    userStatusSelectorDialogLoader.item.model.load(index)
+                                    userStatusSelectorDialogLoader.item.show()
                                 }
-                                onObjectAdded: accountMenu.insertItem(index, object)
-                                onObjectRemoved: accountMenu.removeItem(object)
                             }
+                            onObjectAdded: accountMenu.insertItem(index, object)
+                            onObjectRemoved: accountMenu.removeItem(object)
+                        }
 
-                            MenuItem {
-                                id: addAccountButton
-                                height: Style.addAccountButtonHeight
-                                hoverEnabled: true
-
-                                background: Item {
-                                    height: parent.height
-                                    width: parent.menu.width
-                                    Rectangle {
-                                        anchors.fill: parent
-                                        anchors.margins: 1
-                                        color: parent.parent.hovered ? Style.lightHover : "transparent"
-                                    }
-                                }
+                        MenuItem {
+                            id: addAccountButton
+                            height: Style.addAccountButtonHeight
+                            hoverEnabled: true
 
-                                RowLayout {
+                            background: Item {
+                                height: parent.height
+                                width: parent.menu.width
+                                Rectangle {
                                     anchors.fill: parent
-                                    spacing: 0
-
-                                    Image {
-                                        Layout.leftMargin: 12
-                                        verticalAlignment: Qt.AlignCenter
-                                        source: "qrc:///client/theme/black/add.svg"
-                                        sourceSize.width: Style.headerButtonIconSize
-                                        sourceSize.height: Style.headerButtonIconSize
-                                    }
-                                    Label {
-                                        Layout.leftMargin: 14
-                                        text: qsTr("Add account")
-                                        color: "black"
-                                        font.pixelSize: Style.topLinePixelSize
-                                    }
-                                    // Filler on the right
-                                    Item {
-                                        Layout.fillWidth: true
-                                        Layout.fillHeight: true
-                                    }
+                                    anchors.margins: 1
+                                    color: parent.parent.hovered || parent.parent.visualFocus ? Style.lightHover : "transparent"
                                 }
-                                onClicked: UserModel.addAccount()
-
-                                Accessible.role: Accessible.MenuItem
-                                Accessible.name: qsTr("Add new account")
-                                Accessible.onPressAction: addAccountButton.clicked()
                             }
 
-                            MenuSeparator {
-                                contentItem: Rectangle {
-                                    implicitHeight: 1
-                                    color: Style.menuBorder
+                            RowLayout {
+                                anchors.fill: parent
+                                spacing: 0
+
+                                Image {
+                                    Layout.leftMargin: 12
+                                    verticalAlignment: Qt.AlignCenter
+                                    source: "qrc:///client/theme/black/add.svg"
+                                    sourceSize.width: Style.headerButtonIconSize
+                                    sourceSize.height: Style.headerButtonIconSize
+                                }
+                                Label {
+                                    Layout.leftMargin: 14
+                                    text: qsTr("Add account")
+                                    color: "black"
+                                    font.pixelSize: Style.topLinePixelSize
+                                }
+                                // Filler on the right
+                                Item {
+                                    Layout.fillWidth: true
+                                    Layout.fillHeight: true
                                 }
                             }
+                            onClicked: UserModel.addAccount()
 
-                            MenuItem {
-                                id: syncPauseButton
-                                font.pixelSize: Style.topLinePixelSize
-                                hoverEnabled: true
-                                onClicked: Systray.pauseResumeSync()
-
-                                background: Item {
-                                    height: parent.height
-                                    width: parent.menu.width
-                                    Rectangle {
-                                        anchors.fill: parent
-                                        anchors.margins: 1
-                                        color: parent.parent.hovered ? Style.lightHover : "transparent"
-                                    }
-                                }
+                            Accessible.role: Accessible.MenuItem
+                            Accessible.name: qsTr("Add new account")
+                            Accessible.onPressAction: addAccountButton.clicked()
+                        }
 
-                                Accessible.role: Accessible.MenuItem
-                                Accessible.name: Systray.syncIsPaused() ? qsTr("Resume sync for all") : qsTr("Pause sync for all")
-                                Accessible.onPressAction: syncPauseButton.clicked()
+                        MenuSeparator {
+                            contentItem: Rectangle {
+                                implicitHeight: 1
+                                color: Style.menuBorder
                             }
+                        }
 
-                            MenuItem {
-                                id: settingsButton
-                                text: qsTr("Settings")
-                                font.pixelSize: Style.topLinePixelSize
-                                hoverEnabled: true
-                                onClicked: Systray.openSettings()
-
-                                background: Item {
-                                    height: parent.height
-                                    width: parent.menu.width
-                                    Rectangle {
-                                        anchors.fill: parent
-                                        anchors.margins: 1
-                                        color: parent.parent.hovered ? Style.lightHover : "transparent"
-                                    }
-                                }
+                        MenuItem {
+                            id: syncPauseButton
+                            font.pixelSize: Style.topLinePixelSize
+                            hoverEnabled: true
+                            onClicked: Systray.pauseResumeSync()
 
-                                Accessible.role: Accessible.MenuItem
-                                Accessible.name: text
-                                Accessible.onPressAction: settingsButton.clicked()
+                            background: Item {
+                                height: parent.height
+                                width: parent.menu.width
+                                Rectangle {
+                                    anchors.fill: parent
+                                    anchors.margins: 1
+                                    color: parent.parent.hovered || parent.parent.visualFocus ? Style.lightHover : "transparent"
+                                }
                             }
 
-                            MenuItem {
-                                id: exitButton
-                                text: qsTr("Exit");
-                                font.pixelSize: Style.topLinePixelSize
-                                hoverEnabled: true
-                                onClicked: Systray.shutdown()
-
-                                background: Item {
-                                    height: parent.height
-                                    width: parent.menu.width
-                                    Rectangle {
-                                        anchors.fill: parent
-                                        anchors.margins: 1
-                                        color: parent.parent.hovered ? Style.lightHover : "transparent"
-                                    }
+                            Accessible.role: Accessible.MenuItem
+                            Accessible.name: Systray.syncIsPaused() ? qsTr("Resume sync for all") : qsTr("Pause sync for all")
+                            Accessible.onPressAction: syncPauseButton.clicked()
+                        }
+
+                        MenuItem {
+                            id: settingsButton
+                            text: qsTr("Settings")
+                            font.pixelSize: Style.topLinePixelSize
+                            hoverEnabled: true
+                            onClicked: Systray.openSettings()
+
+                            background: Item {
+                                height: parent.height
+                                width: parent.menu.width
+                                Rectangle {
+                                    anchors.fill: parent
+                                    anchors.margins: 1
+                                    color: parent.parent.hovered || parent.parent.visualFocus ? Style.lightHover : "transparent"
                                 }
+                            }
 
-                                Accessible.role: Accessible.MenuItem
-                                Accessible.name: text
-                                Accessible.onPressAction: exitButton.clicked()
+                            Accessible.role: Accessible.MenuItem
+                            Accessible.name: text
+                            Accessible.onPressAction: settingsButton.clicked()
+                        }
+
+                        MenuItem {
+                            id: exitButton
+                            text: qsTr("Exit");
+                            font.pixelSize: Style.topLinePixelSize
+                            hoverEnabled: true
+                            onClicked: Systray.shutdown()
+
+                            background: Item {
+                                height: parent.height
+                                width: parent.menu.width
+                                Rectangle {
+                                    anchors.fill: parent
+                                    anchors.margins: 1
+                                    color: parent.parent.hovered || parent.parent.visualFocus ? Style.lightHover : "transparent"
+                                }
                             }
+
+                            Accessible.role: Accessible.MenuItem
+                            Accessible.name: text
+                            Accessible.onPressAction: exitButton.clicked()
                         }
                     }
 
                     background: Rectangle {
-                        color: accountBtnMouseArea.containsMouse ? "white" : "transparent"
+                        color: parent.hovered || parent.visualFocus ? "white" : "transparent"
                         opacity: 0.2
                     }