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

Side by Side Diff: new-options.html

Issue 29348642: Issue 2409 - Improved accessibility of tabs in options page (Closed)
Patch Set: Created July 26, 2016, 12:48 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 | new-options.js » ('j') | no next file with comments »
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-2016 Eyeo GmbH 4 - Copyright (C) 2006-2016 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 19 matching lines...) Expand all
30 <script src="new-options.js"></script> 30 <script src="new-options.js"></script>
31 </head> 31 </head>
32 <body data-tab="general"> 32 <body data-tab="general">
33 <!-- Navigation sidebar --> 33 <!-- Navigation sidebar -->
34 <div id="nav-sidebar"> 34 <div id="nav-sidebar">
35 <div id="fixed-sidebar" class="fixed"> 35 <div id="fixed-sidebar" class="fixed">
36 <header id="page-title"> 36 <header id="page-title">
37 <p class="i18n_options_page_header_1"></p> 37 <p class="i18n_options_page_header_1"></p>
38 <h1 class="i18n_options_page_header_2"></h1> 38 <h1 class="i18n_options_page_header_2"></h1>
39 </header> 39 </header>
40
40 <nav> 41 <nav>
41 <ul class="tabs vertical"> 42 <ul id="nav-tablist" class="tabs vertical"
42 <li id="tab-general" data-action="switch-tab" data-tab="general" cla ss="active"> 43 role="tablist" data-action="switch-tab"
43 <a class="i18n_options_tab_general"></a> 44 data-keys="ArrowLeft ArrowUp ArrowRight ArrowDown">
44 <span class="icon"></span> 45 <li id="tab-general" role="tab" data-tab="general"
46 aria-selected="true" aria-controls="content-general"
47 tabindex="0">
48 <span class="i18n_options_tab_general"></span>
45 </li> 49 </li>
46 <li id="tab-advanced" data-action="switch-tab" data-tab="advanced-al lFilterLists"> 50 <li id="tab-advanced" role="tab" data-tab="advanced"
47 <a class="i18n_options_tab_advanced"></a> 51 data-subtab="advanced-allFilterLists"
48 <span class="icon"></span> 52 aria-controls="content-advanced" tabindex="-1">
53 <span class="i18n_options_tab_advanced"></span>
49 </li> 54 </li>
50 <li id="tab-help" data-action="switch-tab" data-tab="help"> 55 <li id="tab-help" role="tab" data-tab="help"
51 <a class="i18n_options_tab_help"></a> 56 aria-controls="content-help" tabindex="-1">
52 <span class="icon"></span> 57 <span class="i18n_options_tab_help"></span>
53 </li> 58 </li>
54 </ul> 59 </ul>
55 </nav> 60 </nav>
61
56 <a id="link-version"> 62 <a id="link-version">
57 <span class="i18n_options_version"></span> 63 <span class="i18n_options_version"></span>
58 <span id="abp-version"></span> 64 <span id="abp-version"></span>
59 </a> 65 </a>
66
60 <footer> 67 <footer>
61 <ul class="tabs vertical bottom"> 68 <ul class="tabs vertical bottom" data-action="open-doclink"
62 <li id="tab-share"> 69 data-keys="Enter">
63 <a class="i18n_options_tab_share"></a> 70 <li id="tab-share" data-doclink="share-general" tabindex="0">
64 <span class="icon"></span> 71 <span class="i18n_options_tab_share"></span>
65 </li> 72 </li>
66 <li id="tab-contribute"> 73 <li id="tab-contribute" data-doclink="contribute" tabindex="0">
67 <a class="i18n_options_tab_contribute"></a> 74 <span class="i18n_options_tab_contribute"></span>
68 <span class="icon"></span>
69 </li> 75 </li>
70 </ul> 76 </ul>
71 </footer> 77 </footer>
72 </div> 78 </div>
73 </div> 79 </div>
74 <div id="content"> 80 <div id="content">
75 <div id="content-wrapper"> 81 <div id="content-wrapper">
76 <div id="dialog-background"></div> 82 <div id="dialog-background"></div>
77 83
78 <!-- General tab content --> 84 <!-- General tab content -->
79 <div id="content-general" class="tab-content"> 85 <div id="content-general" role="tabpanel" aria-labelledby="tab-general">
80 <div> 86 <div>
81 <h1 class="i18n_options_blocking_title"></h1> 87 <h1 class="i18n_options_blocking_title"></h1>
82 <div class="hbox"> 88 <div class="hbox">
83 <div id="blocking-languages"> 89 <div id="blocking-languages">
84 <div class="option-name"> 90 <div class="option-name">
85 <span class="i18n_options_language_title"></span> 91 <span class="i18n_options_language_title"></span>
86 <span class="i18n_options_readMore" 92 <span class="i18n_options_readMore"
87 data-tooltip="options_language_title_tooltip" 93 data-tooltip="options_language_title_tooltip"
88 data-tooltip-image="skin/tooltips/block.png"></span> 94 data-tooltip-image="skin/tooltips/block.png"></span>
89 </div> 95 </div>
(...skipping 95 matching lines...) Expand 10 before | Expand all | Expand 10 after
185 <span></span> 191 <span></span>
186 <button class="i18n_options_button_cancel cancel-button" dat a-action="cancel-domain-exception"></button> 192 <button class="i18n_options_button_cancel cancel-button" dat a-action="cancel-domain-exception"></button>
187 </div> 193 </div>
188 </div> 194 </div>
189 </div> 195 </div>
190 </div> 196 </div>
191 </div> 197 </div>
192 </div> 198 </div>
193 199
194 <!-- Advanced tab content --> 200 <!-- Advanced tab content -->
195 <div id="content-advanced" class="tab-content"> 201 <div id="content-advanced" role="tabpanel"
202 aria-labelledby="tab-advanced">
196 <div> 203 <div>
197 <h1 class="i18n_options_tweaks_title"></h1> 204 <h1 class="i18n_options_tweaks_title"></h1>
198 <ul id="tweaks" class="table"> 205 <ul id="tweaks" class="table">
199 <li data-pref="shouldShowBlockElementMenu"> 206 <li data-pref="shouldShowBlockElementMenu">
200 <label> 207 <label>
201 <button role="checkbox" data-action="toggle-pref"></button> 208 <button role="checkbox" data-action="toggle-pref"></button>
202 <span class="i18n_options_tweaks_blockElement"></span> 209 <span class="i18n_options_tweaks_blockElement"></span>
203 </label> 210 </label>
204 </li> 211 </li>
205 <li data-pref="show_devtools_panel"> 212 <li data-pref="show_devtools_panel">
(...skipping 17 matching lines...) Expand all
223 </li> 230 </li>
224 </ul> 231 </ul>
225 </div> 232 </div>
226 233
227 <div> 234 <div>
228 <h1> 235 <h1>
229 <span class="i18n_options_filterList_title"></span> 236 <span class="i18n_options_filterList_title"></span>
230 <span class="i18n_options_readMore" 237 <span class="i18n_options_readMore"
231 data-tooltip="options_filterList_title_tooltip"></span> 238 data-tooltip="options_filterList_title_tooltip"></span>
232 </h1> 239 </h1>
233 <ul class="tabs horizontal"> 240 <ul class="tabs horizontal" role="tablist" data-action="switch-tab"
234 <li class="i18n_options_tab_overview active" data-action="switch-t ab" data-tab="advanced-allFilterLists"></li> 241 data-keys="ArrowLeft ArrowUp ArrowRight ArrowDown">
235 <li class="i18n_options_tab_ownList" data-action="switch-tab" data -tab="advanced-customFilters"></li> 242 <li id="tab-allFilterLists"
243 class="i18n_options_tab_overview active"
244 role="tab" data-tab="advanced-allFilterLists"
245 aria-selected="true" aria-controls="all-filter-lists"
246 tabindex="0"></li>
247 <li id="tab-customFilters" class="i18n_options_tab_ownList"
248 role="tab" data-tab="advanced-customFilters"
249 aria-controls="custom-filters" tabindex="-1"></li>
236 </ul> 250 </ul>
237 <div id="filter-lists"> 251 <div id="filter-lists">
238 <div id="all-filter-lists"> 252 <div id="all-filter-lists" role="tabpanel"
253 aria-labelledby="tab-allFilterLists">
239 <div class="table-header"> 254 <div class="table-header">
240 <h2 class="i18n_options_column_name"></h2> 255 <h2 class="i18n_options_column_name"></h2>
241 <h2 class="i18n_options_column_date"></h2> 256 <h2 class="i18n_options_column_date"></h2>
242 </div> 257 </div>
243 <ul class="table cols" id="all-filter-lists-table"> 258 <ul class="table cols" id="all-filter-lists-table">
244 <template> 259 <template>
245 <button data-action="toggle-disable-subscription" role="chec kbox" class="control"></button> 260 <button data-action="toggle-disable-subscription" role="chec kbox" class="control"></button>
246 <div> 261 <div>
247 <label data-action="open-context-menu" class="display"></l abel> 262 <label data-action="open-context-menu" class="display"></l abel>
248 <div data-action="open-context-menu" class="arrow"> 263 <div data-action="open-context-menu" class="arrow">
(...skipping 25 matching lines...) Expand all
274 <button data-action="open-dialog" data-dialog="custom"> 289 <button data-action="open-dialog" data-dialog="custom">
275 <span class="icon icon-add"></span> 290 <span class="icon icon-add"></span>
276 <span class="i18n_options_filterList_add"></span> 291 <span class="i18n_options_filterList_add"></span>
277 </button> 292 </button>
278 <button data-action="update-all-subscriptions"> 293 <button data-action="update-all-subscriptions">
279 <span class="icon icon-update"></span> 294 <span class="icon icon-update"></span>
280 <span class="i18n_options_filterList_update"></span> 295 <span class="i18n_options_filterList_update"></span>
281 </button> 296 </button>
282 </div> 297 </div>
283 </div> 298 </div>
284 <div id="custom-filters"> 299 <div id="custom-filters" role="tabpanel"
300 aria-labelledby="tab-customFilters">
285 <h2 id="custom-filters-header"> 301 <h2 id="custom-filters-header">
286 <span class="i18n_options_customFilters_title"></span> 302 <span class="i18n_options_customFilters_title"></span>
287 <span class="i18n_options_readMore" 303 <span class="i18n_options_readMore"
288 data-tooltip="options_customFilters_title_tooltip"></span> 304 data-tooltip="options_customFilters_title_tooltip"></span>
289 </h2> 305 </h2>
290 <div id="custom-filters-wrapper"> 306 <div id="custom-filters-wrapper">
291 <div id="custom-filters-list-wrapper"> 307 <div id="custom-filters-list-wrapper">
292 <ul id="custom-filters-table" class="table list"> 308 <ul id="custom-filters-table" class="table list">
293 <template> 309 <template>
294 <label class="display"></label> 310 <label class="display"></label>
(...skipping 21 matching lines...) Expand all
316 <span class="i18n_options_customFilter_cancel"></span> 332 <span class="i18n_options_customFilter_cancel"></span>
317 </button> 333 </button>
318 </div> 334 </div>
319 </div> 335 </div>
320 </div> 336 </div>
321 </div> 337 </div>
322 </div> 338 </div>
323 </div> 339 </div>
324 340
325 <!-- Help tab content --> 341 <!-- Help tab content -->
326 <div id="content-help" class="tab-content"> 342 <div id="content-help" role="tabpanel" aria-labelledby="tab-help">
327 <h1 class="i18n_options_faq_title"></h1> 343 <h1 class="i18n_options_faq_title"></h1>
328 <p class="i18n_options_faq_description"></p> 344 <p class="i18n_options_faq_description"></p>
329 <p> 345 <p>
330 <a class="i18n_options_faq_title" href="#" target="_blank"></a> 346 <a class="i18n_options_faq_title" href="#" target="_blank"></a>
331 </p> 347 </p>
332 <h1 class="i18n_options_forum_title"></h1> 348 <h1 class="i18n_options_forum_title"></h1>
333 <p class="i18n_options_forum_description"></p> 349 <p class="i18n_options_forum_description"></p>
334 <p> 350 <p>
335 <a class="i18n_options_forum_link" href="#" target="_blank"></a> 351 <a class="i18n_options_forum_link" href="#" target="_blank"></a>
336 </p> 352 </p>
(...skipping 65 matching lines...) Expand 10 before | Expand all | Expand 10 after
402 <div class="url"></div> 418 <div class="url"></div>
403 <button class="i18n_options_dialog_predefined_confirm default-focus" data-action="add-predefined-subscription"></button> 419 <button class="i18n_options_dialog_predefined_confirm default-focus" data-action="add-predefined-subscription"></button>
404 </div> 420 </div>
405 </div> 421 </div>
406 </div> 422 </div>
407 <!-- Placeholder element to determine when to wrap focus around --> 423 <!-- Placeholder element to determine when to wrap focus around -->
408 <span class="focus-last" tabindex="0"></span> 424 <span class="focus-last" tabindex="0"></span>
409 </div> 425 </div>
410 </body> 426 </body>
411 </html> 427 </html>
OLDNEW
« no previous file with comments | « no previous file | new-options.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld