Skip to content

Commit

Permalink
[ConsentV2] Fix some a11y issues
Browse files Browse the repository at this point in the history
This CL fixes below a11y issues:
* Add labels for close buttons of consent message and consent dialog.
* Make some image alternatives null for screen readers.
* Try to grab focus for consent toast when it's shown.
* Try to focus back to cart module when the consent is dismissed.

(cherry picked from commit be921de)

Bug: 1314136
Change-Id: Idcd858dd6ca318268123ed5b0d7b351e268f0ac5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3579820
Reviewed-by: Mei Liang <meiliang@chromium.org>
Reviewed-by: Mohamad Ahmadi <mahmadi@chromium.org>
Commit-Queue: Yue Zhang <yuezhanggg@chromium.org>
Cr-Original-Commit-Position: refs/heads/main@{#993016}
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3600747
Cr-Commit-Position: refs/branch-heads/5005@{#155}
Cr-Branched-From: 5b4d945-refs/heads/main@{#992738}
  • Loading branch information
Yue Zhang authored and Chromium LUCI CQ committed Apr 25, 2022
1 parent 1debff6 commit a9fa5a8
Show file tree
Hide file tree
Showing 3 changed files with 11 additions and 4 deletions.
Expand Up @@ -97,7 +97,7 @@
as="merchant">
<li class="favicon">
<img class="favicon-image" is="cr-auto-img"
auto-src="[[getFaviconUrl_(merchant.cartUrl.url)]]"></img>
auto-src="[[getFaviconUrl_(merchant.cartUrl.url)]]" alt=""></img>
</li>
</template>
</ul>
Expand Down Expand Up @@ -137,7 +137,7 @@
</iron-pages>
</div>
<template is="dom-if" if="[[showCloseButton_]]" restamp>
<cr-icon-button id="close" class="icon-clear"
<cr-icon-button id="close" class="icon-clear" aria-label="$i18n{close}"
on-click="onCloseClick_"></cr-icon-button>
</template>
</div>
Expand Down
Expand Up @@ -48,15 +48,15 @@
</style>

<cr-dialog id="dialog" show-close-button on-cancel="onDismissClick_"
show-on-attach>
show-on-attach close-text="$i18n{close}">
<div slot="title">$i18n{modulesCartSentence}</div>
<div slot="body">
<div id="content-container">
<div id="content-title">$i18n{modulesCartDiscountConentTitle}</div>
<div id="content">$i18n{modulesCartDiscountConsentContentV3}</div>
</div>
<div id="icon-container">
<img id="icon" src="modules/cart/icons/consent_icon.svg">
<img id="icon" src="modules/cart/icons/consent_icon.svg" alt="">
</div>
</div>
<div slot="button-container">
Expand Down
7 changes: 7 additions & 0 deletions chrome/browser/resources/new_tab_page/modules/cart/module.ts
Expand Up @@ -410,6 +410,7 @@ export class ChromeCartModuleElement extends I18nMixin
this.confirmDiscountConsentString_ =
loadTimeData.getString('modulesCartDiscountConsentRejectConfirmation');
this.$.confirmDiscountConsentToast.show();
this.$.confirmDiscountConsentToast.focus();
ChromeCartProxy.getHandler().onDiscountConsentAcknowledged(false);
chrome.metricsPrivate.recordUserAction(
'NewTabPage.Carts.RejectDiscountConsent');
Expand All @@ -420,13 +421,19 @@ export class ChromeCartModuleElement extends I18nMixin
this.confirmDiscountConsentString_ =
loadTimeData.getString('modulesCartDiscountConsentAcceptConfirmation');
this.$.confirmDiscountConsentToast.show();
this.$.confirmDiscountConsentToast.focus();
ChromeCartProxy.getHandler().onDiscountConsentAcknowledged(true);
chrome.metricsPrivate.recordUserAction(
'NewTabPage.Carts.AcceptDiscountConsent');
}

private onDiscountConsentDismissed_() {
this.showDiscountConsent = false;
const firstCart =
this.$.cartCarousel.querySelector<HTMLElement>('.cart-container');
if (firstCart !== null) {
firstCart.focus();
}
ChromeCartProxy.getHandler().onDiscountConsentDismissed();
chrome.metricsPrivate.recordUserAction(
'NewTabPage.Carts.DismissDiscountConsent');
Expand Down

0 comments on commit a9fa5a8

Please sign in to comment.