Commit b21eded3 authored by Devlin Cronin's avatar Devlin Cronin Committed by Chromium LUCI CQ

[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: default avatardpapad <dpapad@chromium.org>
Commit-Queue: Devlin <rdevlin.cronin@chromium.org>
Cr-Commit-Position: refs/heads/master@{#833565}
parent df43d604
...@@ -302,7 +302,6 @@ js_library("item") { ...@@ -302,7 +302,6 @@ js_library("item") {
"//ui/webui/resources/cr_elements/cr_toast:cr_toast_manager.m", "//ui/webui/resources/cr_elements/cr_toast:cr_toast_manager.m",
"//ui/webui/resources/js:assert.m", "//ui/webui/resources/js:assert.m",
"//ui/webui/resources/js:i18n_behavior.m", "//ui/webui/resources/js:i18n_behavior.m",
"//ui/webui/resources/js:load_time_data.m",
] ]
externs_list = [ "$externs_path/developer_private.js" ] externs_list = [ "$externs_path/developer_private.js" ]
} }
......
...@@ -125,6 +125,7 @@ ...@@ -125,6 +125,7 @@
aria-label="$i18n{back}" on-click="onCloseButtonTap_"> aria-label="$i18n{back}" on-click="onCloseButtonTap_">
</cr-icon-button> </cr-icon-button>
<img id="icon" src="[[data.iconUrl]]" <img id="icon" src="[[data.iconUrl]]"
aria-label$="[[a11yAssociation(data.name)]]"
alt$="[[appOrExtension( alt$="[[appOrExtension(
data.type, data.type,
'$i18nPolymer{appIcon}', '$i18nPolymer{appIcon}',
......
...@@ -168,7 +168,7 @@ ...@@ -168,7 +168,7 @@
element that's hidden when referenced by an aria label. Unfortunately, element that's hidden when referenced by an aria label. Unfortunately,
this text can be found by Ctrl + F because it isn't hidden. --> this text can be found by Ctrl + F because it isn't hidden. -->
<div id="a11yAssociation" aria-hidden="true"> <div id="a11yAssociation" aria-hidden="true">
[[a11yAssociation_(data.name)]] [[a11yAssociation(data.name)]]
</div> </div>
<div id="card" class$="[[computeClasses_(data.state, inDevMode)]]"> <div id="card" class$="[[computeClasses_(data.state, inDevMode)]]">
<div id="main"> <div id="main">
......
...@@ -23,7 +23,6 @@ import 'chrome://resources/polymer/v3_0/paper-tooltip/paper-tooltip.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 {getToastManager} from 'chrome://resources/cr_elements/cr_toast/cr_toast_manager.m.js';
import {assert, assertNotReached} from 'chrome://resources/js/assert.m.js'; import {assert, assertNotReached} from 'chrome://resources/js/assert.m.js';
import {I18nBehavior} from 'chrome://resources/js/i18n_behavior.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 {flush, html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
import {ItemBehavior} from './item_behavior.js'; import {ItemBehavior} from './item_behavior.js';
...@@ -168,15 +167,6 @@ Polymer({ ...@@ -168,15 +167,6 @@ Polymer({
return /** @type {?HTMLElement} */ (this.$$('#errors-button')); 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 */ /** @private */
observeIdVisibility_(inDevMode, showingDetails, id) { observeIdVisibility_(inDevMode, showingDetails, id) {
flush(); flush();
......
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
// found in the LICENSE file. // found in the LICENSE file.
import {assertNotReached} from 'chrome://resources/js/assert.m.js'; import {assertNotReached} from 'chrome://resources/js/assert.m.js';
import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
/** @polymerBehavior */ /** @polymerBehavior */
export const ItemBehavior = { export const ItemBehavior = {
...@@ -25,4 +26,17 @@ export const ItemBehavior = { ...@@ -25,4 +26,17 @@ export const ItemBehavior = {
} }
assertNotReached('Item type is not App or Extension.'); 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);
},
}; };
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