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 479 matching lines @@
       {
         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.

+              this.querySelector(".focus-last").focus();
             }
           }
           else if (e.target.classList.contains("focus-last"))
           {
             e.preventDefault();
-            document.querySelector("#dialog .focus-first").focus();
+            this.querySelector(".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.

+    var defaultFocus = document.querySelector("#dialog-content-" + name
+      + " .default-focus");
+    if (!defaultFocus)
+      defaultFocus = dialog.querySelector(".focus-first");
     focusedBeforeDialog = document.activeElement;
-    defaultAction.focus();
+    defaultFocus.focus();
   }
 
   function closeDialog()
   {
     var dialog = E("dialog");
     dialog.setAttribute("aria-hidden", true);
     dialog.removeAttribute("aria-labelledby");
     document.body.removeAttribute("data-dialog");
     focusedBeforeDialog.focus();
   }
@@ skipping 255 matching lines @@
     filter: ["added", "loaded", "removed"]
   });
   ext.backgroundPage.sendMessage(
   {
     type: "subscriptions.listen",
     filter: ["added", "disabled", "homepage", "removed", "title"]
   });
 
   window.addEventListener("DOMContentLoaded", onDOMLoaded, false);
 })();