diff --git a/WooCommerce/Classes/POS/Presentation/PointOfSaleModalHeader.swift b/WooCommerce/Classes/POS/Presentation/PointOfSaleModalHeader.swift index 1334028395b..0fb2657f9ac 100644 --- a/WooCommerce/Classes/POS/Presentation/PointOfSaleModalHeader.swift +++ b/WooCommerce/Classes/POS/Presentation/PointOfSaleModalHeader.swift @@ -1,6 +1,8 @@ import SwiftUI struct PointOfSaleModalHeader: View { + @Environment(\.dynamicTypeSize) private var dynamicTypeSize + @Binding var isPresented: Bool @Binding var title: AttributedString @@ -8,7 +10,8 @@ struct PointOfSaleModalHeader: View { HStack { Text(title) .font(.posHeadingBold) - .lineLimit(1) + .dynamicTypeSize(...DynamicTypeSize.accessibility2) + .lineLimit(dynamicTypeSize.isAccessibilitySize ? nil : 1) Spacer() Button { isPresented = false diff --git a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift index fd2a5b2d048..c88cc82f2c4 100644 --- a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift +++ b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift @@ -1,6 +1,8 @@ import SwiftUI struct PointOfSaleSettingsHardwareDetailView: View { + @Environment(\.dynamicTypeSize) private var dynamicTypeSize + let settingsController: PointOfSaleSettingsControllerProtocol @State private var navigationPath: [NavigationDestination] = [] @@ -33,19 +35,26 @@ struct PointOfSaleSettingsHardwareDetailView: View { NavigationStack(path: $navigationPath) { POSPageHeaderView(title: Localization.hardwareTitle) .foregroundColor(.posSurface) + .accessibilityAddTraits(.isHeader) List(HardwareDestination.allCases) { destination in NavigationLink(value: NavigationDestination.hardware(destination)) { - HStack(alignment: .firstTextBaseline) { + HStack(spacing: POSSpacing.medium) { Image(systemName: destination.icon) .font(.posBodyLargeRegular()) + .accessibilityHidden(true) + .renderedIf(!dynamicTypeSize.isAccessibilitySize) + VStack(alignment: .leading, spacing: POSPadding.xSmall) { Text(destination.title) .font(.posBodyLargeRegular()) + .dynamicTypeSize(...DynamicTypeSize.accessibility2) Text(destination.subtitle) .font(.posBodyMediumRegular()) .foregroundStyle(.secondary) + .dynamicTypeSize(...DynamicTypeSize.accessibility2) } + Spacer() } } .listRowSeparator(.hidden) @@ -116,19 +125,26 @@ struct PointOfSaleSettingsHardwareDetailView: View { Button { showCardReaderDocumentationModal = true } label: { - HStack(alignment: .firstTextBaseline) { + HStack(spacing: POSSpacing.medium) { Image(systemName: "doc.text") .font(.posBodyLargeRegular()) + .accessibilityHidden(true) + .renderedIf(!dynamicTypeSize.isAccessibilitySize) + VStack(alignment: .leading, spacing: POSPadding.xSmall) { Text(Localization.cardReaderDocumentationTitle) .font(.posBodyLargeRegular()) + .dynamicTypeSize(...DynamicTypeSize.accessibility2) Text(Localization.cardReaderDocumentationSubtitle) .font(.posBodyMediumRegular()) .foregroundStyle(.secondary) + .dynamicTypeSize(...DynamicTypeSize.accessibility2) } + Spacer() } } - .buttonStyle(.plain) + .padding() + .accessibilityAddTraits(.isButton) .listRowSeparator(.hidden) } .listStyle(.plain) @@ -156,19 +172,24 @@ struct PointOfSaleSettingsHardwareDetailView: View { Button { handleScannerDestination(destination) } label: { - HStack(alignment: .firstTextBaseline) { + HStack(spacing: POSSpacing.medium) { Image(systemName: destination.icon) .font(.posBodyLargeRegular()) + .accessibilityHidden(true) + .renderedIf(!dynamicTypeSize.isAccessibilitySize) VStack(alignment: .leading, spacing: POSPadding.xSmall) { Text(destination.title) .font(.posBodyLargeRegular()) + .dynamicTypeSize(...DynamicTypeSize.accessibility2) Text(destination.subtitle) .font(.posBodyMediumRegular()) .foregroundStyle(.secondary) + .dynamicTypeSize(...DynamicTypeSize.accessibility2) } + Spacer() } } - .buttonStyle(.plain) + .accessibilityAddTraits(.isButton) .listRowSeparator(.hidden) } .listStyle(.plain) diff --git a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHelpDetailView.swift b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHelpDetailView.swift index 707c75ac30a..86b2243b601 100644 --- a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHelpDetailView.swift +++ b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHelpDetailView.swift @@ -1,6 +1,8 @@ import SwiftUI struct PointOfSaleSettingsHelpDetailView: View { + @Environment(\.dynamicTypeSize) private var dynamicTypeSize + @State private var showProductRestrictions = false @State private var showDocumentation = false @State private var showSupport = false @@ -13,58 +15,77 @@ struct PointOfSaleSettingsHelpDetailView: View { NavigationStack { POSPageHeaderView(title: Localization.helpTitle) .foregroundColor(.posSurface) + .accessibilityAddTraits(.isHeader) List { Button { showProductRestrictions = true } label: { - HStack(alignment: .firstTextBaseline) { + HStack(spacing: POSSpacing.medium) { Image(systemName: "magnifyingglass") .font(.posBodyLargeRegular()) + .accessibilityHidden(true) + .renderedIf(!dynamicTypeSize.isAccessibilitySize) VStack(alignment: .leading, spacing: POSPadding.xSmall) { Text(Localization.productRestrictionsInfo) .font(.posBodyLargeRegular()) + .dynamicTypeSize(...DynamicTypeSize.accessibility2) Text(Localization.productRestrictionsInfoSubtitle) .font(.posBodyMediumRegular()) .foregroundStyle(.secondary) + .dynamicTypeSize(...DynamicTypeSize.accessibility2) } + Spacer() } } + .accessibilityAddTraits(.isButton) .listRowSeparator(.hidden) .buttonStyle(.plain) Button { showDocumentation = true } label: { - HStack(alignment: .firstTextBaseline) { + HStack(spacing: POSSpacing.medium) { Image(systemName: "doc.text") .font(.posBodyLargeRegular()) + .accessibilityHidden(true) + .renderedIf(!dynamicTypeSize.isAccessibilitySize) VStack(alignment: .leading, spacing: POSPadding.xSmall) { Text(Localization.documentationTitle) .font(.posBodyLargeRegular()) + .dynamicTypeSize(...DynamicTypeSize.accessibility2) Text(Localization.documentationSubtitle) .font(.posBodyMediumRegular()) .foregroundStyle(.secondary) + .dynamicTypeSize(...DynamicTypeSize.accessibility2) } + Spacer() } } + .accessibilityAddTraits(.isButton) .listRowSeparator(.hidden) .buttonStyle(.plain) Button { showSupport = true } label: { - HStack(alignment: .firstTextBaseline) { + HStack(spacing: POSSpacing.medium) { Image(systemName: "questionmark") .font(.posBodyLargeRegular()) + .accessibilityHidden(true) + .renderedIf(!dynamicTypeSize.isAccessibilitySize) VStack(alignment: .leading, spacing: POSPadding.xSmall) { Text(Localization.getSupportTitle) .font(.posBodyLargeRegular()) + .dynamicTypeSize(...DynamicTypeSize.accessibility2) Text(Localization.getSupportSubtitle) .font(.posBodyMediumRegular()) .foregroundStyle(.secondary) + .dynamicTypeSize(...DynamicTypeSize.accessibility2) } + Spacer() } } + .accessibilityAddTraits(.isButton) .listRowSeparator(.hidden) .buttonStyle(.plain) } diff --git a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsView.swift b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsView.swift index 4537b2fa3c3..80ec93993c9 100644 --- a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsView.swift +++ b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsView.swift @@ -32,6 +32,7 @@ extension PointOfSaleSettingsView { }, buttonIcon: "xmark")) .foregroundColor(.posSurface) + .accessibilityAddTraits(.isHeader) VStack(spacing: POSSpacing.small) { PointOfSaleSettingsCard( @@ -90,23 +91,30 @@ extension PointOfSaleSettingsView { } struct PointOfSaleSettingsCard: View { + @Environment(\.dynamicTypeSize) private var dynamicTypeSize + let item: PointOfSaleSettingsView.SidebarNavigation let isSelected: Bool let onTap: () -> Void var body: some View { Button(action: onTap) { - HStack { + HStack(spacing: POSSpacing.medium) { Image(systemName: item.icon) .font(.posBodyLargeRegular()) .foregroundStyle(Color.posOnSurface) - VStack(alignment: .leading) { + .accessibilityHidden(true) + .renderedIf(!dynamicTypeSize.isAccessibilitySize) + + VStack(alignment: .leading, spacing: POSSpacing.xSmall) { Text(item.title) .font(.posBodyLargeRegular()) .foregroundStyle(Color.posOnSurface) + .dynamicTypeSize(...DynamicTypeSize.accessibility2) Text(item.subtitle) .font(.posBodyMediumRegular()) .foregroundStyle(Color.posOnSurface) + .dynamicTypeSize(...DynamicTypeSize.accessibility2) } Spacer() } @@ -115,6 +123,7 @@ struct PointOfSaleSettingsCard: View { .contentShape(Rectangle()) } .buttonStyle(.plain) + .accessibilityAddTraits(.isButton) .background( RoundedRectangle(cornerRadius: POSCornerRadiusStyle.small.value, style: .continuous) .fill(isSelected ? Color.posSecondary : Color.clear)