Accessibility: group connection location info and status

2 files changed, 55 insertions, 10 deletions

diff --git a/ios/MullvadVPN/ConnectMainContentView.swift b/ios/MullvadVPN/ConnectMainContentView.swift
index 86464a45a3..3be22d95bd 100644
--- a/ios/MullvadVPN/ConnectMainContentView.swift
+++ b/ios/MullvadVPN/ConnectMainContentView.swift
@@ -32,6 +32,14 @@ class ConnectMainContentView: UIView {
     let cityLabel = makeBoldTextLabel(ofSize: 34)
     let countryLabel = makeBoldTextLabel(ofSize: 34)
 
+    let locationContainerView: UIView = {
+        let view = UIView()
+        view.translatesAutoresizingMaskIntoConstraints = false
+        view.isAccessibilityElement = true
+        view.accessibilityTraits = .summaryElement
+        return view
+    }()
+
     lazy var connectionPanel: ConnectionPanelView = {
         let view = ConnectionPanelView()
         view.translatesAutoresizingMaskIntoConstraints = false
@@ -111,29 +119,41 @@ class ConnectMainContentView: UIView {
 
     private func addSubviews() {
         mapView.frame = self.bounds
+
+        locationContainerView.addSubview(secureLabel)
+        locationContainerView.addSubview(cityLabel)
+        locationContainerView.addSubview(countryLabel)
+
+        containerView.addSubview(locationContainerView)
+        containerView.addSubview(connectionPanel)
+        containerView.addSubview(buttonsStackView)
+
         addSubview(mapView)
         addSubview(containerView)
 
-        [secureLabel, cityLabel, countryLabel, connectionPanel, buttonsStackView].forEach { containerView.addSubview($0) }
-
         NSLayoutConstraint.activate([
             containerView.topAnchor.constraint(equalTo: layoutMarginsGuide.topAnchor),
             containerView.leadingAnchor.constraint(equalTo: layoutMarginsGuide.leadingAnchor),
             containerView.bottomAnchor.constraint(equalTo: layoutMarginsGuide.bottomAnchor),
 
-            secureLabel.topAnchor.constraint(greaterThanOrEqualTo: containerView.topAnchor),
-            secureLabel.leadingAnchor.constraint(equalTo: containerView.leadingAnchor),
-            secureLabel.trailingAnchor.constraint(equalTo: containerView.trailingAnchor),
+            locationContainerView.topAnchor.constraint(greaterThanOrEqualTo: containerView.topAnchor),
+            locationContainerView.leadingAnchor.constraint(equalTo: containerView.leadingAnchor),
+            locationContainerView.trailingAnchor.constraint(equalTo: containerView.trailingAnchor),
+
+            secureLabel.topAnchor.constraint(equalTo: locationContainerView.topAnchor),
+            secureLabel.leadingAnchor.constraint(equalTo: locationContainerView.leadingAnchor),
+            secureLabel.trailingAnchor.constraint(equalTo: locationContainerView.trailingAnchor),
 
             cityLabel.topAnchor.constraint(equalTo: secureLabel.bottomAnchor, constant: 8),
-            cityLabel.leadingAnchor.constraint(equalTo: containerView.leadingAnchor),
-            cityLabel.trailingAnchor.constraint(equalTo: containerView.trailingAnchor),
+            cityLabel.leadingAnchor.constraint(equalTo: locationContainerView.leadingAnchor),
+            cityLabel.trailingAnchor.constraint(equalTo: locationContainerView.trailingAnchor),
 
             countryLabel.topAnchor.constraint(equalTo: cityLabel.bottomAnchor, constant: 8),
-            countryLabel.leadingAnchor.constraint(equalTo: containerView.leadingAnchor),
-            countryLabel.trailingAnchor.constraint(equalTo: containerView.trailingAnchor),
+            countryLabel.leadingAnchor.constraint(equalTo: locationContainerView.leadingAnchor),
+            countryLabel.trailingAnchor.constraint(equalTo: locationContainerView.trailingAnchor),
+            countryLabel.bottomAnchor.constraint(equalTo: locationContainerView.bottomAnchor),
 
-            connectionPanel.topAnchor.constraint(equalTo: countryLabel.bottomAnchor, constant: 8),
+            connectionPanel.topAnchor.constraint(equalTo: locationContainerView.bottomAnchor, constant: 8),
             connectionPanel.leadingAnchor.constraint(equalTo: containerView.leadingAnchor),
             connectionPanel.trailingAnchor.constraint(equalTo: containerView.trailingAnchor),
 
diff --git a/ios/MullvadVPN/ConnectViewController.swift b/ios/MullvadVPN/ConnectViewController.swift
index d0587ccea1..e8910da032 100644
--- a/ios/MullvadVPN/ConnectViewController.swift
+++ b/ios/MullvadVPN/ConnectViewController.swift
@@ -200,6 +200,8 @@ class ConnectViewController: UIViewController, MKMapViewDelegate, RootContainmen
             mainContentView.connectionPanel.dataSource = nil
             mainContentView.connectionPanel.isHidden = true
         }
+
+        mainContentView.locationContainerView.accessibilityLabel = tunnelState.localizedAccessibilityLabel
     }
 
     private func locationMarkerOffset() -> CGPoint {
@@ -440,6 +442,29 @@ private extension TunnelState {
         }
     }
 
+    var localizedAccessibilityLabel: String {
+        switch self {
+        case .connecting:
+            return NSLocalizedString("Creating secure connection", comment: "")
+
+        case .connected(let tunnelInfo):
+            return String(format: NSLocalizedString("Secure connection. Connected to %@, %@", comment: ""),
+                          tunnelInfo.location.city,
+                          tunnelInfo.location.country)
+
+        case .disconnected:
+            return NSLocalizedString("Unsecured connection", comment: "")
+
+        case .reconnecting(let tunnelInfo):
+            return String(format: NSLocalizedString("Reconnecting to %@, %@", comment: ""),
+                          tunnelInfo.location.city,
+                          tunnelInfo.location.country)
+
+        case .disconnecting:
+            return NSLocalizedString("Disconnecting", comment: "")
+        }
+    }
+
     func actionButtons(traitCollection: UITraitCollection) -> [ConnectMainContentView.ActionButton] {
         switch (traitCollection.userInterfaceIdiom, traitCollection.horizontalSizeClass) {
         case (.phone, _), (.pad, .compact):