Safety check UI: a11y: aria labels for left-hand status icons

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

chrome/app/settings_strings.grdp

@@ -1659,6 +1659,18 @@
   <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_ICON_RUNNING_ARIA_LABEL" desc="Accessibility text for a safety check child icon, that indicates that the child check is running.">
+    Running
+  </message>
+  <message name="IDS_SETTINGS_SAFETY_CHECK_ICON_SAFE_ARIA_LABEL" desc="Accessibility text for a safety check child icon, that indicates the child passed the check.">
+    Passed
+  </message>
+  <message name="IDS_SETTINGS_SAFETY_CHECK_ICON_INFO_ARIA_LABEL" desc="Accessibility text for a safety check child icon, that indicates info for the child check.">
+    Info
+  </message>
+  <message name="IDS_SETTINGS_SAFETY_CHECK_ICON_WARNING_ARIA_LABEL" desc="Accessibility text for a safety check child icon, that indicates a warning for the child check.">
+    Warning
+  </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>

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

@@ -83,7 +83,9 @@
     <iron-collapse id="safetyCheckCollapse"
         opened="[[shouldShowChildren_(parentStatus_)]]">
       <div class="settings-box two-line">
-        <iron-icon icon="[[getUpdatesIcon_(updatesStatus_)]]" aria-hidden="true"
+        <iron-icon icon="[[getUpdatesIcon_(updatesStatus_)]]"
+            role="img"
+            aria-label="[[getUpdatesIconAriaLabel_(updatesStatus_)]]"
             src="[[getUpdatesIconSrc_(updatesStatus_)]]"
             class$="[[getUpdatesIconClass_(updatesStatus_)]]">
         </iron-icon>
@@ -113,7 +115,8 @@
         <iron-icon icon="[[getPasswordsIcon_(passwordsStatus_)]]"
             src="[[getPasswordsIconSrc_(passwordsStatus_)]]"
             class$="[[getPasswordsIconClass_(passwordsStatus_)]]"
-            aria-hidden="true">
+            role="img"
+            aria-label="[[getPasswordsIconAriaLabel_(passwordsStatus_)]]">
         </iron-icon>
         <div class="start settings-box-text">
           <div>$i18n{passwords}</div>
@@ -135,7 +138,8 @@
         <iron-icon icon="[[getSafeBrowsingIcon_(safeBrowsingStatus_)]]"
             src="[[getSafeBrowsingIconSrc_(safeBrowsingStatus_)]]"
             class$="[[getSafeBrowsingIconClass_(safeBrowsingStatus_)]]"
-            aria-hidden="true">
+            role="img"
+            aria-label="[[getSafeBrowsingIconAriaLabel_(safeBrowsingStatus_)]]">
         </iron-icon>
         <div class="start settings-box-text">
           <div>$i18n{safeBrowsingSectionLabel}</div>
@@ -164,7 +168,8 @@
         <iron-icon icon="[[getExtensionsIcon_(extensionsStatus_)]]"
             src="[[getExtensionsIconSrc_(extensionsStatus_)]]"
             class$="[[getExtensionsIconClass_(extensionsStatus_)]]"
-            aria-hidden="true">
+            role="img"
+            aria-label="[[getExtensionsIconAriaLabel_(extensionsStatus_)]]">
         </iron-icon>
         <div class="start settings-box-text">
           <div>$i18n{safetyCheckExtensionsPrimaryLabel}</div>

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

@@ -415,6 +415,28 @@ Polymer({
     }
   },
 
+  /**
+   * Returns the default icon aria label for a safety check child in the
+   * specified state.
+   * @private
+   * @param {ChildUiStatus} childUiStatus
+   * @return {string}
+   */
+  getChildUiIconAriaLabel_: function(childUiStatus) {
+    switch (childUiStatus) {
+      case ChildUiStatus.RUNNING:
+        return this.i18n('safetyCheckIconRunningAriaLabel');
+      case ChildUiStatus.SAFE:
+        return this.i18n('safetyCheckIconSafeAriaLabel');
+      case ChildUiStatus.INFO:
+        return this.i18n('safetyCheckIconInfoAriaLabel');
+      case ChildUiStatus.WARNING:
+        return this.i18n('safetyCheckIconWarningAriaLabel');
+      default:
+        assertNotReached();
+    }
+  },
+
   /**
    * @private
    * @return {boolean}
@@ -483,6 +505,14 @@ Polymer({
     return this.getChildUiIconClass_(this.getUpdatesUiStatus_());
   },
 
+  /**
+   * @private
+   * @return {string}
+   */
+  getUpdatesIconAriaLabel_: function() {
+    return this.getChildUiIconAriaLabel_(this.getUpdatesUiStatus_());
+  },
+
   /**
    * @private
    * @return {boolean}
@@ -539,6 +569,14 @@ Polymer({
     return this.getChildUiIconClass_(this.getPasswordsUiStatus_());
   },
 
+  /**
+   * @private
+   * @return {string}
+   */
+  getPasswordsIconAriaLabel_: function() {
+    return this.getChildUiIconAriaLabel_(this.getPasswordsUiStatus_());
+  },
+
   /** @private */
   onPasswordsButtonClick_: function() {
     if (loadTimeData.getBoolean('enablePasswordCheck')) {
@@ -625,6 +663,14 @@ Polymer({
     return this.getChildUiIconClass_(this.getSafeBrowsingUiStatus_());
   },
 
+  /**
+   * @private
+   * @return {string}
+   */
+  getSafeBrowsingIconAriaLabel_: function() {
+    return this.getChildUiIconAriaLabel_(this.getSafeBrowsingUiStatus_());
+  },
+
   /** @private */
   onSafeBrowsingButtonClick_: function() {
     settings.Router.getInstance().navigateTo(settings.routes.SECURITY);
@@ -710,6 +756,14 @@ Polymer({
     return this.getChildUiIconClass_(this.getExtensionsUiStatus_());
   },
 
+  /**
+   * @private
+   * @return {string}
+   */
+  getExtensionsIconAriaLabel_: function() {
+    return this.getChildUiIconAriaLabel_(this.getExtensionsUiStatus_());
+  },
+
   /**
    * @private
    * @return {string}

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

@@ -1204,6 +1204,14 @@ void AddPrivacyStrings(content::WebUIDataSource* html_source,
       {"safetyCheckParentButton", IDS_SETTINGS_SAFETY_CHECK_PARENT_BUTTON},
       {"safetyCheckParentButtonAriaLabel",
        IDS_SETTINGS_SAFETY_CHECK_PARENT_BUTTON_ARIA_LABEL},
+      {"safetyCheckIconRunningAriaLabel",
+       IDS_SETTINGS_SAFETY_CHECK_ICON_RUNNING_ARIA_LABEL},
+      {"safetyCheckIconSafeAriaLabel",
+       IDS_SETTINGS_SAFETY_CHECK_ICON_SAFE_ARIA_LABEL},
+      {"safetyCheckIconInfoAriaLabel",
+       IDS_SETTINGS_SAFETY_CHECK_ICON_INFO_ARIA_LABEL},
+      {"safetyCheckIconWarningAriaLabel",
+       IDS_SETTINGS_SAFETY_CHECK_ICON_WARNING_ARIA_LABEL},
       {"safetyCheckUpdatesPrimaryLabel",
        IDS_SETTINGS_SAFETY_CHECK_UPDATES_PRIMARY_LABEL},
       {"safetyCheckUpdatesButtonAriaLabel",