Skip to content

[POS Settings] Accessibility improvements #16068

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Sep 3, 2025
Merged

[POS Settings] Accessibility improvements #16068

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
50f1085
update text with dynamicTypeSize. remove icon on larger sizes
iamgabrielma Sep 1, 2025
cb046b0
use dynamicTypeSize in hardwareview
iamgabrielma Sep 1, 2025
a73a7fb
update help detail view for larger accessibility sizes
iamgabrielma Sep 1, 2025
4ea394f
update modal header linelimit when larger sizes
iamgabrielma Sep 1, 2025
4584c2a
add a11y traits for buttons, headers, and images
iamgabrielma Sep 1, 2025
cb87c21
lint
iamgabrielma Sep 1, 2025
2835ce8
restore HStack usage to fix miss-alignment issue
iamgabrielma Sep 1, 2025
dbf9a59
Adjust padding hardware detail view for documentation button
iamgabrielma Sep 1, 2025
a3282dc
Merge branch 'trunk' into task/WOOMOB-1221-pos-settings-a11y-improvem…
iamgabrielma Sep 1, 2025
2e3a526
revert unnecessary usage of DynamicHStack
iamgabrielma Sep 1, 2025
8eab7a6
address icon miss-alignment
iamgabrielma Sep 1, 2025
d2959d1
remove plain style from buttons
iamgabrielma Sep 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion WooCommerce/Classes/POS/Presentation/PointOfSaleModalHeader.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
import SwiftUI

struct PointOfSaleModalHeader: View {
@Environment(\.dynamicTypeSize) private var dynamicTypeSize

@Binding var isPresented: Bool
@Binding var title: AttributedString

var body: some View {
HStack {
Text(title)
.font(.posHeadingBold)
.lineLimit(1)
.dynamicTypeSize(...DynamicTypeSize.accessibility2)
.lineLimit(dynamicTypeSize.isAccessibilitySize ? nil : 1)
Spacer()
Button {
isPresented = false
Expand Down
31 changes: 26 additions & 5 deletions WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHardwareDetailView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import SwiftUI

struct PointOfSaleSettingsHardwareDetailView: View {
@Environment(\.dynamicTypeSize) private var dynamicTypeSize

let settingsController: PointOfSaleSettingsControllerProtocol

@State private var navigationPath: [NavigationDestination] = []
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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)
Expand Down
27 changes: 24 additions & 3 deletions WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHelpDetailView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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)
}
Expand Down
13 changes: 11 additions & 2 deletions WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ extension PointOfSaleSettingsView {
},
buttonIcon: "xmark"))
.foregroundColor(.posSurface)
.accessibilityAddTraits(.isHeader)
Copy link
Contributor

@joshheald joshheald Sep 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This means the x button is announced as a heading as well. Not a huge problem but a bit odd. Perhaps it would be better to update the internals of the POSPageHeaderView to have this trait just on the text – it saves us adding it elsewhere.

Copy link
Contributor Author

@iamgabrielma iamgabrielma Sep 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, let's update the POSPageHeaderView better, I've logged it on WOOMOB-1254 so can be tested separately


VStack(spacing: POSSpacing.small) {
PointOfSaleSettingsCard(
Expand Down Expand Up @@ -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()
}
Expand All @@ -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)
Expand Down