Bug 1014698 - Unable to see the keyboard focus indicator on the category list of in-content preferences, r=jaws
authorHernan Rodriguez Colmeiro <colmeiro@gmail.com>
Tue, 03 Jun 2014 12:06:00 +0100
changeset 188312 358904c14a9c884586948d05c0f9b79b50ff53d1
parent 188192 5d3393c154010b7a95e3e2b30ac0a5c10c86e7f3
child 188313 729f6c1413c7def708a58aeaab9068b20b0103ff
push id26951
push useremorley@mozilla.com
push dateThu, 12 Jun 2014 14:07:43 +0000
treeherdermozilla-central@4f98802de6ce [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjaws
bugs1014698
milestone33.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1014698 - Unable to see the keyboard focus indicator on the category list of in-content preferences, r=jaws
browser/components/preferences/in-content/preferences.js
browser/themes/shared/incontentprefs/preferences.css
--- a/browser/components/preferences/in-content/preferences.js
+++ b/browser/components/preferences/in-content/preferences.js
@@ -28,16 +28,25 @@ function init_all() {
   gSecurityPane.init();
   var initFinished = document.createEvent("Event");
   initFinished.initEvent("Initialized", true, true);
   document.dispatchEvent(initFinished);
 
   let categories = document.getElementById("categories");
   categories.addEventListener("select", event => gotoPref(event.target.value));
 
+  document.documentElement.addEventListener("keydown", function(event) {
+    if (event.keyCode == KeyEvent.DOM_VK_TAB) {
+      categories.setAttribute("keyboard-navigation", "true");
+    }
+  });
+  categories.addEventListener("mousedown", function() {
+    this.removeAttribute("keyboard-navigation");
+  });
+
   gotoPref("paneGeneral");
 }
 
 function selectCategory(name) {
   let categories = document.getElementById("categories");
   let item = categories.querySelector(".category[value=" + name + "]");
   categories.selectedItem = item;
   gotoPref(name);
--- a/browser/themes/shared/incontentprefs/preferences.css
+++ b/browser/themes/shared/incontentprefs/preferences.css
@@ -475,16 +475,21 @@ radio[disabled="true"] > .radio-check {
 }
 
 .category[selected] {
   background-color: #343f48;
   color: #f2f2f2;
   box-shadow: inset 4px 0 0 0 #FF9500;
 }
 
+#categories[keyboard-navigation="true"]:-moz-focusring > .category[current] {
+  border-top: 1px #ffffff dotted;
+  border-bottom: 1px #ffffff dotted;
+}
+
 .category-name {
   line-height: 22px;
   font-size: 1.25rem;
   padding-bottom: 2px;
   -moz-padding-start: 9px;
   margin: 0;
 }