Side by Side Diff: options.html
Issue 29332808:
Issue 2408 - Improved accessibility of checkboxes in options page (Closed)
Patch Set:
Created Dec. 16, 2015, 1:31 p.m.
| Left: | ||
| Right: |
Use n/p to move between diff chunks;
N/P to move between comments.
« no previous file with comments
|
« no previous file
|
options.js » ('j')
|
no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')
| OLD | NEW |
|---|---|
| 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 58 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 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"> |
| 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 Loading... | |
| 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 25 matching lines...) Expand all Loading... | |
| 200 <span></span> | 200 <span></span> |
| 201 <button class="i18n_options_button_cancel cancel-button" dat a-action="cancel-domain-exception"></button> | 201 <button class="i18n_options_button_cancel cancel-button" dat a-action="cancel-domain-exception"></button> |
| 202 </div> | 202 </div> |
| 203 </div> | 203 </div> |
| 204 </div> | 204 </div> |
| 205 </div> | 205 </div> |
| 206 </div> | 206 </div> |
| 207 </div> | 207 </div> |
| 208 | 208 |
| 209 <!-- Advanced tab content --> | 209 <!-- Advanced tab content --> |
| 210 <div id="content-advanced"> | 210 <div id="content-advanced" class="tab-content"> |
| 211 <div> | 211 <div> |
| 212 <h1><span class="i18n_options_tweaks_title"></span><a class="i18n_op tions_readMore tooltip" href="#"></a></h1> | 212 <h1><span class="i18n_options_tweaks_title"></span><a class="i18n_op tions_readMore tooltip" href="#"></a></h1> |
| 213 <ul class="table" style="width: auto;"> | 213 <ul class="table" style="width: auto;"> |
| 214 <li> | 214 <li> |
| 215 <input type="checkbox" id="easylist"/><span id="block-element-ex planation" class="i18n_options_tweaks_blockElement"></span></li> | 215 <button role="checkbox" id="easylist"></button> |
| 216 <span id="block-element-explanation" class="i18n_options_tweaks_ blockElement"></span> | |
| 217 </li> | |
| 216 </ul> | 218 </ul> |
| 217 </div> | 219 </div> |
| 218 <div> | 220 <div> |
| 219 <h1><span class="i18n_options_blockingList_title"></span><a class="i 18n_options_readMore tooltip" href="#" target="_blank"></a></h1> | 221 <h1><span class="i18n_options_blockingList_title"></span><a class="i 18n_options_readMore tooltip" href="#" target="_blank"></a></h1> |
| 220 <ul id="blocking-list-tabs" class="tabs horizontal"> | 222 <ul id="blocking-list-tabs" class="tabs horizontal"> |
| 221 <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> | 223 <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> |
| 222 </ul> | 224 </ul> |
| 223 <div id="blocking-list"> | 225 <div id="blocking-list"> |
| 224 <div id="blocking-list-overview"> | 226 <div id="blocking-list-overview"> |
| 225 <ul class="table cols" style="width: auto;"> | 227 <ul class="table cols" style="width: auto;"> |
| 226 <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> | 228 <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> |
| 227 <li><input type="checkbox" id="easylist"/><span>Easylist</span ><span>Adblocking english sites</span><span>15 March 14 - 10:31</span></li> | 229 <li> |
| 228 <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> | 230 <button role="checkbox" id="easylist"></button> |
| 229 <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> | 231 <span>Easylist</span> |
| 230 <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> | 232 <span>Adblocking english sites</span> |
| 231 <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> | 233 <span>15 March 14 - 10:31</span> |
| 234 </li> | |
| 235 <li> | |
| 236 <button role="checkbox" id="easylist+de"></button> | |
| 237 <span>Easylist Germany + Easylist</span> | |
| 238 <span>Adblocking english + german sites</span> | |
| 239 <span>15 March 14 - 10:31</span> | |
| 240 </li> | |
| 241 <li> | |
| 242 <button role="checkbox" id="annoyance-fb"></button> | |
| 243 <span>Facebook annoyance blocker</span> | |
| 244 <span>Blocks Facebook annoyances</span> | |
| 245 <span>15 March 14 - 10:31</span> | |
| 246 </li> | |
| 247 <li> | |
| 248 <button role="checkbox" id="annoyance-youtube"></button> | |
| 249 <span>Facebook annoyance blocker</span> | |
| 250 <span>Blocks Facebook annoyances</span> | |
| 251 <span>15 March 14 - 10:31</span> | |
| 252 </li> | |
| 253 <li> | |
| 254 <button role="checkbox" id="own-list"></button> | |
| 255 <span>Own blocking list</span> | |
| 256 <span>Your own blocking list</span> | |
| 257 <span><a href="#">edit your blocking list</a></span> | |
| 258 </li> | |
| 232 </ul> | 259 </ul> |
| 233 <div class="controls"> | 260 <div class="controls"> |
| 234 <button> | 261 <button> |
| 235 <span class="icon icon-add"></span><span class="i18n_options _blockingList_add"></span> | 262 <span class="icon icon-add"></span><span class="i18n_options _blockingList_add"></span> |
| 236 </button> | 263 </button> |
| 237 <button> | 264 <button> |
| 238 <span class="icon icon-update"></span><span class="i18n_opti ons_blockingList_update"></span> | 265 <span class="icon icon-update"></span><span class="i18n_opti ons_blockingList_update"></span> |
| 239 </button> | 266 </button> |
| 240 </div> | 267 </div> |
| 241 </div> | 268 </div> |
| (...skipping 28 matching lines...) Expand all Loading... | |
| 270 <span class="i18n_options_customFilter_save"></span> | 297 <span class="i18n_options_customFilter_save"></span> |
| 271 </button> | 298 </button> |
| 272 </div> | 299 </div> |
| 273 </div> | 300 </div> |
| 274 </div> | 301 </div> |
| 275 </div> | 302 </div> |
| 276 </div> | 303 </div> |
| 277 </div> | 304 </div> |
| 278 | 305 |
| 279 <!-- Help tab content --> | 306 <!-- Help tab content --> |
| 280 <div id="content-help"> | 307 <div id="content-help" class="tab-content"> |
| 281 <h1 class="i18n_options_faq_title"></h1> | 308 <h1 class="i18n_options_faq_title"></h1> |
| 282 <p class="i18n_options_faq_description"></p> | 309 <p class="i18n_options_faq_description"></p> |
| 283 <p> | 310 <p> |
| 284 <a class="i18n_options_faq_title" href="#" target="_blank"></a> | 311 <a class="i18n_options_faq_title" href="#" target="_blank"></a> |
| 285 </p> | 312 </p> |
| 286 <h1 class="i18n_options_forum_title"></h1> | 313 <h1 class="i18n_options_forum_title"></h1> |
| 287 <p class="i18n_options_forum_description"></p> | 314 <p class="i18n_options_forum_description"></p> |
| 288 <p> | 315 <p> |
| 289 <a class="i18n_options_forum_link" href="#" target="_blank"></a> | 316 <a class="i18n_options_forum_link" href="#" target="_blank"></a> |
| 290 </p> | 317 </p> |
| (...skipping 65 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 356 <div class="url"></div> | 383 <div class="url"></div> |
| 357 <button class="i18n_options_dialog_predefined_confirm default-focus" data-action="add-predefined-subscription"></button> | 384 <button class="i18n_options_dialog_predefined_confirm default-focus" data-action="add-predefined-subscription"></button> |
| 358 </div> | 385 </div> |
| 359 </div> | 386 </div> |
| 360 </div> | 387 </div> |
| 361 <!-- Placeholder element to determine when to wrap focus around --> | 388 <!-- Placeholder element to determine when to wrap focus around --> |
| 362 <span class="focus-last" tabindex="0"></span> | 389 <span class="focus-last" tabindex="0"></span> |
| 363 </div> | 390 </div> |
| 364 </body> | 391 </body> |
| 365 </html> | 392 </html> |
| OLD | NEW |
« no previous file with comments
|
« no previous file
|
options.js » ('j')
|
no next file with comments »
