From 3356bb5a3be9b3410042cb9ab1cd51de6342dce1 Mon Sep 17 00:00:00 2001
From: prathiksha <prathikshaprasadsuman@gmail.com>
Date: Wed, 31 Oct 2018 13:56:57 +0000
Subject: [PATCH] Bug 1501897 - Only selected items in the permission settings
 richlistbox should be tabable for accessibility reasons. r=johannh,Jamie

Only selected items in the permission settings richlistbox should be tabable for accessibility reasons.

Differential Revision: https://phabricator.services.mozilla.com/D10079

--HG--
extra : moz-landing-system : lando
---
 .../tests/browser_permissions_dialog.js       | 30 +++++++++++++++++++
 .../components/preferences/sitePermissions.js | 11 +++++++
 2 files changed, 41 insertions(+)

diff --git a/browser/components/preferences/in-content/tests/browser_permissions_dialog.js b/browser/components/preferences/in-content/tests/browser_permissions_dialog.js
index 360979b88a21..cbd19b1ef8e5 100644
--- a/browser/components/preferences/in-content/tests/browser_permissions_dialog.js
+++ b/browser/components/preferences/in-content/tests/browser_permissions_dialog.js
@@ -343,6 +343,36 @@ add_task(async function checkDefaultPermissionState() {
   Services.prefs.setIntPref("permissions.default.desktop-notification", SitePermissions.UNKNOWN);
 });
 
+add_task(async function testTabBehaviour() {
+  // Test tab behaviour inside the permissions setting dialog when site permissions are selected.
+  // Only selected items in the richlistbox should be tabable for accessibility reasons.
+
+  SitePermissions.set(URI, "desktop-notification", SitePermissions.ALLOW);
+  let u = Services.io.newURI("http://www.test.com");
+  SitePermissions.set(u, "desktop-notification", SitePermissions.ALLOW);
+
+  await openPermissionsDialog();
+  let doc = sitePermissionsDialog.document;
+
+  EventUtils.synthesizeKey("KEY_Tab", {}, sitePermissionsDialog);
+  let richlistbox = doc.getElementById("permissionsBox");
+  is(richlistbox, doc.activeElement.closest("#permissionsBox"), "The richlistbox is focused after pressing tab once.");
+
+  EventUtils.synthesizeKey("KEY_ArrowDown", {}, sitePermissionsDialog);
+  EventUtils.synthesizeKey("KEY_Tab", {}, sitePermissionsDialog);
+  let menulist = doc.getElementById("permissionsBox").children[1].getElementsByTagName("menulist")[0];
+  is(menulist, doc.activeElement, "The menulist inside the selected richlistitem is focused now");
+
+  EventUtils.synthesizeKey("KEY_Tab", {}, sitePermissionsDialog);
+  let removeButton = doc.getElementById("removePermission");
+  is(removeButton, doc.activeElement, "The focus moves outside the richlistbox and onto the remove button");
+
+  SitePermissions.remove(URI, "desktop-notification");
+  SitePermissions.remove(u, "desktop-notification");
+
+  doc.getElementById("cancel").click();
+});
+
 add_task(async function removeTab() {
   gBrowser.removeCurrentTab();
 });
diff --git a/browser/components/preferences/sitePermissions.js b/browser/components/preferences/sitePermissions.js
index 1a5a3a5f8f41..da857e155736 100644
--- a/browser/components/preferences/sitePermissions.js
+++ b/browser/components/preferences/sitePermissions.js
@@ -346,6 +346,17 @@ var gSitePermissionsManager = {
 
   onPermissionSelect() {
     this._setRemoveButtonState();
+
+    // If any item is selected, it should be the only item tabable
+    // in the richlistbox for accessibility reasons.
+    this._list.children.forEach((item) => {
+      let menulist = item.getElementsByTagName("menulist")[0];
+      if (!item.selected) {
+        menulist.setAttribute("tabindex", -1);
+      } else {
+        menulist.removeAttribute("tabindex");
+      }
+    });
   },
 
   onPermissionChange(perm, capability) {