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
mozilla-mobile · Nov 21, 2023 · 3c9de54 · 3c9de54
1 parent b3e84e4
commit 3c9de54
Showing 1 changed file with 61 additions and 62 deletions.
diff --git 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