 Issue 29323156:
  Issue 2410 - Improved accessibility of dialogs in options page  (Closed)
    
  
    Issue 29323156:
  Issue 2410 - Improved accessibility of dialogs in options page  (Closed) 
  | Left: | ||
| Right: | 
| 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 282 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 293 <p> | 293 <p> | 
| 294 <a href="#" target="_blank">Twitter</a> | 294 <a href="#" target="_blank">Twitter</a> | 
| 295 <a href="#" target="_blank">Facebook</a> | 295 <a href="#" target="_blank">Facebook</a> | 
| 296 <a href="#" target="_blank">Google+</a> | 296 <a href="#" target="_blank">Google+</a> | 
| 297 </p> | 297 </p> | 
| 298 </div> | 298 </div> | 
| 299 </div> | 299 </div> | 
| 300 </div> | 300 </div> | 
| 301 | 301 | 
| 302 <!-- Dialog --> | 302 <!-- Dialog --> | 
| 303 <div id="dialog"> | 303 <div id="dialog" role="dialog" aria-hidden="true"> | 
| 304 <header> | 304 <header> | 
| 305 <span id="dialog-title"> | 305 <span id="dialog-title"> | 
| 306 <span id="dialog-title-custom" class="i18n_options_dialog_custom_title "></span> | 306 <span id="dialog-title-custom" class="i18n_options_dialog_custom_title "></span> | 
| 307 <span id="dialog-title-language" class="i18n_options_dialog_language_t itle"></span> | 307 <span id="dialog-title-language" class="i18n_options_dialog_language_t itle"></span> | 
| 308 <span id="dialog-title-predefined" class="i18n_options_dialog_predefin ed_title"></span> | 308 <span id="dialog-title-predefined" class="i18n_options_dialog_predefin ed_title"></span> | 
| 309 </span> | 309 </span> | 
| 310 <button id="dialog-close" class="i18n_options_close" data-action="close- dialog"></button> | 310 <button id="dialog-close" class="i18n_options_close focus-first" data-ac tion="close-dialog"></button> | 
| 311 </header> | 311 </header> | 
| 312 <div id="dialog-body" class="content"> | 312 <div id="dialog-body" class="content"> | 
| 313 <!-- Add language subscription --> | 313 <!-- Add language subscription --> | 
| 314 <div id="dialog-content-language" class="dialog-content"> | 314 <div id="dialog-content-language" class="dialog-content"> | 
| 315 <div class="dialog-content-block"> | 315 <div class="dialog-content-block"> | 
| 316 <h3 class="i18n_options_dialog_language_added"></h3> | 316 <h3 class="i18n_options_dialog_language_added"></h3> | 
| 317 <ul id="blocking-languages-dialog-table" class="table list"> | 317 <ul id="blocking-languages-dialog-table" class="table list"> | 
| 318 <template> | 318 <template> | 
| 319 <span class="display"></span> | 319 <span class="display"></span> | 
| 320 </template> | 320 </template> | 
| 321 </ul> | 321 </ul> | 
| 322 </div> | 322 </div> | 
| 323 <div id="other-language" class="dialog-content-block"> | 323 <div id="other-language" class="dialog-content-block"> | 
| 324 <h3 class="i18n_options_dialog_language_other"></h3> | |
| 325 <div> | 324 <div> | 
| 326 <input type="search" id="find-language" /> | 325 <label for="find-language" class="i18n_options_dialog_language_oth er"></label> | 
| 326 <input type="search" id="find-language" class="default-action" /> | |
| 
saroyanm
2015/10/01 16:31:40
As far as I can see default-action is used for def
 
Thomas Greiner
2015/10/02 10:27:28
Done.
 | |
| 327 </div> | 327 </div> | 
| 328 <ul id="all-lang-table" class="table list"> | 328 <ul id="all-lang-table" class="table list"> | 
| 329 <template> | 329 <template> | 
| 330 <button class="button-add control"> | 330 <button class="button-add control"> | 
| 331 +<span></span> | 331 +<span></span> | 
| 332 </button> | 332 </button> | 
| 333 <span class="display"></span> | 333 <span class="display"></span> | 
| 334 </template> | 334 </template> | 
| 335 </ul> | 335 </ul> | 
| 336 </div> | 336 </div> | 
| 337 </div> | 337 </div> | 
| 338 <!-- Add custom subscription --> | 338 <!-- Add custom subscription --> | 
| 339 <div id="dialog-content-custom" class="dialog-content"> | 339 <div id="dialog-content-custom" class="dialog-content"> | 
| 340 <div class="dialog-content-block"> | 340 <div class="dialog-content-block"> | 
| 341 <h3 class="i18n_options_dialog_custom_subscription_title"></h3> | |
| 342 <div> | 341 <div> | 
| 343 <input id="blockingList-textbox" type="text" placeholder="www.exam ple.com/blockinglist.txt" /> | 342 <label for="blockingList-textbox" class="i18n_options_dialog_custo m_subscription_title"></label> | 
| 343 <input id="blockingList-textbox" type="text" class="default-action " placeholder="www.example.com/blockinglist.txt" /> | |
| 344 </div> | 344 </div> | 
| 345 <div class="button-wrapper" data-action="import-subscription"> | 345 <button class="i18n_options_dialog_custom_import" data-action="impor t-subscription"></button> | 
| 346 <span class="icon icon-arrow"></span> | |
| 347 <span class="i18n_options_dialog_custom_import"></span> | |
| 348 </div> | |
| 349 </div> | 346 </div> | 
| 350 <div class="dialog-content-block"> | 347 <div class="dialog-content-block"> | 
| 351 <h3 class="i18n_options_dialog_edit_own_list"></h3> | 348 <h3 class="i18n_options_dialog_edit_own_list"></h3> | 
| 352 <div class="button-wrapper" data-action="close-dialog,switch-tab,edi t-custom-filters" data-tab="advanced"> | 349 <button class="i18n_options_dialog_create_own_list" data-action="clo se-dialog,switch-tab,edit-custom-filters" data-tab="advanced"></button> | 
| 353 <span class="icon icon-arrow"></span> | |
| 354 <span class="i18n_options_dialog_create_own_list"></span> | |
| 355 </div> | |
| 356 </div> | 350 </div> | 
| 357 </div> | 351 </div> | 
| 358 <!-- Add predefined subscription --> | 352 <!-- Add predefined subscription --> | 
| 359 <div id="dialog-content-predefined" class="dialog-content"> | 353 <div id="dialog-content-predefined" class="dialog-content"> | 
| 360 <div class="dialog-content-block"> | 354 <div class="dialog-content-block"> | 
| 361 <h3></h3> | 355 <h3></h3> | 
| 362 <div class="url"></div> | 356 <div class="url"></div> | 
| 363 <div class="button-wrapper" data-action="add-predefined-subscription "> | 357 <button class="i18n_options_dialog_predefined_confirm default-action " data-action="add-predefined-subscription"></button> | 
| 364 <span class="icon icon-arrow"></span> | |
| 365 <span class="i18n_options_dialog_predefined_confirm"></span> | |
| 366 </div> | |
| 367 </div> | 358 </div> | 
| 368 </div> | 359 </div> | 
| 369 </div> | 360 </div> | 
| 361 <!-- Placeholder element to determine when to wrap focus around --> | |
| 362 <span class="focus-last" tabindex="0"></span> | |
| 370 </div> | 363 </div> | 
| 371 </body> | 364 </body> | 
| 372 </html> | 365 </html> | 
| OLD | NEW |