alexvuong commented 4 months ago

Description

This PR updates the code to make sure dynamic content is visible to screen reader in cart product-item and order summary

https://github.com/SalesforceCommerceCloud/pwa-kit/assets/52219283/28b05625-0870-4667-bdc0-eb2ae4aae142

Types of Changes

[x] Bug fix (non-breaking change that fixes an issue)
[ ] New feature (non-breaking change that adds functionality)
[ ] Documentation update
[ ] Breaking change (could cause existing functionality to not work as expected)
[ ] Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

Removing a public function or component or prop

Adding a required argument to a function

Changing the data type of a function parameter or return value

Adding a new peer dependency to package.json

Changes

item-variant.jsx

How to Test-Drive This PR

Checkout code
Run Retail App template
Add a few items in cart
Go to Cart Page.
Open VoiceOver (Cmd + f5)
Change the quantity
Observe the screen reader is now reading out loud the changes in quantity, prices and order summary section

Checklists

General

[ ] Changes are covered by test cases
[ ] CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

[ ] There are no changes to UI

or...

[ ] Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
[ ] Changes comply with WCAG 2.0 guidelines levels A and AA
[ ] Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

[ ] Changes include a UI text update in the Retail React App (which requires translation)

alexvuong commented 3 months ago

Note: Since we are setting these live-region to be "polite", the screen reader will wait until previous message to finish before announcing the newly update values, please expect some delay from screen reader when you see prices has updated