Skip to content
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

Jump to bottom

W-12627197 -v3/template-retail-app Indicate live regions for dynamically changing content #1825

Merged
merged 13 commits into from
Jun 14, 2024
Merged

W-12627197 -v3/template-retail-app Indicate live regions for dynamically changing content #1825

merged 13 commits into from
Jun 14, 2024

Conversation

alexvuong
Copy link
Collaborator

@alexvuong alexvuong commented Jun 11, 2024 •
edited
Loading

Description

This PR updates the code to make sure dynamic content is visible to screen reader in cart product-item and order summary for v3 retail app template
NOTE: When you test this PR, there is a current bug in Recommendation Component that caused it to re-render every time shopper changes basket item quantity in cart page. As a result, the screen reader will read it out loud following a quantity changes which can be a lot of noise.
A PR will be created to address that issue separately from this PR

a11y.live.region.v3.mov

Types of Changes

  • 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

  • (change1)

How to Test-Drive This PR

  • Checkout code
  • Run Retail App template
  • Add a few items in cart/add item to wishlist
  • 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...

Localization

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

@alexvuong alexvuong requested a review from a team as a code owner June 11, 2024 21:12
@alexvuong alexvuong mentioned this pull request Jun 11, 2024
Closed
12 tasks
unandyala
unandyala approved these changes Jun 12, 2024
View reviewed changes
Copy link
Collaborator

@unandyala unandyala left a comment

Choose a reason for hiding this comment

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

Left a comment about tests. Otherwise LGTM

packages/template-retail-react-app/app/components/display-price/current-price.jsx Show resolved Hide resolved
alexvuong
alexvuong commented Jun 13, 2024
View reviewed changes
packages/template-retail-react-app/app/components/recommended-products/index.jsx Outdated
@@ -73,7 +73,7 @@ const RecommendedProducts = ({zone, recommender, products, title, shouldFetch, .
getRecommendations(recommender, _products)
return
}
}, [zone, recommender, _products])
}, [zone, recommender])
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

@unandyala I found a weird behavior in cart page when the recommendation section "You May also like" refetch every time we change quantity in the basket, which I find unnecessary. This is also the reason the screen reader read out lout so much updates than we expect. Hence I decided to remove the _product to not refetch on quantity change. These products will be fetched once when cart page is loaded.

By removing this, we don't need to have isLiveRegion for the price components. Let me know if you have any concern. Thanks

bendvc
bendvc reviewed Jun 13, 2024
View reviewed changes
packages/template-retail-react-app/CHANGELOG.md Outdated
@@ -6,7 +6,8 @@
- Display different pricing for various products on Product tiles and PDP [#1760](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1760)
- Display pricing for cart, checkout and wishlist page [#1796](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1796)
- Shows promotional callout message on Product List and Product Detail pages [#1786](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1786) [#1804](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1804)

- [a11y] Update live region for display price [#1825](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1825)
Copy link
Collaborator

Choose a reason for hiding this comment

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

NIT: Looking at this PR we are applying updates for aria live support to multiple components, not just the component. If the list isn't too long I'd also add them in this comment, otherwise simple add something like "added live region suppose to components"

@alexvuong alexvuong merged commit 5bf34e1 into v3/product-tile-revamp Jun 14, 2024
28 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@bendvc bendvc bendvc approved these changes

@unandyala unandyala unandyala approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@alexvuong @bendvc @unandyala