[A11y] Update aria-label to include a warning that Buy with GPay opens in a new window
#403
Conversation
…tton on product page and classic cart and checkout.
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
There was a problem hiding this comment.
Pull Request Overview
This PR adds accessibility improvements to the Google Pay button by updating its aria-label to warn users that clicking the button opens in a new window, addressing SQUARE-176. The change ensures better screen reader support and complies with accessibility guidelines.
- Modifies Google Pay button initialization to append accessibility warning text
- Adds localized text strings for "Buy with GPay" and "opens in a new window"
- Implements the fix in both JavaScript frontend code and React blocks
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/js/frontend/wc-square-digital-wallet.js | Updates Google Pay button initialization to modify aria-label with accessibility warning |
| src/blocks/digital-wallets/hooks.js | Adds similar aria-label modification for React-based Google Pay implementation |
| includes/Gateway/Digital_Wallet.php | Provides localized text strings for the accessibility warning |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
There was a problem hiding this comment.
Overall this looks good, left a minor comment.
The approach followed in this PR might not be the best possible one, but the button markup is rendered by the Google Pay script. So, we don’t have any other way to fix this except by handling it this way, or alternatively, we could report the issue upstream and wait for it to be fixed and released there.
This would be great to fix upstream, just not sure how likely that will be or how long that will take. I think we continue with this but if it's easy enough for us to open a PR upstream, I think that would be good to do in parallel and we can always remove this code in the future if it does get fixed
I’m not sure where to report this issue or raise the PR. The button is rendered by this script, and I don’t think it’s a public repo (at least I couldn’t find it). I think we can report the issue on this repo: https://github.com/google-pay/google-pay-button. That may help us get it fixed in the script by the team there. 🤔 |
QA Update ✅I have verified this PR in the I tested the following on this branch: Block theme Product page Cart Page Checkout Page Classic Product page Screen.Recording.2025-09-09.at.7.05.08.PM.movCart Page Screen.Recording.2025-09-09.at.7.44.24.PM.movCheckout Page Screen.Recording.2025-09-09.at.7.45.10.PM.movTesting Environment
Steps to Test- As mentioned in the PR description.
|
All Submissions:
Changes proposed in this Pull Request:
As reported in SQUARE-176, currently Buy with Gpay button opens new window without warning. This PR updates the
aria-labelattribute of the button to add a warning for "opens in a new window".Note
The approach followed in this PR might not be the best possible one, but the button markup is rendered by the Google Pay script. So, we don’t have any other way to fix this except by handling it this way, or alternatively, we could report the issue upstream and wait for it to be fixed and released there.
Closes https://linear.app/a8c/issue/SQUARE-176/accessibility-buttonlink-opens-new-window-or-tab-without-warning
Steps to test the changes in this Pull Request:
Changelog entry