accessibility: fix accountlist

Allow to naviguate with keyboard inside of the accountlist and label
the accounts properly

GitLab: #2049

Change-Id: I53e5e97f344df86d6390ab444a642dcabea61cde

src/app/MainApplicationWindow.qml

@@ -41,15 +41,18 @@ ApplicationWindow {
 
     onActiveFocusItemChanged: {
         focusOverlay.margin = -5;
-        if (activeFocusItem && ((activeFocusItem.focusReason === Qt.TabFocusReason) || (activeFocusItem.focusReason === Qt.BacktabFocusReason))) {
-            if (activeFocusItem.focusOnChild) {
-                focusOverlay.parent = activeFocusItem.parent;
-            } else if (activeFocusItem.dontShowFocusState) {
-                focusOverlay.parent = null;
-            } else {
-                if (activeFocusItem.showFocusMargin)
-                    focusOverlay.margin = 0;
-                focusOverlay.parent = activeFocusItem;
+        if (activeFocusItem) {
+            const goodReasonToChangeFocus = activeFocusItem instanceof ItemDelegate || ((activeFocusItem.focusReason === Qt.TabFocusReason) || (activeFocusItem.focusReason === Qt.BacktabFocusReason));
+            if (goodReasonToChangeFocus) {
+                if (activeFocusItem.focusOnChild) {
+                    focusOverlay.parent = activeFocusItem.parent;
+                } else if (activeFocusItem.dontShowFocusState) {
+                    focusOverlay.parent = null;
+                } else {
+                    if (activeFocusItem.showFocusMargin)
+                        focusOverlay.margin = 0;
+                    focusOverlay.parent = activeFocusItem;
+                }
             }
         } else {
             focusOverlay.parent = null;

src/app/mainview/components/AccountComboBoxPopup.qml

@@ -85,7 +85,6 @@ Popup {
                         anchors.rightMargin: 15
                         spacing: 10
 
-
                         Avatar {
                             id: avatar
                             objectName: "accountComboBoxPopupAvatar"
@@ -164,8 +163,13 @@ Popup {
                         imageColor: hovered ? JamiTheme.textColor : JamiTheme.buttonTintedGreyHovered
                         hoveredColor: JamiTheme.hoverColor
 
+                        Accessible.role: Accessible.Button
+                        Accessible.name: toolTipText
+                        Accessible.description: JamiStrings.qrCodeExplanation
+
                         onClicked: {
                             viewCoordinator.presentDialog(appWindow, "mainview/components/WelcomePageQrDialog.qml");
+                            listView.currentIndex = -1;
                             root.close();
                         }
                     }
@@ -184,34 +188,40 @@ Popup {
 
                         toolTipText: !inSettings ? JamiStrings.openSettings : JamiStrings.closeSettings
 
+                        Accessible.role: Accessible.Button
+                        Accessible.name: toolTipText
+                        KeyNavigation.backtab: shareButton
+
                         onClicked: {
                             !inSettings ? viewCoordinator.present("SettingsView") : viewCoordinator.dismiss("SettingsView");
                             root.close();
                         }
-
-                        KeyNavigation.tab: addAccountItem
                     }
                 }
             }
         }
 
-        Rectangle{
-            Layout.alignment: Qt.AlignHCenter
-            height: 1
-            Layout.fillWidth: true
-            Layout.leftMargin: 15
-            Layout.rightMargin: 15
-            color: JamiTheme.smartListHoveredColor
-        }
-
-
-        JamiListView {
+        ListView {
             id: listView
             objectName: "accountList"
+            Accessible.name: JamiStrings.accountList
+            Accessible.role: Accessible.List
+            Accessible.description: JamiStrings.accountListDescription
+
+            layer.mipmap: false
+            clip: true
+            maximumFlickVelocity: 1024
+
+            // HACK: remove after migration to Qt 6.7+
+            boundsBehavior: Flickable.StopAtBounds
 
             Layout.fillHeight: true
             Layout.preferredWidth: parent.width
 
+            activeFocusOnTab: true
+            focus: true
+            currentIndex: -1 // Set to -1 to avoid initial highlighting
+
             model: SortFilterProxyModel {
                 sourceModel: AccountListModel
                 filters: ValueFilter {
@@ -221,10 +231,35 @@ Popup {
                 }
             }
 
+            highlight: Rectangle {
+                color: "transparent"
+                border.color: JamiTheme.primaryBackgroundColor
+                border.width: 2
+                radius: 5
+
+                Rectangle {
+                    anchors.fill: parent
+                    color: JamiTheme.hoverColor
+                    radius: 5
+                    opacity: 0.3
+                }
+            }
+
             delegate: AccountItemDelegate {
                 height: JamiTheme.accountListItemHeight
                 width: root.width
 
+                Accessible.role: Accessible.ListItem
+                Accessible.name: Alias || Username
+                Accessible.description: JamiStrings.switchToAccount
+
+                // Update the background to show focus state
+                background: Rectangle {
+                    color: parent.activeFocus || parent.hovered ? JamiTheme.hoverColor : "transparent"
+                    opacity: parent.activeFocus ? 0.3 : 1
+                    radius: 5
+                }
+
                 onClicked: {
                     root.close();
                     // This is a workaround for the synchronicity issue
@@ -235,7 +270,7 @@ Popup {
             }
         }
 
-        Rectangle{
+        Rectangle {
             Layout.alignment: Qt.AlignHCenter
             height: 1
             Layout.fillWidth: true
@@ -248,19 +283,24 @@ Popup {
             id: addAccountItem
 
             Layout.preferredHeight: 45
-            Layout.preferredWidth: parent.width -10
+            Layout.preferredWidth: parent.width - 10
             Layout.alignment: Qt.AlignLeft
             Layout.leftMargin: 5
 
-            Accessible.name: JamiStrings.addAccount
+            focusPolicy: Qt.StrongFocus
+            Accessible.name: addAccountText.text
             Accessible.role: Accessible.Button
 
+            KeyNavigation.tab: manageAccountItem
+            KeyNavigation.up: listView
+            KeyNavigation.down: manageAccountItem
+
             background: Rectangle {
                 color: addAccountItem.hovered ? JamiTheme.hoverColor : JamiTheme.accountComboBoxBackgroundColor
                 radius: 5
             }
 
-            RowLayout{
+            RowLayout {
                 anchors.left: parent.left
                 anchors.leftMargin: 18
                 anchors.verticalCenter: parent.verticalCenter
@@ -274,6 +314,7 @@ Popup {
                 }
 
                 Text {
+                    id: addAccountText
                     Layout.alignment: Qt.AlignLeft
                     text: JamiStrings.addAccount
                     textFormat: TextEdit.PlainText
@@ -285,18 +326,21 @@ Popup {
                 root.close();
                 viewCoordinator.present("WizardView");
             }
-
-            KeyNavigation.tab: manageAccountItem
         }
 
         ItemDelegate {
             id: manageAccountItem
 
+            focusPolicy: Qt.StrongFocus
             Accessible.role: Accessible.Button
-            Accessible.name: JamiStrings.manageAccount
+            Accessible.name: manageAccountText.text
+
+            KeyNavigation.backtab: addAccountItem
+            KeyNavigation.tab: shareButton
+            KeyNavigation.up: addAccountItem
 
             Layout.preferredHeight: 45
-            Layout.preferredWidth: parent.width-10
+            Layout.preferredWidth: parent.width - 10
             Layout.leftMargin: 5
             Layout.bottomMargin: 5
 
@@ -305,7 +349,7 @@ Popup {
                 radius: 5
             }
 
-            RowLayout{
+            RowLayout {
                 anchors.left: parent.left
                 anchors.leftMargin: 18
                 anchors.verticalCenter: parent.verticalCenter
@@ -319,8 +363,8 @@ Popup {
                     color: manageAccountItem.hovered ? JamiTheme.textColor : JamiTheme.buttonTintedGreyHovered
                 }
                 Text {
+                    id: manageAccountText
                     text: JamiStrings.manageAccount
-
                     textFormat: TextEdit.PlainText
                     color: JamiTheme.textColor
                     font.pointSize: JamiTheme.textFontSize
@@ -328,7 +372,7 @@ Popup {
             }
             onClicked: {
                 root.close();
-                viewCoordinator.present("SettingsView")
+                viewCoordinator.present("SettingsView");
             }
         }
     }

src/app/mainview/components/AccountItemDelegate.qml

@@ -28,17 +28,24 @@ ItemDelegate {
     height: JamiTheme.accountListItemHeight
 
     background: Rectangle {
-        width: root.width - 10
-        anchors.horizontalCenter: parent.horizontalCenter
+        anchors {
+            left: parent ? parent.left : undefined
+            right: parent ? parent.right : undefined
+            leftMargin: 5
+            rightMargin: 5
+        }
         radius: 5
 
-        Rectangle{
+        Rectangle {
             id: separationLine
-
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.top: parent.top
+            anchors {
+                left: parent.left
+                right: parent.right
+                top: parent.top
+                leftMargin: 10
+                rightMargin: 10
+            }
             height: 1
-            width: parent.width - 20
             color: JamiTheme.hoverColor
             visible: index !== 0
         }

src/app/net/jami/Constants/JamiStrings.qml

@@ -924,4 +924,10 @@ Item {
     property string spellCheckDownloadFailed: qsTr("Download failed for dictionary '%1'")
     property string showInstalledDictionaries: qsTr("Show installed")
     property string showInstalledDictionariesDescription: qsTr("Only show dictionaries that are currently installed")
+
+    // Accessibility
+    property string switchToAccount: qsTr("Press enter to switch to this account")
+    property string qrCodeExplanation: qsTr("Display your QR code to allow other users to scan it and add you as a contact")
+    property string accountList: qsTr("Account list")
+    property string accountListDescription: qsTr("Use arrows to switch between available account")
 }