[WCAG 2.1 AA] Resolve remaining Blaze accessibility layout issues (#15703)

RafaelKayumov · web-flow · commit 17dff0c1beca · 2025-06-04T17:09:13.000+03:00
diff --git a/WooCommerce/Classes/ViewRelated/Blaze/BudgetSetting/BlazeScheduleSettingView.swift b/WooCommerce/Classes/ViewRelated/Blaze/BudgetSetting/BlazeScheduleSettingView.swift
@@ -51,7 +51,12 @@ struct BlazeScheduleSettingView: View {
                                displayedComponents: [.date]) {
                         EmptyView()
                     }
-                               .datePickerStyle(.compact)
+                    .if(sizeCategory.isAccessibilityCategory) { view in
+                        view.datePickerStyle(.graphical)
+                    }
+                    .if(!sizeCategory.isAccessibilityCategory) { view in
+                        view.datePickerStyle(.compact)
+                    }
                 }
 
                 // Toggle to switch between evergreen and not. Hidden under a feature flag.
diff --git a/WooCommerce/Classes/ViewRelated/Blaze/CampaignCreation/BlazeCampaignCreationForm.swift b/WooCommerce/Classes/ViewRelated/Blaze/CampaignCreation/BlazeCampaignCreationForm.swift
@@ -329,7 +329,7 @@ private extension BlazeCampaignCreationForm {
                 if viewModel.isLoadingAISuggestions ||
                     viewModel.ctaText.isNotEmpty {
                     Text(viewModel.isLoadingAISuggestions ? "CTA placeholder" : viewModel.ctaText)
-                        .font(.system(size: Constants.ctaButtonFontSize))
+                        .font(.caption)
                         .foregroundColor(Constants.backgroundViewColor)
                         .padding(Layout.ctaButtonPadding)
                         .background(Constants.ctaButtonColor)
@@ -478,8 +478,6 @@ private extension BlazeCampaignCreationForm {
 
         static let ctaButtonTextColor = Color.white
 
-        static let ctaButtonFontSize: CGFloat = 13
-
         static let supportTag = "origin:blaze-native-campaign-creation"
     }
 
diff --git a/WooCommerce/Classes/ViewRelated/Blaze/ConfirmPayment/BlazeConfirmPaymentView.swift b/WooCommerce/Classes/ViewRelated/Blaze/ConfirmPayment/BlazeConfirmPaymentView.swift
@@ -7,12 +7,15 @@ struct BlazeConfirmPaymentView: View {
     @ScaledMetric private var scale: CGFloat = 1.0
     @ObservedObject private var viewModel: BlazeConfirmPaymentViewModel
     @Environment(\.dismiss) private var dismiss
+    @Environment(\.sizeCategory) private var sizeCategory
 
     @State private var externalURL: URL?
     @State private var showingAddPaymentWebView: Bool = false
     @State private var isShowingSupport = false
 
-    private let agreementText: NSAttributedString = {
+    /// Computed property to ensure the attributed string is recreated with current accessibility font settings
+    /// when dynamic type size changes, rather than being fixed at initialization time.
+    private var agreementText: NSAttributedString {
         let content = String.localizedStringWithFormat(Localization.agreement, Localization.termsOfService, Localization.adPolicy, Localization.learnMore)
         let paragraph = NSMutableParagraphStyle()
         paragraph.alignment = .center
@@ -31,7 +34,7 @@ struct BlazeConfirmPaymentView: View {
         mutableAttributedText.setAsLink(textToFind: Localization.learnMore,
                                         linkURL: Constants.learnMoreLink)
         return mutableAttributedText
-    }()
+    }
 
     init(viewModel: BlazeConfirmPaymentViewModel) {
         self.viewModel = viewModel
@@ -60,7 +63,11 @@ struct BlazeConfirmPaymentView: View {
                         .padding(.horizontal, Layout.contentPadding)
                 }
 
-                Divider()
+                if sizeCategory.isAccessibilityCategory {
+                    footerView
+                } else {
+                    Divider()
+                }
             }
             .padding(.vertical, Layout.contentPadding)
         }
@@ -74,7 +81,9 @@ struct BlazeConfirmPaymentView: View {
             }
         }
         .safeAreaInset(edge: .bottom) {
-            footerView
+            if !sizeCategory.isAccessibilityCategory {
+                footerView
+            }
         }
         .task {
             await viewModel.updatePaymentInfo()
diff --git a/WooCommerce/Classes/ViewRelated/Products/Cells/Product Images/ProductImagesHeaderTableViewCell.swift b/WooCommerce/Classes/ViewRelated/Products/Cells/Product Images/ProductImagesHeaderTableViewCell.swift
@@ -4,6 +4,7 @@ import Yosemite
 final class ProductImagesHeaderTableViewCell: UITableViewCell {
 
     @IBOutlet weak var collectionView: UICollectionView!
+    @IBOutlet weak var collectionViewHeightConstraint: NSLayoutConstraint!
 
     /// View Model
     ///
@@ -34,6 +35,7 @@ final class ProductImagesHeaderTableViewCell: UITableViewCell {
 
         configureBackground()
         configureSeparator()
+        updateCollectionViewHeight()
     }
 
     /// Configure cell
@@ -54,15 +56,25 @@ final class ProductImagesHeaderTableViewCell: UITableViewCell {
         }
     }
 
-    /// Rotation management
+    /// Rotation management and accessibility changes
     ///
     override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
         super.traitCollectionDidChange(previousTraitCollection)
         if traitCollection != previousTraitCollection {
+            // Update collection view height for accessibility changes
+            updateCollectionViewHeight()
+            // Invalidate layout when trait collection changes (including accessibility changes)
             collectionView.collectionViewLayout.invalidateLayout()
             collectionView.reloadData()
         }
     }
+
+    /// Updates the collection view height based on current accessibility settings
+    private func updateCollectionViewHeight() {
+        let cellSize = ProductImagesHeaderViewModel.cellSize(for: traitCollection.preferredContentSizeCategory)
+        // Add padding to accommodate the cell size
+        collectionViewHeightConstraint.constant = cellSize.height + Layout.collectionViewPadding
+    }
 }
 
 // MARK: - Collection View Delegate
@@ -98,7 +110,8 @@ extension ProductImagesHeaderTableViewCell: UICollectionViewDelegateFlowLayout {
         case .extendedAddImage:
             return frame.size
         default:
-            return ProductImagesHeaderViewModel.defaultCollectionViewCellSize
+            // Use dynamic sizing based on current accessibility settings
+            return ProductImagesHeaderViewModel.cellSize(for: traitCollection.preferredContentSizeCategory)
         }
     }
 }
@@ -141,11 +154,23 @@ private extension ProductImagesHeaderTableViewCell {
 
         self.config = config
 
+        // Update height for the new configuration
+        updateCollectionViewHeight()
+
         switch config {
         case .extendedAddImages:
             collectionView.collectionViewLayout = ProductImagesFlowLayout(itemSize: frame.size, config: config)
         default:
-            collectionView.collectionViewLayout = ProductImagesFlowLayout(itemSize: ProductImagesHeaderViewModel.defaultCollectionViewCellSize, config: config)
+            // Use dynamic sizing based on current accessibility settings
+            let dynamicSize = ProductImagesHeaderViewModel.cellSize(for: traitCollection.preferredContentSizeCategory)
+            collectionView.collectionViewLayout = ProductImagesFlowLayout(itemSize: dynamicSize, config: config)
         }
     }
 }
+
+private extension ProductImagesHeaderTableViewCell {
+    enum Layout {
+        /// Padding around the collection view (16pt top and bottom)
+        static let collectionViewPadding: CGFloat = 32
+    }
+}
diff --git a/WooCommerce/Classes/ViewRelated/Products/Cells/Product Images/ProductImagesHeaderTableViewCell.xib b/WooCommerce/Classes/ViewRelated/Products/Cells/Product Images/ProductImagesHeaderTableViewCell.xib
@@ -42,6 +42,7 @@
             <viewLayoutGuide key="safeArea" id="njF-e1-oar"/>
             <connections>
                 <outlet property="collectionView" destination="WFL-te-HOK" id="6lI-qf-ou5"/>
+                <outlet property="collectionViewHeightConstraint" destination="o7N-sD-4mr" id="height-constraint-outlet"/>
             </connections>
             <point key="canvasLocation" x="131.15942028985509" y="122.54464285714285"/>
         </tableViewCell>
diff --git a/WooCommerce/Classes/ViewRelated/Products/Cells/Product Images/ProductImagesHeaderViewModel.swift b/WooCommerce/Classes/ViewRelated/Products/Cells/Product Images/ProductImagesHeaderViewModel.swift
@@ -11,8 +11,24 @@ final class ProductImagesHeaderViewModel {
     /// Whether we should scroll to the beginning of the collection view.
     let shouldScrollToStart: Bool
 
-    // Fixed width/height of collection view cell
-    static let defaultCollectionViewCellSize = CGSize(width: 128.0, height: 128.0)
+    // Base size for accessibility scaling
+    private static let baseCellSize: CGFloat = 128.0
+
+    /// Returns the appropriate cell size based on the content size category for accessibility
+    static func cellSize(for contentSizeCategory: UIContentSizeCategory) -> CGSize {
+        let scaledSize = scaledValue(baseCellSize, contentSizeCategory: contentSizeCategory, maximumContentSizeCategory: .accessibilityExtraExtraExtraLarge)
+        return CGSize(width: scaledSize, height: scaledSize)
+    }
+
+    /// Returns a scaled value using native iOS scaling, with a maximum cap for accessibility
+    private static func scaledValue(_ value: CGFloat, contentSizeCategory: UIContentSizeCategory, maximumContentSizeCategory: UIContentSizeCategory) -> CGFloat {
+        let metrics = UIFontMetrics.default
+        let scaledValue = metrics.scaledValue(for: value, compatibleWith: .init(preferredContentSizeCategory: contentSizeCategory))
+
+        let maximumScaledValue = metrics.scaledValue(for: value, compatibleWith: .init(preferredContentSizeCategory: maximumContentSizeCategory))
+
+        return min(scaledValue, maximumScaledValue)
+    }
 
     private(set) var items: [ProductImagesItem] = []
 

Original file line number	Diff line number	Diff line change
`@@ -51,7 +51,12 @@ struct BlazeScheduleSettingView: View {`
`51`	`51`	`displayedComponents: [.date]) {`
`52`	`52`	`EmptyView()`
`53`	`53`	`}`
`54`		`- .datePickerStyle(.compact)`
	`54`	`+ .if(sizeCategory.isAccessibilityCategory) { view in`
	`55`	`+ view.datePickerStyle(.graphical)`
	`56`	`+ }`
	`57`	`+ .if(!sizeCategory.isAccessibilityCategory) { view in`
	`58`	`+ view.datePickerStyle(.compact)`
	`59`	`+ }`
`55`	`60`	`}`
`56`	`61`
`57`	`62`	`// Toggle to switch between evergreen and not. Hidden under a feature flag.`