Makes STS toggle button label clickable and work with enter key.

This copies behavior on chrome://settings pages where tapping
anywhere in the option box can change the state of the toggle,
or having keyboard focus on an toggle element and clicking 'enter'
changes the state.

Bug: 810333,810307
Change-Id: Ib6edc31fff72f2e32c5b9ce73264739a3d3194c1
Reviewed-on: https://chromium-review.googlesource.com/1214366Reviewed-by: David Tseng <dtseng@chromium.org>
Commit-Queue: Katie Dektar <katie@chromium.org>
Cr-Commit-Position: refs/heads/master@{#590530}

chrome/browser/resources/chromeos/select_to_speak/options.css

@@ -35,15 +35,24 @@ h2 {
     margin-top: 21px;
 }
 
+hr {
+  border-bottom: 0;
+  border-top: 1px solid #ddd;
+  margin: 0;
+}
+
 .container {
     margin-left: auto;
     margin-right: auto;
-    width: 646px;
+    width: 688px;
+}
+
+.option-group {
+    border: 1px solid #ddd;
 }
 
 .option {
     background-color: #fff;
-    border: 1px solid #ddd;
     font-size: 13px;
     min-height: 60px;
     padding: 0 20px;
@@ -52,11 +61,12 @@ h2 {
 }
 
 .sub-option {
+    background-color: #fff;
     font-size: 13px;
     max-height: 60px;
     opacity: 1;
     overflow: hidden;
-    padding: 0 24px;
+    padding: 0 20px 0 44px;
     transition: max-height 150ms ease-in;
     vertical-align: middle;
     width: 622px;
@@ -69,7 +79,7 @@ h2 {
     transition: max-height 150ms ease-out;
 }
 
-.option input[type='checkbox'] {
+.option-group input[type='checkbox'] {
     -webkit-appearance: none;
     background-color: #fff;
     background-image: url(unchecked.png);
@@ -82,11 +92,11 @@ h2 {
     width: 40px;
 }
 
-.option input[type='checkbox']:checked {
+.option-group input[type='checkbox']:checked {
     background-image: url(checked.png);
 }
 
-.option select {
+.option-group select {
     background-color: #fff;
     border-color: #ddd;
     border-width: 0 0 1px 0;

chrome/browser/resources/chromeos/select_to_speak/options.html

@@ -15,27 +15,32 @@
     <div class="container">
 
       <h2 class="i18n" msgid="options_speech"></h2>
-      <div class="option">
-        <span class="i18n" msgid="options_voices_description"
-              id="voices_description"></span>
-        <select id="voice" aria-labelledby="voices_description">
-        </select>
-      </div>
-
-      <div class="option">
-        <label class="i18n" msgid="options_text_to_speech_settings"></label>
-        <button id="ttsSettingsBtn" class="i18n"
-            msgid="options_text_to_speech_settings_link">
-        </button>
+      <div class="option-group">
+        <div class="option">
+          <span class="i18n" msgid="options_voices_description"
+                id="voices_description"></span>
+          <select id="voice" aria-labelledby="voices_description">
+          </select>
+        </div>
+        <hr aria-hidden="true">
+        <div class="option">
+          <label class="i18n" msgid="options_text_to_speech_settings"></label>
+          <button id="ttsSettingsBtn" class="i18n"
+              msgid="options_text_to_speech_settings_link">
+          </button>
+        </div>
       </div>
 
       <h2 class="i18n" msgid="options_highlight"></h2>
-      <div class="option">
-        <label id="wordHighlightLabel" class="i18n"
-               msgid="options_highlight_description">
-        </label>
-        <input id="wordHighlight" type="checkbox" class="checkbox"
-           name="wordHighlight" aria-labeledby="wordHighlightLabel">
+      <div class="option-group">
+        <div class="option" id="wordHighlightOption">
+          <label id="wordHighlightLabel" class="i18n"
+                msgid="options_highlight_description">
+          </label>
+          <input id="wordHighlight" type="checkbox" role="switch"
+            class="checkbox" name="wordHighlight"
+            aria-labeledby="wordHighlightLabel">
+        </div>
         <div class="sub-option hidden" id="highlightSubOption">
           <span class="i18n" msgid="options_highlight_color_description"
                 id="highlight_color_description"></span>

chrome/browser/resources/chromeos/select_to_speak/select_to_speak_options.js

@@ -132,6 +132,13 @@ SelectToSpeakOptionsPage.prototype = {
       });
     }
 
+    checkbox.addEventListener('keypress', function(e) {
+      if (e.code === 'Enter') {
+        e.stopPropagation();
+        checkbox.click();
+      }
+    });
+
     checkbox.addEventListener('change', function() {
       let setParams = {};
       setParams[pref] = checkbox.checked;
@@ -197,6 +204,15 @@ SelectToSpeakOptionsPage.prototype = {
 
     this.syncSelectControlToPref_(
         'highlightColor', 'highlightColor', 'value', onChange);
+
+    document.getElementById('wordHighlightOption')
+        .addEventListener('click', function(e) {
+          e.stopPropagation();
+          let checkbox = document.getElementById('wordHighlight');
+          // Make sure it isn't the auto-generated click itself.
+          if (e.srcElement !== checkbox)
+            checkbox.click();
+        });
   },
 
   /**