From 3c9de54c048fb2fa0b64c5d4fc234cd8fedeac4a Mon Sep 17 00:00:00 2001
From: vinocher <137354616+vinocher@users.noreply.github.com>
Date: Tue, 21 Nov 2023 10:07:38 -0800
Subject: [PATCH] VPN-5783: Change IPInfoPanel's a11y navigation order so that
 content is after the close button (#8596)

* Change IPInfoPanel's a11y navigation order so that content is after the close button

* CR comments

* Correct the navigation order of other elements in box
---
 .../home/controller/ControllerView.qml        | 123 +++++++++---------
 1 file changed, 61 insertions(+), 62 deletions(-)

diff --git a/src/ui/screens/home/controller/ControllerView.qml b/src/ui/screens/home/controller/ControllerView.qml
index 9554f85928..0d862b5eff 100644
--- a/src/ui/screens/home/controller/ControllerView.qml
+++ b/src/ui/screens/home/controller/ControllerView.qml
@@ -288,7 +288,7 @@ Item {
 
             PropertyChanges {
                 target: connectionInfoToggleButton
-                visible: true
+                visible: !ipInfoPanel.isOpen
             }
 
             PropertyChanges {
@@ -517,6 +517,66 @@ Item {
         }
     }
 
+    MZIconButton {
+        id: ipInfoToggleButton
+        objectName: "ipInfoToggleButton"
+
+        property var connectionInfoCloseText: MZI18n.GlobalClose
+
+        anchors {
+            right: parent.right
+            rightMargin: MZTheme.theme.windowMargin / 2
+            top: parent.top
+            topMargin: MZTheme.theme.windowMargin / 2
+        }
+        accessibleName: ipInfoPanel.isOpen
+            ? connectionInfoCloseText
+            : MZI18n.ConnectionInfoConnectionInformation
+        Accessible.ignored: !enabled || !visible
+        buttonColorScheme: MZTheme.theme.iconButtonDarkBackground
+        enabled: visible && VPNConnectionHealth.stability !== VPNConnectionHealth.NoSignal
+        opacity: visible ? 1 : 0
+        visible: (VPNController.state === VPNController.StateOn || VPNController.state === VPNController.StateSilentSwitching)
+            && !connectionInfoScreen.isOpen
+            && !connectionInfoScreen.isTransitioning
+        z: 1
+        onClicked: {
+            ipInfoPanel.isOpen = !ipInfoPanel.isOpen;
+
+            if (ipInfoPanel.isOpen) {
+                Glean.interaction.openConnectionInfoSelected.record({
+                    screen: "main",
+                });
+            } else {
+                Glean.interaction.closeSelected.record({
+                    screen: "connection_info",
+                });
+            }
+        }
+
+        Image {
+            property int iconSize: ipInfoPanel.isOpen
+                ? MZTheme.theme.iconSize
+                : MZTheme.theme.iconSize * 1.5
+
+            anchors.centerIn: ipInfoToggleButton
+            source: ipInfoPanel.isOpen
+                ? "qrc:/nebula/resources/close-white.svg"
+                : "qrc:/ui/resources/connection-info.svg"
+            sourceSize {
+                height: iconSize
+                width: iconSize
+            }
+            opacity: parent.enabled ? 1 : .6
+        }
+
+        Behavior on opacity {
+            NumberAnimation {
+                duration: 300
+            }
+        }
+    }
+
     Column {
         id: col
 
@@ -640,7 +700,6 @@ Item {
         opacity: ipInfoPanel.isOpen ? 1 : 0
         property int previousOpacity: opacity
         visible: opacity > 0
-        z: 1
 
         onOpacityChanged: {
             // We only want to record this event when the opacity has _just_ changed.
@@ -671,66 +730,6 @@ Item {
         }
     }
 
-    MZIconButton {
-        id: ipInfoToggleButton
-        objectName: "ipInfoToggleButton"
-
-        property var connectionInfoCloseText: MZI18n.GlobalClose
-
-        anchors {
-            right: parent.right
-            rightMargin: MZTheme.theme.windowMargin / 2
-            top: parent.top
-            topMargin: MZTheme.theme.windowMargin / 2
-        }
-        accessibleName: ipInfoPanel.isOpen
-            ? connectionInfoCloseText
-            : MZI18n.ConnectionInfoConnectionInformation
-        buttonColorScheme: MZTheme.theme.iconButtonDarkBackground
-        enabled: visible && VPNConnectionHealth.stability !== VPNConnectionHealth.NoSignal
-        opacity: visible ? 1 : 0
-        visible: connectionInfoToggleButton.visible
-            && !connectionInfoScreen.isOpen
-            && !connectionInfoScreen.isTransitioning
-        z: 1
-        onClicked: {
-            ipInfoPanel.isOpen = !ipInfoPanel.isOpen;
-
-            if (ipInfoPanel.isOpen) {
-                Glean.interaction.openConnectionInfoSelected.record({
-                    screen: "main",
-                });
-            } else {
-                Glean.interaction.closeSelected.record({
-                    screen: "connection_info",
-                });
-            }
-        }
-        Accessible.ignored: !visible
-
-        Image {
-            property int iconSize: ipInfoPanel.isOpen
-                ? MZTheme.theme.iconSize
-                : MZTheme.theme.iconSize * 1.5
-
-            anchors.centerIn: ipInfoToggleButton
-            source: ipInfoPanel.isOpen
-                ? "qrc:/nebula/resources/close-white.svg"
-                : "qrc:/ui/resources/connection-info.svg"
-            sourceSize {
-                height: iconSize
-                width: iconSize
-            }
-            opacity: parent.enabled ? 1 : .6
-        }
-
-        Behavior on opacity {
-            NumberAnimation {
-                duration: 300
-            }
-        }
-    }
-
     ConnectionInfoScreen {
         id: connectionInfoScreen
         isOpen: box.connectionInfoScreenVisible