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

Side by Side Diff: options.js

Issue 29323156: Issue 2410 - Improved accessibility of dialogs in options page (Closed)
Patch Set: Created July 31, 2015, 3:02 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 | « options.html ('k') | skin/options.css » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 /* 1 /*
2 * This file is part of Adblock Plus <https://adblockplus.org/>, 2 * This file is part of Adblock Plus <https://adblockplus.org/>,
3 * Copyright (C) 2006-2015 Eyeo GmbH 3 * Copyright (C) 2006-2015 Eyeo GmbH
4 * 4 *
5 * Adblock Plus is free software: you can redistribute it and/or modify 5 * Adblock Plus is free software: you can redistribute it and/or modify
6 * it under the terms of the GNU General Public License version 3 as 6 * it under the terms of the GNU General Public License version 3 as
7 * published by the Free Software Foundation. 7 * published by the Free Software Foundation.
8 * 8 *
9 * Adblock Plus is distributed in the hope that it will be useful, 9 * Adblock Plus is distributed in the hope that it will be useful,
10 * but WITHOUT ANY WARRANTY; without even the implied warranty of 10 * but WITHOUT ANY WARRANTY; without even the implied warranty of
(...skipping 340 matching lines...) Expand 10 before | Expand all | Expand 10 after
351 switch (actions[i]) 351 switch (actions[i])
352 { 352 {
353 case "add-domain-exception": 353 case "add-domain-exception":
354 addWhitelistedDomain(); 354 addWhitelistedDomain();
355 break; 355 break;
356 case "add-predefined-subscription": 356 case "add-predefined-subscription":
357 var dialog = E("dialog-content-predefined"); 357 var dialog = E("dialog-content-predefined");
358 var title = dialog.querySelector("h3").textContent; 358 var title = dialog.querySelector("h3").textContent;
359 var url = dialog.querySelector(".url").textContent; 359 var url = dialog.querySelector(".url").textContent;
360 addEnableSubscription(url, title); 360 addEnableSubscription(url, title);
361 document.body.removeAttribute("data-dialog"); 361 closeDialog();
362 break; 362 break;
363 case "cancel-custom-filters": 363 case "cancel-custom-filters":
364 E("custom-filters").classList.remove("mode-edit"); 364 E("custom-filters").classList.remove("mode-edit");
365 break; 365 break;
366 case "cancel-domain-exception": 366 case "cancel-domain-exception":
367 E("whitelisting-textbox").value = ""; 367 E("whitelisting-textbox").value = "";
368 break; 368 break;
369 case "close-dialog": 369 case "close-dialog":
370 document.body.removeAttribute("data-dialog"); 370 closeDialog();
371 break; 371 break;
372 case "edit-custom-filters": 372 case "edit-custom-filters":
373 E("custom-filters").classList.add("mode-edit"); 373 E("custom-filters").classList.add("mode-edit");
374 editCustomFilters(); 374 editCustomFilters();
375 break; 375 break;
376 case "import-subscription": 376 case "import-subscription":
377 var url = E("blockingList-textbox").value; 377 var url = E("blockingList-textbox").value;
378 addEnableSubscription(url); 378 addEnableSubscription(url);
379 document.body.removeAttribute("data-dialog"); 379 closeDialog();
380 break; 380 break;
381 case "open-dialog": 381 case "open-dialog":
382 openDialog(element.getAttribute("data-dialog")); 382 openDialog(element.getAttribute("data-dialog"));
383 break; 383 break;
384 case "save-custom-filters": 384 case "save-custom-filters":
385 ext.backgroundPage.sendMessage( 385 ext.backgroundPage.sendMessage(
386 { 386 {
387 type: "filters.importRaw", 387 type: "filters.importRaw",
388 text: E("custom-filters-raw").value 388 text: E("custom-filters-raw").value
389 }); 389 });
(...skipping 20 matching lines...) Expand all
410 410
411 function onFindLanguageKeyUp() 411 function onFindLanguageKeyUp()
412 { 412 {
413 var searchStyle = E("search-style"); 413 var searchStyle = E("search-style");
414 if (!this.value) 414 if (!this.value)
415 searchStyle.innerHTML = ""; 415 searchStyle.innerHTML = "";
416 else 416 else
417 searchStyle.innerHTML = "#all-lang-table li:not([data-search*=\"" + this .value.toLowerCase() + "\"]) { display: none; }"; 417 searchStyle.innerHTML = "#all-lang-table li:not([data-search*=\"" + this .value.toLowerCase() + "\"]) { display: none; }";
418 } 418 }
419 419
420 function isEnterPressed(e) 420 function getKey(e)
421 { 421 {
422 // e.keyCode has been deprecated so we attempt to use e.key 422 // e.keyCode has been deprecated so we attempt to use e.key
423 if ("key" in e) 423 if ("key" in e)
424 return e.key == "Enter"; 424 return e.key;
425 return e.keyCode == 13; // keyCode "13" corresponds to "Enter" 425 return getKey.keys[e.keyCode];
426 } 426 }
427 getKey.keys = {
428 9: "Tab",
429 13: "Enter",
430 27: "Escape"
431 };
427 432
428 // Initialize navigation sidebar 433 // Initialize navigation sidebar
429 ext.backgroundPage.sendMessage( 434 ext.backgroundPage.sendMessage(
430 { 435 {
431 type: "app.get", 436 type: "app.get",
432 what: "addonVersion" 437 what: "addonVersion"
433 }, 438 },
434 function(addonVersion) 439 function(addonVersion)
435 { 440 {
436 E("abp-version").textContent = addonVersion; 441 E("abp-version").textContent = addonVersion;
(...skipping 10 matching lines...) Expand all
447 452
448 updateShareLink(); 453 updateShareLink();
449 454
450 // Initialize interactive UI elements 455 // Initialize interactive UI elements
451 document.body.addEventListener("click", onClick, false); 456 document.body.addEventListener("click", onClick, false);
452 var placeholderValue = ext.i18n.getMessage("options_dialog_language_find"); 457 var placeholderValue = ext.i18n.getMessage("options_dialog_language_find");
453 E("find-language").setAttribute("placeholder", placeholderValue); 458 E("find-language").setAttribute("placeholder", placeholderValue);
454 E("find-language").addEventListener("keyup", onFindLanguageKeyUp, false); 459 E("find-language").addEventListener("keyup", onFindLanguageKeyUp, false);
455 E("whitelisting-textbox").addEventListener("keypress", function(e) 460 E("whitelisting-textbox").addEventListener("keypress", function(e)
456 { 461 {
457 if (isEnterPressed(e)) 462 if (getKey(e) == "Enter")
458 addWhitelistedDomain(); 463 addWhitelistedDomain();
459 }, false); 464 }, false);
460 465
461 // Advanced tab 466 // Advanced tab
462 var filterTextbox = document.querySelector("#custom-filters-add input"); 467 var filterTextbox = document.querySelector("#custom-filters-add input");
463 placeholderValue = ext.i18n.getMessage("options_customFilters_textbox_placeh older"); 468 placeholderValue = ext.i18n.getMessage("options_customFilters_textbox_placeh older");
464 filterTextbox.setAttribute("placeholder", placeholderValue); 469 filterTextbox.setAttribute("placeholder", placeholderValue);
465 function addCustomFilters() 470 function addCustomFilters()
466 { 471 {
467 var filterText = filterTextbox.value; 472 var filterText = filterTextbox.value;
468 ext.backgroundPage.sendMessage( 473 ext.backgroundPage.sendMessage(
469 { 474 {
470 type: "filters.add", 475 type: "filters.add",
471 text: filterText 476 text: filterText
472 }); 477 });
473 filterTextbox.value = ""; 478 filterTextbox.value = "";
474 } 479 }
475 E("custom-filters-add").addEventListener("submit", function(e) 480 E("custom-filters-add").addEventListener("submit", function(e)
476 { 481 {
477 e.preventDefault(); 482 e.preventDefault();
478 addCustomFilters(); 483 addCustomFilters();
479 }, false); 484 }, false);
480 var customFilterEditButtons = document.querySelectorAll("#custom-filters-edi t-wrapper button"); 485 var customFilterEditButtons = document.querySelectorAll("#custom-filters-edi t-wrapper button");
486
487 E("dialog").addEventListener("keydown", function(e)
488 {
489 switch (getKey(e))
490 {
491 case "Escape":
492 closeDialog();
493 break;
494 case "Tab":
495 if (e.shiftKey)
496 {
497 if (e.target.classList.contains("focus-first"))
498 {
499 e.preventDefault();
500 document.querySelector("#dialog .focus-last").focus();
501 }
502 }
503 else if (e.target.classList.contains("focus-last"))
504 {
505 e.preventDefault();
506 document.querySelector("#dialog .focus-first").focus();
507 }
508 break;
509 }
510 }, false);
481 } 511 }
482 512
513 var focusedBeforeDialog = null;
483 function openDialog(name) 514 function openDialog(name)
484 { 515 {
516 var dialog = E("dialog");
517 dialog.setAttribute("aria-hidden", false);
518 dialog.setAttribute("aria-labelledby", "dialog-title-" + name);
485 document.body.setAttribute("data-dialog", name); 519 document.body.setAttribute("data-dialog", name);
520
521 var defaultAction = document.querySelector("#dialog-content-" + name
522 + " .default-action");
523 if (!defaultAction)
524 defaultAction = document.querySelector("#dialog .focus-first");
525 focusedBeforeDialog = document.activeElement;
526 defaultAction.focus();
527 }
528
529 function closeDialog()
530 {
531 var dialog = E("dialog");
532 dialog.setAttribute("aria-hidden", true);
533 dialog.removeAttribute("aria-labelledby");
534 document.body.removeAttribute("data-dialog");
535 focusedBeforeDialog.focus();
486 } 536 }
487 537
488 function populateLists() 538 function populateLists()
489 { 539 {
490 subscriptionsMap = Object.create(null); 540 subscriptionsMap = Object.create(null);
491 filtersMap = Object.create(null); 541 filtersMap = Object.create(null);
492 recommendationsMap = Object.create(null); 542 recommendationsMap = Object.create(null);
493 543
494 // Empty collections and lists 544 // Empty collections and lists
495 for (var property in collections) 545 for (var property in collections)
(...skipping 236 matching lines...) Expand 10 before | Expand all | Expand 10 after
732 filter: ["added", "loaded", "removed"] 782 filter: ["added", "loaded", "removed"]
733 }); 783 });
734 ext.backgroundPage.sendMessage( 784 ext.backgroundPage.sendMessage(
735 { 785 {
736 type: "subscriptions.listen", 786 type: "subscriptions.listen",
737 filter: ["added", "disabled", "homepage", "removed", "title"] 787 filter: ["added", "disabled", "homepage", "removed", "title"]
738 }); 788 });
739 789
740 window.addEventListener("DOMContentLoaded", onDOMLoaded, false); 790 window.addEventListener("DOMContentLoaded", onDOMLoaded, false);
741 })(); 791 })();
OLDNEW
« no previous file with comments | « options.html ('k') | skin/options.css » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld