MD-Settings: Adds an a11y label to most toggle buttons.

chrome/browser/resources/settings/people_page/sync_page.html

 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-keys/iron-a11y-keys.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-toggle-button/paper-toggle-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-button/paper-radio-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-group/paper-radio-group.html">
 <link rel="import" href="sync_browser_proxy.html">
@@ skipping 43 matching lines @@
         hidden$="[[!isStatus_(pages.SPINNER, pageStatus_)]]">
       $i18n{syncLoading}
     </div>
     <div id="[[pages.TIMEOUT]]" class="settings-box first"
         hidden$="[[!isStatus_(pages.TIMEOUT, pageStatus_)]]">
       $i18n{syncTimeout}
     </div>
     <div id="[[pages.CONFIGURE]]"
         hidden$="[[!isStatus_(pages.CONFIGURE, pageStatus_)]]">
       <div class="settings-box first">
-        <div class="start">$i18n{syncEverythingCheckboxLabel}</div>
+        <div id="syncEverythingCheckboxLabel" class="start">
+          $i18n{syncEverythingCheckboxLabel}
+        </div>
         <paper-toggle-button id="syncAllDataTypesControl"
             checked="{{syncPrefs.syncAllDataTypes}}"
-            on-change="onSyncAllDataTypesChanged_">
+            on-change="onSyncAllDataTypesChanged_"
+            aria-labelledby="syncEverythingCheckboxLabel">
         </paper-toggle-button>
       </div>
 
       <div class="list-frame" id="sync-data-types">
         <div class="layout horizontal list-item"
             hidden="[[!syncPrefs.appsRegistered]]">
-          <div class="flex">$i18n{appCheckboxLabel}</div>
+          <div id="appCheckboxLabel" class="flex">$i18n{appCheckboxLabel}</div>
           <paper-toggle-button checked="{{syncPrefs.appsSynced}}"
               on-change="onSingleSyncDataTypeChanged_"
               disabled="[[shouldSyncCheckboxBeDisabled_(
-                  syncPrefs.syncAllDataTypes, syncPrefs.appsEnforced)]]">
+                  syncPrefs.syncAllDataTypes, syncPrefs.appsEnforced)]]"
+              aria-labelledby="appCheckboxLabel">
           </paper-toggle-button>
         </div>
 
         <div class="layout horizontal list-item"
             hidden="[[!syncPrefs.autofillRegistered]]">
-          <div class="flex">$i18n{autofillCheckboxLabel}</div>
+          <div id="autofillCheckboxLabel" class="flex">
+            $i18n{autofillCheckboxLabel}
+          </div>
           <!-- Autofill has a special on-change handler to deal with
                Payments integriation. -->
           <paper-toggle-button checked="{{syncPrefs.autofillSynced}}"
               on-change="onAutofillDataTypeChanged_"
               disabled="[[shouldSyncCheckboxBeDisabled_(
-                  syncPrefs.syncAllDataTypes, syncPrefs.autofillEnforced)]]">
+                  syncPrefs.syncAllDataTypes, syncPrefs.autofillEnforced)]]"
+              aria-labelledby="autofillCheckboxLabel">
           </paper-toggle-button>
         </div>
 
         <div class="layout horizontal list-item"
             hidden="[[!syncPrefs.bookmarksRegistered]]">
-          <div class="flex">$i18n{bookmarksCheckboxLabel}</div>
+          <div id="bookmarksCheckboxLabel" class="flex">
+            $i18n{bookmarksCheckboxLabel}
+          </div>
           <paper-toggle-button checked="{{syncPrefs.bookmarksSynced}}"
               on-change="onSingleSyncDataTypeChanged_"
               disabled="[[shouldSyncCheckboxBeDisabled_(
-                  syncPrefs.syncAllDataTypes, syncPrefs.bookmarksEnforced)]]">
+                  syncPrefs.syncAllDataTypes, syncPrefs.bookmarksEnforced)]]"
+              aria-labelledby="bookmarksCheckboxLabel">
           </paper-toggle-button>
         </div>
 
         <div class="layout horizontal list-item"
             hidden="[[!syncPrefs.extensionsRegistered]]">
-          <div class="flex">$i18n{extensionsCheckboxLabel}</div>
+          <div id="extensionsCheckboxLabel" class="flex">
+            $i18n{extensionsCheckboxLabel}
+          </div>
           <paper-toggle-button checked="{{syncPrefs.extensionsSynced}}"
               on-change="onSingleSyncDataTypeChanged_"
               disabled="[[shouldSyncCheckboxBeDisabled_(
-                  syncPrefs.syncAllDataTypes, syncPrefs.extensionsEnforced)]]">
+                  syncPrefs.syncAllDataTypes, syncPrefs.extensionsEnforced)]]"
+              aria-labelledby="extensionsCheckboxLabel">
           </paper-toggle-button>
         </div>
 
         <div class="layout horizontal list-item"
             hidden="[[!syncPrefs.typedUrlsRegistered]]">
-          <div class="flex">$i18n{historyCheckboxLabel}</div>
+          <div id="historyCheckboxLabel" class="flex">
+            $i18n{historyCheckboxLabel}
+          </div>
           <paper-toggle-button checked="{{syncPrefs.typedUrlsSynced}}"
               on-change="onSingleSyncDataTypeChanged_"
               disabled="[[shouldSyncCheckboxBeDisabled_(
-                  syncPrefs.syncAllDataTypes, syncPrefs.typedUrlsEnforced)]]">
+                  syncPrefs.syncAllDataTypes, syncPrefs.typedUrlsEnforced)]]"
+              aria-labelledby="historyCheckboxLabel">
           </paper-toggle-button>
         </div>
 
         <div class="layout horizontal list-item"
             hidden="[[!syncPrefs.passwordsRegistered]]">
-          <div class="flex">$i18n{passwordsCheckboxLabel}</div>
+          <div id="passwordsCheckboxLabel" class="flex">
+            $i18n{passwordsCheckboxLabel}
+          </div>
           <paper-toggle-button checked="{{syncPrefs.passwordsSynced}}"
               on-change="onSingleSyncDataTypeChanged_"
               disabled="[[shouldSyncCheckboxBeDisabled_(
-                  syncPrefs.syncAllDataTypes, syncPrefs.passwordsEnforced)]]">
+                  syncPrefs.syncAllDataTypes, syncPrefs.passwordsEnforced)]]"
+              aria-labelledby="passwordsCheckboxLabel">
           </paper-toggle-button>
         </div>
 
         <div class="layout horizontal list-item"
             hidden="[[!syncPrefs.preferencesRegistered]]">
-          <div class="flex">$i18n{settingsCheckboxLabel}</div>
+          <div id="settingsCheckboxLabel" class="flex">
+            $i18n{settingsCheckboxLabel}
+          </div>
           <paper-toggle-button checked="{{syncPrefs.preferencesSynced}}"
               on-change="onSingleSyncDataTypeChanged_"
               disabled="[[shouldSyncCheckboxBeDisabled_(
-                  syncPrefs.syncAllDataTypes, syncPrefs.preferencesEnforced)]]">
+                  syncPrefs.syncAllDataTypes, syncPrefs.preferencesEnforced)]]"
+              aria-labelledby="settingsCheckboxLabel">
           </paper-toggle-button>
         </div>
 
         <div class="layout horizontal list-item"
             hidden="[[!syncPrefs.themesRegistered]]">
-          <div class="flex">$i18n{themesAndWallpapersCheckboxLabel}</div>
+          <div id="themesAndWallpapersCheckboxLabel" class="flex">
+            $i18n{themesAndWallpapersCheckboxLabel}
+          </div>
           <paper-toggle-button checked="{{syncPrefs.themesSynced}}"
               on-change="onSingleSyncDataTypeChanged_"
               disabled="[[shouldSyncCheckboxBeDisabled_(
-                  syncPrefs.syncAllDataTypes, syncPrefs.themesEnforced)]]">
+                  syncPrefs.syncAllDataTypes, syncPrefs.themesEnforced)]]"
+              aria-labelledby="themesAndWallpapersCheckboxLabel">
           </paper-toggle-button>
         </div>
 
         <div class="layout horizontal list-item"
             hidden="[[!syncPrefs.tabsRegistered]]">
-          <div class="flex">$i18n{openTabsCheckboxLabel}</div>
+          <div id="openTabsCheckboxLabel" class="flex">
+            $i18n{openTabsCheckboxLabel}
+          </div>
           <paper-toggle-button checked="{{syncPrefs.tabsSynced}}"
               on-change="onSingleSyncDataTypeChanged_"
               disabled="[[shouldSyncCheckboxBeDisabled_(
-                  syncPrefs.syncAllDataTypes, syncPrefs.tabsEnforced)]]">
+                  syncPrefs.syncAllDataTypes, syncPrefs.tabsEnforced)]]"
+              aria-labelledby="openTabsCheckboxLabel">
           </paper-toggle-button>
         </div>
 
         <div class="layout horizontal list-item"
             hidden="[[!syncPrefs.autofillRegistered]]">
           <!-- The Payments integration checkbox is a special case in many ways.
                It's visible only if autofill is registered. It's disabled and
                unchecked if autofill is unchecked.-->
           <div class="flex">
             $i18n{enablePaymentsIntegrationCheckboxLabel}
             <a href="$i18nRaw{autofillHelpURL}" target="_blank">
               $i18n{learnMore}
             </a>
           </div>
           <paper-toggle-button
               checked="{{syncPrefs.paymentsIntegrationEnabled}}"
               on-change="onSingleSyncDataTypeChanged_"
               disabled="[[shouldPaymentsCheckboxBeDisabled_(
-                  syncPrefs.syncAllDataTypes, syncPrefs.autofillSynced)]]">
+                  syncPrefs.syncAllDataTypes, syncPrefs.autofillSynced)]]"
+              aria-label="$i18n{enablePaymentsIntegrationCheckboxLabel}">
           </paper-toggle-button>
         </div>
       </div>
 
       <div class="settings-box two-line" actionable
           on-tap="onManageSyncedDataTap_">
         <div class="start">
           $i18n{manageSyncedDataTitle}
           <div class="secondary" id="manageSyncedDataSecondary">
             $i18n{manageSyncedDataDescription}
@@ skipping 93 matching lines @@
           </div>
           <div id="passphraseRecoverHint" class="list-item">
             <span>$i18nRaw{passphraseRecover}</span>
           </div>
         </div>
       </template>
     </div>
   </template>
   <script src="sync_page.js"></script>
 </dom-module>