Accessibility improvements to Broadcast component (#1396)

* Accessibility improvements to `Broadcast` component * Add `AccessibilityData` container to `Broadcast` component * Change init method for `BroadcastDemoView` --------- Co-authored-by: Robin Saleh-Jan <[email protected]>
finn-no · Jan 30, 2025 · 0cc82c6 · 0cc82c6
1 parent e3728fe
commit 0cc82c6
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 17 deletions.
diff --git a/Demo/Sources/Components/Broadcast/BroadcastDemoView.swift b/Demo/Sources/Components/Broadcast/BroadcastDemoView.swift
@@ -23,7 +23,7 @@ public class BroadcastDemoView: UIView, Demoable {
     ]
 
     private lazy var broadcast: Broadcast = {
-        let container = Broadcast(frame: .zero)
+        let container = Broadcast(accessibilityData: .init(broadcastLabel: "Broadcast", dismissButtonLabel: "Close broadcast"))
         container.delegate = self
         container.translatesAutoresizingMaskIntoConstraints = false
         return container

diff --git a/FinniversKit/FinniversKit.xcodeproj/project.pbxproj b/FinniversKit/FinniversKit.xcodeproj/project.pbxproj
@@ -153,6 +153,7 @@
 		55C5B274203D8E20007D7277 /* Broadcast.swift in Sources */ = {isa = PBXBuildFile; fileRef = 55C5B273203D8E20007D7277 /* Broadcast.swift */; };
 		55C5B278203DB56A007D7277 /* BroadcastMessage.swift in Sources */ = {isa = PBXBuildFile; fileRef = 55C5B277203DB56A007D7277 /* BroadcastMessage.swift */; };
 		573B3FF82ACC1B75005096EC /* SettingsViewIconCellModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = 573B3FF72ACC1B75005096EC /* SettingsViewIconCellModel.swift */; };
+		573C03642D4A6EB200E42111 /* Broadcast+AccessibilityData.swift in Sources */ = {isa = PBXBuildFile; fileRef = 573C03632D4A6EA500E42111 /* Broadcast+AccessibilityData.swift */; };
 		57D7DFFA2ACEAFA9004C6D84 /* SettingsViewIconCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = 57D7DFF92ACEAFA9004C6D84 /* SettingsViewIconCell.swift */; };
 		5B9590BF11466FFFC29766C3 /* SelectionListView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5B9595BF11C0D7740F6E697F /* SelectionListView.swift */; };
 		5B9590C4F97B88CEB542E5E7 /* JobKeyInfoView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5B959633B525C75ECF858B21 /* JobKeyInfoView.swift */; };
@@ -595,6 +596,7 @@
 		55C5B273203D8E20007D7277 /* Broadcast.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Broadcast.swift; sourceTree = "<group>"; };
 		55C5B277203DB56A007D7277 /* BroadcastMessage.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BroadcastMessage.swift; sourceTree = "<group>"; };
 		573B3FF72ACC1B75005096EC /* SettingsViewIconCellModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SettingsViewIconCellModel.swift; sourceTree = "<group>"; };
+		573C03632D4A6EA500E42111 /* Broadcast+AccessibilityData.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "Broadcast+AccessibilityData.swift"; sourceTree = "<group>"; };
 		57D7DFF92ACEAFA9004C6D84 /* SettingsViewIconCell.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SettingsViewIconCell.swift; sourceTree = "<group>"; };
 		5B959240C94F8A2F44F428F3 /* OverflowCollectionViewCell.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = OverflowCollectionViewCell.swift; sourceTree = "<group>"; };
 		5B95934A9A5BBB3F4E389FC4 /* JobKeyInfoView+Separator.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = "JobKeyInfoView+Separator.swift"; sourceTree = "<group>"; };
@@ -2312,6 +2314,7 @@
 				55C5B273203D8E20007D7277 /* Broadcast.swift */,
 				AF91BB96202C74D0003E6366 /* BroadcastItem.swift */,
 				55C5B277203DB56A007D7277 /* BroadcastMessage.swift */,
+				573C03632D4A6EA500E42111 /* Broadcast+AccessibilityData.swift */,
 				AF91BBA0202C8B72003E6366 /* Broadcast+Style.swift */,
 			);
 			path = Broadcast;
@@ -3343,6 +3346,7 @@
 				9B2D17D223E02B2900EF3B50 /* KeyValuePair.swift in Sources */,
 				F2C3E95C22CB639200CED7E0 /* QuestionnaireView.swift in Sources */,
 				4447F6F01FDB2B110033DBC1 /* ToastView.swift in Sources */,
+				573C03642D4A6EB200E42111 /* Broadcast+AccessibilityData.swift in Sources */,
 				44A5579E22E71FEB001667AE /* BasicTableViewCellViewModel.swift in Sources */,
 				DA5A858C24617DF000AC0DFE /* ImageExtensions.swift in Sources */,
 				DAB7FAA821B690DD00BF8CC6 /* BottomSheetTransitioningDelegate.swift in Sources */,

diff --git a/FinniversKit/Sources/Components/Broadcast/Broadcast+AccessibilityData.swift b/FinniversKit/Sources/Components/Broadcast/Broadcast+AccessibilityData.swift
@@ -0,0 +1,18 @@
+//
+//  Copyright © FINN.no AS, Inc. All rights reserved.
+//
+
+extension Broadcast {
+    public struct AccessibilityData {
+        let broadcastLabel: String
+        let dismissButtonLabel: String
+
+        public init(
+            broadcastLabel: String,
+            dismissButtonLabel: String
+        ) {
+            self.broadcastLabel = broadcastLabel
+            self.dismissButtonLabel = dismissButtonLabel
+        }
+    }
+}
diff --git a/FinniversKit/Sources/Components/Broadcast/Broadcast.swift b/FinniversKit/Sources/Components/Broadcast/Broadcast.swift
@@ -22,17 +22,21 @@ public final class Broadcast: UIStackView {
     private var topConstraint: NSLayoutConstraint?
     private var animationDuration = 0.3
     private var messages: Set<BroadcastMessage> = []
+    private var accessibilityData: AccessibilityData
 
     // MARK: - Setup
 
-    public override init(frame: CGRect) {
+    public init(frame: CGRect = .zero, accessibilityData: AccessibilityData) {
+        self.accessibilityData = accessibilityData
+
         super.init(frame: frame)
-
+        
         axis = .vertical
         distribution = .fill
         alignment = .fill
-        isAccessibilityElement = true
+
         accessibilityTraits = .summaryElement
+        accessibilityContainerType = .semanticGroup
     }
 
     public required init(coder: NSCoder) {
@@ -171,12 +175,22 @@ private extension Broadcast {
     }
 
     func insert(_ messages: Set<BroadcastMessage>) {
-        for message in messages {
+        var accessibilityLabels = [String]()
+
+        for (index, message) in messages.enumerated() {
             let item = BroadcastItem(message: message)
             item.delegate = self
             item.isHidden = true
+
+            let accessibleLabelForItem = "\(accessibilityData.broadcastLabel) (\(index + 1) / \(messages.count)), \(item.message.text)"
+            item.accessibilityLabel = accessibleLabelForItem
+            item.dismissButton.accessibilityLabel = accessibilityData.dismissButtonLabel
+            accessibilityLabels.append(accessibleLabelForItem)
+
             insertArrangedSubview(item, at: 0)
         }
+
+        accessibilityLabel = accessibilityLabels.joined(separator: ",")
     }
 
     func animate(to offset: CGFloat?) {

diff --git a/FinniversKit/Sources/Components/Broadcast/BroadcastItem.swift b/FinniversKit/Sources/Components/Broadcast/BroadcastItem.swift
@@ -37,6 +37,7 @@ class BroadcastItem: UIView {
         textView.isEditable = false
         textView.isSelectable = true
         textView.isScrollEnabled = false
+        textView.accessibilityTraits = .staticText
         textView.textContainerInset = .zero
         textView.linkTextAttributes = BroadcastItem.Style.linkTextAttributes
         return textView
@@ -50,10 +51,12 @@ class BroadcastItem: UIView {
         return imageView
     }()
 
-    private lazy var dismissButton: UIButton = {
+    private(set) lazy var dismissButton: UIButton = {
         let button = UIButton(frame: .zero)
         button.setImage(UIImage(named: .remove), for: .normal)
         button.tintColor = .icon
+        button.isAccessibilityElement = true
+        button.accessibilityTraits = .button
         button.addTarget(self, action: #selector(dismissButtonTapped(_:)), for: .touchUpInside)
         button.translatesAutoresizingMaskIntoConstraints = false
         return button
@@ -69,16 +72,14 @@ class BroadcastItem: UIView {
 
     // MARK: - Setup
 
-    init(message: BroadcastMessage) {
+    init(
+        message: BroadcastMessage
+    ) {
         self.message = message
         super.init(frame: .zero)
-
-        isAccessibilityElement = true
         clipsToBounds = true
-
-        setAttributedText(message)
-        setAccessbilityLabel(message)
 
+        setAttributedText(message)
         setupSubviews()
     }
 
@@ -94,6 +95,7 @@ extension BroadcastItem {
         contentView.addSubview(messageTextView)
         contentView.addSubview(iconImageView)
         contentView.addSubview(dismissButton)
+
         addSubview(contentView)
 
         heightConstraint = heightAnchor.constraint(equalToConstant: 0)
@@ -132,11 +134,6 @@ extension BroadcastItem {
         attributedString.addAttributes(BroadcastItem.Style.fontAttributes, range: NSRange(location: 0, length: attributedString.string.utf16.count))
         messageTextView.attributedText = attributedString
     }
-
-    private func setAccessbilityLabel(_ message: BroadcastMessage) {
-        messageTextView.accessibilityLabel = message.text
-        accessibilityTraits = .staticText
-    }
 
     // MARK: - Actions