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

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

Index: chrome/browser/resources/settings/people_page/sync_page.html
diff --git a/chrome/browser/resources/settings/people_page/sync_page.html b/chrome/browser/resources/settings/people_page/sync_page.html
index 191147e3dbf77ca21106f6567c4f24d1c7f7dd51..828ac3796c23796bee4408f283ad8d308ad1d75b 100644
--- a/chrome/browser/resources/settings/people_page/sync_page.html
+++ b/chrome/browser/resources/settings/people_page/sync_page.html
@@ -61,103 +61,131 @@
     <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>
 
@@ -176,7 +204,8 @@
               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>