Issue 2410 - Improved accessibility of dialogs in options page

options.js

 /*
  * This file is part of Adblock Plus <https://adblockplus.org/>,
  * Copyright (C) 2006-2015 Eyeo GmbH
  *
  * Adblock Plus is free software: you can redistribute it and/or modify
  * it under the terms of the GNU General Public License version 3 as
  * published by the Free Software Foundation.
  *
  * Adblock Plus is distributed in the hope that it will be useful,
  * but WITHOUT ANY WARRANTY; without even the implied warranty of
@@ skipping 340 matching lines @@
       switch (actions[i])
       {
         case "add-domain-exception":
           addWhitelistedDomain();
           break;
         case "add-predefined-subscription":
           var dialog = E("dialog-content-predefined");
           var title = dialog.querySelector("h3").textContent;
           var url = dialog.querySelector(".url").textContent;
           addEnableSubscription(url, title);
-          document.body.removeAttribute("data-dialog");
+          closeDialog();
           break;
         case "cancel-custom-filters":
           E("custom-filters").classList.remove("mode-edit");
           break;
         case "cancel-domain-exception":
           E("whitelisting-textbox").value = "";
           break;
         case "close-dialog":
-          document.body.removeAttribute("data-dialog");
+          closeDialog();
           break;
         case "edit-custom-filters":
           E("custom-filters").classList.add("mode-edit");
           editCustomFilters();
           break;
         case "import-subscription":
           var url = E("blockingList-textbox").value;
           addEnableSubscription(url);
-          document.body.removeAttribute("data-dialog");
+          closeDialog();
           break;
         case "open-dialog":
           openDialog(element.getAttribute("data-dialog"));
           break;
         case "save-custom-filters":
           ext.backgroundPage.sendMessage(
           {
             type: "filters.importRaw",
             text: E("custom-filters-raw").value
           });
@@ skipping 20 matching lines @@
 
     function onFindLanguageKeyUp()
     {
       var searchStyle = E("search-style");
       if (!this.value)
         searchStyle.innerHTML = "";
       else
         searchStyle.innerHTML = "#all-lang-table li:not([data-search*=\"" + this.value.toLowerCase() + "\"]) { display: none; }";
     }
 
-    function isEnterPressed(e)
+    function getKey(e)
     {
       // e.keyCode has been deprecated so we attempt to use e.key
       if ("key" in e)
-        return e.key == "Enter";
-      return e.keyCode == 13;  // keyCode "13" corresponds to "Enter"
+        return e.key;
+      return getKey.keys[e.keyCode];
     }
+    getKey.keys = {
+      9: "Tab",
+      13: "Enter",
+      27: "Escape"
+    };
 
     // Initialize navigation sidebar
     ext.backgroundPage.sendMessage(
     {
       type: "app.get",
       what: "addonVersion"
     },
     function(addonVersion)
     {
       E("abp-version").textContent = addonVersion;
@@ skipping 10 matching lines @@
 
     updateShareLink();
 
     // Initialize interactive UI elements
     document.body.addEventListener("click", onClick, false);
     var placeholderValue  = ext.i18n.getMessage("options_dialog_language_find");
     E("find-language").setAttribute("placeholder", placeholderValue);
     E("find-language").addEventListener("keyup", onFindLanguageKeyUp, false);
     E("whitelisting-textbox").addEventListener("keypress", function(e)
     {
-      if (isEnterPressed(e))
+      if (getKey(e) == "Enter")
         addWhitelistedDomain();
     }, false);
 
     // Advanced tab
     var filterTextbox = document.querySelector("#custom-filters-add input");
     placeholderValue = ext.i18n.getMessage("options_customFilters_textbox_placeholder");
     filterTextbox.setAttribute("placeholder", placeholderValue);
     function addCustomFilters()
     {
       var filterText = filterTextbox.value;
       ext.backgroundPage.sendMessage(
       {
         type: "filters.add",
         text: filterText
       });
       filterTextbox.value = "";
     }
     E("custom-filters-add").addEventListener("submit", function(e)
     {
       e.preventDefault();
       addCustomFilters();
     }, false);
     var customFilterEditButtons = document.querySelectorAll("#custom-filters-edit-wrapper button");
+
+    E("dialog").addEventListener("keydown", function(e)
+    {
+      switch (getKey(e))
+      {
+        case "Escape":
+          closeDialog();
+          break;
+        case "Tab":
+          if (e.shiftKey)
+          {
+            if (e.target.classList.contains("focus-first"))
+            {
+              e.preventDefault();
+              document.querySelector("#dialog .focus-last").focus();

[saroyanm, 2015/10/01 16:31:40]

you already has the dialog element, I think you can refer to the ".focus-last"
and ".focus-first" classes using "this" keyword:
this.querySelector(".focus-last"); and this.querySelector(".focus-first");

[Thomas Greiner, 2015/10/02 10:27:28]

Done.

+            }
+          }
+          else if (e.target.classList.contains("focus-last"))
+          {
+            e.preventDefault();
+            document.querySelector("#dialog .focus-first").focus();
+          }
+          break;
+      }
+    }, false);
   }
 
+  var focusedBeforeDialog = null;
   function openDialog(name)
   {
+    var dialog = E("dialog");
+    dialog.setAttribute("aria-hidden", false);
+    dialog.setAttribute("aria-labelledby", "dialog-title-" + name);
     document.body.setAttribute("data-dialog", name);
+
+    var defaultAction = document.querySelector("#dialog-content-" + name

[saroyanm, 2015/10/01 16:31:40]

what about naming this defaultFocus or initialFocus ?

[Thomas Greiner, 2015/10/02 10:27:29]

Done.

+      + " .default-action");
+    if (!defaultAction)
+      defaultAction = document.querySelector("#dialog .focus-first");

[saroyanm, 2015/10/01 16:31:40]

I think here you also can use dialog element
"dialog.querySelector(".focus-first");"

[Thomas Greiner, 2015/10/02 10:27:29]

Done.

+    focusedBeforeDialog = document.activeElement;
+    defaultAction.focus();
+  }
+
+  function closeDialog()
+  {
+    var dialog = E("dialog");
+    dialog.setAttribute("aria-hidden", true);
+    dialog.removeAttribute("aria-labelledby");
+    document.body.removeAttribute("data-dialog");
+    focusedBeforeDialog.focus();
   }
 
   function populateLists()
   {
     subscriptionsMap = Object.create(null);
     filtersMap = Object.create(null);
     recommendationsMap = Object.create(null);
 
     // Empty collections and lists
     for (var property in collections)
@@ skipping 246 matching lines @@
     filter: ["added", "loaded", "removed"]
   });
   ext.backgroundPage.sendMessage(
   {
     type: "subscriptions.listen",
     filter: ["added", "disabled", "homepage", "removed", "title"]
   });
 
   window.addEventListener("DOMContentLoaded", onDOMLoaded, false);
 })();