Issue 2408 - Improved accessibility of checkboxes 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 13 matching lines @@
   var filtersMap = Object.create(null);
   var collections = Object.create(null);
   var maxLabelId = 0;
 
   function Collection(details)
   {
     this.details = details;
     this.items = [];
   }
 
+  Collection.prototype._setEmpty = function(table, text)
+  {
+    var placeholder = table.querySelector(".empty-placeholder");
+    if (text && !placeholder)
+    {
+      placeholder = document.createElement("li");
+      placeholder.className = "empty-placeholder";
+      placeholder.textContent = ext.i18n.getMessage(text);
+      table.appendChild(placeholder);
+    }
+    else if (placeholder)
+      table.removeChild(placeholder);
+  }
+
   Collection.prototype.addItems = function() 
   {
     var length = Array.prototype.push.apply(this.items, arguments);
     if (length == 0)
       return;
 
     this.items.sort(function(a, b)
     {
       var aValue = (a.title || a.text || a.url).toLowerCase();
       var bValue = (b.title || b.text || b.url).toLowerCase();
       return aValue.localeCompare(bValue);
     });
 
     for (var j = 0; j < this.details.length; j++) 
     {
       var table = E(this.details[j].id);
       var template = table.querySelector("template");
       for (var i = 0; i < arguments.length; i++) 
       {
         var item = arguments[i];
         var listItem = document.createElement("li");
         listItem.appendChild(document.importNode(template.content, true));
         listItem.setAttribute("data-access", item.url || item.text);
 
         var labelId = "label-" + (++maxLabelId);
-        var label = listItem.querySelector(".display");
-        label.setAttribute("id", labelId);
+        listItem.querySelector(".display").setAttribute("id", labelId);
         var control = listItem.querySelector(".control");
         if (control)
         {
           // We use aria-labelledby to avoid triggering the control when
           // interacting with the label
           control.setAttribute("aria-labelledby", labelId);
           control.addEventListener("click", this.details[j].onClick, false);
         }
 
+        this._setEmpty(table, null);
         if (table.hasChildNodes())
           table.insertBefore(listItem, table.childNodes[this.items.indexOf(item)]);
         else
           table.appendChild(listItem);
         this.updateItem(item);
       }
     }
     return length;
   };
 
   Collection.prototype.removeItem = function(item)
   {
     var index = this.items.indexOf(item);
     if (index == -1)
       return;
 
     this.items.splice(index, 1);
-    var access = (item.url || item.text).replace(/'/g, "\\'");
     for (var i = 0; i < this.details.length; i++)
     {
       var table = E(this.details[i].id);
-      var element = table.querySelector("[data-access='" + access + "']");
+      var element = table.childNodes[index];
 
       // Element gets removed so make sure to handle focus appropriately
       var control = element.querySelector(".control");
       if (control && control == document.activeElement)
       {
         if (!focusNextElement(element.parentElement, control))
         {
-          // Fall back to next focusable element within same tab
-          var tab = element.parentElement;
-          while (true)
+          // Fall back to next focusable element within same tab or dialog
+          var focusableElement = element.parentElement;
+          while (focusableElement)
           {
-            if (tab.classList.contains("tab-content"))
+            if (focusableElement.classList.contains("tab-content")
+                || focusableElement.classList.contains("dialog-content"))
               break;
 
-            tab = tab.parentElement;
-            if (!tab)
-            {
-              tab = document;
-              break;
-            }
+            focusableElement = focusableElement.parentElement;
           }
-          focusNextElement(tab, control);
+          focusNextElement(focusableElement || document, control);
         }
       }
 
       element.parentElement.removeChild(element);
+      if (this.items.length == 0)
+        this._setEmpty(table, this.details[i].emptyText);
     }
   };
 
   Collection.prototype.updateItem = function(item)
   {
     var access = (item.url || item.text).replace(/'/g, "\\'");
     for (var i = 0; i < this.details.length; i++)
     {
       var table = E(this.details[i].id);
       var element = table.querySelector("[data-access='" + access + "']");
       if (!element)
         continue;
 
       var text = item.title || item.url || item.text;
       element.querySelector(".display").textContent = text;
       if (text)
         element.setAttribute("data-search", text.toLowerCase());
       var control = element.querySelector(".control[role='checkbox']");
       if (control)
         control.setAttribute("aria-checked", item.disabled == false);
     }
   };
 
   Collection.prototype.clearAll = function()
   {
+    this.items = [];
     for (var i = 0; i < this.details.length; i++)
     {
       var table = E(this.details[i].id);
       var template = table.querySelector("template");
       table.innerHTML = "";
       table.appendChild(template);
-    }
-    this.items.length = 0;
+      this._setEmpty(table, this.details[i].emptyText);
+    }
   };
 
   function focusNextElement(container, currentElement)
   {
-    var focusables = container.querySelectorAll("a, button, .control");
+    var focusables = container.querySelectorAll("a, button, input, .control");
     focusables = Array.prototype.slice.call(focusables);
     var index = focusables.indexOf(currentElement);
-    if (index + 1 < focusables.length)
-      index += 1;
-    else if (index < focusables.length)
-      index -= 1;
+    index += (index == focusables.length - 1) ? -1 : 1;
 
     var nextElement = focusables[index];
     if (!nextElement)
       return false;
 
     nextElement.focus();
     return true;
   }
 
   function onToggleSubscriptionClick(e)
   {
     e.preventDefault();
     var checkbox = e.target;
     var subscriptionUrl = checkbox.parentElement.getAttribute("data-access");
     if (checkbox.getAttribute("aria-checked") == "true")
     {
-      ext.backgroundPage.sendMessage(
-      {
+      ext.backgroundPage.sendMessage({
         type: "subscriptions.remove",
         url: subscriptionUrl
       });
     }
     else
       addEnableSubscription(subscriptionUrl);
   }
 
   function onAddLanguageSubscriptionClick(e)
   {
@@ skipping 16 matching lines @@
   [
     {
       id: "recommend-list-table",
       onClick: onToggleSubscriptionClick
     }
   ]);
   collections.langs = new Collection(
   [
     {
       id: "blocking-languages-table",
+      emptyText: "options_dialog_language_added_empty",
       onClick: onToggleSubscriptionClick
     },
     {
-      id: "blocking-languages-dialog-table"
+      id: "blocking-languages-dialog-table",
+      emptyText: "options_dialog_language_added_empty"
     }
   ]);
   collections.allLangs = new Collection(
   [
     {
       id: "all-lang-table",
+      emptyText: "options_dialog_language_other_empty",
       onClick: onAddLanguageSubscriptionClick
     }
   ]);
   collections.acceptableAds = new Collection(
   [
     {
       id: "acceptableads-table",
       onClick: onToggleSubscriptionClick
     }
   ]);
   collections.custom = new Collection(
   [
     {
       id: "custom-list-table",
       onClick: onToggleSubscriptionClick
     }
   ]);
   collections.whitelist = new Collection(
   [
     {
       id: "whitelisting-table",
+      emptyText: "options_whitelisted_empty",
       onClick: onRemoveFilterClick
     }
   ]);
   collections.customFilters = new Collection(
   [
     {
-      id: "custom-filters-table"
+      id: "custom-filters-table",
+      emptyText: "options_customFilters_empty"
     }
   ]);
 
   function updateSubscription(subscription)
   {
     var subscriptionUrl = subscription.url;
     var knownSubscription = subscriptionsMap[subscriptionUrl];
     if (knownSubscription)
       knownSubscription.disabled = subscription.disabled;
     else
@@ skipping 150 matching lines @@
           var title = dialog.querySelector("h3").textContent;
           var url = dialog.querySelector(".url").textContent;
           addEnableSubscription(url, title);
           closeDialog();
           break;
         case "cancel-custom-filters":
           E("custom-filters").classList.remove("mode-edit");
           break;
         case "cancel-domain-exception":
           E("whitelisting-textbox").value = "";
+          document.querySelector("#whitelisting .controls").classList.remove("mode-edit");
           break;
         case "close-dialog":
           closeDialog();
           break;
         case "edit-custom-filters":
           E("custom-filters").classList.add("mode-edit");
           editCustomFilters();
+          break;
+        case "edit-domain-exception":
+          document.querySelector("#whitelisting .controls").classList.add("mode-edit");
+          E("whitelisting-textbox").focus();
           break;
         case "import-subscription":
           var url = E("blockingList-textbox").value;
           addEnableSubscription(url);
           closeDialog();
           break;
         case "open-dialog":
           openDialog(element.getAttribute("data-dialog"));
           break;
         case "save-custom-filters":
@@ skipping 211 matching lines @@
     if (domain.value)
     {
       ext.backgroundPage.sendMessage(
       {
         type: "filters.add",
         text: "@@||" + domain.value.toLowerCase() + "^$document"
       });
     }
 
     domain.value = "";
+    document.querySelector("#whitelisting .controls").classList.remove("mode-edit");
   }
 
   function editCustomFilters()
   {
     var customFilterItems = collections.customFilters.items;
     var filterTexts = [];
     for (var i = 0; i < customFilterItems.length; i++)
       filterTexts.push(customFilterItems[i].text);
     E("custom-filters-raw").value = filterTexts.join("\n");
   }
@@ skipping 176 matching lines @@
     filter: ["added", "loaded", "removed"]
   });
   ext.backgroundPage.sendMessage(
   {
     type: "subscriptions.listen",
     filter: ["added", "disabled", "homepage", "removed", "title"]
   });
 
   window.addEventListener("DOMContentLoaded", onDOMLoaded, false);
 })();