[WCAG 2.1 AA] Blaze budget VoiceOver update (#15701)

Author: RafaelKayumov

WooCommerce/Classes/ViewRelated/Blaze/BudgetSetting/BlazeBudgetSettingView.swift

@@ -53,6 +53,7 @@ private extension BlazeBudgetSettingView {
                     .multilineTextAlignment(.center)
                     .subheadlineStyle()
             }
+            .accessibilityElement(children: .combine)
 
             // Daily budget amount details
             VStack(spacing: Layout.dailyBudgetSectionSpacing) {
@@ -69,6 +70,9 @@ private extension BlazeBudgetSettingView {
                        in: viewModel.dailyAmountSliderRange,
                        step: BlazeBudgetSettingViewModel.Constants.dailyAmountSliderStep)
             }
+            .accessibilityElement(children: .combine)
+            .accessibilityLabel(Localization.dailySpend)
+            .accessibilityValue(String(format: Localization.dailySpendValue, Int(viewModel.dailyAmount)))
 
             // Schedule
             VStack(alignment: .leading) {
@@ -89,8 +93,11 @@ private extension BlazeBudgetSettingView {
                 .tertiaryTitleStyle()
             }
             .frame(maxWidth: .infinity, alignment: .leading)
+            .accessibilityElement(children: .combine)
+            .accessibilityAddTraits(.isButton)
+            .accessibilityHint(Localization.scheduleAccessibilityHint)
 
-            // Estimated impressions
+            // Estimated impressions - grouped for accessibility
             VStack(alignment: .leading) {
                 Button {
                     showingImpressionInfo = true
@@ -102,12 +109,15 @@ private extension BlazeBudgetSettingView {
                     .font(.subheadline)
                 }
                 .buttonStyle(.plain)
-                .accessibilityHint(Localization.estimatedImpressionsAccessibilityHint)
                 .renderedIf(viewModel.forecastedImpressionState != .failure)
 
                 forecastedImpressionsView
             }
             .frame(maxWidth: .infinity, alignment: .leading)
+            .accessibilityElement(children: .combine)
+            .accessibilityAddTraits(.isButton)
+            .accessibilityHint(Localization.estimatedImpressionsAccessibilityHint)
+            .accessibilityLabel(viewModel.impressionsSectionAccessibilityLabel)
         }
     }
 
@@ -116,7 +126,7 @@ private extension BlazeBudgetSettingView {
         switch viewModel.forecastedImpressionState {
         case .loading:
             ActivityIndicator(isAnimating: .constant(true), style: .medium)
-        case .result(let formattedResult):
+        case .result(let formattedResult, _, _):
             Text(formattedResult)
                 .fontWeight(.semibold)
                 .tertiaryTitleStyle()
@@ -157,7 +167,7 @@ private extension BlazeBudgetSettingView {
                     .bodyStyle()
                     .padding(Layout.contentPadding)
             }
-            .navigationTitle(Localization.title)
+            .navigationTitle(Localization.impressions)
             .navigationBarTitleDisplayMode(.inline)
             .toolbar {
                 ToolbarItem(placement: .confirmationAction) {
@@ -214,6 +224,11 @@ private extension BlazeBudgetSettingView {
             value: "Daily spend",
             comment: "Title label for the daily spend amount on the Blaze ads campaign budget settings screen."
         )
+        static let dailySpendValue = NSLocalizedString(
+            "blazeBudgetSettingView.dailySpendValue",
+            value: "$%d",
+            comment: "Value format for the daily spend amount on the Blaze ads campaign budget settings screen."
+        )
         static let estimatedImpressions = NSLocalizedString(
             "blazeBudgetSettingView.estimatedTotalImpressions",
             value: "Estimated total impressions",
@@ -262,6 +277,11 @@ private extension BlazeBudgetSettingView {
             value: "Tap for more information about estimated impressions",
             comment: "Accessibility hint for the estimated impression button on the Blaze campaign budget setting screen"
         )
+        static let scheduleAccessibilityHint = NSLocalizedString(
+            "blazeBudgetSettingView.scheduleAccessibilityHint",
+            value: "Opens campaign schedule settings",
+            comment: "Accessibility hint for the schedule section on the Blaze budget setting screen"
+        )
     }
 }
 

WooCommerce/Classes/ViewRelated/Blaze/BudgetSetting/BlazeBudgetSettingViewModel.swift

@@ -148,12 +148,28 @@ final class BlazeBudgetSettingViewModel: ObservableObject {
                                               locale: locale,
                                               result.totalImpressionsMin,
                                               result.totalImpressionsMax)
-            forecastedImpressionState = .result(formattedResult: formattedImpressions)
+            forecastedImpressionState = .result(
+                formattedResult: formattedImpressions,
+                minValue: result.totalImpressionsMin,
+                maxValue: result.totalImpressionsMax
+            )
         } catch {
             DDLogError("⛔️ Error fetching forecasted impression: \(error)")
             forecastedImpressionState = .failure
         }
     }
+
+    /// Provides a combined accessibility label for the entire impressions section
+    var impressionsSectionAccessibilityLabel: String {
+        switch forecastedImpressionState {
+        case .result(_, let minValue, let maxValue):
+            return String.localizedStringWithFormat(Localization.impressionsSectionAccessibility, minValue, maxValue)
+        case .loading:
+            return Localization.impressionsLoading
+        case .failure:
+            return Localization.impressionsFailure
+        }
+    }
 }
 
 // MARK: - Private helpers
@@ -227,7 +243,7 @@ extension BlazeBudgetSettingViewModel {
 
     enum ForecastedImpressionState: Equatable {
         case loading
-        case result(formattedResult: String)
+        case result(formattedResult: String, minValue: Int64, maxValue: Int64)
         case failure
     }
 
@@ -286,5 +302,21 @@ extension BlazeBudgetSettingViewModel {
             comment: "The total amount for weekly spend on the Blaze budget setting screen. " +
             "Reads like: $35 USD weekly spend"
         )
+        static let impressionsSectionAccessibility = NSLocalizedString(
+            "blazeBudgetSettingViewModel.impressionsSectionAccessibility",
+            value: "Estimated total impressions range is from %1$lld to %2$lld",
+            comment: "The formatted estimated impression range for a Blaze campaign. " +
+            "Reads like: Estimated total impressions range is from 26100 to 35300"
+        )
+        static let impressionsLoading = NSLocalizedString(
+            "blazeBudgetSettingViewModel.impressionsLoading",
+            value: "Loading...",
+            comment: "The label for loading impressions"
+        )
+        static let impressionsFailure = NSLocalizedString(
+            "blazeBudgetSettingViewModel.impressionsFailure",
+            value: "Failed to load impressions",
+            comment: "The label for failed to load impressions"
+        )
     }
 }

WooCommerce/Classes/ViewRelated/Blaze/BudgetSetting/BlazeScheduleSettingView.swift

@@ -43,6 +43,7 @@ struct BlazeScheduleSettingView: View {
                 AdaptiveStack(horizontalAlignment: .leading) {
                     Text(Localization.startDate)
                         .bodyStyle()
+                        .accessibilityHidden(true)
 
                     Spacer().renderedIf(sizeCategory.isAccessibilityCategory == false)
 
@@ -58,6 +59,29 @@ struct BlazeScheduleSettingView: View {
                         view.datePickerStyle(.compact)
                     }
                 }
+                .accessibilityHint(Localization.startDateAccessibilityHint)
+                .accessibilityLabel(
+                    String(
+                        format: Localization.startDateAccessibilityLabel,
+                        DateFormatter.localizedString(
+                            from: startDate,
+                            dateStyle: .medium,
+                            timeStyle: .none
+                        )
+                    )
+                )
+                // Apply accessibility grouping only for non-accessibility size categories.
+                // For accessibility size categories, we use .graphical date picker style which is embedded
+                // directly in the view and maintains its native "date picker" traits. For standard size
+                // categories, we use .compact date picker style which acts as a popover, so we group the
+                // elements with .combine and add .isButton trait to make the entire section actionable.
+                // Applying .combine to the graphical date picker would override its native accessibility
+                // traits and degrade the user experience.
+                .if(!sizeCategory.isAccessibilityCategory) { view in
+                    view
+                    .accessibilityElement(children: .combine)
+                    .accessibilityAddTraits(.isButton)
+                }
 
                 // Toggle to switch between evergreen and not. Hidden under a feature flag.
                 Toggle(Localization.specifyDuration, isOn: $hasEndDate)
@@ -83,6 +107,9 @@ struct BlazeScheduleSettingView: View {
                            in: dayCountSliderRange,
                            step: Double(BlazeBudgetSettingViewModel.Constants.dayCountSliderStep))
                 }
+                .accessibilityElement(children: .combine)
+                .accessibilityLabel(Localization.duration)
+                .accessibilityValue(durationTextFormatter(duration).string)
                 .renderedIf(hasEndDate)
 
                 Spacer()
@@ -154,6 +181,16 @@ private extension BlazeScheduleSettingView {
             value: "Cancel",
             comment: "Button to dismiss the Blaze schedule setting screen"
         )
+        static let startDateAccessibilityLabel = NSLocalizedString(
+            "blazeScheduleSettingView.startDateAccessibilityLabel",
+            value: "Campaign start date is %@",
+            comment: "Accessibility label for the start date picker on the Blaze campaign duration setting screen. %@ is replaced with the selected date."
+        )
+        static let startDateAccessibilityHint = NSLocalizedString(
+            "blazeScheduleSettingView.startDateAccessibilityHint",
+            value: "Double tap to edit the campaign start date",
+            comment: "Accessibility hint for the start date picker on the Blaze campaign duration setting screen"
+        )
     }
 }
 

WooCommerce/WooCommerceTests/ViewRelated/Blaze/BlazeBudgetSettingViewModelTests.swift

@@ -150,7 +150,14 @@ final class BlazeBudgetSettingViewModelTests: XCTestCase {
         await viewModel.updateImpressions(startDate: .now, dayCount: 3, dailyBudget: 15)
 
         // Then
-        XCTAssertEqual(viewModel.forecastedImpressionState, .result(formattedResult: "1,000 - 5,000"))
+        XCTAssertEqual(
+            viewModel.forecastedImpressionState,
+            .result(
+                formattedResult: "1,000 - 5,000",
+                minValue: 1000,
+                maxValue: 5000
+            )
+        )
     }
 
     @MainActor