checkout-js icon indicating copy to clipboard operation
checkout-js copied to clipboard

feat(checkout): CHECKOUT-6875 Improve accessibility part II

Open bc-peng opened this issue 3 years ago • 0 comments

What?

We want to use aria-busy="true" to prevent a screen reader from using the modified content when there is an ongoing API request. Additionally, the loading state should be immediately announced by the screen reader.

Related PR

Part I: https://github.com/bigcommerce/checkout-js/pull/996

Why?

BC merchants can benefit from the ADA-compliant native checkout and order confirmation pages.

Testing / Proof

Please notice the aria-busy changes on the right side of the video.

https://user-images.githubusercontent.com/88361607/187326520-18697916-3cba-4a7e-9c94-fc2b23e50216.mov

bc-peng avatar Aug 30 '22 01:08 bc-peng