Skip to content

GitLab

T
tangled
Commit 1a50a521 authored by dmazzoni's avatar dmazzoni Committed by Commit bot
Browse files
Options

Fix i18n for the color enhancer extension 

Also makes the radio buttons accessible and makes it possible to click anywhere on the color tiles to select the corresponding radio button.

BUG=none

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

Cr-Commit-Position: refs/heads/master@{#327106}
parent 90104a67
Hide whitespace changes
Inline Side-by-side
Showing with 39 additions and 29 deletions
ui/accessibility/extensions/colorenhancer/res/setup.css
View file @ 1a50a521
...@@ -74,6 +74,7 @@ table input[type="button"] { ...@@ -74,6 +74,7 @@ table input[type="button"] {
height: 40px; height: 40px;
line-height: 1em; line-height: 1em;
width: 40px; width: 40px;
pointer-events: none;
} }
#severity { #severity {
......
ui/accessibility/extensions/colorenhancer/src/popup.html
View file @ 1a50a521
...@@ -16,14 +16,13 @@ ...@@ -16,14 +16,13 @@
<script type="text/javascript" src="popup.js"></script> <script type="text/javascript" src="popup.js"></script>
</head> </head>
<body> <body>
<h2><span i18n-content="IDS_COLOR_ENHANCER_APPNAME">Color Enhancer<span></h2> <h2><span i18n-content="color_enhancer_appname"><span></h2>
<table> <table>
<tr> <tr>
<th><span i18n-content="IDS_COLOR_ENHANCER_ENABLE">Enable?</span></th> <th><span i18n-content="color_enhancer_enable"></span></th>
<th> <th>
<span i18n-content="IDS_COLOR_ENHANCER_ADJUSTMENT_FACTOR"> <span i18n-content="color_enhancer_adjustment_factor">
Color adjustment
</span> </span>
</th> </th>
</tr> </tr>
...@@ -34,21 +33,19 @@ ...@@ -34,21 +33,19 @@
defaultValue="0.5"> defaultValue="0.5">
</td> </td>
<td> <td>
<!-- TOOD(kevers): i18n --> <button id="setup" i18n-content="color_enhancer_setup_button"></button>
<input id="setup" type="button" value="Setup">
</td> </td>
</tr> </tr>
</table> </table>
</div> </div>
<div id="setup-panel" class = "collapsed"> <div id="setup-panel" class="collapsed">
<h3><span i18n-content="IDS_COLOR_ENHANCER_ADVANCED">Setup:</span></h3> <h3><span i18n-content="color_enhancer_setup_heading"></span></h3>
<section id="step-1"> <section id="step-1">
<div> <div>
<span i18n-content="IDS_COLOR_ENHANCER_TYPE_CHOICE"> <span i18n-content="color_enhancer_type_choice">
Step 1: Select the row with the faintest stars:
</span> </span>
</div> </div>
<div class="template swatch"> <div class="template swatch">
<span>&#x22c6</span> <span>&#x22c6</span>
</div> </div>
...@@ -59,18 +56,15 @@ ...@@ -59,18 +56,15 @@
</section> </section>
<section id="step-2"> <section id="step-2">
<div> <div>
<span i18n-content="IDS_COLOR_ENHANCER_SEVERITY"> <span i18n-content="color_enhancer_severity">
Step 2: Adjust the slider until all of the stars are visible in the
selected row
</span> </span>
<input id="severity" type="range" min=0 max=1.0 step=0.1 value="0"> <input id="severity" type="range" min=0 max=1.0 step=0.1 value="0">
</div> </div>
</section> </section>
<div id="setup-button-strip" class="row"> <div id="setup-button-strip" class="row">
<!-- TODO(kevers): i18n --> <button id="reset" i18n-content="color_enhancer_reset"></button>
<input id="reset" type="button" value="Reset"> <button id="ok" i18n-content="color_enhancer_ok"></button>
<input id="ok" type="button" value="OK"> <button id="cancel" i18n-content="color_enhancer_cancel"></button>
<input id="cancel" type="button" value="Cancel">
</div> </div>
</div> </div>
</body> </body>
......
ui/accessibility/extensions/colorenhancer/src/popup.js
View file @ 1a50a521
...@@ -107,7 +107,7 @@ function createTestRow(type) { ...@@ -107,7 +107,7 @@ function createTestRow(type) {
var toCssColor = function(rgb) { var toCssColor = function(rgb) {
return 'rgb(' + rgb.join(',') + ')'; return 'rgb(' + rgb.join(',') + ')';
}; };
var row = document.createElement('div'); var row = document.createElement('label');
row.classList.add('row'); row.classList.add('row');
var button = document.createElement('input'); var button = document.createElement('input');
...@@ -120,6 +120,7 @@ function createTestRow(type) { ...@@ -120,6 +120,7 @@ function createTestRow(type) {
button.addEventListener('change', function() { button.addEventListener('change', function() {
onTypeChange(this.value); onTypeChange(this.value);
}); });
button.setAttribute('aria-label', type);
SWATCH_COLORS.forEach(function(data) { SWATCH_COLORS.forEach(function(data) {
var swatch = document.querySelector('.swatch.template').cloneNode(true); var swatch = document.querySelector('.swatch.template').cloneNode(true);
...@@ -320,6 +321,13 @@ function onReset() { ...@@ -320,6 +321,13 @@ function onReset() {
* currently visible tab. * currently visible tab.
*/ */
function initialize() { function initialize() {
var i18nElements = document.querySelectorAll('*[i18n-content]');
for (var i = 0; i < i18nElements.length; i++) {
var elem = i18nElements[i];
var msg = elem.getAttribute('i18n-content');
elem.textContent = chrome.i18n.getMessage(msg);
}
$('setup').onclick = function() { $('setup').onclick = function() {
$('setup-panel').classList.remove('collapsed'); $('setup-panel').classList.remove('collapsed');
// Store current settings in the event of a canceled setup. // Store current settings in the event of a canceled setup.
......
ui/accessibility/extensions/strings/accessibility_extensions_strings.grd
View file @ 1a50a521
...@@ -274,7 +274,7 @@ ...@@ -274,7 +274,7 @@
Degree Degree
</message> </message>
<message desc="Title for a dropdown selecting between colors to enhance." name="IDS_COLOR_ENHANCER_TYPE_CHOICE"> <message desc="Title for a dropdown selecting between colors to enhance." name="IDS_COLOR_ENHANCER_TYPE_CHOICE">
Improve perception for: Step 1: Select the row with the faintest stars:
</message> </message>
<message desc="Choice to enhancing the red color." name="IDS_COLOR_ENHANCER_TYPE_RED"> <message desc="Choice to enhancing the red color." name="IDS_COLOR_ENHANCER_TYPE_RED">
Red Red
...@@ -285,20 +285,27 @@ ...@@ -285,20 +285,27 @@
<message desc="Choice to enhancing the blue color." name="IDS_COLOR_ENHANCER_TYPE_BLUE"> <message desc="Choice to enhancing the blue color." name="IDS_COLOR_ENHANCER_TYPE_BLUE">
Blue Blue
</message> </message>
<message desc="Title for button that will apply these settings to all currently open websites." name="IDS_COLOR_ENHANCER_RESET">
Apply to all sites
</message>
<message desc="Title for checkbox that enables the extension." name="IDS_COLOR_ENHANCER_ENABLE"> <message desc="Title for checkbox that enables the extension." name="IDS_COLOR_ENHANCER_ENABLE">
Enable? Enable?
</message> </message>
<message desc="Title for checkbox that enables color vision deficiency simulation." name="IDS_COLOR_ENHANCER_SIMULATE">
Simulate?
</message>
<message desc="Title for slider changes color vision deficiency severity." name="IDS_COLOR_ENHANCER_SEVERITY"> <message desc="Title for slider changes color vision deficiency severity." name="IDS_COLOR_ENHANCER_SEVERITY">
Severity Step 2: Adjust the slider until all of the stars are visible in the
selected row
</message>
<message desc="Title for the heading before the section containing setup." name="IDS_COLOR_ENHANCER_SETUP_HEADING">
Setup:
</message>
<message desc="Button that resets the color enhancer extension to its default state." name="IDS_COLOR_ENHANCER_RESET">
Reset
</message>
<message desc="OK button for the color enhancer setup." name="IDS_COLOR_ENHANCER_OK">
OK
</message>
<message desc="Cancel button for the color enhancer setup." name="IDS_COLOR_ENHANCER_CANCEL">
Cancel
</message> </message>
<message desc="Title for section containing advanced settings." name="IDS_COLOR_ENHANCER_ADVANCED"> <message desc="Button for the color enhancer popup that opens the Setup part of the popup." name="IDS_COLOR_ENHANCER_SETUP_BUTTON">
Advanced settings Setup
</message> </message>
</messages> </messages>
......
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