fix: message and modal accessibility improvements (#7)

paypal · Nov 21, 2023 · 86320e9 · 86320e9
1 parent 12cb440
commit 86320e9
Show file tree

Hide file tree

Showing 9 changed files with 45 additions and 35 deletions.
diff --git a/Demo/Demo/UIKitContentViewController.swift b/Demo/Demo/UIKitContentViewController.swift
@@ -110,18 +110,7 @@ class UIKitContentViewController: UIViewController {
     }()
 
     lazy var stackView: UIStackView = {
-        let paypalMessageContainer = UIView()
-
-        paypalMessageContainer.addSubview(paypalMessage)
-
         paypalMessage.translatesAutoresizingMaskIntoConstraints = false
-        NSLayoutConstraint.activate([
-            paypalMessage.leadingAnchor.constraint(equalTo: paypalMessageContainer.leadingAnchor),
-            paypalMessage.trailingAnchor.constraint(equalTo: paypalMessageContainer.trailingAnchor),
-            paypalMessage.topAnchor.constraint(equalTo: paypalMessageContainer.topAnchor),
-            paypalMessage.bottomAnchor.constraint(equalTo: paypalMessageContainer.bottomAnchor, constant: 20)
-        ])
-
 
         return getStackView(
             subviews: [
@@ -174,7 +163,7 @@ class UIKitContentViewController: UIViewController {
                     axis: .horizontal
                 ),
                 getSeparator(),
-                paypalMessageContainer
+                paypalMessage
             ],
             padding: 12
         )

diff --git a/Sources/PayPalMessages/PayPalMessageModal.swift b/Sources/PayPalMessages/PayPalMessageModal.swift
@@ -258,6 +258,8 @@ final class PayPalMessageModal: UIViewController, WKUIDelegate {
         }
 
         closeButton.translatesAutoresizingMaskIntoConstraints = false
+        closeButton.isAccessibilityElement = true
+        closeButton.accessibilityLabel = "PayPal Learn More Modal Close"
 
         view.addSubview(closeButton)
 

diff --git a/Sources/PayPalMessages/PayPalMessageView.swift b/Sources/PayPalMessages/PayPalMessageView.swift
@@ -188,7 +188,6 @@ public final class PayPalMessageView: UIControl {
         addSubview(containerView)
 
         configConstraints()
-        configAccessibility()
     }
 
     private func configConstraints() {
@@ -240,6 +239,11 @@ extension PayPalMessageView: PayPalMessageViewModelDelegate {
         messageLabel.attributedText = PayPalMessageAttributedStringBuilder().makeMessageString(params)
         // Force recalculation for layout
         invalidateIntrinsicContentSize()
+
+        // Update accessibility properties
+        self.accessibilityLabel = params?.accessibilityLabel ?? ""
+        self.accessibilityTraits = params?.accessibilityTraits ?? .none
+        self.isAccessibilityElement = params?.isAccessibilityElement ?? false
     }
 }
 
@@ -252,20 +256,13 @@ extension PayPalMessageView {
         super.traitCollectionDidChange(previousTraitCollection)
         refreshContent()
     }
-
-    private func configAccessibility() {
-        accessibilityTraits = .link
-        isAccessibilityElement = true
-        accessibilityLabel = Constants.accessibilityLabel
-    }
 }
 
 // MARK: - Constants
 
 extension PayPalMessageView {
 
     private enum Constants {
-        static let accessibilityLabel: String = "PayPalMessageView"
         static let highlightedAnimationDuration: CGFloat = 1.0
         static let highlightedAlpha: CGFloat = 0.75
         static let regularAlpha: CGFloat = 1.0

diff --git a/Sources/PayPalMessages/PayPalMessageViewModel.swift b/Sources/PayPalMessages/PayPalMessageViewModel.swift
@@ -326,6 +326,7 @@ class PayPalMessageViewModel: PayPalMessageModalEventDelegate {
         return parameterBuilder
             .makeParameters(
                 message: response.defaultMainContent,
+                offerType: response.offerType,
                 linkDescription: response.defaultDisclaimer,
                 logoPlaceholder: response.logoPlaceholder,
                 logoType: logoType,

diff --git a/Sources/PayPalMessages/Utils/PayPalMessageViewParameters.swift b/Sources/PayPalMessages/Utils/PayPalMessageViewParameters.swift
@@ -15,4 +15,8 @@ struct PayPalMessageViewParameters {
     let linkUnderlineColor: UIColor
 
     let textAlignment: NSTextAlignment
+
+    let accessibilityLabel: String
+    let accessibilityTraits: UIAccessibilityTraits
+    let isAccessibilityElement: Bool
 }
diff --git a/Sources/PayPalMessages/Utils/PayPalMessageViewParametersBuilder.swift b/Sources/PayPalMessages/Utils/PayPalMessageViewParametersBuilder.swift
@@ -5,6 +5,7 @@ struct PayPalMessageViewParametersBuilder {
     // swiftlint:disable:next function_parameter_count
     func makeParameters(
         message: String,
+        offerType: PayPalMessageResponseOfferType,
         linkDescription: String,
         logoPlaceholder: String,
         logoType: PayPalMessageLogoType,
@@ -23,6 +24,27 @@ struct PayPalMessageViewParametersBuilder {
             productGroup: productGroup
         )
 
+
+        // Creates a new sanitized string for use as the accessibilityLabel
+        let sanitizedMainContent = message
+            .replacingOccurrences(
+                of: logoPlaceholder,
+                with: offerType == .payPalCreditNoInterest ? "PayPal Credit" : "PayPal"
+            )
+            .replacingOccurrences(of: "/mo", with: " per month")
+
+        var accessibilityLabel = sanitizedMainContent
+
+        if !sanitizedMainContent.contains("PayPal") {
+            if offerType == .payPalCreditNoInterest {
+                accessibilityLabel = "PayPal Credit - " + accessibilityLabel
+            } else {
+                accessibilityLabel = "PayPal - " + accessibilityLabel
+            }
+        }
+
+        accessibilityLabel = accessibilityLabel + " " + linkDescription
+
         return PayPalMessageViewParameters(
             message: message,
             messageColor: getLabelColor(payPalColor),
@@ -33,7 +55,10 @@ struct PayPalMessageViewParametersBuilder {
             linkDescription: linkDescription,
             linkColor: getLinkColor(payPalColor),
             linkUnderlineColor: getUnderlineLinkColor(payPalColor),
-            textAlignment: getAlignment(payPalAlignment)
+            textAlignment: getAlignment(payPalAlignment),
+            accessibilityLabel: accessibilityLabel,
+            accessibilityTraits: .button,
+            isAccessibilityElement: true
         )
     }
 

diff --git a/Tests/PayPalMessagesTests/PayPalMessageAttributedStringTests.swift b/Tests/PayPalMessagesTests/PayPalMessageAttributedStringTests.swift
@@ -31,7 +31,10 @@ final class PayPalMessageAttributedStringTests: XCTestCase {
             linkDescription: testLinkDescription,
             linkColor: .blue,
             linkUnderlineColor: .blue,
-            textAlignment: .left
+            textAlignment: .left,
+            accessibilityLabel: "Pay in several installments with PayPal. Learn More",
+            accessibilityTraits: .button,
+            isAccessibilityElement: true
         )
     }
 

diff --git a/Tests/PayPalMessagesTests/PayPalMessageLogoTests.swift b/Tests/PayPalMessagesTests/PayPalMessageLogoTests.swift
@@ -14,6 +14,7 @@ final class PayPalMessageLogoTests: XCTestCase {
     ) {
         let resultParameter = paramsBuilder.makeParameters(
             message: "",
+            offerType: PayPalMessageResponseOfferType.payLaterShortTerm,
             linkDescription: "",
             logoPlaceholder: "",
             logoType: logoType,
@@ -261,6 +262,7 @@ final class PayPalMessageLogoTests: XCTestCase {
             for productGroup in allProductGroups {
                 let resultParameter = paramsBuilder.makeParameters(
                     message: "",
+                    offerType: PayPalMessageResponseOfferType.payLaterShortTerm,
                     linkDescription: "",
                     logoPlaceholder: "",
                     logoType: .none,

diff --git a/Tests/PayPalMessagesTests/PayPalMessageViewTests.swift b/Tests/PayPalMessagesTests/PayPalMessageViewTests.swift
@@ -37,17 +37,4 @@ class PayPalMessageViewTests: XCTestCase {
         XCTAssertEqual(messageView.clientID, config.data.clientID)
         XCTAssertEqual(messageView.color, config.style.color)
     }
-
-    func testConfigAccessibility() {
-        let config = config
-
-        let messageView = PayPalMessageView(
-            config: config
-        )
-
-        // Assert accessibility properties are correctly initialized
-        XCTAssertEqual(messageView.accessibilityTraits, .link)
-        XCTAssertTrue(messageView.isAccessibilityElement)
-        XCTAssertEqual(messageView.accessibilityLabel, Constants.accessibilityLabel)
-    }
 }