Delta Between Two Patch Sets: new-options.html
Issue 29502647:
Issue 5482 - Sidebar and about ABP dialog (Closed)
Left Patch Set: Fixed tabulation
Created Aug. 23, 2017, 1:31 p.m.
Right Patch Set: Fixed nit
Created Aug. 28, 2017, 11:38 a.m.
| Left: | ||
| Right: |
Use n/p to move between diff chunks;
N/P to move between comments.
« no previous file with change/comment
|
« locale/en-US/new-options.json ('k')
|
new-options.js » ('j')
|
no next file with change/comment »
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')
| LEFT | RIGHT |
|---|---|
| 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-present eyeo GmbH | 4 - Copyright (C) 2006-present 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 15 matching lines...) Expand all Loading... | |
| 26 <script src="ext/content.js"></script> | 26 <script src="ext/content.js"></script> |
| 27 <script src="common.js"></script> | 27 <script src="common.js"></script> |
| 28 <script src="i18n.js"></script> | 28 <script src="i18n.js"></script> |
| 29 <script src="new-options.js"></script> | 29 <script src="new-options.js"></script> |
| 30 </head> | 30 </head> |
| 31 <body data-tab="general"> | 31 <body data-tab="general"> |
| 32 <!-- Navigation sidebar --> | 32 <!-- Navigation sidebar --> |
| 33 <div id="sidebar"> | 33 <div id="sidebar"> |
| 34 <div class="fixed"> | 34 <div class="fixed"> |
| 35 <header> | 35 <header> |
| 36 <img id="sidebar-logo" src="skin/abp-logo.svg"> | 36 <img id="sidebar-logo" alt="Adblock Plus logo" src="skin/abp-logo.svg" > |
|
juliandoucette
2017/08/23 18:11:10
NIT/Suggest: Missing alt text e.g. "Adblock Plus l
saroyanm
2017/08/23 20:57:52
There is no easy way to translate that.
I'll hardc
saroyanm
2017/08/24 17:39:43
Done.
| |
| 37 <h1> | 37 <h1> |
| 38 Adblock <strong>Plus</strong> | 38 Adblock <strong>Plus</strong> |
| 39 </h1> | 39 </h1> |
| 40 <p class="i18n_options_page_title"></p> | 40 <p class="i18n_options_page_title"></p> |
| 41 </header> | 41 </header> |
| 42 | 42 |
| 43 <nav> | 43 <nav> |
|
juliandoucette
2017/08/23 18:11:10
For reference below:
ARIA tabs spec: https://www.
| |
| 44 <ul class="tabs" | 44 <ul class="tabs" |
| 45 role="tablist" data-action="switch-tab" | 45 role="tablist" data-action="switch-tab" |
|
juliandoucette
2017/08/23 18:11:09
NIT: Missing aria-label
saroyanm
2017/08/23 20:57:53
I think providing role="tablist" information shoul
juliandoucette
2017/08/23 22:00:46
Nothing comes to mind. I only mentioned it because
| |
| 46 data-keys="ArrowLeft ArrowUp ArrowRight ArrowDown"> | 46 data-keys="ArrowLeft ArrowUp ArrowRight ArrowDown"> |
| 47 <li> | 47 <li role="presentation"> |
|
juliandoucette
2017/08/23 18:11:09
NIT: These <li> should have the "presentation" rol
saroyanm
2017/08/23 20:57:53
I'll add that, didn't know about this use case.
saroyanm
2017/08/24 17:39:43
Done.
| |
| 48 <a href="#general" class="i18n_options_tab_general" role="tab" ari a-selected="true" aria-controls="content-general"></a> | 48 <a href="#general" class="i18n_options_tab_general" role="tab" ari a-selected="true" tabindex="-1" aria-controls="content-general"></a> |
|
juliandoucette
2017/08/23 18:11:10
NIT: Apparently I was wrong about the tab key func
juliandoucette
2017/08/23 18:11:10
Note:
Regarding the use of anchors vs buttons fo
saroyanm
2017/08/23 20:57:52
Agree.
saroyanm
2017/08/23 20:57:53
I can't follow your thoughts here, but:
In this ca
juliandoucette
2017/08/23 22:00:46
I agree.
saroyanm
2017/08/24 17:39:44
Done.
| |
| 49 </li> | 49 </li> |
| 50 <li> | 50 <li role="presentation"> |
| 51 <a href="#whitelist" class="i18n_options_tab_whitelist" role="tab" aria-controls="content-whitelist"></a> | 51 <a href="#whitelist" class="i18n_options_tab_whitelist" role="tab" tabindex="-1" aria-controls="content-whitelist"></a> |
| 52 </li> | 52 </li> |
| 53 <li> | 53 <li role="presentation"> |
| 54 <a href="#advanced" class="i18n_options_tab_advanced" role="tab" a ria-controls="content-advanced"></a> | 54 <a href="#advanced" class="i18n_options_tab_advanced" role="tab" t abindex="-1" aria-controls="content-advanced"></a> |
| 55 </li> | 55 </li> |
| 56 <li> | 56 <li role="presentation"> |
| 57 <a href="#help" class="i18n_options_tab_help" role="tab" aria-cont rols="content-help"></a> | 57 <a href="#help" class="i18n_options_tab_help" role="tab" tabindex= "-1" aria-controls="content-help"></a> |
| 58 </li> | 58 </li> |
| 59 </ul> | 59 </ul> |
| 60 </nav> | 60 </nav> |
| 61 <footer> | 61 <footer> |
|
juliandoucette
2017/08/23 18:11:11
Note: The same logic as explained above regarding
saroyanm
2017/08/23 20:57:53
I don't think it applies, below in one case we act
juliandoucette
2017/08/23 22:00:46
I agree.
| |
| 62 <p> | 62 <p> |
| 63 <a id="contribute" | 63 <a id="contribute" |
|
juliandoucette
2017/08/23 22:00:46
Why does this link to https://adblockplus.org/redi
saroyanm
2017/08/24 17:39:43
All links are redirect links, so whenever a links
| |
| 64 class="i18n_options_footer_contribute button secondary" | 64 class="i18n_options_footer_contribute button secondary" |
| 65 target="_blank"></a> | 65 target="_blank"></a> |
| 66 </p> | 66 </p> |
| 67 <p> | 67 <p> |
| 68 <button class="i18n_options_footer_about link" | 68 <button class="i18n_options_footer_about link" |
| 69 data-action="open-dialog" data-dialog="about"></button> | 69 data-action="open-dialog" data-dialog="about"></button> |
| 70 </p> | 70 </p> |
| 71 </footer> | 71 </footer> |
| 72 </div> | 72 </div> |
| 73 </div> | 73 </div> |
| (...skipping 205 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 279 </button> | 279 </button> |
| 280 <button class="i18n_options_customFilter_cancel" data-action="canc el-custom-filters"> | 280 <button class="i18n_options_customFilter_cancel" data-action="canc el-custom-filters"> |
| 281 </button> | 281 </button> |
| 282 </div> | 282 </div> |
| 283 </div> | 283 </div> |
| 284 </section> | 284 </section> |
| 285 </div> | 285 </div> |
| 286 | 286 |
| 287 <!-- Help tab content --> | 287 <!-- Help tab content --> |
| 288 <div id="content-help" role="tabpanel" aria-labelledby="tab-help"> | 288 <div id="content-help" role="tabpanel" aria-labelledby="tab-help"> |
| 289 <h1 class="i18n_options_faq_title"></h1> | 289 <h1 class="i18n_options_tab_help"></h1> |
| 290 <p class="i18n_options_faq_description"></p> | 290 <p class="i18n_options_help_description"></p> |
| 291 <p> | 291 <section> |
| 292 <a id="link-faq" class="i18n_options_faq_title" target="_blank"></a> | 292 <h2 class="i18n_options_support_title"></h2> |
| 293 </p> | 293 <ul> |
| 294 <h1 class="i18n_options_forum_title"></h1> | 294 <li id="report-issue" class="i18n_options_report_issue"></li> |
| 295 <p class="i18n_options_forum_description"></p> | 295 <li id="report-ad" class="i18n_options_report_ad"></li> |
| 296 <p> | 296 <li id="report-bug" class="i18n_options_report_bug"></li> |
| 297 <a id="link-forum" class="i18n_options_forum_link" target="_blank"></ a> | 297 <li id="report-forum" class="i18n_options_report_forum"></li> |
| 298 </p> | 298 </ul> |
| 299 <h1 class="i18n_options_media_title"></h1> | 299 </section> |
| 300 <p class="i18n_options_media_description"></p> | 300 <section> |
| 301 <p> | 301 <h2 class="i18n_options_social_title"></h2> |
| 302 <span id="share-general"> | 302 <p class="i18n_options_social_description"></p> |
| 303 <a id="link-twitter" target="_blank">Twitter</a> | 303 <div id="social"> |
| 304 <a id="link-facebook" target="_blank">Facebook</a> | 304 <ul id="social-general"> |
| 305 <a id="link-gplus" target="_blank">Google+</a> | 305 <li><a id="twitter">Twitter</a></li> |
| 306 </span> | 306 <li><a id="facebook">Facebook</a></li> |
| 307 <span id="share-chinese"> | 307 <li><a id="google-plus">Google Plus</a></li> |
| 308 <a id="link-renren" target="_blank">renren</a> | 308 </ul> |
| 309 <a id="link-weibo" target="_blank">weibo</a> | 309 <ul id="social-chinese"> |
| 310 </span> | 310 <li><a id="weibo">Weibo</a></li> |
| 311 </p> | 311 </ul> |
| 312 <p> | |
| 313 <strong> | |
| 314 <span class="i18n_options_email"></span> | |
| 315 <a href="mailto:support@adblockplus.org">support@adblockplus.org </a> | |
| 316 </strong> | |
| 317 </p> | |
| 318 </div> | |
| 319 </section> | |
| 312 </div> | 320 </div> |
| 313 </main> | 321 </main> |
| 314 | 322 |
| 315 <!-- Dialog --> | 323 <!-- Dialog --> |
| 316 <div id="dialog" role="dialog" aria-hidden="true"> | 324 <div id="dialog" role="dialog" aria-hidden="true"> |
| 317 <header> | 325 <header> |
| 318 <span id="dialog-title"> | 326 <span id="dialog-title"> |
| 319 <span id="dialog-title-about" class="i18n_options_dialog_about_title"> </span> | 327 <span id="dialog-title-about" class="i18n_options_dialog_about_title"> </span> |
| 320 <span id="dialog-title-custom" class="i18n_options_dialog_custom_title "></span> | 328 <span id="dialog-title-custom" class="i18n_options_dialog_custom_title "></span> |
| 321 <span id="dialog-title-language-add" class="i18n_options_dialog_langua ge_title"></span> | 329 <span id="dialog-title-language-add" class="i18n_options_dialog_langua ge_title"></span> |
| (...skipping 43 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
| 365 <div class="dialog-content-block"> | 373 <div class="dialog-content-block"> |
| 366 <h3></h3> | 374 <h3></h3> |
| 367 <div class="url"></div> | 375 <div class="url"></div> |
| 368 <button class="i18n_options_dialog_predefined_confirm default-focus" data-action="add-predefined-subscription"></button> | 376 <button class="i18n_options_dialog_predefined_confirm default-focus" data-action="add-predefined-subscription"></button> |
| 369 </div> | 377 </div> |
| 370 </div> | 378 </div> |
| 371 </div> | 379 </div> |
| 372 <!-- Placeholder element to determine when to wrap focus around --> | 380 <!-- Placeholder element to determine when to wrap focus around --> |
| 373 <span class="focus-last" tabindex="0"></span> | 381 <span class="focus-last" tabindex="0"></span> |
| 374 </div> | 382 </div> |
| 383 <!-- Notification --> | |
| 384 <div id="notification" aria-hidden="true" aria-live="polite"> | |
| 385 <strong id="notification-text"></strong> | |
| 386 <button id="hide-notification" data-action="hide-notification"> | |
| 387 <span class="i18n_options_notification_hide sr-only"></span> | |
| 388 </button> | |
| 389 </div> | |
| 375 </body> | 390 </body> |
| 376 </html> | 391 </html> |
| LEFT | RIGHT |
« locale/en-US/new-options.json ('k')
|
new-options.js » ('j')
|
Toggle Intra-line Diffs ('i')
|
Expand Comments ('e')
|
Collapse Comments ('c')
|
Toggle Comments ('s')
