Skip to content

Commit 5bf4238

Browse files
committed
Improve VoiceOver accessibility for barcode scanner information modal
- Add accessibility labels to replace bullet point characters with sequential indicators - Create screen reader-friendly versions using "First:", "Second:", etc. instead of "•" - Preserve visual bullet points for sighted users while improving screen reader experience - Add proper localization for accessible text alternatives
1 parent d65e564 commit 5bf4238

File tree

1 file changed

+30
-0
lines changed

1 file changed

+30
-0
lines changed

WooCommerce/Classes/POS/Presentation/PointOfSaleBarcodeScannerInformationModal.swift

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,13 @@ struct PointOfSaleBarcodeScannerInformationModal: View {
1616

1717
PointOfSaleInformationModalParagraphView {
1818
Text(bulletPointWithLink)
19+
.accessibilityLabel(bulletPointWithLinkAccessibilityLabel)
1920
Text(AttributedString(Localization.barcodeInfoSecondaryMessage))
21+
.accessibilityLabel(Localization.barcodeInfoSecondaryMessageAccessible)
2022
Text(AttributedString(Localization.barcodeInfoTertiaryMessage))
23+
.accessibilityLabel(Localization.barcodeInfoTertiaryMessageAccessible)
2124
Text(AttributedString(Localization.barcodeInfoQuaternaryMessage))
25+
.accessibilityLabel(Localization.barcodeInfoQuaternaryMessageAccessible)
2226
}
2327
.padding(.leading, POSSpacing.medium)
2428

@@ -37,6 +41,10 @@ struct PointOfSaleBarcodeScannerInformationModal: View {
3741
secondary.append(moreDetails)
3842
return secondary
3943
}
44+
45+
private var bulletPointWithLinkAccessibilityLabel: String {
46+
return Localization.barcodeInfoPrimaryMessageAccessible + " " + Localization.barcodeInfoMoreDetailsLink
47+
}
4048
}
4149

4250
private extension PointOfSaleBarcodeScannerInformationModal {
@@ -86,6 +94,28 @@ private extension PointOfSaleBarcodeScannerInformationModal {
8694
"Tap on the keyboard icon to show it again.",
8795
comment: "Quinary message in the barcode info modal in POS, explaining scanner keyboard emulation and how to show software keyboard again"
8896
)
97+
98+
// Accessibility-friendly versions without bullet points
99+
static let barcodeInfoPrimaryMessageAccessible = NSLocalizedString(
100+
"pos.barcodeInfoModal.primaryMessage.accessible",
101+
value: "First: Set up barcodes in the \"GTIN, UPC, EAN, ISBN\" field in Products > Product Details > Inventory.",
102+
comment: "Accessible version of primary bullet point in barcode info modal, without bullet character for screen readers"
103+
)
104+
static let barcodeInfoSecondaryMessageAccessible = NSLocalizedString(
105+
"pos.barcodeInfoModal.secondaryMessage.accessible",
106+
value: "Second: Refer to your Bluetooth barcode scanner's instructions to set HID mode.",
107+
comment: "Accessible version of secondary bullet point in barcode info modal, without bullet character for screen readers"
108+
)
109+
static let barcodeInfoTertiaryMessageAccessible = NSLocalizedString(
110+
"pos.barcodeInfoModal.tertiaryMessage.accessible",
111+
value: "Third: Connect your barcode scanner in iOS Bluetooth settings.",
112+
comment: "Accessible version of tertiary bullet point in barcode info modal, without bullet character for screen readers"
113+
)
114+
static let barcodeInfoQuaternaryMessageAccessible = NSLocalizedString(
115+
"pos.barcodeInfoModal.quaternaryMessage.accessible",
116+
value: "Fourth: Scan barcodes while on the item list to add products to the cart.",
117+
comment: "Accessible version of quaternary bullet point in barcode info modal, without bullet character for screen readers"
118+
)
89119
}
90120
}
91121

0 commit comments

Comments
 (0)