Bug 1516016 - Set a focus ring on categories when tabbing with the keyboard. r=darktrojan
authorRichard Marti <richard.marti@gmail.com>
Fri, 21 Dec 2018 12:14:47 +0100
changeset 33195 033ab4ab1fa4
parent 33194 9a7bbff046a2
child 33196 c707d32abbd6
push id2368
push userclokep@gmail.com
push dateMon, 28 Jan 2019 21:12:50 +0000
treeherdercomm-beta@56d23c07d815 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdarktrojan
bugs1516016
Bug 1516016 - Set a focus ring on categories when tabbing with the keyboard. r=darktrojan
mail/components/preferences/preferences.js
mail/themes/osx/mail/preferences/aboutPreferences.css
mail/themes/shared/mail/incontentprefs/aboutPreferences.css
--- a/mail/components/preferences/preferences.js
+++ b/mail/components/preferences/preferences.js
@@ -18,16 +18,30 @@ window.addEventListener("load", function
   }
   if (!ExtensionSupport.loadedLegacyExtensions.has("{e2fda1a4-762b-4020-b5ad-a41df1933103}")) {
     let radio =
       document.getAnonymousElementByAttribute(prefWindow, "pane", "paneLightning");
     if (radio.selected)
       prefWindow.showPane(document.getElementById("paneGeneral"));
     radio.hidden = true;
   }
+
+  let categories = prefWindow._selector;
+  document.documentElement.addEventListener("keydown", function(event) {
+    if (event.keyCode == KeyEvent.DOM_VK_TAB ||
+        event.keyCode == KeyEvent.DOM_VK_UP ||
+        event.keyCode == KeyEvent.DOM_VK_DOWN ||
+        event.keyCode == KeyEvent.DOM_VK_LEFT ||
+        event.keyCode == KeyEvent.DOM_VK_RIGHT) {
+      categories.setAttribute("keyboard-navigation", "true");
+    }
+  });
+  categories.addEventListener("mousedown", function() {
+    this.removeAttribute("keyboard-navigation");
+  });
 });
 
 /**
  * Selects the specified preferences pane
  *
  * @param prefWindow    the prefwindow element to operate on
  * @param aPaneID       ID of prefpane to select
  * @param aTabID        ID of tab to select on the prefpane
--- a/mail/themes/osx/mail/preferences/aboutPreferences.css
+++ b/mail/themes/osx/mail/preferences/aboutPreferences.css
@@ -86,16 +86,20 @@ radio[pane][selected] {
   margin-inline-start: 2px;
   margin-inline-end: 8px !important;
 }
 
 .sidebar-footer-label {
   font-size: 1.224em;
 }
 
+tab:-moz-focusring > .tab-middle > .tab-text {
+  outline: none;
+}
+
 /**
  * Dialog
  */
 
 #dialogTitle {
   font-size: 1.1em;
 }
 
--- a/mail/themes/shared/mail/incontentprefs/aboutPreferences.css
+++ b/mail/themes/shared/mail/incontentprefs/aboutPreferences.css
@@ -73,16 +73,17 @@ radio[pane] {
   border-left-width: 0;
   border-radius: 2px;
   margin-top: 0;
   margin-bottom: 0;
   margin-inline-start: 34px;
   margin-inline-end: 0;
   padding: 5px 10px;
   min-height: 40px;
+  outline-offset: -1px;
   transition: background-color 150ms;
 }
 
 radio[pane][selected] {
   color: var(--in-content-category-text-selected);
   background: none;
 }
 
@@ -94,16 +95,20 @@ radio[pane][selected]:hover {
   background-color: var(--in-content-category-background-selected-hover);
 }
 
 radio[pane]:hover:active {
   color: var(--in-content-category-text-selected-active);
   background-color: var(--in-content-category-background-selected-active);
 }
 
+.paneSelector[focused="true"][keyboard-navigation="true"] > radio[pane][focused="true"] {
+  outline: var(--in-content-category-outline-focus);
+}
+
 radio[pane]:hover::before,
 radio[pane][selected]::before {
   display: none;
 }
 
 radio[pane] > .radio-label-box {
   line-height: 22px;
   padding-bottom: 2px;
@@ -250,16 +255,24 @@ textbox + button {
   list-style-image: url("chrome://messenger/skin/icons/arrow/arrow-down-dim.png");
 }
 
 separator.groove:not([orient="vertical"]) {
   border-top-color: #c1c1c1;
   border-bottom-width: 0;
 }
 
+tab:-moz-focusring {
+  outline: var(--in-content-category-outline-focus);
+}
+
+tab:-moz-focusring > .tab-middle {
+  outline: none;
+}
+
 #defaultWebSearchPopup > menuitem > .menu-iconic-left {
   display: -moz-box;
 }
 
 /* Applications Pane Styles */
 
 #applications-content {
   padding: 15px;