ChromeOS OOBE: More accessibility fixes.

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

Index: chrome/browser/resources/chromeos/login/oobe_welcome.html
diff --git a/chrome/browser/resources/chromeos/login/oobe_welcome.html b/chrome/browser/resources/chromeos/login/oobe_welcome.html
index 52ff0bb504cbaa948ceae29d8183f362ca53eeea..2a714e7ae5a53b8e85ae5da8dbb00780078b53cf 100644
--- a/chrome/browser/resources/chromeos/login/oobe_welcome.html
+++ b/chrome/browser/resources/chromeos/login/oobe_welcome.html
@@ -58,7 +58,7 @@
     <link rel="stylesheet" href="oobe_welcome.css">
     <link rel="stylesheet" href="oobe_dialog_parameters.css">
     <oobe-welcome-dialog id="welcomeScreen" role="dialog"
-        aria-label="[[formatMessage_('networkScreenGreeting')]]"
+        aria-label$="[[formatMessage_('networkScreenGreeting')]]"
         current-language="[[currentLanguage]]"
         on-language-button-clicked="onWelcomeSelectLanguageButtonClicked_"
         on-accessibility-button-clicked="onWelcomeAccessibilityButtonClicked_"
@@ -69,7 +69,7 @@
         >
     </oobe-welcome-dialog>
     <oobe-dialog id="languageScreen" role="dialog" hidden has-buttons
-        aria-label="[[formatMessage_('languageSectionTitle')]]">
+        aria-label$="[[formatMessage_('languageSectionTitle')]]">
       <iron-icon icon="icons:language" class="oobe-icon"></iron-icon>
       <div class="header">
         <h1 class="title" i18n-content="languageSectionTitle"></h1>
@@ -83,7 +83,8 @@
             </div>
             <oobe-i18n-dropdown id="languageSelect" items="[[languages]]"
                 on-select-item="onLanguageSelected_"
-                class="focus-on-show">
+                class="focus-on-show"
+                label-for-aria="[[formatMessage_('languageDropdownLabel')]]">

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

no parameter means no need for formatMessage_, just use i18n-values?

if you can do that in this entire file, we can remove formatMessage_ from
oobe_welcome.js

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

I don't know how to use i18n-values for polymer attributes. ($i18n{} would not
work.) Could you suggest a sample code?

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

It is explained in i18n_template_no_process.js and used in several places in
OOBE as examples. I don't think Polymer makes it any different, so:
    i18n-values="label-for-aria:languageDropdownLabel"

If $i18n{} would work, it would look like:
    label-for-aria="$i18n{languageDropdownLabel}"

Either way, you are setting the attribute directly, not binding it to another
Polymer property.

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

Done.

             </oobe-i18n-dropdown>
           </div>
           <div id="keyboardDropdownContainer"
@@ -92,7 +93,8 @@
                 i18n-content="keyboardDropdownTitle">
             </div>
             <oobe-i18n-dropdown id="keyboardSelect" items="[[keyboards]]"
-                on-select-item="onKeyboardSelected_">
+                on-select-item="onKeyboardSelected_"
+                label-for-aria="[[formatMessage_('keyboardDropdownLabel')]]">
             </oobe-i18n-dropdown>
           </div>
         </template>
@@ -104,7 +106,7 @@
       </div>
     </oobe-dialog>
     <oobe-dialog id="accessibilityScreen" role="dialog" hidden has-buttons
-        aria-label="[[formatMessage_('accessibilitySectionTitle')]]">
+        aria-label$="[[formatMessage_('accessibilitySectionTitle')]]">
       <iron-icon icon="icons:accessibility" class="oobe-icon"></iron-icon>
       <div class="header">
         <h1 class="title" i18n-content="accessibilitySectionTitle"></h1>
@@ -170,7 +172,7 @@
       </div>
     </oobe-dialog>
     <oobe-dialog id="timezoneScreen" role="dialog" hidden has-buttons
-        aria-label="[[formatMessage_('timezoneSectionTitle')]]">
+        aria-label$="[[formatMessage_('timezoneSectionTitle')]]">
       <iron-icon icon="oobe-welcome-64:timezone" class="oobe-icon"></iron-icon>
       <div class="header">
         <h1 class="title" i18n-content="timezoneSectionTitle"></h1>
@@ -194,7 +196,7 @@
       </div>
     </oobe-dialog>
     <oobe-dialog id="networkSelectionScreen" role="dialog" hidden has-buttons
-        aria-label="[[formatMessage_('networkSectionTitle')]]"
+        aria-label$="[[formatMessage_('networkSectionTitle')]]"
         on-show-dialog="onNetworkSelectionScreenShown_">
       <iron-icon icon="oobe-welcome:wifi" class="oobe-icon"></iron-icon>
       <div class="header">