Get rid of some <label for> misuse in browser_options.html

chrome/browser/resources/options/browser_options.html

Index: chrome/browser/resources/options/browser_options.html
diff --git a/chrome/browser/resources/options/browser_options.html b/chrome/browser/resources/options/browser_options.html
index 4e9c4eddac6d07af622e63d1c68c7cbe812552b5..3e4d58c285460cc881e4c2043ff95df8b3259cac 100644
--- a/chrome/browser/resources/options/browser_options.html
+++ b/chrome/browser/resources/options/browser_options.html
@@ -54,19 +54,16 @@
       <button id="themes-reset" i18n-content="themesReset"></button>
 </if>
     </div>
-    <div class="checkbox" guest-visibility="disabled">
-      <span class="controlled-setting-with-label">
-        <input id="show-home-button" type="checkbox"
+    <div class="checkbox controlled-setting-with-label"
+        guest-visibility="disabled">
+      <label>
+        <input type="checkbox"
             pref="browser.show_home_button"
             metric="Options_Homepage_HomeButton">
-        <span>
-          <label for="show-home-button" i18n-content="homePageShowHomeButton">
-          </label>
-          <span class="controlled-setting-indicator"
-              pref="browser.show_home_button">
-          </span>
-        </span>
-      </span>
+        <span i18n-content="homePageShowHomeButton"></span>
+      </label>
+      <span class="controlled-setting-indicator"
+          pref="browser.show_home_button"></span>
     </div>
     <div id="change-home-page-section" hidden>
       <div id="change-home-page-section-container" guest-visibility="disabled">
@@ -78,19 +75,16 @@
         <div id="extension-controlled-container"></div>
       </div>
     </div>
-    <div class="checkbox" guest-visibility="disabled">
-      <span class="controlled-setting-with-label">
-        <input id="show-bookmark-bars" type="checkbox"
+    <div class="checkbox controlled-setting-with-label"
+        guest-visibility="disabled">
+      <label>
+        <input type="checkbox"
             pref="bookmark_bar.show_on_all_tabs"
             metric="Options_ShowBookmarksBar">
-        <span>
-          <label for="show-bookmark-bars"
-              i18n-content="toolbarShowBookmarksBar">
-          </label>
-          <span class="controlled-setting-indicator"
-              pref="bookmark_bar.show_on_all_tabs">
-          </span>
-        </span>
+        <span i18n-content="toolbarShowBookmarksBar"></span>
+      </label>
+      <span class="controlled-setting-indicator"
+          pref="bookmark_bar.show_on_all_tabs">
       </span>
     </div>
 <if expr="is_posix and not chromeos and not is_macosx">
@@ -137,11 +131,11 @@
   <section>
     <h3 i18n-content="sectionTitleSearch"></h3>
       <div id="search-section-content">
-        <label for="default-search-engine" class="settings-row"
-            i18n-values=".innerHTML:defaultSearchGroupLabel">
-        </label>
+        <span id="default-search-engine-label"

[arv (Not doing code reviews), 2014/09/03 01:10:40]

This is a change in behavior. With the old markup you could click on the <label>
and the select would get focused.

[Evan Stade, 2014/09/03 01:15:10]

yea, but I don't think that was intentional or desirable. I don't think "click
with mouse, then press spacebar" is a common pattern. Also, while you're
clicking, the <select> looks pressed, which is glitchy.

I looked up when this was added, and it was solely for the purposes of a11y.

[arv (Not doing code reviews), 2014/09/03 01:18:57]

Agreed. I think this is change for the better.

[Evan Stade, 2014/09/03 01:24:54]

cool. Thanks for the speedy review.

+            i18n-values=".innerHTML:defaultSearchGroupLabel"></span>
         <div class="settings-row">
-          <select id="default-search-engine" class="weakrtl"></select>
+          <select id="default-search-engine" class="weakrtl"
+              aria-labelledby="default-search-engine-label"></select>
           <span class="controlled-setting-indicator"
               pref="default_search_provider_data.template_url_data">
           </span>
@@ -155,29 +149,19 @@
     <h3 id="voice-section-title" i18n-content="sectionTitleVoice" hidden></h3>
     <div id="voice-section-content">
       <div id="hotword-always-on-search" hidden>
-        <div class="checkbox">
-          <span class="controlled-setting-with-label">
-            <input id="hotword-always-on-search-enable"
-                pref="hotword.always_on_search_enabled" type="checkbox">
-            <span>
-              <label for="hotword-always-on-search-enable"
-                  i18n-content="hotwordAlwaysOnSearchEnable">
-              </label>
-            </span>
-          </span>
+        <div class="checkbox controlled-setting-with-label">
+          <label>
+            <input pref="hotword.always_on_search_enabled" type="checkbox">
+            <span i18n-content="hotwordAlwaysOnSearchEnable"></span>
+          </label>
         </div>
       </div>
       <div id="audio-logging" hidden>
-        <div class="checkbox">
-          <span class="controlled-setting-with-label">
-            <input id="audio-logging-enable"
-                pref="hotword.audio_logging_enabled" type="checkbox">
-            <span>
-              <label for="audio-logging-enable"
-                  i18n-content="hotwordAudioHistoryEnable">
-              </label>
-            </span>
-          </span>
+        <div class="checkbox controlled-setting-with-label">
+          <label>
+            <input pref="hotword.audio_logging_enabled" type="checkbox">
+            <span i18n-content="hotwordAudioHistoryEnable"></span>
+          </label>
         </div>
       </div>
     </div>
@@ -236,13 +220,13 @@
     <h3 i18n-content="datetimeTitle"></h3>
     <div class="option-control-table">
       <div guest-visibility="disabled">
-        <label for="timezone-select" class="option-name"
-            i18n-content="timezone"></label>
+        <span id="timezone-value-label" class="option-name"

[arv (Not doing code reviews), 2014/09/03 01:10:40]

same here

+            i18n-content="timezone"></span>
         <div id="timezone-value">
-          <select id="timezone-select" class="control"
+          <select class="control"
               i18n-options="timezoneList" data-type="string"
-              pref="cros.system.timezone">
-          </select>
+              pref="cros.system.timezone"
+              aria-labelledby="timezone-value-label"></select>
         </div>
       </div>
       <div class="checkbox settings-row">
@@ -291,124 +275,100 @@
         <a target="_blank" i18n-content="learnMore"
             i18n-values="href:privacyLearnMoreURL"></a>
       </p>
-      <div class="checkbox">
-        <span class="controlled-setting-with-label">
+      <div class="checkbox controlled-setting-with-label">
+        <label>
           <input id="alternateErrorPagesEnabled"
               pref="alternate_error_pages.enabled"
               metric="Options_LinkDoctorCheckbox" type="checkbox">
-          <span>
-            <label for="alternateErrorPagesEnabled"
-                i18n-content="linkDoctorPref">
-            </label>
-            <span class="controlled-setting-indicator"
-                pref="alternate_error_pages.enabled">
-            </span>
-          </span>
+          <span i18n-content="linkDoctorPref"></span>
+        </label>
+        <span class="controlled-setting-indicator"
+            pref="alternate_error_pages.enabled">
         </span>
       </div>
-      <div class="checkbox" guest-visibility="disabled">
-        <span class="controlled-setting-with-label">
-          <input id="searchSuggestEnabled" pref="search.suggest_enabled"
+      <div class="checkbox controlled-setting-with-label"
+          guest-visibility="disabled">
+        <label>
+          <input pref="search.suggest_enabled"
               metric="Options_UseSuggestCheckbox" type="checkbox">
-          <span>
-            <label for="searchSuggestEnabled" i18n-content="suggestPref">
-            </label>
-            <span class="controlled-setting-indicator"
-                pref="search.suggest_enabled">
-            </span>
-          </span>
+          <span i18n-content="suggestPref"></span>
+        </label>
+        <span class="controlled-setting-indicator"
+            pref="search.suggest_enabled">
         </span>
       </div>
       <div class="checkbox" guest-visibility="disabled">
         <span class="controlled-setting-with-label">
-          <input id="networkPredictionOptions"
-              metric="Options_DnsPrefetchCheckbox" type="checkbox">
-          <span>
-            <label for="networkPredictionOptions"
-                i18n-content="networkPredictionEnabledDescription">
-            </label>
-            <span class="controlled-setting-indicator"
-                pref="net.network_prediction_options">
-            </span>
-          </span>
+          <label>
+            <input id="networkPredictionOptions"
+                metric="Options_DnsPrefetchCheckbox" type="checkbox">
+            <span i18n-content="networkPredictionEnabledDescription"></span>
+          </label>
+          <span class="controlled-setting-indicator"
+              pref="net.network_prediction_options"></span>
         </span>
       </div>
-      <div class="checkbox">
-        <span class="controlled-setting-with-label">
-          <input id="safe-browsing-extended-reporting-enabled"
+      <div class="checkbox controlled-setting-with-label">
+        <label>
+          <input
               metric="Options_SafeBrowsingExtendedReportingCheckbox"
               pref="safebrowsing.extended_reporting_enabled"
               type="checkbox">
-          <span>
-            <label for="safe-browsing-extended-reporting-enabled"
-                i18n-content="safeBrowsingEnableExtendedReporting">
-            </label>
-            <span class="controlled-setting-indicator"
-                pref="safebrowsing.extended_reporting_enabled">
-            </span>
-          </span>
+          <span i18n-content="safeBrowsingEnableExtendedReporting"></span>
+        </label>
+        <span class="controlled-setting-indicator"
+            pref="safebrowsing.extended_reporting_enabled">
         </span>
       </div>
-      <div class="checkbox">
-        <span class="controlled-setting-with-label">
-          <input id="safeBrowsingEnabled" pref="safebrowsing.enabled"
+      <div class="checkbox controlled-setting-with-label">
+        <label>
+          <input pref="safebrowsing.enabled"
               metric="Options_SafeBrowsingCheckbox" type="checkbox">
-          <span>
-            <label for="safeBrowsingEnabled"
-                i18n-content="safeBrowsingEnableProtection">
-            </label>
-            <span class="controlled-setting-indicator"
-                pref="safebrowsing.enabled">
-            </span>
-          </span>
+          <span i18n-content="safeBrowsingEnableProtection"></span>
+        </label>
+        <span class="controlled-setting-indicator"
+            pref="safebrowsing.enabled">
         </span>
       </div>
 <if expr="_google_chrome">
-      <div class="checkbox">
-        <span class="controlled-setting-with-label">
+      <div class="checkbox controlled-setting-with-label">
+        <label>
           <input id="spelling-enabled-control" type="checkbox"
               metric="Options_SpellingServiceCheckbox"
               pref="spellcheck.use_spelling_service" dialog-pref>
-          <span>
-            <label for="spelling-enabled-control" i18n-content="spellingPref">
-            </label>
-            <span id="spelling-enabled-indicator"
-                class="controlled-setting-indicator"
-                pref="spellcheck.use_spelling_service" dialog-pref>
-            </span>
-          </span>
+          <span i18n-content="spellingPref"></span>
+        </label>
+        <span id="spelling-enabled-indicator"
+            class="controlled-setting-indicator"
+            pref="spellcheck.use_spelling_service" dialog-pref>
         </span>
       </div>
-      <div id="metricsReportingSetting" class="checkbox">
-        <span class="controlled-setting-with-label">
+      <div id="metricsReportingSetting"
+          class="checkbox controlled-setting-with-label">
 <if expr="chromeos">
+        <label>
           <input id="metricsReportingEnabled"
               pref="cros.metrics.reportingEnabled" type="checkbox">
-          <span>
-            <label for="metricsReportingEnabled" i18n-content="enableLogging">
-            </label>
-            <span class="controlled-setting-indicator"
-                pref="cros.metrics.reportingEnabled">
-            </span>
-          </span>
+          <span i18n-content="enableLogging"></span>
+        </label>
+        <span class="controlled-setting-indicator"
+            pref="cros.metrics.reportingEnabled"></span>
 </if>
 <if expr="not chromeos">
+        <label>
           <input id="metricsReportingEnabled"
               pref="user_experience_metrics.reporting_enabled" type="checkbox">
-          <span>
-            <label for="metricsReportingEnabled" i18n-content="enableLogging">
-            </label>
-            <span class="controlled-setting-indicator"
-                pref="user_experience_metrics.reporting_enabled">
-            </span>
-            <span id="metrics-reporting-reset-restart">
-              <!-- Text filled by JavaScript -->
-              <span></span><button class=
-                  "link-button standalone-link-button"></button><span></span>
-            </span>
-          </span>
-</if>
+          <span i18n-content="enableLogging">
+        </label>
+        <span class="controlled-setting-indicator"
+            pref="user_experience_metrics.reporting_enabled">
+        </span>
+        <span id="metrics-reporting-reset-restart">
+          <!-- Text filled by JavaScript -->
+          <span></span><button class=
+              "link-button standalone-link-button"></button><span></span>
         </span>
+</if>
       </div>
 </if>  <!-- _google_chrome -->
       <div class="checkbox">
@@ -419,37 +379,29 @@
         </label>
       </div>
 <if expr="chromeos">
-      <div class="checkbox">
-        <span class="controlled-setting-with-label">
+      <div class="checkbox controlled-setting-with-label">
+        <label>
           <input id="content-protection-attestation-enabled" type="checkbox"
               pref="cros.device.attestation_for_content_protection_enabled">
-          <span>
-            <label for="content-protection-attestation-enabled"
-                i18n-content="enableContentProtectionAttestation">
-            </label>
-            <a target="_blank" i18n-content="learnMore"
-                i18n-values="href:contentProtectionAttestationLearnMoreURL">
-            </a>
-            <span class="controlled-setting-indicator"
-                pref="cros.device.attestation_for_content_protection_enabled">
-            </span>
-          </span>
+          <span i18n-content="enableContentProtectionAttestation"></span>
+        </label>
+        <a target="_blank" i18n-content="learnMore"
+            i18n-values="href:contentProtectionAttestationLearnMoreURL">
+        </a>
+        <span class="controlled-setting-indicator"
+            pref="cros.device.attestation_for_content_protection_enabled">
         </span>
       </div>
 </if>
       <div id="hotword-search" hidden>
-        <div class="checkbox">
-          <span class="controlled-setting-with-label">
+        <div class="checkbox controlled-setting-with-label">
+          <label>
             <input id="hotword-search-enable" pref="hotword.search_enabled_2"
                 metric="Options_HotwordCheckbox" type="checkbox" dialog-pref>
-            <span>
-              <label for="hotword-search-enable"
-                  i18n-values=".innerHTML:hotwordSearchEnable">
-              </label>
-              <span id="hotword-search-setting-indicator"
-                  pref="hotword.search_enabled_2" dialog-pref>
-              </span>
-            </span>
+            <span i18n-values=".innerHTML:hotwordSearchEnable"></span>
+          </label>
+          <span id="hotword-search-setting-indicator"
+              pref="hotword.search_enabled_2" dialog-pref>
           </span>
         </div>
       </div>
@@ -485,37 +437,30 @@
 </if>  <!-- chromeos -->
   <section id="passwords-and-autofill-section">
     <h3 i18n-content="passwordsAndAutofillGroupName"></h3>
-    <div class="checkbox">
-      <span class="controlled-setting-with-label">
+    <div class="checkbox controlled-setting-with-label">
+      <label>
         <input id="autofill-enabled" pref="autofill.enabled"
             metric="Options_FormAutofill" type="checkbox">
-        <span>
-          <label for="autofill-enabled" i18n-content="autofillEnabled"></label>
-          <span class="controlled-setting-indicator" pref="autofill.enabled">
-          </span>
-          <button id="autofill-settings" class="link-button"
-              i18n-content="manageAutofillSettings">
-          </button>
+        <span i18n-content="autofillEnabled"></span>
+        <span class="controlled-setting-indicator" pref="autofill.enabled">
         </span>
-      </span>
+      </label>
+      <button id="autofill-settings" class="link-button"
+          i18n-content="manageAutofillSettings">
+      </button>
     </div>
-    <div class="checkbox">
-      <span class="controlled-setting-with-label">
+    <div class="checkbox controlled-setting-with-label">
+      <label>
         <input id="password-manager-enabled"
             pref="profile.password_manager_enabled"
             metric="Options_PasswordManager" type="checkbox">
-        <span>
-          <label for="password-manager-enabled"
-              i18n-content="passwordManagerEnabled">
-          </label>
-          <span class="controlled-setting-indicator"
-              pref="profile.password_manager_enabled">
-          </span>
-          <button id="manage-passwords" class="link-button"
-              i18n-content="managePasswords">
-          </button>
+        <span i18n-content="passwordManagerEnabled"></span>
+        <span class="controlled-setting-indicator"
+            pref="profile.password_manager_enabled"></span>
         </span>
-      </span>
+      </label>
+      <button id="manage-passwords" class="link-button"
+          i18n-content="managePasswords"></button>
     </div>
 <if expr="is_macosx">
     <div id="mac-passwords-warning" i18n-content="macPasswordsWarning" hidden>
@@ -613,19 +558,16 @@
       <button id="language-button"
           i18n-content="languageAndSpellCheckSettingsButton"></button>
     </div>
-    <div class="checkbox">
-      <span class="controlled-setting-with-label">
-        <input id="enableTranslate" pref="translate.enabled"
+    <div class="checkbox controlled-setting-with-label">
+      <label>
+        <input pref="translate.enabled"
             metric="Options_Translate" type="checkbox">
-        <span>
-          <label for="enableTranslate" i18n-content="translateEnableTranslate">
-          </label>
-          <span class="controlled-setting-indicator" pref="translate.enabled">
-          </span>
-          <button id="manage-languages" class="link-button"
-              i18n-content="manageLanguages"></button>
-        </span>
+        <span i18n-content="translateEnableTranslate"></span>
+      </label>
+      <span class="controlled-setting-indicator" pref="translate.enabled">
       </span>
+      <button id="manage-languages" class="link-button"
+          i18n-content="manageLanguages"></button>
     </div>
   </section>
   <section id="downloads-section">
@@ -646,32 +588,26 @@
           pref="download.default_directory">
         </span>
       </div>
-      <div class="checkbox">
-        <span class="controlled-setting-with-label">
-          <input id="prompt-for-download" type="checkbox"
-                pref="download.prompt_for_download"
-                metric="Options_AskForSaveLocation">
-          <span>
-            <label for="prompt-for-download"
-                i18n-content="downloadLocationAskForSaveLocation">
-            </label>
-            <span class="controlled-setting-indicator"
-                pref="download.prompt_for_download">
-            </span>
-          </span>
-        </span>
+      <div class="checkbox controlled-setting-with-label">
+        <label>
+          <input type="checkbox"
+              pref="download.prompt_for_download"
+              metric="Options_AskForSaveLocation">
+          <span i18n-content="downloadLocationAskForSaveLocation"></span>
+        </label>
+        <span class="controlled-setting-indicator"
+            pref="download.prompt_for_download"></span>
       </div>
 <if expr="chromeos">
-      <div class="checkbox" id="disable-drive-row" guest-visibility="disabled">
-        <span class="controlled-setting-with-label">
-          <input id="drive-disabled" type="checkbox"
+      <div class="checkbox controlled-setting-with-label"
+          id="disable-drive-row" guest-visibility="disabled">
+        <label>
+          <input type="checkbox"
               pref="gdata.disabled"
               metric="Options_DisableGData">
-          <span>
-            <label for="drive-disabled" i18n-content="disableGData"></label>
-            <span class="controlled-setting-indicator" pref="gdata.disabled">
-            </span>
-          </span>
+          <span i18n-content="disableGData"></span>
+        </label>
+        <span class="controlled-setting-indicator" pref="gdata.disabled">
         </span>
       </div>
 </if>
@@ -710,22 +646,17 @@
               i18n-content="cloudPrintDevicesPageButton">
       </button>
 
-      <div class="checkbox"
+      <div class="checkbox controlled-setting-with-label"
            i18n-values=".hidden: cloudPrintHideNotificationsCheckbox">
-        <span class="controlled-setting-with-label">
+        <label>
           <input id="local-discovery-notifications-enabled"
-                 pref="local_discovery.notifications_enabled"
-                 type="checkbox"
-                 metric="LocalDiscoveryNotificationsDisabled_Settings">
-          <span>
-            <label for="local-discovery-notifications-enabled"
-                   i18n-content="cloudPrintEnableNotificationsLabel">
-            </label>
-            <span class="controlled-setting-indicator"
-                  pref="local_discovery.notifications_enabled">
-            </span>
-          </span>
-        </span>
+              pref="local_discovery.notifications_enabled"
+              type="checkbox"
+              metric="LocalDiscoveryNotificationsDisabled_Settings">
+          <span i18n-content="cloudPrintEnableNotificationsLabel"></span>
+        </label>
+        <span class="controlled-setting-indicator"
+              pref="local_discovery.notifications_enabled"></span>
       </div>
     </section>
 </if>
@@ -741,86 +672,65 @@
            i18n-content="learnMore"></a>
       </p>
       <div class="option-name">
-        <div class="checkbox">
-          <span class="controlled-setting-with-label">
-            <input id="accessibility-should-always-show-menu"
-                   pref="settings.a11y.enable_menu" type="checkbox"
-                   metric="Options_AccessibilitySystemMenu">
-            <span>
-              <label for="accessibility-should-always-show-menu"
-                  i18n-content="accessibilityAlwaysShowMenu">
-              </label>
-              <span class="controlled-setting-indicator"
-                  pref="settings.a11y.enable_menu">
-              </span>
-          </span>
+        <div class="checkbox controlled-setting-with-label">
+          <label>
+            <input
+                pref="settings.a11y.enable_menu" type="checkbox"
+                metric="Options_AccessibilitySystemMenu">
+            <span i18n-content="accessibilityAlwaysShowMenu"></span>
+          </label>
+          <span class="controlled-setting-indicator"
+              pref="settings.a11y.enable_menu"></span>
         </div>
       </div>
       <div class="option-name">
-        <div class="checkbox">
-          <span class="controlled-setting-with-label">
-            <input id="accessibility-large-cursor-check"
-                   pref="settings.a11y.large_cursor_enabled" type="checkbox"
-                   metric="Options_AccessibilityLargeMouseCursor">
-            <span>
-              <label for="accessibility-large-cursor-check"
-                  i18n-content="accessibilityLargeCursor">
-              </label>
-              <span class="controlled-setting-indicator"
-                  pref="settings.a11y.large_cursor_enabled">
-              </span>
-            </span>
-          </span>
+        <div class="checkbox controlled-setting-with-label">
+          <label>
+            <input
+                pref="settings.a11y.large_cursor_enabled" type="checkbox"
+                metric="Options_AccessibilityLargeMouseCursor">
+            <span i18n-content="accessibilityLargeCursor"></span>
+          </label>
+          <span class="controlled-setting-indicator"
+              pref="settings.a11y.large_cursor_enabled"></span>
         </div>
       </div>
       <div class="option-name">
-        <div class="checkbox">
-          <span class="controlled-setting-with-label">
+        <div class="checkbox controlled-setting-with-label">
+          <label>
             <input id="accessibility-high-contrast-check"
-                   pref="settings.a11y.high_contrast_enabled" type="checkbox"
-                   metric="Options_AccessibilityHighContrastMode">
-            <span>
-              <label for="accessibility-high-contrast-check"
-                  i18n-content="accessibilityHighContrast">
-              </label>
-              <span class="controlled-setting-indicator"
-                  pref="settings.a11y.high_contrast_enabled">
-              </span>
-            </span>
+                pref="settings.a11y.high_contrast_enabled" type="checkbox"
+                metric="Options_AccessibilityHighContrastMode">
+            <span i18n-content="accessibilityHighContrast"></span>
+          </label>
+          <span class="controlled-setting-indicator"
+              pref="settings.a11y.high_contrast_enabled">
           </span>
         </div>
       </div>
       <div id="accessibility-sticky-keys" class="option-name">
-        <div class="checkbox">
-          <span class="controlled-setting-with-label">
+        <div class="checkbox controlled-setting-with-label">
+          <label>
             <input id="accessibility-sticky-keys-check"
-                   pref="settings.a11y.sticky_keys_enabled" type="checkbox"
-                   metric="Options_AccessibilityStickyKeys">
-            <span>
-              <label for="accessibility-sticky-keys-check"
-                  i18n-content="accessibilityStickyKeys">
-              </label>
-              <span class="controlled-setting-indicator"
-                  pref="settings.a11y.sticky_keys_enabled">
-              </span>
-            </span>
+                pref="settings.a11y.sticky_keys_enabled" type="checkbox"
+                metric="Options_AccessibilityStickyKeys">
+            <span i18n-content="accessibilityStickyKeys"></span>
+          </label>
+          <span class="controlled-setting-indicator"
+              pref="settings.a11y.sticky_keys_enabled"></span>
           </span>
         </div>
       </div>
       <div class="option-name">
-        <div class="checkbox">
-          <span class="controlled-setting-with-label">
+        <div class="checkbox controlled-setting-with-label">
+          <label>
             <input id="accessibility-spoken-feedback-check"
-                   pref="settings.accessibility" type="checkbox"
-                   metric="Options_AccessibilitySpokenFeedback">
-            <span>
-              <label for="accessibility-spoken-feedback-check"
-                  i18n-content="accessibilitySpokenFeedback">
-              </label>
-              <span class="controlled-setting-indicator"
-                  pref="settings.accessibility">
-              </span>
-            </span>
+                pref="settings.accessibility" type="checkbox"
+                metric="Options_AccessibilitySpokenFeedback">
+            <span i18n-content="accessibilitySpokenFeedback"></span>
+          </label>
+          <span class="controlled-setting-indicator"
+              pref="settings.accessibility">
           </span>
           <div id="accessibility-settings" hidden>
             <button id="accessibility-settings-button"
@@ -829,20 +739,14 @@
         </div>
       </div>
       <div class="option-name">
-        <div class="checkbox">
-          <span class="controlled-setting-with-label">
-            <input id="accessibility-screen-magnifier-check"
-                   pref="settings.a11y.screen_magnifier" type="checkbox"
-                   metric="Options_AccessibilityScreenMagnifier">
-            <span>
-              <label for="accessibility-screen-magnifier-check"
-                  i18n-content="accessibilityScreenMagnifier">
-              </label>
-              <span class="controlled-setting-indicator"
-                  pref="settings.a11y.screen_magnifier">
-              </span>
-            </span>
-          </span>
+        <div class="checkbox controlled-setting-with-label">
+            <input
+                pref="settings.a11y.screen_magnifier" type="checkbox"
+                metric="Options_AccessibilityScreenMagnifier">
+            <span i18n-content="accessibilityScreenMagnifier"></span>
+          </label>
+          <span class="controlled-setting-indicator"
+              pref="settings.a11y.screen_magnifier"></span>
         </div>
       </div>
       <div class="option-name" id="accessibility-tap-dragging">
@@ -881,8 +785,10 @@
                         i18n-content="autoclickDelayExtremelyShort"></option>
                     <option value="400"
                         i18n-content="autoclickDelayVeryShort"></option>
-                    <option value="600" i18n-content="autoclickDelayShort"></option>
-                    <option value="800" i18n-content="autoclickDelayLong"></option>
+                    <option value="600" i18n-content="autoclickDelayShort">
+                    </option>
+                    <option value="800" i18n-content="autoclickDelayLong">
+                    </option>
                     <option value="1000"
                         i18n-content="autoclickDelayVeryLong"></option>
                   </select>
@@ -896,19 +802,14 @@
         </div>
       </div>
       <div class="option_name" id="accessibility_onscreen_keyboard">
-        <div class="checkbox">
-          <span class="controlled-setting-with-label">
-            <input id="accessibility-virtual-keyboard-check"
-                   pref="settings.a11y.virtual_keyboard" type="checkbox"
-                   metric="Options_AccessibilityOnScreenKeyboard">
-            <span>
-              <label for="accessibility-virtual-keyboard-check"
-                  i18n-content="accessibilityVirtualKeyboard">
-              </label>
-              <span class="controlled-setting-indicator"
-                  pref="settings.a11y.virtual_keyboard">
-              </span>
-            </span>
+        <div class="checkbox controlled-setting-with-label">
+          <label>
+            <input pref="settings.a11y.virtual_keyboard" type="checkbox"
+                metric="Options_AccessibilityOnScreenKeyboard">
+            <span i18n-content="accessibilityVirtualKeyboard"></span>
+          </label>
+          <span class="controlled-setting-indicator"
+              pref="settings.a11y.virtual_keyboard">
           </span>
         </div>
       </div>
@@ -930,34 +831,24 @@
   <section id="system-section">
     <h3 i18n-content="advancedSectionTitleSystem"></h3>
 <if expr="not is_macosx">
-    <div class="checkbox">
-      <span class="controlled-setting-with-label">
-        <input id="backgroundModeCheckbox" pref="background_mode.enabled"
+    <div class="checkbox controlled-setting-with-label">
+      <label>
+        <input pref="background_mode.enabled"
             type="checkbox">
-        <span>
-          <label for="backgroundModeCheckbox"
-              i18n-content="backgroundModeCheckbox">
-          </label>
-          <span class="controlled-setting-indicator"
-              pref="background_mode.enabled">
-          </span>
-        </span>
-      </span>
+        <span i18n-content="backgroundModeCheckbox"></span>
+      </label>
+      <span class="controlled-setting-indicator"
+          pref="background_mode.enabled"></span>
     </div>
 </if>
-    <div class="checkbox">
-      <span class="controlled-setting-with-label">
+    <div class="checkbox controlled-setting-with-label">
+      <label>
         <input id="gpu-mode-checkbox"
             pref="hardware_acceleration_mode.enabled" type="checkbox">
-        <span>
-          <label for="gpu-mode-checkbox"
-              i18n-content="gpuModeCheckbox">
-          </label>
-          <span id="gpu-mode-reset-restart"
-              i18n-values=".innerHTML:gpuModeResetRestart">
-          </span>
-        </span>
-      </span>
+        <span i18n-content="gpuModeCheckbox">
+      </label>
+      <span id="gpu-mode-reset-restart"
+          i18n-values=".innerHTML:gpuModeResetRestart"></span>
     </div>
   </section>
 </if>