Safety check UI: accessibility

* Makes safety check elements focusable independently of their state.
* Attaches dynamic accessibility info to the elements to allow screen
  readers informing users about their state even in states they would
  otherwise not be focusable.
* DD: http://shortn/_uEauSbBMVy

Bug: 1015841
Change-Id: I52d2c932478d6e66661938b08f7d43f5d82a394a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2089698Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
Commit-Queue: Rainhard Findling <rainhard@chromium.org>
Cr-Commit-Position: refs/heads/master@{#748276}

chrome/app/settings_strings.grdp

@@ -1549,6 +1549,9 @@
   <message name="IDS_SETTINGS_SAFETY_CHECK_PARENT_BUTTON" desc="'Check' is a verb. By clicking this button, the user can quickly check whether their safety-related settings are fully protecting them.">
     Check now
   </message>
+  <message name="IDS_SETTINGS_SAFETY_CHECK_PARENT_BUTTON_ARIA_LABEL" desc="Accessibility text for the button with which the user can quickly check whether their safety-related settings are fully protecting them.">
+    Run safety check now
+  </message>
   <message name="IDS_SETTINGS_SAFETY_CHECK_UPDATES_PRIMARY_LABEL" desc="'Updates' is an element in safety check that shows the update status of Chrome.">
     Updates
   </message>
@@ -1587,6 +1590,9 @@
   <message name="IDS_SETTINGS_SAFETY_CHECK_SAFE_BROWSING_BUTTON" desc="This is the text for the button that allows users to manage their Safe Browsing settings.">
     Manage
   </message>
+  <message name="IDS_SETTINGS_SAFETY_CHECK_SAFE_BROWSING_BUTTON_ARIA_LABEL" desc="Accessibility text for the button that allows users to manage their Safe Browsing settings.">
+    Manage Safe Browsing
+  </message>
   <message name="IDS_SETTINGS_SAFETY_CHECK_EXTENSIONS_PRIMARY_LABEL" desc="'Extensions' is an element in safety check that shows the safety check status of installed extensions.">
     Extensions
   </message>
@@ -1611,6 +1617,9 @@
   <message name="IDS_SETTINGS_SAFETY_CHECK_EXTENSIONS_BUTTON" desc="This button allows users to review their extensions settings.">
     Review
   </message>
+  <message name="IDS_SETTINGS_SAFETY_CHECK_EXTENSIONS_BUTTON_ARIA_LABEL" desc="Accessibility text for the button that allows users to review their extensions settings.">
+    Review extensions
+  </message>
   <message name="IDS_SETTINGS_NETWORK_PREDICTION_ENABLED_LABEL" desc="In the advanced options tab, the text next to the checkbox that enables prediction of network actions.  Actions include browser-initiated DNS prefetching, TCP and SSL preconnection, and prerendering of webpages.">
     Preload pages for faster browsing and searching
   </message>

chrome/browser/resources/settings/safety_check_page/safety_check_page.html

@@ -51,7 +51,8 @@
         }
       }
     </style>
-    <div class="settings-box first two-line">
+    <div id="safetyCheckParent" class="settings-box first two-line" tabindex="0"
+        aria-label="[[getParentAriaLabel_(parentStatus_)]]">
       <iron-icon icon="[[getParentIcon_(parentStatus_)]]"
           src="[[getParentIconSrc_(parentStatus_)]]"
           class$="[[getParentIconClass_(parentStatus_)]]">
@@ -63,7 +64,8 @@
           restamp>
         <div class="separator"></div>
         <cr-button id="safetyCheckParentButton" class="action-button"
-            on-click="onRunSafetyCheckClick_" no-search>
+            on-click="onRunSafetyCheckClick_" no-search
+            aria-label="$i18n{safetyCheckParentButtonAriaLabel}">
           $i18n{safetyCheckParentButton}
         </cr-button>
       </template>
@@ -72,13 +74,15 @@
         <div class="separator"></div>
         <cr-icon-button id="safetyCheckParentIconButton"
             iron-icon="settings:refresh"
-            on-click="onRunSafetyCheckClick_">
+            on-click="onRunSafetyCheckClick_"
+            aria-label="$i18n{safetyCheckParentButtonAriaLabel}">
         </cr-icon-button>
       </template>
     </div>
     <iron-collapse id="safetyCheckCollapse"
         opened="[[shouldShowChildren_(parentStatus_)]]">
-      <div class="settings-box two-line">
+      <div class="settings-box two-line" tabindex="0"
+          aria-label="[[getUpdatesAriaLabel_(updatesStatus_)]]">
         <iron-icon icon="[[getUpdatesIcon_(updatesStatus_)]]"
             src="[[getUpdatesIconSrc_(updatesStatus_)]]"
             class$="[[getUpdatesIconClass_(updatesStatus_)]]">
@@ -93,7 +97,8 @@
             if="[[shouldShowUpdatesButton_(updatesStatus_)]]" restamp>
           <div class="separator"></div>
           <cr-button id="safetyCheckUpdatesButton" class="action-button"
-              on-click="onSafetyCheckUpdatesButtonClicked_" no-search>
+              on-click="onSafetyCheckUpdatesButtonClicked_" no-search
+            aria-label="$i18n{safetyCheckUpdatesButtonAriaLabel}">
             $i18n{aboutRelaunch}
           </cr-button>
         </template>
@@ -104,7 +109,8 @@
           </iron-icon>
         </template>
       </div>
-      <div class="settings-box two-line">
+      <div class="settings-box two-line" tabindex="0"
+          aria-label="[[getPasswordsAriaLabel_(passwordsStatus_)]]">
         <iron-icon icon="[[getPasswordsIcon_(passwordsStatus_)]]"
             src="[[getPasswordsIconSrc_(passwordsStatus_)]]"
             class$="[[getPasswordsIconClass_(passwordsStatus_)]]">
@@ -119,12 +125,14 @@
             if="[[shouldShowPasswordsButton_(passwordsStatus_)]]" restamp>
           <div class="separator"></div>
           <cr-button id="safetyCheckPasswordsButton" class="action-button"
-              on-click="onPasswordsButtonClick_" no-search>
+              on-click="onPasswordsButtonClick_" no-search
+              aria-label="$i18n{safetyCheckPasswordsButton}">
             $i18n{safetyCheckPasswordsButton}
           </cr-button>
         </template>
       </div>
-      <div class="settings-box two-line">
+      <div class="settings-box two-line" tabindex="0"
+          aria-label="[[getSafeBrowsingAriaLabel_(safeBrowsingStatus_)]]">
         <iron-icon icon="[[getSafeBrowsingIcon_(safeBrowsingStatus_)]]"
             src="[[getSafeBrowsingIconSrc_(safeBrowsingStatus_)]]"
             class$="[[getSafeBrowsingIconClass_(safeBrowsingStatus_)]]">
@@ -139,7 +147,8 @@
             if="[[shouldShowSafeBrowsingButton_(safeBrowsingStatus_)]]" restamp>
           <div class="separator"></div>
           <cr-button id="safetyCheckSafeBrowsingButton" class="action-button"
-              on-click="onSafeBrowsingButtonClick_" no-search>
+              on-click="onSafeBrowsingButtonClick_" no-search
+              aria-label="$i18n{safetyCheckSafeBrowsingButtonAriaLabel}">
             $i18n{safetyCheckSafeBrowsingButton}
           </cr-button>
         </template>
@@ -150,7 +159,8 @@
           </iron-icon>
         </template>
       </div>
-      <div class="settings-box two-line">
+      <div class="settings-box two-line" tabindex="0"
+          aria-label="[[getExtensionsAriaLabel_(extensionsStatus_)]]">
         <iron-icon icon="[[getExtensionsIcon_(extensionsStatus_)]]"
             src="[[getExtensionsIconSrc_(extensionsStatus_)]]"
             class$="[[getExtensionsIconClass_(extensionsStatus_)]]">
@@ -166,7 +176,8 @@
           <div class="separator"></div>
           <cr-button id="safetyCheckExtensionsButton"
               class$="[[getExtensionsButtonClass_(extensionsStatus_)]]"
-              on-click="onSafetyCheckExtensionsButtonClicked_" no-search>
+              on-click="onSafetyCheckExtensionsButtonClicked_" no-search
+              aria-label="$i18n{safetyCheckExtensionsButtonAriaLabel}">
             $i18n{safetyCheckExtensionsButton}
           </cr-button>
         </template>

chrome/browser/resources/settings/safety_check_page/safety_check_page.js

@@ -310,6 +310,7 @@ Polymer({
   /** @private */
   onRunSafetyCheckClick_: function() {
     this.runSafetyCheck_();
+    this.focusParent_();
   },
 
   /**
@@ -329,6 +330,21 @@ Polymer({
     }
   },
 
+  /**
+   * @private
+   * @return {string}
+   */
+  getParentAriaLabel_: function() {
+    return this.i18n('safetyCheckSectionTitle') + ': ' +
+        this.getParentPrimaryLabelText_();
+  },
+
+  /** @private */
+  focusParent_() {
+    const parent = /** @type {!Element} */ (this.$$('#safetyCheckParent'));
+    parent.focus();
+  },
+
   /**
    * @private
    * @return {boolean}
@@ -437,6 +453,15 @@ Polymer({
     }
   },
 
+  /**
+   * @private
+   * @return {string}
+   */
+  getUpdatesAriaLabel_: function() {
+    return this.i18n('safetyCheckUpdatesPrimaryLabel') + ': ' +
+        this.getUpdatesSubLabelText_();
+  },
+
   /**
    * @private
    * @return {boolean}
@@ -470,6 +495,15 @@ Polymer({
     }
   },
 
+  /**
+   * @private
+   * @return {string}
+   */
+  getPasswordsAriaLabel_: function() {
+    return this.i18n('passwords') + ': ' + this.passwordsDisplayString_;
+  },
+
+
   /**
    * @private
    * @return {?string}
@@ -598,6 +632,15 @@ Polymer({
     }
   },
 
+  /**
+   * @private
+   * @return {string}
+   */
+  getSafeBrowsingAriaLabel_: function() {
+    return this.i18n('safeBrowsingSectionLabel') + ': ' +
+        this.getSafeBrowsingSubLabelText_();
+  },
+
   /** @private */
   onSafeBrowsingButtonClick_: function() {
     settings.Router.getInstance().navigateTo(settings.routes.SECURITY);
@@ -692,6 +735,15 @@ Polymer({
     }
   },
 
+  /**
+   * @private
+   * @return {string}
+   */
+  getExtensionsAriaLabel_: function() {
+    return this.i18n('safetyCheckExtensionsPrimaryLabel') + ': ' +
+        this.extensionsDisplayString_;
+  },
+
   /**
    * @private
    * @return {string}

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

@@ -1131,10 +1131,14 @@ void AddPrivacyStrings(content::WebUIDataSource* html_source,
       {"safetyCheckParentPrimaryLabelAfter",
        IDS_SETTINGS_SAFETY_CHECK_PARENT_PRIMARY_LABEL_AFTER},
       {"safetyCheckParentButton", IDS_SETTINGS_SAFETY_CHECK_PARENT_BUTTON},
+      {"safetyCheckParentButtonAriaLabel",
+       IDS_SETTINGS_SAFETY_CHECK_PARENT_BUTTON_ARIA_LABEL},
       {"safetyCheckUpdatesPrimaryLabel",
        IDS_SETTINGS_SAFETY_CHECK_UPDATES_PRIMARY_LABEL},
       {"safetyCheckUpdatesSubLabelFailedOffline",
        IDS_SETTINGS_SAFETY_CHECK_UPDATES_FAILED_OFFLINE},
+      {"safetyCheckUpdatesButtonAriaLabel",
+       IDS_UPDATE_RECOMMENDED_DIALOG_TITLE},
       {"safetyCheckPasswordsButton",
        IDS_SETTINGS_SAFETY_CHECK_PASSWORDS_BUTTON},
       {"safetyCheckSafeBrowsingSubLabelEnabled",
@@ -1145,10 +1149,14 @@ void AddPrivacyStrings(content::WebUIDataSource* html_source,
        IDS_SETTINGS_SAFETY_CHECK_SAFE_BROWSING_DISABLED_BY_EXTENSION},
       {"safetyCheckSafeBrowsingButton",
        IDS_SETTINGS_SAFETY_CHECK_SAFE_BROWSING_BUTTON},
+      {"safetyCheckSafeBrowsingButtonAriaLabel",
+       IDS_SETTINGS_SAFETY_CHECK_SAFE_BROWSING_BUTTON_ARIA_LABEL},
       {"safetyCheckExtensionsPrimaryLabel",
        IDS_SETTINGS_SAFETY_CHECK_EXTENSIONS_PRIMARY_LABEL},
       {"safetyCheckExtensionsButton",
        IDS_SETTINGS_SAFETY_CHECK_EXTENSIONS_BUTTON},
+      {"safetyCheckExtensionsButtonAriaLabel",
+       IDS_SETTINGS_SAFETY_CHECK_EXTENSIONS_BUTTON_ARIA_LABEL},
   };
   AddLocalizedStringsBulk(html_source, kLocalizedStrings);