Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code
Issues
All Issues

Side by Side Diff: options.html

Issue 29332808: Issue 2408 - Improved accessibility of checkboxes in options page (Closed)
Patch Set: Rebased to 59920e6112a6 Created Dec. 17, 2015, 6:36 p.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
« no previous file with comments | « no previous file | options.js » ('j') | options.js » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <!-- 2 <!--
3 - This file is part of Adblock Plus <https://adblockplus.org/>, 3 - This file is part of Adblock Plus <https://adblockplus.org/>,
4 - Copyright (C) 2006-2015 Eyeo GmbH 4 - Copyright (C) 2006-2015 Eyeo GmbH
5 - 5 -
6 - Adblock Plus is free software: you can redistribute it and/or modify 6 - Adblock Plus is free software: you can redistribute it and/or modify
7 - it under the terms of the GNU General Public License version 3 as 7 - it under the terms of the GNU General Public License version 3 as
8 - published by the Free Software Foundation. 8 - published by the Free Software Foundation.
9 - 9 -
10 - Adblock Plus is distributed in the hope that it will be useful, 10 - Adblock Plus is distributed in the hope that it will be useful,
(...skipping 53 matching lines...) Expand 10 before | Expand all | Expand 10 after
64 <span class="icon"></span> 64 <span class="icon"></span>
65 </li> 65 </li>
66 <li id="tab-contribute"> 66 <li id="tab-contribute">
67 <a class="i18n_options_tab_contribute"></a> 67 <a class="i18n_options_tab_contribute"></a>
68 <span class="icon"></span> 68 <span class="icon"></span>
69 </li> 69 </li>
70 </ul> 70 </ul>
71 </footer> 71 </footer>
72 </div> 72 </div>
73 </div> 73 </div>
74 <div id="tab-content"> 74 <div id="tab-content">
saroyanm 2016/01/19 11:19:49 Detail: I think this can become tabs-content for r
Thomas Greiner 2016/01/19 15:15:04 Done. For consistency I chose to go with "content"
75 <div id="content-wrapper"> 75 <div id="content-wrapper">
76 <div id="dialog-background"></div> 76 <div id="dialog-background"></div>
77 77
78 <!-- General tab content --> 78 <!-- General tab content -->
79 <div id="content-general"> 79 <div id="content-general" class="tab-content">
80 <div> 80 <div>
81 <h1 class="i18n_options_blocking_title"></h1> 81 <h1 class="i18n_options_blocking_title"></h1>
82 <div class="hbox"> 82 <div class="hbox">
83 <div id="blocking-languages"> 83 <div id="blocking-languages">
84 <div class="option-name"> 84 <div class="option-name">
85 <span class="i18n_options_language_title"></span> 85 <span class="i18n_options_language_title"></span>
86 <div class="tooltip"> 86 <div class="tooltip">
87 <span class="i18n_options_readMore"></span> 87 <span class="i18n_options_readMore"></span>
88 <div role="tooltip"> 88 <div role="tooltip">
89 <img src="skin/tooltips/block.png" alt="" /> 89 <img src="skin/tooltips/block.png" alt="" />
90 <p class="i18n_options_language_title_tooltip"></p> 90 <p class="i18n_options_language_title_tooltip"></p>
91 <div class="notes"> 91 <div class="notes">
92 <p class="i18n_options_language_title_tooltip_notes_1">< /p> 92 <p class="i18n_options_language_title_tooltip_notes_1">< /p>
93 <p class="i18n_options_language_title_tooltip_notes_2">< /p> 93 <p class="i18n_options_language_title_tooltip_notes_2">< /p>
94 </div> 94 </div>
95 </div> 95 </div>
96 </div> 96 </div>
97 </div> 97 </div>
98 <ul id="blocking-languages-table" class="table list"> 98 <ul id="blocking-languages-table" class="table list">
99 <template> 99 <template>
100 <input type="checkbox" class="control" /> 100 <button role="checkbox" class="control"></button>
101 <span class="display"></span> 101 <span class="display"></span>
102 </template> 102 </template>
103 </ul> 103 </ul>
104 <div class="controls"> 104 <div class="controls">
105 <button data-action="open-dialog" data-dialog="language"> 105 <button data-action="open-dialog" data-dialog="language">
106 <span class="icon icon-add"></span> 106 <span class="icon icon-add"></span>
107 <span class="i18n_options_language_add"></span> 107 <span class="i18n_options_language_add"></span>
108 </button> 108 </button>
109 </div> 109 </div>
110 </div> 110 </div>
111 <div id="further-blocking"> 111 <div id="further-blocking">
112 <div class="option-name"> 112 <div class="option-name">
113 <strong class="i18n_options_furtherBlocking_title"></strong> 113 <strong class="i18n_options_furtherBlocking_title"></strong>
114 <div class="tooltip"> 114 <div class="tooltip">
115 <span class="i18n_options_readMore"></span> 115 <span class="i18n_options_readMore"></span>
116 <div role="tooltip" class="flip-vertical"> 116 <div role="tooltip" class="flip-vertical">
117 <img src="skin/tooltips/more.png" alt="" /> 117 <img src="skin/tooltips/more.png" alt="" />
118 <p class="i18n_options_furtherBlocking_title_tooltip"></p> 118 <p class="i18n_options_furtherBlocking_title_tooltip"></p>
119 </div> 119 </div>
120 </div> 120 </div>
121 </div> 121 </div>
122 <div id="custom-wrapper"> 122 <div id="custom-wrapper">
123 <ul id="recommend-list-table" class="table list"> 123 <ul id="recommend-list-table" class="table list">
124 <template> 124 <template>
125 <input type="checkbox" class="control" /> 125 <button role="checkbox" class="control"></button>
126 <span class="display"></span> 126 <span class="display"></span>
127 <span class="popular"></span> 127 <span class="popular"></span>
128 </template> 128 </template>
129 </ul> 129 </ul>
130 <ul id="custom-list-table" class="table list"> 130 <ul id="custom-list-table" class="table list">
131 <template> 131 <template>
132 <input type="checkbox" class="control" /> 132 <button role="checkbox" class="control"></button>
133 <span class="display"></span> 133 <span class="display"></span>
134 </template> 134 </template>
135 </ul> 135 </ul>
136 </div> 136 </div>
137 <div class="controls"> 137 <div class="controls">
138 <button data-action="open-dialog" data-dialog="custom"> 138 <button data-action="open-dialog" data-dialog="custom">
139 <span class="icon icon-add"></span> 139 <span class="icon icon-add"></span>
140 <span class="i18n_options_furtherBlocking_add"><span> 140 <span class="i18n_options_furtherBlocking_add"><span>
141 </button> 141 </button>
142 </div> 142 </div>
(...skipping 11 matching lines...) Expand all
154 <div role="tooltip"> 154 <div role="tooltip">
155 <img src="skin/tooltips/acceptable-ads.png" alt="" /> 155 <img src="skin/tooltips/acceptable-ads.png" alt="" />
156 <p class="i18n_options_acceptableAds_title_tooltip_1"></p> 156 <p class="i18n_options_acceptableAds_title_tooltip_1"></p>
157 <p class="i18n_options_acceptableAds_title_tooltip_2"></p> 157 <p class="i18n_options_acceptableAds_title_tooltip_2"></p>
158 <p class="i18n_options_acceptableAds_title_tooltip_3"></p> 158 <p class="i18n_options_acceptableAds_title_tooltip_3"></p>
159 </div> 159 </div>
160 </div> 160 </div>
161 </div> 161 </div>
162 <ul id="acceptableads-table" class="table list"> 162 <ul id="acceptableads-table" class="table list">
163 <template> 163 <template>
164 <input type="checkbox" class="control" /> 164 <button role="checkbox" class="control"></button>
165 <span class="display"></span> 165 <span class="display"></span>
166 </template> 166 </template>
167 </ul> 167 </ul>
168 </div> 168 </div>
169 <div id="whitelisting"> 169 <div id="whitelisting">
170 <div class="option-name"> 170 <div class="option-name">
171 <strong class="i18n_options_whitelisted_title"></strong> 171 <strong class="i18n_options_whitelisted_title"></strong>
172 <div class="tooltip"> 172 <div class="tooltip">
173 <span class="i18n_options_readMore"></span> 173 <span class="i18n_options_readMore"></span>
174 <div role="tooltip" class="flip-vertical"> 174 <div role="tooltip" class="flip-vertical">
(...skipping 29 matching lines...) Expand all
204 <span></span> 204 <span></span>
205 <button class="i18n_options_button_cancel cancel-button" dat a-action="cancel-domain-exception"></button> 205 <button class="i18n_options_button_cancel cancel-button" dat a-action="cancel-domain-exception"></button>
206 </div> 206 </div>
207 </div> 207 </div>
208 </div> 208 </div>
209 </div> 209 </div>
210 </div> 210 </div>
211 </div> 211 </div>
212 212
213 <!-- Advanced tab content --> 213 <!-- Advanced tab content -->
214 <div id="content-advanced"> 214 <div id="content-advanced" class="tab-content">
215 <div> 215 <div>
216 <h1><span class="i18n_options_tweaks_title"></span><a class="i18n_op tions_readMore tooltip" href="#"></a></h1> 216 <h1><span class="i18n_options_tweaks_title"></span><a class="i18n_op tions_readMore tooltip" href="#"></a></h1>
217 <ul class="table" style="width: auto;"> 217 <ul class="table" style="width: auto;">
218 <li> 218 <li>
219 <input type="checkbox" id="easylist"/><span id="block-element-ex planation" class="i18n_options_tweaks_blockElement"></span></li> 219 <button role="checkbox" id="easylist"></button>
220 <span id="block-element-explanation" class="i18n_options_tweaks_ blockElement"></span>
221 </li>
220 </ul> 222 </ul>
221 </div> 223 </div>
222 <div> 224 <div>
223 <h1><span class="i18n_options_blockingList_title"></span><a class="i 18n_options_readMore tooltip" href="#" target="_blank"></a></h1> 225 <h1><span class="i18n_options_blockingList_title"></span><a class="i 18n_options_readMore tooltip" href="#" target="_blank"></a></h1>
224 <ul id="blocking-list-tabs" class="tabs horizontal"> 226 <ul id="blocking-list-tabs" class="tabs horizontal">
225 <li class="i18n_options_tab_overview active" data-show="blocking-l ist-overview"></li><li class="i18n_options_tab_ownList" data-show="custom-filter s"></li> 227 <li class="i18n_options_tab_overview active" data-show="blocking-l ist-overview"></li><li class="i18n_options_tab_ownList" data-show="custom-filter s"></li>
226 </ul> 228 </ul>
227 <div id="blocking-list"> 229 <div id="blocking-list">
228 <div id="blocking-list-overview"> 230 <div id="blocking-list-overview">
229 <ul class="table cols" style="width: auto;"> 231 <ul class="table cols" style="width: auto;">
230 <li class="col-name"><span class="i18n_options_tableCol_name"> </span><span class="i18n_options_tableCol_description"></span><span class="i18n_ options_tableCol_date"></span></li> 232 <li class="col-name"><span class="i18n_options_tableCol_name"> </span><span class="i18n_options_tableCol_description"></span><span class="i18n_ options_tableCol_date"></span></li>
231 <li><input type="checkbox" id="easylist"/><span>Easylist</span ><span>Adblocking english sites</span><span>15 March 14 - 10:31</span></li> 233 <li>
saroyanm 2016/01/19 11:19:49 This will be changed with blocking list implementa
Thomas Greiner 2016/01/19 15:15:04 Done.
232 <li><input type="checkbox" id="easylist+de"/><span>Easylist Ge rmany + Easylist</span><span>Adblocking english + german sites</span><span>15 Ma rch 14 - 10:31</span></li> 234 <button role="checkbox" id="easylist"></button>
233 <li><input type="checkbox" id="annoyance-fb"/><span>Facebook a nnoyance blocker</span><span>Blocks Facebook annoyances</span><span>15 March 14 - 10:31</span></li> 235 <span>Easylist</span>
234 <li><input type="checkbox" id="annoyance-youtube"/><span>Faceb ook annoyance blocker</span><span>Blocks Facebook annoyances</span><span>15 Marc h 14 - 10:31</span></li> 236 <span>Adblocking english sites</span>
235 <li><input type="checkbox" id="own-list"/><span>Own blocking l ist</span><span>Your own blocking list</span><span><a href="#">edit your blockin g list</a></span></li> 237 <span>15 March 14 - 10:31</span>
238 </li>
239 <li>
240 <button role="checkbox" id="easylist+de"></button>
241 <span>Easylist Germany + Easylist</span>
242 <span>Adblocking english + german sites</span>
243 <span>15 March 14 - 10:31</span>
244 </li>
245 <li>
246 <button role="checkbox" id="annoyance-fb"></button>
247 <span>Facebook annoyance blocker</span>
248 <span>Blocks Facebook annoyances</span>
249 <span>15 March 14 - 10:31</span>
250 </li>
251 <li>
252 <button role="checkbox" id="annoyance-youtube"></button>
253 <span>Facebook annoyance blocker</span>
254 <span>Blocks Facebook annoyances</span>
255 <span>15 March 14 - 10:31</span>
256 </li>
257 <li>
258 <button role="checkbox" id="own-list"></button>
259 <span>Own blocking list</span>
260 <span>Your own blocking list</span>
261 <span><a href="#">edit your blocking list</a></span>
262 </li>
236 </ul> 263 </ul>
237 <div class="controls"> 264 <div class="controls">
238 <button> 265 <button>
239 <span class="icon icon-add"></span><span class="i18n_options _blockingList_add"></span> 266 <span class="icon icon-add"></span><span class="i18n_options _blockingList_add"></span>
240 </button> 267 </button>
241 <button> 268 <button>
242 <span class="icon icon-update"></span><span class="i18n_opti ons_blockingList_update"></span> 269 <span class="icon icon-update"></span><span class="i18n_opti ons_blockingList_update"></span>
243 </button> 270 </button>
244 </div> 271 </div>
245 </div> 272 </div>
(...skipping 28 matching lines...) Expand all
274 <span class="i18n_options_customFilter_save"></span> 301 <span class="i18n_options_customFilter_save"></span>
275 </button> 302 </button>
276 </div> 303 </div>
277 </div> 304 </div>
278 </div> 305 </div>
279 </div> 306 </div>
280 </div> 307 </div>
281 </div> 308 </div>
282 309
283 <!-- Help tab content --> 310 <!-- Help tab content -->
284 <div id="content-help"> 311 <div id="content-help" class="tab-content">
285 <h1 class="i18n_options_faq_title"></h1> 312 <h1 class="i18n_options_faq_title"></h1>
286 <p class="i18n_options_faq_description"></p> 313 <p class="i18n_options_faq_description"></p>
287 <p> 314 <p>
288 <a class="i18n_options_faq_title" href="#" target="_blank"></a> 315 <a class="i18n_options_faq_title" href="#" target="_blank"></a>
289 </p> 316 </p>
290 <h1 class="i18n_options_forum_title"></h1> 317 <h1 class="i18n_options_forum_title"></h1>
291 <p class="i18n_options_forum_description"></p> 318 <p class="i18n_options_forum_description"></p>
292 <p> 319 <p>
293 <a class="i18n_options_forum_link" href="#" target="_blank"></a> 320 <a class="i18n_options_forum_link" href="#" target="_blank"></a>
294 </p> 321 </p>
(...skipping 65 matching lines...) Expand 10 before | Expand all | Expand 10 after
360 <div class="url"></div> 387 <div class="url"></div>
361 <button class="i18n_options_dialog_predefined_confirm default-focus" data-action="add-predefined-subscription"></button> 388 <button class="i18n_options_dialog_predefined_confirm default-focus" data-action="add-predefined-subscription"></button>
362 </div> 389 </div>
363 </div> 390 </div>
364 </div> 391 </div>
365 <!-- Placeholder element to determine when to wrap focus around --> 392 <!-- Placeholder element to determine when to wrap focus around -->
366 <span class="focus-last" tabindex="0"></span> 393 <span class="focus-last" tabindex="0"></span>
367 </div> 394 </div>
368 </body> 395 </body>
369 </html> 396 </html>
OLDNEW
« no previous file with comments | « no previous file | options.js » ('j') | options.js » ('J')

Powered by Google App Engine
This is Rietveld