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: dpapad <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#834495}

chrome/app/settings_strings.grdp

@@ -1514,6 +1514,12 @@
   <message name="IDS_SETTINGS_CLEAR_DATA" desc="Text for clear browsing data button in Privacy options in the tabbed UI">
     Clear data
   </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">
     Clear browsing data
   </message>

chrome/app/settings_strings_grdp/IDS_SETTINGS_CLEARED_DATA.png.sha1

+773c91219cad9d9630b8e09b06ecfaad26394504
\ No newline at end of file

chrome/app/settings_strings_grdp/IDS_SETTINGS_CLEARING_DATA.png.sha1

+74bbd2055e63e512ed986c83e2c7fac0c42f66e4
\ No newline at end of file

chrome/browser/resources/settings/clear_browsing_data_dialog/BUILD.gn

@@ -30,6 +30,7 @@ js_library("clear_browsing_data_dialog") {
     "../controls:settings_checkbox",
     "../controls:settings_dropdown_menu.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:web_ui_listener_behavior.m",
   ]

chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.html

@@ -95,6 +95,11 @@
         color: var(--cr-secondary-text-color);
         padding: 16px;
       }
+
+      #clearingDataAlert {
+        clip: rect(0, 0, 0, 0);
+        position: fixed;
+      }
     </style>
 
     <cr-dialog id="clearBrowsingDataDialog"
@@ -235,6 +240,12 @@
                                                clearButtonDisabled_)]]">
             $i18n{clearData}
         </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>
       <template is="dom-if" if="[[shouldShowFooter_(syncStatus.signedIn)]]"
           restamp>

chrome/browser/resources/settings/clear_browsing_data_dialog/clear_browsing_data_dialog.js

@@ -22,6 +22,7 @@ import '../settings_shared_css.m.js';
 
 import {assert} from 'chrome://resources/js/assert.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 {DropdownMenuOptionList} from '../controls/settings_dropdown_menu.m.js';
@@ -122,6 +123,12 @@ Polymer({
       value: false,
     },
 
+    /** @private */
+    clearingDataAlertString_: {
+      type: String,
+      value: '',
+    },
+
     /** @private */
     clearButtonDisabled_: {
       type: Boolean,
@@ -446,6 +453,7 @@ Polymer({
    */
   clearBrowsingData_: async function() {
     this.clearingInProgress_ = true;
+    this.clearingDataAlertString_ = loadTimeData.getString('clearingData');
     const tab = this.$.tabs.selectedItem;
     const dataTypes = this.getSelectedDataTypes_(tab);
     const timePeriod = tab.querySelector('.time-range-select').pref.value;
@@ -464,6 +472,8 @@ Polymer({
         await this.browserProxy_.clearBrowsingData(
             dataTypes, timePeriod, this.installedApps_);
     this.clearingInProgress_ = false;
+    IronA11yAnnouncer.requestAvailability();
+    this.fire('iron-announce', {text: loadTimeData.getString('clearedData')});
     this.showHistoryDeletionDialog_ = showHistoryNotice;
     // 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

chrome/browser/resources/settings/privacy_page/privacy_page.js

@@ -306,7 +306,11 @@ Polymer({
   /** @private */
   onDialogClosed_() {
     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 */

chrome/browser/ui/webui/settings/settings_localized_strings_provider.cc

@@ -1319,6 +1319,8 @@ void AddPrivacyStrings(content::WebUIDataSource* html_source,
       {"siteSettings", IDS_SETTINGS_SITE_SETTINGS},
       {"siteSettingsDescription", IDS_SETTINGS_SITE_SETTINGS_DESCRIPTION},
       {"clearData", IDS_SETTINGS_CLEAR_DATA},
+      {"clearingData", IDS_SETTINGS_CLEARING_DATA},
+      {"clearedData", IDS_SETTINGS_CLEARED_DATA},
       {"clearBrowsingData", IDS_SETTINGS_CLEAR_BROWSING_DATA},
       {"clearBrowsingDataDescription", IDS_SETTINGS_CLEAR_DATA_DESCRIPTION},
       {"titleAndCount", IDS_SETTINGS_TITLE_AND_COUNT},