ChromeOS OOBE: More accessibility fixes.

chrome/browser/resources/chromeos/login/oobe_buttons.html

Index: chrome/browser/resources/chromeos/login/oobe_buttons.html
diff --git a/chrome/browser/resources/chromeos/login/oobe_buttons.html b/chrome/browser/resources/chromeos/login/oobe_buttons.html
index f3d0e7b832df5d42b08bf2aad1bdcf8d010fff66..df4e93e19f588ccecab71b932c4adc1aab952f9d 100644
--- a/chrome/browser/resources/chromeos/login/oobe_buttons.html
+++ b/chrome/browser/resources/chromeos/login/oobe_buttons.html
@@ -37,13 +37,13 @@
   Attributes:
     'disabled' - button is disabled when the attribute is set.
     'inverse' - makes text white and background blue
-    'aria-label' - accessibility label.
+    'label-for-aria' - accessibility label.

[michaelpg, 2017/02/28 10:38:17]

What's the advantage of this renaming? Having the same property name in oobe-*
and gaia-* elements is nice.

[Alexander Alekseev, 2017/03/01 00:48:33]

Because ChromeVoX will pronounce it.
We discussed this with Steven in another CL:
https://codereview.chromium.org/2688153004/diff/1/chrome/browser/resources/ch...

[michaelpg, 2017/03/01 20:26:49]

Thanks for the explanation. It would be helpful to leave a comment (probably in
the .js) explaining why the property is like that: we want to pass the label
value but not actually declare it as an ARIA property here.

[Alexander Alekseev, 2017/03/01 21:49:09]

Done.

 -->
 <dom-module id="oobe-text-button">
   <link rel="stylesheet" href="oobe_text_button.css">
   <template>
     <paper-button id="textButton" on-tap="onClick_" disabled="[[disabled]]"
-        inverse$="[[inverse]]" aria-label$="[[ariaLabel]]">
+        inverse$="[[inverse]]" aria-label$="[[labelForAria]]">
       <div id="container"
           class="flex layout horizontal center center-justified self-stretch">
         <content></content>
@@ -62,13 +62,13 @@
 
   Attributes:
     'disabled' - button is disabled when the attribute is set.
-    'aria-label' - accessibility label.
+    'label-for-aria' - accessibility label.
 -->
 <dom-module id="oobe-back-button">
   <link rel="stylesheet" href="oobe_nav_button.css">
   <template>
     <paper-button id="button" on-tap="onClick_" disabled="[[disabled]]"
-        aria-label$="[[ariaLabel]]">
+        aria-label$="[[labelForAria]]">
       <div class="flex horizontal layout start center">
         <iron-icon icon="oobe-buttons:arrow-back"></iron-icon>
         <div id="text" i18n-content="back"></div>
@@ -99,12 +99,12 @@
 
   Attributes:
     'icon' - a name of icon from material design set to show on button.
-    'aria-label' - accessibility label.
+    'label-for-aria' - accessibility label.
 -->
 <dom-module id="oobe-welcome-secondary-button">
   <link rel="stylesheet" href="oobe_welcome_secondary_button.css">
   <template>
-    <paper-button id="button" aria-label$="[[ariaLabel]]">
+    <paper-button id="button" aria-label$="[[labelForAria]]">
       <div id="container" class="flex layout vertical center self-stretch">
         <div id="subcontainer"
             class="flex layout horizontal center self-stretch">