From 1f4e337cc07efe3ad67b49d8bbc9c8812da9f384 Mon Sep 17 00:00:00 2001
From: rating89us <45968869+rating89us@users.noreply.github.com>
Date: Sat, 3 Jul 2021 02:31:09 +0200
Subject: [PATCH] WizardLanguage: navigate with keyboard; enable accessibility

---
 components/LanguageButton.qml |  9 ++++++
 components/TextPlain.qml      |  8 ++++++
 wizard/WizardLanguage.qml     | 53 +++++++++++++++++++++++++++++++++--
 3 files changed, 68 insertions(+), 2 deletions(-)

diff --git a/components/LanguageButton.qml b/components/LanguageButton.qml
index adbd0a39..3ed63d5f 100644
--- a/components/LanguageButton.qml
+++ b/components/LanguageButton.qml
@@ -36,6 +36,15 @@ import "../components" as MoneroComponents
 Item {
     implicitHeight: layout.height
     implicitWidth: layout.width
+    Keys.onReturnPressed: appWindow.toggleLanguageView()
+    Keys.onEnterPressed: appWindow.toggleLanguageView()
+
+    Rectangle {
+        width: parent.width * 1.25
+        height: parent.height
+        anchors.centerIn: parent
+        color: parent.focus ? MoneroComponents.Style.titleBarButtonHoverColor : "transparent"
+    }
 
     RowLayout {
         id: layout
diff --git a/components/TextPlain.qml b/components/TextPlain.qml
index 1dfe32fd..ed6b7977 100644
--- a/components/TextPlain.qml
+++ b/components/TextPlain.qml
@@ -21,6 +21,14 @@ Text {
     font.pixelSize: 14
     textFormat: Text.PlainText
 
+    Rectangle {
+        width: root.contentWidth
+        height: root.height
+        anchors.left: parent.left
+        anchors.top: parent.top
+        color: root.focus ? MoneroComponents.Style.titleBarButtonHoverColor : "transparent"
+    }
+
     MoneroEffects.ColorTransition {
         enabled: root.themeTransition
         themeTransition: root.themeTransition
diff --git a/wizard/WizardLanguage.qml b/wizard/WizardLanguage.qml
index 3f7ce3b9..525c2ee7 100644
--- a/wizard/WizardLanguage.qml
+++ b/wizard/WizardLanguage.qml
@@ -40,6 +40,7 @@ Rectangle {
     color: "transparent"
 
     property alias pageHeight: pageRoot.height
+    property alias pageRoot: pageRoot
     property string viewName: "wizardLanguage"
 
     ColumnLayout {
@@ -48,6 +49,7 @@ Rectangle {
         anchors.left: parent.left
         anchors.right: parent.right
         spacing: 30
+        KeyNavigation.tab: textWelcome
 
         Rectangle {
             // some margins for the titlebar
@@ -73,12 +75,25 @@ Rectangle {
             leftPadding: 0
             topPadding: 0
 
+            Accessible.role: Accessible.StaticText
+            Accessible.name: qsTr("Welcome to Monero") + translationManager.emptyString;
+            KeyNavigation.up: versionText
+            KeyNavigation.backtab: versionText
+            KeyNavigation.down: globe
+            KeyNavigation.tab: globe
+
             Behavior on opacity {
                 NumberAnimation {
                     duration: 350;
                     easing.type: Easing.InCubic;
                 }
             }
+
+            Rectangle {
+                width: textWelcome.width
+                height: textWelcome.height
+                color: textWelcome.focus ? MoneroComponents.Style.titleBarButtonHoverColor : "transparent"
+            }
         }
 
         Image {
@@ -104,6 +119,19 @@ Rectangle {
             property real animFrom: 0
             property real animTo: 360
 
+            Accessible.role: Accessible.Graphic
+            Accessible.name: qsTr("Globe with country flags rotating") + translationManager.emptyString;
+            KeyNavigation.up: textWelcome
+            KeyNavigation.backtab: textWelcome
+            KeyNavigation.down: btnLanguage
+            KeyNavigation.tab: btnLanguage
+
+            Rectangle {
+                width: globe.width
+                height: globe.height
+                color: globe.focus ? MoneroComponents.Style.titleBarButtonHoverColor : "transparent"
+            }
+
             Rectangle {
                 visible: !globe.small
                 anchors.left: parent.left
@@ -152,19 +180,33 @@ Rectangle {
             Layout.fillWidth: true
             columnSpacing: 20
 
-            MoneroComponents.LanguageButton { }
+            MoneroComponents.LanguageButton {
+                id: btnLanguage
+                Accessible.role: Accessible.Button
+                Accessible.name: qsTr("Selected language ") + persistentSettings.language  + translationManager.emptyString
+                KeyNavigation.up: globe
+                KeyNavigation.backtab: globe
+                KeyNavigation.down: btnContinue
+                KeyNavigation.tab: btnContinue
+            }
 
             MoneroComponents.StandardButton {
                 id: btnContinue
                 Layout.minimumWidth: 150
                 text: qsTr("Continue") + translationManager.emptyString
-
+                Accessible.role: Accessible.Button
+                Accessible.name: qsTr("Continue") + translationManager.emptyString
+                KeyNavigation.up: btnLanguage
+                KeyNavigation.backtab: btnLanguage
+                KeyNavigation.down: versionText
+                KeyNavigation.tab: versionText
                 onClicked: {
                     wizardController.wizardStackView.backTransition = false;
                     if(wizardController.skipModeSelection){
                         wizardStateView.state = "wizardHome"
                     } else {
                         wizardStateView.state = "wizardModeSelection"
+                        wizardStateView.wizardModeSelectionView.pageRoot.forceActiveFocus();
                     }
                 }
             }
@@ -186,6 +228,12 @@ Rectangle {
             font.family: MoneroComponents.Style.fontRegular.name
             color: MoneroComponents.Style.defaultFontColor
             text: Version.GUI_VERSION + " (Qt " + qtRuntimeVersion + ")"
+            Accessible.role: Accessible.StaticText
+            Accessible.name: qsTr("Monero GUI version") + " " + text + translationManager.emptyString;
+            KeyNavigation.up: btnContinue
+            KeyNavigation.backtab: btnContinue
+            KeyNavigation.down: textWelcome
+            KeyNavigation.tab: textWelcome
 
             Behavior on opacity {
                 NumberAnimation {
@@ -213,6 +261,7 @@ Rectangle {
         delay(versionTimer, 350, function() {
             versionText.opacity = 1;
         });
+        pageRoot.forceActiveFocus();
     }
 
     function delay(timer, interval, cb) {