Commit 1cf2ae0b authored by John Lee's avatar John Lee Committed by Chromium LUCI CQ

Settings WebUI: Read out progress for clearing browsing data

This CL adds support for screen readers to read out when browsing data
is being cleared and when it has successfully cleared.

There seems to be an issue when the IronA11yAnnouncer's element lives
outside of a modal dialog as it is ignored by the screenreader.
Similarly, if the alert is inside of the dialog, its contents do not
get read if the dialog closes. Therefore, the "Clearing data" alert
needs to live inside the dialog as it is read while the dialog is open,
and the "Data cleared" alert needs to live outside of the dialog as it
is read after the dialog is closed.

Fixed: 1101151
Change-Id: I88c3dd98383b5d1b66a4b8492dcc8e8b817a8843
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2569942
Commit-Queue: John Lee <johntlee@chromium.org>
Reviewed-by: default avatardpapad <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#834495}
parent e4d6e41b
...@@ -1514,6 +1514,12 @@ ...@@ -1514,6 +1514,12 @@
<message name="IDS_SETTINGS_CLEAR_DATA" desc="Text for clear browsing data button in Privacy options in the tabbed UI"> <message name="IDS_SETTINGS_CLEAR_DATA" desc="Text for clear browsing data button in Privacy options in the tabbed UI">
Clear data Clear data
</message> </message>
<message name="IDS_SETTINGS_CLEARING_DATA" desc="Accessibility text for after the clear browsing data button is clicked and while the data is being cleared">
Clearing data...
</message>
<message name="IDS_SETTINGS_CLEARED_DATA" desc="Accessibility text for after the data has been cleared">
Data cleared.
</message>
<message name="IDS_SETTINGS_CLEAR_BROWSING_DATA" desc="Text for clear browsing data button in Privacy options"> <message name="IDS_SETTINGS_CLEAR_BROWSING_DATA" desc="Text for clear browsing data button in Privacy options">
Clear browsing data Clear browsing data
</message> </message>
......
773c91219cad9d9630b8e09b06ecfaad26394504
\ No newline at end of file
74bbd2055e63e512ed986c83e2c7fac0c42f66e4
\ No newline at end of file
...@@ -30,6 +30,7 @@ js_library("clear_browsing_data_dialog") { ...@@ -30,6 +30,7 @@ js_library("clear_browsing_data_dialog") {
"../controls:settings_checkbox", "../controls:settings_checkbox",
"../controls:settings_dropdown_menu.m", "../controls:settings_dropdown_menu.m",
"../people_page:sync_browser_proxy.m", "../people_page:sync_browser_proxy.m",
"//third_party/polymer/v3_0/components-chromium/iron-a11y-announcer:iron-a11y-announcer",
"//ui/webui/resources/js:load_time_data.m", "//ui/webui/resources/js:load_time_data.m",
"//ui/webui/resources/js:web_ui_listener_behavior.m", "//ui/webui/resources/js:web_ui_listener_behavior.m",
] ]
......
...@@ -95,6 +95,11 @@ ...@@ -95,6 +95,11 @@
color: var(--cr-secondary-text-color); color: var(--cr-secondary-text-color);
padding: 16px; padding: 16px;
} }
#clearingDataAlert {
clip: rect(0, 0, 0, 0);
position: fixed;
}
</style> </style>
<cr-dialog id="clearBrowsingDataDialog" <cr-dialog id="clearBrowsingDataDialog"
...@@ -235,6 +240,12 @@ ...@@ -235,6 +240,12 @@
clearButtonDisabled_)]]"> clearButtonDisabled_)]]">
$i18n{clearData} $i18n{clearData}
</cr-button> </cr-button>
<!-- The alert must be inside the dialog for it to be read while the
dialog is open. -->
<div id="clearingDataAlert" role="alert">
[[clearingDataAlertString_]]
</div>
</div> </div>
<template is="dom-if" if="[[shouldShowFooter_(syncStatus.signedIn)]]" <template is="dom-if" if="[[shouldShowFooter_(syncStatus.signedIn)]]"
restamp> restamp>
......
...@@ -22,6 +22,7 @@ import '../settings_shared_css.m.js'; ...@@ -22,6 +22,7 @@ import '../settings_shared_css.m.js';
import {assert} from 'chrome://resources/js/assert.m.js'; import {assert} from 'chrome://resources/js/assert.m.js';
import {WebUIListenerBehavior} from 'chrome://resources/js/web_ui_listener_behavior.m.js'; import {WebUIListenerBehavior} from 'chrome://resources/js/web_ui_listener_behavior.m.js';
import {IronA11yAnnouncer} from 'chrome://resources/polymer/v3_0/iron-a11y-announcer/iron-a11y-announcer.js';
import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js'; import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
import {DropdownMenuOptionList} from '../controls/settings_dropdown_menu.m.js'; import {DropdownMenuOptionList} from '../controls/settings_dropdown_menu.m.js';
...@@ -122,6 +123,12 @@ Polymer({ ...@@ -122,6 +123,12 @@ Polymer({
value: false, value: false,
}, },
/** @private */
clearingDataAlertString_: {
type: String,
value: '',
},
/** @private */ /** @private */
clearButtonDisabled_: { clearButtonDisabled_: {
type: Boolean, type: Boolean,
...@@ -446,6 +453,7 @@ Polymer({ ...@@ -446,6 +453,7 @@ Polymer({
*/ */
clearBrowsingData_: async function() { clearBrowsingData_: async function() {
this.clearingInProgress_ = true; this.clearingInProgress_ = true;
this.clearingDataAlertString_ = loadTimeData.getString('clearingData');
const tab = this.$.tabs.selectedItem; const tab = this.$.tabs.selectedItem;
const dataTypes = this.getSelectedDataTypes_(tab); const dataTypes = this.getSelectedDataTypes_(tab);
const timePeriod = tab.querySelector('.time-range-select').pref.value; const timePeriod = tab.querySelector('.time-range-select').pref.value;
...@@ -464,6 +472,8 @@ Polymer({ ...@@ -464,6 +472,8 @@ Polymer({
await this.browserProxy_.clearBrowsingData( await this.browserProxy_.clearBrowsingData(
dataTypes, timePeriod, this.installedApps_); dataTypes, timePeriod, this.installedApps_);
this.clearingInProgress_ = false; this.clearingInProgress_ = false;
IronA11yAnnouncer.requestAvailability();
this.fire('iron-announce', {text: loadTimeData.getString('clearedData')});
this.showHistoryDeletionDialog_ = showHistoryNotice; this.showHistoryDeletionDialog_ = showHistoryNotice;
// If both the history notice and the passwords notice should be shown, show // If both the history notice and the passwords notice should be shown, show
// the history notice first, and then show the passwords notice once the // the history notice first, and then show the passwords notice once the
......
...@@ -306,7 +306,11 @@ Polymer({ ...@@ -306,7 +306,11 @@ Polymer({
/** @private */ /** @private */
onDialogClosed_() { onDialogClosed_() {
Router.getInstance().navigateTo(assert(routes.CLEAR_BROWSER_DATA.parent)); Router.getInstance().navigateTo(assert(routes.CLEAR_BROWSER_DATA.parent));
focusWithoutInk(assert(this.$$('#clearBrowsingData'))); setTimeout(() => {
// Focus after a timeout to ensure any a11y messages get read before
// screen readers read out the newly focused element.
focusWithoutInk(assert(this.$$('#clearBrowsingData')));
});
}, },
/** @private */ /** @private */
......
...@@ -1319,6 +1319,8 @@ void AddPrivacyStrings(content::WebUIDataSource* html_source, ...@@ -1319,6 +1319,8 @@ void AddPrivacyStrings(content::WebUIDataSource* html_source,
{"siteSettings", IDS_SETTINGS_SITE_SETTINGS}, {"siteSettings", IDS_SETTINGS_SITE_SETTINGS},
{"siteSettingsDescription", IDS_SETTINGS_SITE_SETTINGS_DESCRIPTION}, {"siteSettingsDescription", IDS_SETTINGS_SITE_SETTINGS_DESCRIPTION},
{"clearData", IDS_SETTINGS_CLEAR_DATA}, {"clearData", IDS_SETTINGS_CLEAR_DATA},
{"clearingData", IDS_SETTINGS_CLEARING_DATA},
{"clearedData", IDS_SETTINGS_CLEARED_DATA},
{"clearBrowsingData", IDS_SETTINGS_CLEAR_BROWSING_DATA}, {"clearBrowsingData", IDS_SETTINGS_CLEAR_BROWSING_DATA},
{"clearBrowsingDataDescription", IDS_SETTINGS_CLEAR_DATA_DESCRIPTION}, {"clearBrowsingDataDescription", IDS_SETTINGS_CLEAR_DATA_DESCRIPTION},
{"titleAndCount", IDS_SETTINGS_TITLE_AND_COUNT}, {"titleAndCount", IDS_SETTINGS_TITLE_AND_COUNT},
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment