IOS-10448 [Mistica] RowList A11y update

MisticaCatalog/Source/Catalog/Mistica/Components/UICatalogListsViewController.swift

@@ -18,6 +18,7 @@ private enum Section: Int, CaseIterable {
     case headline
     case assetStyle
     case controlType
+    case accessibilityType
     case show
 }
 
@@ -77,6 +78,17 @@ class UICatalogListsViewController: UITableViewController {
         return cell
     }()
 
+    private lazy var accessibilityTypeCell: UISegmentedControlTableViewCell = {
+        let cell = UISegmentedControlTableViewCell(reuseIdentifier: "accessibilityTypeCell")
+        cell.segmentedControl.insertSegment(withTitle: "Default", at: 0, animated: false)
+        cell.segmentedControl.insertSegment(withTitle: "Informative", at: 1, animated: false)
+        cell.segmentedControl.insertSegment(withTitle: "Custom informative", at: 2, animated: false)
+        cell.segmentedControl.insertSegment(withTitle: "Interactive", at: 3, animated: false)
+        cell.segmentedControl.insertSegment(withTitle: "Double interaction", at: 4, animated: false)
+        cell.segmentedControl.selectedSegmentIndex = 0
+        return cell
+    }()
+
     private lazy var showListCell: UITableViewCell = {
         let cell = UITableViewCell(style: .default, reuseIdentifier: "showListCell")
         cell.textLabel?.textColor = .textLink
@@ -92,6 +104,7 @@ class UICatalogListsViewController: UITableViewController {
         [headlineCell],
         [assetStyleCell],
         [controlCell],
+        [accessibilityTypeCell],
         [showListCell]
     ]
 
@@ -186,6 +199,28 @@ extension UICatalogListsViewController {
             break
         }
 
+        switch accessibilityTypeCell.segmentedControl.selectedSegmentIndex {
+        case 0:
+            sampleVC.accessibilityType = .default
+        case 1:
+            sampleVC.accessibilityType = .informative
+        case 2:
+            sampleVC.accessibilityType = .customInformative("Custom informative label")
+        case 3:
+            let accessibilityInteractiveData = AccessibilityListCellInteractiveData(label: "Custom action cell. Tap to execute custom action") { [weak self] in
+                let alertController = UIAlertController(title: nil, message: "Custom action", preferredStyle: .alert)
+                let alertAction = UIAlertAction(title: "Accept", style: .cancel)
+                alertController.addAction(alertAction)
+
+                self?.tabBarController?.present(alertController, animated: true)
+            }
+            sampleVC.accessibilityType = .interactive(accessibilityInteractiveData)
+        case 4:
+            sampleVC.accessibilityType = .doubleInteraction(.default)
+        default:
+            break
+        }
+
         show(sampleVC, sender: self)
         tableView.deselectRow(animated: true)
         view.endEditing(true)
@@ -209,6 +244,8 @@ private extension Section {
             return "Asset Style"
         case .controlType:
             return "Control Type"
+        case .accessibilityType:
+            return "Accessibility Type"
         case .show:
             return nil
         }
@@ -231,6 +268,7 @@ private class UICatalogListSampleViewController: UIViewController, UITableViewDa
     var assetType: ListCellContentView.CellAssetType!
     var customControl = CustomControl.none
     var cellLayoutStyle: ListCellContentView.CellStyle!
+    var accessibilityType: AccessibilityListCellType!
 
     let numberOfRows = 30
 
@@ -283,6 +321,7 @@ private class UICatalogListSampleViewController: UIViewController, UITableViewDa
         }
 
         cell.isCellSeparatorHidden = indexPath.row == (numberOfRows - 1)
+        cell.accessibilityType = accessibilityType
 
         return cell
     }

Sources/Mistica/Components/Lists/Internals/CellCenterSectionView.swift

@@ -8,22 +8,32 @@
 
 import UIKit
 
+protocol ListCellContentViewDelegate: AnyObject {
+    func accessibilityChanged()
+}
+
 class CellCenterSectionView: UIStackView {
-    var headlineView: UIView? {
+    var accessibilityActivationAction: (() -> Void)?
+
+    var headlineView: AccessibleTextualView? {
         didSet {
             oldValue?.removeFromSuperview()
 
             if let view = headlineView {
                 insertArrangedSubview(view, at: 0)
                 updateSpacing()
             }
+
+            listCellContentViewDelegate?.accessibilityChanged()
         }
     }
 
     lazy var titleLabel = IntrinsictHeightLabel()
     lazy var subtitleLabel = IntrinsictHeightLabel()
     lazy var detailLabel = IntrinsictHeightLabel()
 
+    weak var listCellContentViewDelegate: ListCellContentViewDelegate?
+
     var titleTextColor: UIColor = .textPrimary {
         didSet {
             titleLabel.textColor = titleTextColor
@@ -70,6 +80,15 @@ class CellCenterSectionView: UIStackView {
         }
     }
 
+    override public func accessibilityActivate() -> Bool {
+        guard let accessibilityActivationAction else {
+            return false
+        }
+
+        accessibilityActivationAction()
+        return true
+    }
+
     func didSetTextToSubtitleLabel() {
         if !hasSubtitleText {
             subtitleLabel.removeFromSuperview()

Sources/Mistica/Components/Lists/ListCellContentView.swift

@@ -10,11 +10,51 @@ import UIKit
 
 protocol ListCellContentTableViewDelegate {
     func cellStyleChanged()
+    func accessibilityChanged()
 }
 
 // MARK: ListCellContentView
 
 open class ListCellContentView: UIView {
+    // MARK: Accessibility properties
+
+    var accessibilityType: AccessibilityListCellType = .default {
+        didSet {
+            if case .doubleInteraction(let accessibilityInteractiveData) = accessibilityType {
+                // If double interaction accessibility, make centerSection accessible to be focusable (isAccessibilityElement = true)
+                centerSection.isAccessibilityElement = true
+                // Set center section label to the provided one (or the default one if not provided)
+                centerSection.accessibilityLabel = accessibilityInteractiveData.label ?? defaultAccessibilityLabel
+                // Set accessibility activation action to be executed on center section double tap
+                centerSection.accessibilityActivationAction = accessibilityInteractiveData.action
+            } else {
+                // If any other accessibility type, it's managed in the superview (ListTableViewCell)
+                centerSection.isAccessibilityElement = false
+                centerSection.accessibilityLabel = nil
+                centerSection.accessibilityActivationAction = nil
+            }
+            updateAccessibilityElements()
+        }
+    }
+
+    // Default accessibilityLabel using the order specified in the Figma spec:
+    // https://www.figma.com/design/Be8QB9onmHunKCCAkIBAVr/%F0%9F%94%B8-Lists-Specs?node-id=0-1&node-type=CANVAS&t=jgG9X5qKokaMwJjm-0
+    var defaultAccessibilityLabel: String {
+        let titleText = titleAccessibilityLabel ?? titleAttributedText?.string ?? title
+        let subtitleText = subtitleAccessibilityLabel ?? subtitleAttributedText?.string ?? subtitle
+        let detailText = detailAccessibilityLabel ?? detailTextAttributedText?.string ?? detailText
+        let headlineText = headlineView?.accessibleText
+
+        let accessibilityComponents: [String?] = [
+            titleText,
+            headlineText,
+            subtitleText,
+            detailText
+        ]
+
+        return accessibilityComponents.compactMap { $0 }.joined(separator: ", ")
+    }
+
     // MARK: View Styles
 
     public enum ViewStyles {
@@ -58,7 +98,7 @@ open class ListCellContentView: UIView {
 
     // MARK: SubViews
 
-    /// View used in `ListCellStyle.boxed` style for show a rounded border arround the content
+    /// View used in `ListCellStyle.boxed` style for show a rounded border around the content
     lazy var cellBorderView = UIView()
     private lazy var cellContentView = UIStackView()
     var tableViewDelegate: ListCellContentTableViewDelegate?
@@ -81,7 +121,8 @@ open class ListCellContentView: UIView {
         }
         set {
             centerSection.titleLabel.text = newValue
-            updateAssetAligment()
+            updateAssetAlignment()
+            updateAccessibility()
         }
     }
 
@@ -100,6 +141,7 @@ open class ListCellContentView: UIView {
         }
         set {
             centerSection.titleLabel.attributedText = newValue
+            updateAccessibility()
         }
     }
 
@@ -117,6 +159,7 @@ open class ListCellContentView: UIView {
             centerSection.subtitleLabel.text = newValue
             centerSection.didSetTextToSubtitleLabel()
             updateAssetView()
+            updateAccessibility()
         }
     }
 
@@ -136,6 +179,7 @@ open class ListCellContentView: UIView {
         set {
             centerSection.subtitleLabel.attributedText = newValue
             centerSection.didSetTextToSubtitleLabel()
+            updateAccessibility()
         }
     }
 
@@ -147,6 +191,7 @@ open class ListCellContentView: UIView {
             centerSection.detailLabel.text = newValue
             centerSection.didSetTexToDetailText()
             updateAssetView()
+            updateAccessibility()
         }
     }
 
@@ -166,16 +211,18 @@ open class ListCellContentView: UIView {
         set {
             centerSection.detailLabel.attributedText = newValue
             centerSection.didSetTexToDetailText()
+            updateAccessibility()
         }
     }
 
-    public var headlineView: UIView? {
+    public var headlineView: AccessibleTextualView? {
         get {
             centerSection.headlineView
         }
         set {
             centerSection.headlineView = newValue
             updateAssetView()
+            updateAccessibility()
         }
     }
 
@@ -327,12 +374,22 @@ public extension ListCellContentView {
     }
 }
 
+// MARK: ListCellContentViewDelegate
+
+extension ListCellContentView: ListCellContentViewDelegate {
+    func accessibilityChanged() {
+        updateAccessibilityElements()
+    }
+}
+
 // MARK: Private
 
 private extension ListCellContentView {
     func commonInit() {
+        centerSection.listCellContentViewDelegate = self
         layoutViews()
         updateCellStyle()
+        updateAccessibilityElements()
     }
 
     func layoutViews() {
@@ -369,7 +426,7 @@ private extension ListCellContentView {
             return
         }
 
-        updateAssetAligment()
+        updateAssetAlignment()
 
         leftSection.assetType = assetType
 
@@ -378,11 +435,29 @@ private extension ListCellContentView {
         }
     }
 
-    func updateAssetAligment() {
+    func updateAssetAlignment() {
         if centerSection.headlineView == nil, !centerSection.hasSubtitleText, !centerSection.hasDetailText {
             leftSection.centerAlignment()
         } else {
             leftSection.topAlignment()
         }
     }
+
+    func updateAccessibility() {
+        tableViewDelegate?.accessibilityChanged()
+    }
+
+    func updateAccessibilityElements() {
+        switch accessibilityType {
+        case .informative:
+            // Set accessibility order following Figma spec:
+            // https://www.figma.com/design/Be8QB9onmHunKCCAkIBAVr/%F0%9F%94%B8-Lists-Specs?node-id=0-1&node-type=CANVAS&t=jgG9X5qKokaMwJjm-0
+            accessibilityElements = [centerSection.titleLabel, headlineView as Any, centerSection.subtitleLabel, centerSection.detailLabel, controlView as Any].compactMap { $0 }
+        case .doubleInteraction:
+            // If double interaction, just two elements: center section and right section
+            accessibilityElements = [centerSection, controlView as Any].compactMap { $0 }
+        case .interactive, .customInformative:
+            accessibilityElements = []
+        }
+    }
 }