Commit acfd829c authored by Katie D's avatar Katie D Committed by Commit Bot

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: default avatarDavid Tseng <dtseng@chromium.org>
Commit-Queue: Katie Dektar <katie@chromium.org>
Cr-Commit-Position: refs/heads/master@{#590530}
parent e63f179c
...@@ -35,15 +35,24 @@ h2 { ...@@ -35,15 +35,24 @@ h2 {
margin-top: 21px; margin-top: 21px;
} }
hr {
border-bottom: 0;
border-top: 1px solid #ddd;
margin: 0;
}
.container { .container {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
width: 646px; width: 688px;
}
.option-group {
border: 1px solid #ddd;
} }
.option { .option {
background-color: #fff; background-color: #fff;
border: 1px solid #ddd;
font-size: 13px; font-size: 13px;
min-height: 60px; min-height: 60px;
padding: 0 20px; padding: 0 20px;
...@@ -52,11 +61,12 @@ h2 { ...@@ -52,11 +61,12 @@ h2 {
} }
.sub-option { .sub-option {
background-color: #fff;
font-size: 13px; font-size: 13px;
max-height: 60px; max-height: 60px;
opacity: 1; opacity: 1;
overflow: hidden; overflow: hidden;
padding: 0 24px; padding: 0 20px 0 44px;
transition: max-height 150ms ease-in; transition: max-height 150ms ease-in;
vertical-align: middle; vertical-align: middle;
width: 622px; width: 622px;
...@@ -69,7 +79,7 @@ h2 { ...@@ -69,7 +79,7 @@ h2 {
transition: max-height 150ms ease-out; transition: max-height 150ms ease-out;
} }
.option input[type='checkbox'] { .option-group input[type='checkbox'] {
-webkit-appearance: none; -webkit-appearance: none;
background-color: #fff; background-color: #fff;
background-image: url(unchecked.png); background-image: url(unchecked.png);
...@@ -82,11 +92,11 @@ h2 { ...@@ -82,11 +92,11 @@ h2 {
width: 40px; width: 40px;
} }
.option input[type='checkbox']:checked { .option-group input[type='checkbox']:checked {
background-image: url(checked.png); background-image: url(checked.png);
} }
.option select { .option-group select {
background-color: #fff; background-color: #fff;
border-color: #ddd; border-color: #ddd;
border-width: 0 0 1px 0; border-width: 0 0 1px 0;
......
...@@ -15,27 +15,32 @@ ...@@ -15,27 +15,32 @@
<div class="container"> <div class="container">
<h2 class="i18n" msgid="options_speech"></h2> <h2 class="i18n" msgid="options_speech"></h2>
<div class="option"> <div class="option-group">
<span class="i18n" msgid="options_voices_description" <div class="option">
id="voices_description"></span> <span class="i18n" msgid="options_voices_description"
<select id="voice" aria-labelledby="voices_description"> id="voices_description"></span>
</select> <select id="voice" aria-labelledby="voices_description">
</div> </select>
</div>
<div class="option"> <hr aria-hidden="true">
<label class="i18n" msgid="options_text_to_speech_settings"></label> <div class="option">
<button id="ttsSettingsBtn" class="i18n" <label class="i18n" msgid="options_text_to_speech_settings"></label>
msgid="options_text_to_speech_settings_link"> <button id="ttsSettingsBtn" class="i18n"
</button> msgid="options_text_to_speech_settings_link">
</button>
</div>
</div> </div>
<h2 class="i18n" msgid="options_highlight"></h2> <h2 class="i18n" msgid="options_highlight"></h2>
<div class="option"> <div class="option-group">
<label id="wordHighlightLabel" class="i18n" <div class="option" id="wordHighlightOption">
msgid="options_highlight_description"> <label id="wordHighlightLabel" class="i18n"
</label> msgid="options_highlight_description">
<input id="wordHighlight" type="checkbox" class="checkbox" </label>
name="wordHighlight" aria-labeledby="wordHighlightLabel"> <input id="wordHighlight" type="checkbox" role="switch"
class="checkbox" name="wordHighlight"
aria-labeledby="wordHighlightLabel">
</div>
<div class="sub-option hidden" id="highlightSubOption"> <div class="sub-option hidden" id="highlightSubOption">
<span class="i18n" msgid="options_highlight_color_description" <span class="i18n" msgid="options_highlight_color_description"
id="highlight_color_description"></span> id="highlight_color_description"></span>
......
...@@ -132,6 +132,13 @@ SelectToSpeakOptionsPage.prototype = { ...@@ -132,6 +132,13 @@ SelectToSpeakOptionsPage.prototype = {
}); });
} }
checkbox.addEventListener('keypress', function(e) {
if (e.code === 'Enter') {
e.stopPropagation();
checkbox.click();
}
});
checkbox.addEventListener('change', function() { checkbox.addEventListener('change', function() {
let setParams = {}; let setParams = {};
setParams[pref] = checkbox.checked; setParams[pref] = checkbox.checked;
...@@ -197,6 +204,15 @@ SelectToSpeakOptionsPage.prototype = { ...@@ -197,6 +204,15 @@ SelectToSpeakOptionsPage.prototype = {
this.syncSelectControlToPref_( this.syncSelectControlToPref_(
'highlightColor', 'highlightColor', 'value', onChange); '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();
});
}, },
/** /**
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment