[Extensions A11y] Label the detail_view icon with an a11yAssociation

Label the detail_view.html's icon with an aria-label, indicating it's
related to the extension, similar to what's done in item.html. Move
the code to be part of ItemBehavior so it can be easily shared between
the two.

Bug: 1100943
Change-Id: Idb888c899ab96349a5df0fba74e60d481e619823
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2542951Reviewed-by: dpapad <dpapad@chromium.org>
Commit-Queue: Devlin <rdevlin.cronin@chromium.org>
Cr-Commit-Position: refs/heads/master@{#833565}

chrome/browser/resources/extensions/BUILD.gn

@@ -302,7 +302,6 @@ js_library("item") {
     "//ui/webui/resources/cr_elements/cr_toast:cr_toast_manager.m",
     "//ui/webui/resources/js:assert.m",
     "//ui/webui/resources/js:i18n_behavior.m",
-    "//ui/webui/resources/js:load_time_data.m",
   ]
   externs_list = [ "$externs_path/developer_private.js" ]
 }

chrome/browser/resources/extensions/detail_view.html

@@ -125,6 +125,7 @@
           aria-label="$i18n{back}" on-click="onCloseButtonTap_">
       </cr-icon-button>
       <img id="icon" src="[[data.iconUrl]]"
+          aria-label$="[[a11yAssociation(data.name)]]"
           alt$="[[appOrExtension(
               data.type,
               '$i18nPolymer{appIcon}',

chrome/browser/resources/extensions/item.html

@@ -168,7 +168,7 @@
   element that's hidden when referenced by an aria label.  Unfortunately,
   this text can be found by Ctrl + F because it isn't hidden. -->
 <div id="a11yAssociation" aria-hidden="true">
-  [[a11yAssociation_(data.name)]]
+  [[a11yAssociation(data.name)]]
 </div>
 <div id="card" class$="[[computeClasses_(data.state, inDevMode)]]">
   <div id="main">

chrome/browser/resources/extensions/item.js

@@ -23,7 +23,6 @@ import 'chrome://resources/polymer/v3_0/paper-tooltip/paper-tooltip.js';
 import {getToastManager} from 'chrome://resources/cr_elements/cr_toast/cr_toast_manager.m.js';
 import {assert, assertNotReached} from 'chrome://resources/js/assert.m.js';
 import {I18nBehavior} from 'chrome://resources/js/i18n_behavior.m.js';
-import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {flush, html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {ItemBehavior} from './item_behavior.js';
@@ -168,15 +167,6 @@ Polymer({
     return /** @type {?HTMLElement} */ (this.$$('#errors-button'));
   },
 
-  /** @private string */
-  a11yAssociation_() {
-    // Don't use I18nBehavior.i18n because of additional checks it performs.
-    // Polymer ensures that this string is not stamped into arbitrary HTML.
-    // |this.data.name| can contain any data including html tags.
-    // ex: "My <video> download extension!"
-    return loadTimeData.getStringF('extensionA11yAssociation', this.data.name);
-  },
-
   /** @private */
   observeIdVisibility_(inDevMode, showingDetails, id) {
     flush();

chrome/browser/resources/extensions/item_behavior.js

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import {assertNotReached} from 'chrome://resources/js/assert.m.js';
+import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 
 /** @polymerBehavior */
 export const ItemBehavior = {
@@ -25,4 +26,17 @@ export const ItemBehavior = {
     }
     assertNotReached('Item type is not App or Extension.');
   },
+
+  /**
+   * @param {string} name
+   * @return {string} The a11y association descriptor, e.g. "Related to <ext>".
+   */
+  a11yAssociation(name) {
+    // Don't use I18nBehavior.i18n because of additional checks it performs.
+    // Polymer ensures that this string is not stamped into arbitrary HTML.
+    // `name` can contain any data including html tags, e.g.
+    // "My <video> download extension!"
+    return loadTimeData.getStringF('extensionA11yAssociation', name);
+  },
+
 };