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

Two main cases:
1. <label> not wrapping input + span
2. for accessibility -- for=<selector-id> should instead use aria-labelledby

BUG=409938

Review URL: https://codereview.chromium.org/536703002

Cr-Commit-Position: refs/heads/master@{#293215}

chrome/browser/resources/options/clear_browser_data_overlay.js

@@ -120,8 +120,8 @@ cr.define('options', function() {
 
         if (buttonId != '') {
           var button = document.createElement('button');
-          button.setAttribute('id', buttonId);
-          button.setAttribute('class', 'link-button');
+          button.id = buttonId;
+          button.className = 'link-button';
           button.textContent = footerFragments[i + 1];
           footer.appendChild(button);
           i += 3;

chrome/browser/resources/options/controlled_setting.css

@@ -15,7 +15,6 @@
   -webkit-box-align: center;
   -webkit-box-flex: 1;
   -webkit-margin-start: 0.6em;
-  -webkit-user-select: none;
   display: -webkit-box;
 }
 

chrome/browser/ui/webui/options/chromeos/shared_options_browsertest.cc

@@ -158,8 +158,8 @@ class SharedOptionsTest : public LoginManagerTest {
         "var success = false;"
         "if (input) {"
         "  success = input.disabled == %d;"
-        "  var indicator = document.querySelector(input.tagName +"
-        "      prefSelector + ' + span span.controlled-setting-indicator');"
+        "  var indicator = input.parentNode.parentNode.querySelector("
+        "      '.controlled-setting-indicator');"
         "  if (controlledBy) {"
         "    success = success && indicator &&"
         "              indicator.getAttribute('controlled-by') == controlledBy;"

chrome/browser/ui/webui/options/options_browsertest.js

@@ -99,7 +99,8 @@ GEN('#endif  // defined(OS_MACOSX)');
 
 TEST_F('OptionsWebUITest', 'MAYBE_testSetBooleanPrefTriggers', function() {
   // TODO(dtseng): make generic to click all buttons.
-  var showHomeButton = $('show-home-button');
+  var showHomeButton =
+      document.querySelector('input[pref="browser.show_home_button"]');
   var trueListValue = [
     'browser.show_home_button',
     true,

ui/webui/resources/css/widgets.css

@@ -256,7 +256,7 @@ input:disabled:-webkit-any([type='password'],
    * Resolve this by using 'inherit'. */
   font: inherit;
   margin: 0;
-  padding: 0 4px;
+  padding: 0;
 }
 
 .link-button:hover {
@@ -295,7 +295,9 @@ input:disabled:-webkit-any([type='password'],
 }
 
 :-webkit-any(.checkbox, .radio) label input ~ span {
+  -webkit-margin-end: 0.3em;
   -webkit-margin-start: 0.6em;
+  -webkit-user-select: none;
   /* Make sure long spans wrap at the same horizontal position they start. */
   display: block;
 }