-
Notifications
You must be signed in to change notification settings - Fork 117
[Woo POS] Improve VoiceOver accessibility for barcode scanning errors #15793
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.
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
base: trunk
Are you sure you want to change the base?
[Woo POS] Improve VoiceOver accessibility for barcode scanning errors #15793
Conversation
- Add playSound method with completion parameter - Implement AVAudioPlayerDelegate for precise sound finish detection - Maintain backward compatibility with existing playSound calls - Enable VoiceOver announcements after sound playback completes
- Add optional accessibilityLabel property to Cart.PurchasableItem - Generate accessibility labels for barcode scan errors with format "Error description. Barcode" - Update ItemRowView to use custom accessibility labels for VoiceOver - Maintain default behavior for normal cart items
- Import UIKit for UIAccessibility support - Use sound player completion callback to trigger VoiceOver announcements - Announce accessibility labels after barcode scan failure sounds complete - Improve accessibility feedback for scanning errors
- Add accessibilityFocusedItemID property to Cart model - Implement @AccessibilityFocusState in CartView for native VoiceOver focus - Replace UIAccessibility.post with accessibility focus on error items after sound - Remove UIKit dependency from PointOfSaleAggregateModel - Use proper SwiftUI accessibility patterns for better user experience
- 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
Generated by 🚫 Danger |
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I didn't notice this one before, sorry... but the first bullet point reads as
First, set up barcodes in the G-T-I-N, U-P-C, ean, I-S-B-N field in Products greater than Product Details greater than Inventory. More details.
So a few things we could improve
- Announce that
More details
is a link/button - Announce the
>
as "right arrow", or use a better symbol to indicate the screen transitions. - Spell out
E-A-N
.
Similarly, in the second bullet point, we could spell out H-I-D
The error announcing is much better. I think we should probably move the focus to any new item that's added to the cart (via scanning only)... that would also help with an issue we have now where the error is only announced the first time it happens – even if there are other successful scans in the meantime. It only announces it again if the message is different (e.g. a different erroring item is scanned.)
error.announcements.mp4
This is a good improvement though, and I don't want us to delve too deep at the expense of other things. See what you think about further improvements.
// Only play a sound and track analytics if the item still exists in the cart. | ||
await soundPlayer.playSound(.barcodeScanFailure) | ||
await soundPlayer.playSound(.barcodeScanFailure, completion: { [weak self] in | ||
self?.cart.accessibilityFocusedItemID = errorItem.id |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's nice that we set this inside the scanned method – it means we can easily do it for non-errors as well.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, I'll do it. Looks simple enough and makes sense for the UX.
@@ -90,9 +91,15 @@ struct CartView: View { | |||
}) | |||
.id(cartItem.id) | |||
.transition(.opacity) | |||
.accessibilityFocused($accessibilityFocusedItem, equals: cartItem.id) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It seems strange that this doesn't result in errors being read out after it changes from error to success back to the same error again. There must be some string diffing happening inside VoiceOver to prevent it reading the same thing over and over.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good observation. I'm taking a look how to solve this 🤔
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I cannot find a working solution. I tried resetting the focus and introducing timeouts, but it doesn't help. Although it's not documented, it does seem that the same accessibility label is not read twice with this @AccessibilityFocusState
.
@joshheald thanks for testing!
However, I wasn't able to find a clean solution for reading out the same accessibility label twice in a row 🤔 If I put any new prefix on accessibility label, then it's read fine. |
WOOMOB-652
Description
This PR improves VoiceOver accessibility for barcode scanning errors in Woo POS. When barcode scanning fails, users will now receive audio feedback with accessibility focusing on a cart item row.
The implementation addresses several accessibility gaps:
Additionally
Steps to reproduce
Testing information
Tested on iPad Air M2 18.3 with VoiceOver enabled.
RELEASE-NOTES.txt
if necessary.