From 50f1085359e38fdcdc5885948d160e899120d022 Mon Sep 17 00:00:00 2001 From: iamgabrielma Date: Mon, 1 Sep 2025 15:01:26 +0700 Subject: [PATCH 01/11] update text with dynamicTypeSize. remove icon on larger sizes --- .../Settings/PointOfSaleSettingsView.swift | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsView.swift b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsView.swift index 4537b2fa3c3..de96735cf0c 100644 --- a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsView.swift +++ b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsView.swift @@ -90,23 +90,29 @@ 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 { + DynamicHStack(horizontalAlignment: .leading, spacing: POSSpacing.medium) { Image(systemName: item.icon) .font(.posBodyLargeRegular()) .foregroundStyle(Color.posOnSurface) - VStack(alignment: .leading) { + .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() } From cb046b05efd16b271cb327b807eab36703b38287 Mon Sep 17 00:00:00 2001 From: iamgabrielma Date: Mon, 1 Sep 2025 15:05:45 +0700 Subject: [PATCH 02/11] use dynamicTypeSize in hardwareview --- ...ointOfSaleSettingsHardwareDetailView.swift | 23 ++++++++++++++++--- 1 file changed, 20 insertions(+), 3 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift index 553ff7175f3..d907fb7bcff 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] = [] @@ -36,16 +38,21 @@ struct PointOfSaleSettingsHardwareDetailView: View { List(HardwareDestination.allCases) { destination in NavigationLink(value: NavigationDestination.hardware(destination)) { - HStack(alignment: .firstTextBaseline) { + DynamicHStack(horizontalAlignment: .leading, spacing: POSSpacing.medium) { Image(systemName: destination.icon) .font(.posBodyLargeRegular()) + .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) @@ -109,16 +116,21 @@ struct PointOfSaleSettingsHardwareDetailView: View { Button { showCardReaderDocumentationModal = true } label: { - HStack(alignment: .firstTextBaseline) { + DynamicHStack(horizontalAlignment: .leading, spacing: POSSpacing.medium) { Image(systemName: "doc.text") .font(.posBodyLargeRegular()) + .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) @@ -157,16 +169,21 @@ struct PointOfSaleSettingsHardwareDetailView: View { Button { handleScannerDestination(destination) } label: { - HStack(alignment: .firstTextBaseline) { + DynamicHStack(horizontalAlignment: .leading, spacing: POSSpacing.medium) { Image(systemName: destination.icon) .font(.posBodyLargeRegular()) + .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) From a73a7fbafc3c59e24f7366c8459f446cce806d72 Mon Sep 17 00:00:00 2001 From: iamgabrielma Date: Mon, 1 Sep 2025 15:09:56 +0700 Subject: [PATCH 03/11] update help detail view for larger accessibility sizes --- .../PointOfSaleSettingsHelpDetailView.swift | 20 ++++++++++++++++--- 1 file changed, 17 insertions(+), 3 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHelpDetailView.swift b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHelpDetailView.swift index 707c75ac30a..b8a91d3483f 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 @@ -17,16 +19,20 @@ struct PointOfSaleSettingsHelpDetailView: View { Button { showProductRestrictions = true } label: { - HStack(alignment: .firstTextBaseline) { + DynamicHStack(horizontalAlignment: .leading, spacing: POSSpacing.medium) { Image(systemName: "magnifyingglass") .font(.posBodyLargeRegular()) + .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() } } .listRowSeparator(.hidden) @@ -35,16 +41,20 @@ struct PointOfSaleSettingsHelpDetailView: View { Button { showDocumentation = true } label: { - HStack(alignment: .firstTextBaseline) { + DynamicHStack(horizontalAlignment: .leading, spacing: POSSpacing.medium) { Image(systemName: "doc.text") .font(.posBodyLargeRegular()) + .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() } } .listRowSeparator(.hidden) @@ -53,16 +63,20 @@ struct PointOfSaleSettingsHelpDetailView: View { Button { showSupport = true } label: { - HStack(alignment: .firstTextBaseline) { + DynamicHStack(horizontalAlignment: .leading, spacing: POSSpacing.medium) { Image(systemName: "questionmark") .font(.posBodyLargeRegular()) + .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() } } .listRowSeparator(.hidden) From 4ea394f9f9ad08f4527dd694c3a72e9c42d52a39 Mon Sep 17 00:00:00 2001 From: iamgabrielma Date: Mon, 1 Sep 2025 15:14:47 +0700 Subject: [PATCH 04/11] update modal header linelimit when larger sizes When the header contains longer text that fits on screen, is cut to max 1 line only, we can remove the limit for larger sizes so all text is visible --- .../Classes/POS/Presentation/PointOfSaleModalHeader.swift | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) 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 From 4584c2ab47a00476d3d88390d2f2487b20364891 Mon Sep 17 00:00:00 2001 From: iamgabrielma Date: Mon, 1 Sep 2025 15:36:03 +0700 Subject: [PATCH 05/11] add a11y traits for buttons, headers, and images --- .../Settings/PointOfSaleSettingsHardwareDetailView.swift | 6 ++++++ .../Settings/PointOfSaleSettingsHelpDetailView.swift | 7 +++++++ .../Presentation/Settings/PointOfSaleSettingsView.swift | 3 +++ 3 files changed, 16 insertions(+) diff --git a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift index d907fb7bcff..246686150e3 100644 --- a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift +++ b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift @@ -35,12 +35,14 @@ struct PointOfSaleSettingsHardwareDetailView: View { NavigationStack(path: $navigationPath) { POSPageHeaderView(title: Localization.hardwareTitle) .foregroundColor(.posSurface) + .accessibilityAddTraits(.isHeader) List(HardwareDestination.allCases) { destination in NavigationLink(value: NavigationDestination.hardware(destination)) { DynamicHStack(horizontalAlignment: .leading, spacing: POSSpacing.medium) { Image(systemName: destination.icon) .font(.posBodyLargeRegular()) + .accessibilityHidden(true) .renderedIf(!dynamicTypeSize.isAccessibilitySize) VStack(alignment: .leading, spacing: POSPadding.xSmall) { @@ -119,6 +121,7 @@ struct PointOfSaleSettingsHardwareDetailView: View { DynamicHStack(horizontalAlignment: .leading, spacing: POSSpacing.medium) { Image(systemName: "doc.text") .font(.posBodyLargeRegular()) + .accessibilityHidden(true) .renderedIf(!dynamicTypeSize.isAccessibilitySize) VStack(alignment: .leading, spacing: POSPadding.xSmall) { @@ -134,6 +137,7 @@ struct PointOfSaleSettingsHardwareDetailView: View { } } .buttonStyle(.plain) + .accessibilityAddTraits(.isButton) .listRowSeparator(.hidden) } .listStyle(.plain) @@ -172,6 +176,7 @@ struct PointOfSaleSettingsHardwareDetailView: View { DynamicHStack(horizontalAlignment: .leading, spacing: POSSpacing.medium) { Image(systemName: destination.icon) .font(.posBodyLargeRegular()) + .accessibilityHidden(true) .renderedIf(!dynamicTypeSize.isAccessibilitySize) VStack(alignment: .leading, spacing: POSPadding.xSmall) { @@ -187,6 +192,7 @@ struct PointOfSaleSettingsHardwareDetailView: View { } } .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 b8a91d3483f..89f0e438fd5 100644 --- a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHelpDetailView.swift +++ b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHelpDetailView.swift @@ -15,6 +15,7 @@ struct PointOfSaleSettingsHelpDetailView: View { NavigationStack { POSPageHeaderView(title: Localization.helpTitle) .foregroundColor(.posSurface) + .accessibilityAddTraits(.isHeader) List { Button { showProductRestrictions = true @@ -22,6 +23,7 @@ struct PointOfSaleSettingsHelpDetailView: View { DynamicHStack(horizontalAlignment: .leading, spacing: POSSpacing.medium) { Image(systemName: "magnifyingglass") .font(.posBodyLargeRegular()) + .accessibilityHidden(true) .renderedIf(!dynamicTypeSize.isAccessibilitySize) VStack(alignment: .leading, spacing: POSPadding.xSmall) { Text(Localization.productRestrictionsInfo) @@ -35,6 +37,7 @@ struct PointOfSaleSettingsHelpDetailView: View { Spacer() } } + .accessibilityAddTraits(.isButton) .listRowSeparator(.hidden) .buttonStyle(.plain) @@ -44,6 +47,7 @@ struct PointOfSaleSettingsHelpDetailView: View { DynamicHStack(horizontalAlignment: .leading, spacing: POSSpacing.medium) { Image(systemName: "doc.text") .font(.posBodyLargeRegular()) + .accessibilityHidden(true) .renderedIf(!dynamicTypeSize.isAccessibilitySize) VStack(alignment: .leading, spacing: POSPadding.xSmall) { Text(Localization.documentationTitle) @@ -57,6 +61,7 @@ struct PointOfSaleSettingsHelpDetailView: View { Spacer() } } + .accessibilityAddTraits(.isButton) .listRowSeparator(.hidden) .buttonStyle(.plain) @@ -66,6 +71,7 @@ struct PointOfSaleSettingsHelpDetailView: View { DynamicHStack(horizontalAlignment: .leading, spacing: POSSpacing.medium) { Image(systemName: "questionmark") .font(.posBodyLargeRegular()) + .accessibilityHidden(true) .renderedIf(!dynamicTypeSize.isAccessibilitySize) VStack(alignment: .leading, spacing: POSPadding.xSmall) { Text(Localization.getSupportTitle) @@ -79,6 +85,7 @@ struct PointOfSaleSettingsHelpDetailView: View { 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 de96735cf0c..d421c25501a 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( @@ -102,6 +103,7 @@ struct PointOfSaleSettingsCard: View { Image(systemName: item.icon) .font(.posBodyLargeRegular()) .foregroundStyle(Color.posOnSurface) + .accessibilityHidden(true) .renderedIf(!dynamicTypeSize.isAccessibilitySize) VStack(alignment: .leading, spacing: POSSpacing.xSmall) { @@ -121,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) From cb87c2137ed1aa8f0e1f51bf2c3af22e7748d067 Mon Sep 17 00:00:00 2001 From: iamgabrielma Date: Mon, 1 Sep 2025 15:54:21 +0700 Subject: [PATCH 06/11] lint --- .../Settings/PointOfSaleSettingsHelpDetailView.swift | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHelpDetailView.swift b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHelpDetailView.swift index 89f0e438fd5..821a229314b 100644 --- a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHelpDetailView.swift +++ b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHelpDetailView.swift @@ -2,7 +2,7 @@ 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 From 2835ce852cf039cf8cf51c8c86433423319291cf Mon Sep 17 00:00:00 2001 From: iamgabrielma Date: Mon, 1 Sep 2025 17:29:58 +0700 Subject: [PATCH 07/11] restore HStack usage to fix miss-alignment issue --- .../POS/Presentation/Settings/PointOfSaleSettingsView.swift | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsView.swift b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsView.swift index d421c25501a..80ec93993c9 100644 --- a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsView.swift +++ b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsView.swift @@ -99,7 +99,7 @@ struct PointOfSaleSettingsCard: View { var body: some View { Button(action: onTap) { - DynamicHStack(horizontalAlignment: .leading, spacing: POSSpacing.medium) { + HStack(spacing: POSSpacing.medium) { Image(systemName: item.icon) .font(.posBodyLargeRegular()) .foregroundStyle(Color.posOnSurface) From dbf9a59773e23a6489129a06ad3e456d5389853e Mon Sep 17 00:00:00 2001 From: iamgabrielma Date: Mon, 1 Sep 2025 17:37:00 +0700 Subject: [PATCH 08/11] Adjust padding hardware detail view for documentation button --- .../Settings/PointOfSaleSettingsHardwareDetailView.swift | 1 + 1 file changed, 1 insertion(+) diff --git a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift index 246686150e3..63b44d12ac7 100644 --- a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift +++ b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift @@ -136,6 +136,7 @@ struct PointOfSaleSettingsHardwareDetailView: View { Spacer() } } + .padding() .buttonStyle(.plain) .accessibilityAddTraits(.isButton) .listRowSeparator(.hidden) From 2e3a5268e2169a9c3d0619356133485b2e27cf88 Mon Sep 17 00:00:00 2001 From: iamgabrielma Date: Tue, 2 Sep 2025 06:23:09 +0700 Subject: [PATCH 09/11] revert unnecessary usage of DynamicHStack --- .../Settings/PointOfSaleSettingsHardwareDetailView.swift | 4 ++-- .../Settings/PointOfSaleSettingsHelpDetailView.swift | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift index 0526975e851..de64ce09ba6 100644 --- a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift +++ b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift @@ -39,7 +39,7 @@ struct PointOfSaleSettingsHardwareDetailView: View { List(HardwareDestination.allCases) { destination in NavigationLink(value: NavigationDestination.hardware(destination)) { - DynamicHStack(horizontalAlignment: .leading, spacing: POSSpacing.medium) { + HStack(spacing: POSSpacing.medium) { Image(systemName: destination.icon) .font(.posBodyLargeRegular()) .accessibilityHidden(true) @@ -125,7 +125,7 @@ struct PointOfSaleSettingsHardwareDetailView: View { Button { showCardReaderDocumentationModal = true } label: { - DynamicHStack(horizontalAlignment: .leading, spacing: POSSpacing.medium) { + HStack(spacing: POSSpacing.medium) { Image(systemName: "doc.text") .font(.posBodyLargeRegular()) .accessibilityHidden(true) diff --git a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHelpDetailView.swift b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHelpDetailView.swift index 821a229314b..86b2243b601 100644 --- a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHelpDetailView.swift +++ b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHelpDetailView.swift @@ -20,7 +20,7 @@ struct PointOfSaleSettingsHelpDetailView: View { Button { showProductRestrictions = true } label: { - DynamicHStack(horizontalAlignment: .leading, spacing: POSSpacing.medium) { + HStack(spacing: POSSpacing.medium) { Image(systemName: "magnifyingglass") .font(.posBodyLargeRegular()) .accessibilityHidden(true) @@ -44,7 +44,7 @@ struct PointOfSaleSettingsHelpDetailView: View { Button { showDocumentation = true } label: { - DynamicHStack(horizontalAlignment: .leading, spacing: POSSpacing.medium) { + HStack(spacing: POSSpacing.medium) { Image(systemName: "doc.text") .font(.posBodyLargeRegular()) .accessibilityHidden(true) @@ -68,7 +68,7 @@ struct PointOfSaleSettingsHelpDetailView: View { Button { showSupport = true } label: { - DynamicHStack(horizontalAlignment: .leading, spacing: POSSpacing.medium) { + HStack(spacing: POSSpacing.medium) { Image(systemName: "questionmark") .font(.posBodyLargeRegular()) .accessibilityHidden(true) From 8eab7a68c3b42b9002657b4abc3c093167a96b38 Mon Sep 17 00:00:00 2001 From: iamgabrielma Date: Tue, 2 Sep 2025 06:30:15 +0700 Subject: [PATCH 10/11] address icon miss-alignment --- .../Settings/PointOfSaleSettingsHardwareDetailView.swift | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift index de64ce09ba6..ca56a03f7a6 100644 --- a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift +++ b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift @@ -173,20 +173,25 @@ 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() } - Spacer() } .buttonStyle(.plain) + .accessibilityAddTraits(.isButton) .listRowSeparator(.hidden) } .listStyle(.plain) From d2959d181d8ca8985a4034b88b46d76a687d2570 Mon Sep 17 00:00:00 2001 From: iamgabrielma Date: Tue, 2 Sep 2025 06:36:33 +0700 Subject: [PATCH 11/11] remove plain style from buttons using the .plain style is unnecessary here, and causes an issue with visual feedback when these are tapped --- .../Settings/PointOfSaleSettingsHardwareDetailView.swift | 2 -- 1 file changed, 2 deletions(-) diff --git a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift index ca56a03f7a6..c88cc82f2c4 100644 --- a/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift +++ b/WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift @@ -144,7 +144,6 @@ struct PointOfSaleSettingsHardwareDetailView: View { } } .padding() - .buttonStyle(.plain) .accessibilityAddTraits(.isButton) .listRowSeparator(.hidden) } @@ -190,7 +189,6 @@ struct PointOfSaleSettingsHardwareDetailView: View { Spacer() } } - .buttonStyle(.plain) .accessibilityAddTraits(.isButton) .listRowSeparator(.hidden) }