add a11y traits for buttons, headers, and images

Author: iamgabrielma

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)

WooCommerce/Classes/POS/Presentation/Settings/PointOfSaleSettingsHelpDetailView.swift

@@ -15,13 +15,15 @@ struct PointOfSaleSettingsHelpDetailView: View {
         NavigationStack {
             POSPageHeaderView(title: Localization.helpTitle)
             .foregroundColor(.posSurface)
+            .accessibilityAddTraits(.isHeader)
             List {
                 Button {
                     showProductRestrictions = true
                 } label: {
                     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)
             }

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)