Commit 3eb656e7 authored by John Lee's avatar John Lee Committed by Commit Bot

WebUI: Improve accessibility of cr-link-row

This is more inline with other parts of our code where we have a title, description, and a button. See examples [1] and [2].

[1] https://cs.chromium.org/chromium/src/chrome/browser/resources/settings/site_settings_page/site_settings_page.html?type=cs&q=site_settings_page.html&sq=package:chromium&g=0&l=50-53
[2] https://cs.chromium.org/chromium/src/chrome/browser/resources/settings/a11y_page/manage_a11y_page.html?q=manage_a11y_page.html&sq=package:chromium&dr&l=86-89

After this change, Chromevox will read "(label) Button (sublabel)" as opposed to "(label) (sublabel) Button"

Change-Id: I5c1afbbd88eee846e208eb424aa658a5c2ddc74e
Reviewed-on: https://chromium-review.googlesource.com/c/1391471
Commit-Queue: John Lee <johntlee@chromium.org>
Reviewed-by: default avatarDan Beam <dbeam@chromium.org>
Cr-Commit-Position: refs/heads/master@{#619698}
parent 4836c563
......@@ -81,7 +81,10 @@
@apply --cr-secondary-text;
}
</style>
<button disabled="[[disabled]]">
<button
aria-describedby$="[[ariaDescribedBy_]]"
aria-label$="[[label]]"
disabled="[[disabled]]">
<div id="outer" noSubLabel$="[[!subLabel]]">
<iron-icon id="startIcon" icon="[[startIcon]]" hidden="[[!startIcon]]"
aria-hidden="true">
......
......@@ -32,12 +32,16 @@ Polymer({
type: String,
/* Value used for noSubLabel attribute. */
value: '',
observer: 'onSubLabelChange_',
},
disabled: {
type: Boolean,
reflectToAttribute: true,
},
/** @private {string|undefined} */
ariaDescribedBy_: String,
},
listeners: {
......@@ -68,4 +72,9 @@ Polymer({
ripple.classList.add('circle');
return ripple;
},
/** @private */
onSubLabelChange_: function() {
this.ariaDescribedBy_ = this.subLabel ? 'subLabel' : undefined;
},
});
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