Merge branch 'connection-panel-ax'

4 files changed, 140 insertions, 65 deletions

diff --git a/ios/MullvadVPN.xcodeproj/project.pbxproj b/ios/MullvadVPN.xcodeproj/project.pbxproj
index ce7f089fc0..107af7f8fe 100644
--- a/ios/MullvadVPN.xcodeproj/project.pbxproj
+++ b/ios/MullvadVPN.xcodeproj/project.pbxproj
@@ -220,6 +220,7 @@
 		58F3C0A4249CB069003E76BE /* HeaderBarView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 58F3C0A3249CB069003E76BE /* HeaderBarView.swift */; };
 		58F3C0A624A50157003E76BE /* relays.json in Resources */ = {isa = PBXBuildFile; fileRef = 58F3C0A524A50155003E76BE /* relays.json */; };
 		58F3C0A724A50C02003E76BE /* relays.json in Resources */ = {isa = PBXBuildFile; fileRef = 58F3C0A524A50155003E76BE /* relays.json */; };
+		58F5590F2697002100F630D0 /* ConnectionPanel.strings in Resources */ = {isa = PBXBuildFile; fileRef = 58F559072697002100F630D0 /* ConnectionPanel.strings */; };
 		58F61F4F2692F21C00DCFC2B /* WireguardKeys.strings in Resources */ = {isa = PBXBuildFile; fileRef = 58F61F4D2692F21C00DCFC2B /* WireguardKeys.strings */; };
 		58F7CA882692E34000FC59FD /* WireguardKeysContentView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 58F7CA872692E34000FC59FD /* WireguardKeysContentView.swift */; };
 		58F840AF2464382C0044E708 /* KeychainItemRevision.swift in Sources */ = {isa = PBXBuildFile; fileRef = 58F840AE2464382C0044E708 /* KeychainItemRevision.swift */; };
@@ -434,6 +435,7 @@
 		58F19E34228C15BA00C7710B /* SpinnerActivityIndicatorView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SpinnerActivityIndicatorView.swift; sourceTree = "<group>"; };
 		58F3C0A3249CB069003E76BE /* HeaderBarView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = HeaderBarView.swift; sourceTree = "<group>"; };
 		58F3C0A524A50155003E76BE /* relays.json */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.json; path = relays.json; sourceTree = "<group>"; };
+		58F559082697002100F630D0 /* en */ = {isa = PBXFileReference; lastKnownFileType = text.plist.strings; name = en; path = en.lproj/ConnectionPanel.strings; sourceTree = "<group>"; };
 		58F61F4E2692F21C00DCFC2B /* en */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.strings; name = en; path = en.lproj/WireguardKeys.strings; sourceTree = "<group>"; };
 		58F7CA872692E34000FC59FD /* WireguardKeysContentView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = WireguardKeysContentView.swift; sourceTree = "<group>"; };
 		58F840AE2464382C0044E708 /* KeychainItemRevision.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = KeychainItemRevision.swift; sourceTree = "<group>"; };
@@ -539,6 +541,7 @@
 			isa = PBXGroup;
 			children = (
 				582CFEE526945FC30072883A /* AppStoreSubscriptions.strings */,
+				58F559072697002100F630D0 /* ConnectionPanel.strings */,
 				587B7543266922BF00DEF7E9 /* Localizable.strings */,
 				58F61F4D2692F21C00DCFC2B /* WireguardKeys.strings */,
 			);
@@ -947,6 +950,7 @@
 				58F3C0A624A50157003E76BE /* relays.json in Resources */,
 				58727283265D173C00F315B2 /* LaunchScreen.storyboard in Resources */,
 				586ADD4723FC13F400CE9E87 /* countries.geo.json in Resources */,
+				58F5590F2697002100F630D0 /* ConnectionPanel.strings in Resources */,
 				58CE5E6B224146210008646E /* Assets.xcassets in Resources */,
 				5883A09E266A5AF7003EFFCB /* Localizable.strings in Resources */,
 				582CFEE726945FC30072883A /* AppStoreSubscriptions.strings in Resources */,
@@ -1264,6 +1268,14 @@
 			name = Localizable.strings;
 			sourceTree = "<group>";
 		};
+		58F559072697002100F630D0 /* ConnectionPanel.strings */ = {
+			isa = PBXVariantGroup;
+			children = (
+				58F559082697002100F630D0 /* en */,
+			);
+			name = ConnectionPanel.strings;
+			sourceTree = "<group>";
+		};
 		58F61F4D2692F21C00DCFC2B /* WireguardKeys.strings */ = {
 			isa = PBXVariantGroup;
 			children = (
diff --git a/ios/MullvadVPN/ConnectViewController.swift b/ios/MullvadVPN/ConnectViewController.swift
index bceb172b34..d0587ccea1 100644
--- a/ios/MullvadVPN/ConnectViewController.swift
+++ b/ios/MullvadVPN/ConnectViewController.swift
@@ -80,7 +80,6 @@ class ConnectViewController: UIViewController, MKMapViewDelegate, RootContainmen
     override func viewDidLoad() {
         super.viewDidLoad()
 
-        mainContentView.connectionPanel.collapseButton.addTarget(self, action: #selector(handleConnectionPanelButton(_:)), for: .touchUpInside)
         mainContentView.connectButton.addTarget(self, action: #selector(handleConnect(_:)), for: .touchUpInside)
         mainContentView.splitDisconnectButton.primaryButton.addTarget(self, action: #selector(handleDisconnect(_:)), for: .touchUpInside)
         mainContentView.splitDisconnectButton.secondaryButton.addTarget(self, action: #selector(handleReconnect(_:)), for: .touchUpInside)
@@ -193,7 +192,7 @@ class ConnectViewController: UIViewController, MKMapViewDelegate, RootContainmen
                 outAddress: nil
             )
             mainContentView.connectionPanel.isHidden = false
-            mainContentView.connectionPanel.collapseButton.setTitle(connectionInfo.hostname, for: .normal)
+            mainContentView.connectionPanel.connectedRelayName = connectionInfo.hostname
 
         case .connecting, .disconnected, .disconnecting:
             mainContentView.countryLabel.attributedText = attributedStringForLocation(string: " ")
@@ -289,10 +288,6 @@ class ConnectViewController: UIViewController, MKMapViewDelegate, RootContainmen
 
     // MARK: - Actions
 
-    @objc func handleConnectionPanelButton(_ sender: Any) {
-        mainContentView.connectionPanel.toggleConnectionInfoVisibility()
-    }
-
     @objc func handleConnect(_ sender: Any) {
         delegate?.connectViewControllerShouldConnectTunnel(self)
     }
diff --git a/ios/MullvadVPN/ConnectionPanelView.swift b/ios/MullvadVPN/ConnectionPanelView.swift
index 325fc17bc2..e9cfc82d8e 100644
--- a/ios/MullvadVPN/ConnectionPanelView.swift
+++ b/ios/MullvadVPN/ConnectionPanelView.swift
@@ -28,19 +28,33 @@ class ConnectionPanelView: UIView {
         }
     }
 
-    let collapseButton: ConnectionPanelCollapseButton = {
+    var connectedRelayName: String = "" {
+        didSet {
+            collapseButton.setTitle(connectedRelayName, for: .normal)
+            collapseButton.accessibilityLabel = NSLocalizedString(
+                "RELAY_ACCESSIBILITY_LABEL",
+                tableName: "ConnectionPanel",
+                comment: ""
+            )
+            collapseButton.accessibilityAttributedValue = NSAttributedString(
+                string: connectedRelayName.replacingOccurrences(of: "-wireguard", with: " WireGuard"),
+                attributes: [ .accessibilitySpeechLanguage: "en" ]
+            )
+        }
+    }
+
+    private let collapseButton: ConnectionPanelCollapseButton = {
         let button = ConnectionPanelCollapseButton(type: .custom)
         button.translatesAutoresizingMaskIntoConstraints = false
         button.tintColor = .white
         return button
     }()
 
-    private let protocolRow = ConnectionPanelProtocolTypeRow()
     private let inAddressRow = ConnectionPanelAddressRow()
     private let outAddressRow = ConnectionPanelAddressRow()
 
     private lazy var stackView: UIStackView = {
-        let stackView = UIStackView(arrangedSubviews: [protocolRow, inAddressRow, outAddressRow])
+        let stackView = UIStackView(arrangedSubviews: [inAddressRow, outAddressRow])
         stackView.axis = .vertical
         stackView.translatesAutoresizingMaskIntoConstraints = false
         return stackView
@@ -54,39 +68,23 @@ class ConnectionPanelView: UIView {
 
     override init(frame: CGRect) {
         super.init(frame: frame)
-        commonInit()
-    }
-
-    required init?(coder: NSCoder) {
-        super.init(coder: coder)
-        commonInit()
-    }
-
-    func didChangeDataSource() {
-        inAddressRow.detailTextLabel.text = dataSource?.inAddress
-        outAddressRow.detailTextLabel.text = dataSource?.outAddress
-    }
-
-    func toggleConnectionInfoVisibility() {
-        showsConnectionInfo = !showsConnectionInfo
-    }
-
-    private func updateConnectionInfoVisibility() {
-        stackView.isHidden = !showsConnectionInfo
-        collapseButton.style = showsConnectionInfo ? .up : .down
-    }
 
-    private func commonInit() {
-        protocolRow.translatesAutoresizingMaskIntoConstraints = false
         inAddressRow.translatesAutoresizingMaskIntoConstraints = false
         outAddressRow.translatesAutoresizingMaskIntoConstraints = false
 
         // TODO: Unhide it when we have out address
         outAddressRow.isHidden = true
 
-        protocolRow.textLabel.text = NSLocalizedString("WireGuard", comment: "")
-        inAddressRow.textLabel.text = NSLocalizedString("In", comment: "")
-        outAddressRow.textLabel.text = NSLocalizedString("Out", comment: "")
+        inAddressRow.title = NSLocalizedString(
+            "IN_ADDRESS_LABEL",
+            tableName: "ConnectionPanel",
+            comment: ""
+        )
+        outAddressRow.title = NSLocalizedString(
+            "OUT_ADDRESS_LABEL",
+            tableName: "ConnectionPanel",
+            comment: ""
+        )
 
         addSubview(collapseButton)
         addSubview(stackView)
@@ -104,71 +102,127 @@ class ConnectionPanelView: UIView {
 
             // Align all text labels with the guide, so that they maintain equal width
             textLabelLayoutGuide.trailingAnchor
-                .constraint(equalTo: inAddressRow.textLabel.trailingAnchor),
+                .constraint(equalTo: inAddressRow.textLabelLayoutGuide.trailingAnchor),
             textLabelLayoutGuide.trailingAnchor
-                .constraint(equalTo: outAddressRow.textLabel.trailingAnchor)
+                .constraint(equalTo: outAddressRow.textLabelLayoutGuide.trailingAnchor)
         ])
 
         updateConnectionInfoVisibility()
+        updateCollapseButtonAccessibilityHint()
+
+        collapseButton.addTarget(self, action: #selector(toggleCollapse(_:)), for: .touchUpInside)
     }
-}
 
-class ConnectionPanelProtocolTypeRow: UIView {
-    let textLabel = UILabel()
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
 
-    override init(frame: CGRect) {
-        super.init(frame: frame)
+    private func didChangeDataSource() {
+        inAddressRow.value = dataSource?.inAddress
+        outAddressRow.value = dataSource?.outAddress
+    }
 
-        textLabel.translatesAutoresizingMaskIntoConstraints = false
-        textLabel.font = UIFont.systemFont(ofSize: 17)
-        textLabel.textColor = .white
+    private func toggleConnectionInfoVisibility() {
+        showsConnectionInfo = !showsConnectionInfo
+    }
 
-        addSubview(textLabel)
+    @objc private func toggleCollapse(_ sender: Any) {
+        toggleConnectionInfoVisibility()
+    }
 
-        NSLayoutConstraint.activate([
-            textLabel.topAnchor.constraint(equalTo: topAnchor),
-            textLabel.bottomAnchor.constraint(equalTo: bottomAnchor),
-            textLabel.leadingAnchor.constraint(equalTo: leadingAnchor),
-            textLabel.trailingAnchor.constraint(equalTo: trailingAnchor)
-        ])
+    private func updateConnectionInfoVisibility() {
+        stackView.isHidden = !showsConnectionInfo
+        collapseButton.style = showsConnectionInfo ? .up : .down
+
+        if collapseButton.accessibilityElementIsFocused(), showsConnectionInfo {
+            UIAccessibility.post(notification: .layoutChanged, argument: stackView.arrangedSubviews.first)
+        }
+        updateCollapseButtonAccessibilityHint()
     }
 
-    required init?(coder: NSCoder) {
-        fatalError("init(coder:) has not been implemented")
+    private func updateCollapseButtonAccessibilityHint() {
+        if showsConnectionInfo {
+            collapseButton.accessibilityHint = NSLocalizedString(
+                "COLLAPSE_BUTTON_ACCESSIBILITY_HINT",
+                tableName: "ConnectionPanel",
+                comment: ""
+            )
+        } else {
+            collapseButton.accessibilityHint = NSLocalizedString(
+                "EXPAND_BUTTON_ACCESSIBILITY_HINT",
+                tableName: "ConnectionPanel",
+                comment: ""
+            )
+        }
     }
 }
 
 class ConnectionPanelAddressRow: UIView {
-    let textLabel = UILabel()
-    let detailTextLabel = UILabel()
-    let stackView: UIStackView
-
-    override init(frame: CGRect) {
 
-        let font = UIFont.systemFont(ofSize: 17)
-
-        textLabel.font = font
+    private let textLabel: UILabel = {
+        let textLabel = UILabel()
+        textLabel.font = .systemFont(ofSize: 17)
         textLabel.textColor = .white
         textLabel.translatesAutoresizingMaskIntoConstraints = false
         textLabel.setContentHuggingPriority(.defaultHigh, for: .horizontal)
+        return textLabel
+    }()
 
-        detailTextLabel.font = font
+    private let detailTextLabel: UILabel = {
+        let detailTextLabel = UILabel()
+        detailTextLabel.font = .systemFont(ofSize: 17)
         detailTextLabel.textColor = .white
         detailTextLabel.translatesAutoresizingMaskIntoConstraints = false
+        return detailTextLabel
+    }()
 
-        stackView = UIStackView(arrangedSubviews: [textLabel, detailTextLabel])
+    private lazy var stackView: UIStackView = {
+        let stackView = UIStackView(arrangedSubviews: [textLabel, detailTextLabel])
         stackView.spacing = UIStackView.spacingUseSystem
         stackView.translatesAutoresizingMaskIntoConstraints = false
+        return stackView
+    }()
+
+    let textLabelLayoutGuide = UILayoutGuide()
+
+    var title: String? {
+        get {
+            return textLabel.text
+        }
+        set {
+            textLabel.text = newValue
+            accessibilityLabel = newValue
+        }
+    }
+
+    var value: String? {
+        get {
+            return detailTextLabel.text
+        }
+        set {
+            detailTextLabel.text = newValue
+            accessibilityValue = newValue
+        }
+    }
 
+    override init(frame: CGRect) {
         super.init(frame: frame)
 
+        isAccessibilityElement = true
+
         addSubview(stackView)
+        addLayoutGuide(textLabelLayoutGuide)
 
         NSLayoutConstraint.activate([
             stackView.topAnchor.constraint(equalTo: topAnchor),
             stackView.bottomAnchor.constraint(equalTo: bottomAnchor),
             stackView.leadingAnchor.constraint(equalTo: leadingAnchor),
-            stackView.trailingAnchor.constraint(equalTo: trailingAnchor)
+            stackView.trailingAnchor.constraint(equalTo: trailingAnchor),
+
+            textLabelLayoutGuide.leadingAnchor.constraint(equalTo: textLabel.leadingAnchor),
+            textLabelLayoutGuide.trailingAnchor.constraint(equalTo: textLabel.trailingAnchor),
+            textLabelLayoutGuide.topAnchor.constraint(equalTo: textLabel.topAnchor),
+            textLabelLayoutGuide.bottomAnchor.constraint(equalTo: textLabel.bottomAnchor)
         ])
     }
 
diff --git a/ios/MullvadVPN/en.lproj/ConnectionPanel.strings b/ios/MullvadVPN/en.lproj/ConnectionPanel.strings
new file mode 100644
index 0000000000..9c6bf58ade
--- /dev/null
+++ b/ios/MullvadVPN/en.lproj/ConnectionPanel.strings
@@ -0,0 +1,14 @@
+/* No comment provided by engineer. */
+"COLLAPSE_BUTTON_ACCESSIBILITY_HINT" = "Double tap to collapse the connection info panel.";
+
+/* No comment provided by engineer. */
+"EXPAND_BUTTON_ACCESSIBILITY_HINT" = "Double tap to expand the connection info panel.";
+
+/* No comment provided by engineer. */
+"IN_ADDRESS_LABEL" = "In";
+
+/* No comment provided by engineer. */
+"OUT_ADDRESS_LABEL" = "Out";
+
+/* No comment provided by engineer. */
+"RELAY_ACCESSIBILITY_LABEL" = "Connected relay";