Merge pull request #1798 from kendallcorner/GH-1785-keyboard-nav

Fixed first panel keyboard arrow nav.  Added second panel keyboard nav.

src/js/popup.js

@@ -219,14 +219,16 @@ const Logic = {
   },
 
   async showPanel(panel, currentIdentity = null, backwards = false) {
-    // Invalid panel... ?!?
-    if (!(panel in this._panels)) {
-      throw new Error("Something really bad happened. Unknown panel: " + panel);
-    }
     if (!backwards || !this._currentPanel) {
       this._previousPanelPath.push(this._currentPanel);
     }
 
+    // If invalid panel, reset panels.
+    if (!(panel in this._panels)) {
+      panel = P_CONTAINERS_LIST;
+      this._previousPanelPath = [];
+    }
+
     this._currentPanel = panel;
 
     this._currentIdentity = currentIdentity;
@@ -348,6 +350,71 @@ const Logic = {
       });
       this._listenerSet = true;
     }
+  },
+
+  shortcutListener(e){
+    function openNewContainerTab(identity) {
+      try {
+        browser.tabs.create({
+          cookieStoreId: identity.cookieStoreId
+        });
+        window.close();
+      } catch (e) {
+        window.close();
+      }
+    }
+    const identities = Logic.identities();
+    if ((e.keyCode >= 49 && e.keyCode <= 57) &&
+            Logic._currentPanel === "containersList") {
+      const identity = identities[e.keyCode - 49];
+      if (identity) {
+        openNewContainerTab(identity);
+      }
+    }
+  },
+
+  keyboardNavListener(e){
+    const panelSelector = Logic.getPanelSelector(Logic._panels[Logic._currentPanel]);
+    const selectables = [...document.querySelectorAll(`${panelSelector} .keyboard-nav[tabindex='0']`)];
+    const element = document.activeElement;
+    const backButton = document.querySelector(`${panelSelector} .keyboard-nav-back`);
+    const index = selectables.indexOf(element) || 0;
+    function next() {
+      const nextElement = selectables[index + 1];
+      if (nextElement) {
+        nextElement.focus();
+      }
+    }
+    function previous() {
+      const previousElement = selectables[index - 1];
+      if (previousElement) {
+        previousElement.focus();
+      }
+    }
+    switch (e.keyCode) {
+    case 40:
+      next();
+      break;
+    case 38:
+      previous();
+      break;
+    case 39:
+    {
+      if(element){
+        element.click();
+      }
+      break;
+    }
+    case 37:
+    {
+      if(backButton){
+        backButton.click();
+      }
+      break;
+    }
+    default:
+      break;
+    }
   }
 };
 
@@ -560,71 +627,10 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
         window.close();
       }
     });
-    document.addEventListener("keydown", (e) => {
+
-      function openNewContainerTab(identity) {
-        try {
-          browser.tabs.create({
-            cookieStoreId: identity.cookieStoreId
-          });
-          window.close();
-        } catch (e) {
-          window.close();
-        }
-      }
-      const identities = Logic.identities();
-      const selectables = [...document.querySelectorAll(".open-newtab[tabindex='0']")];
-      const element = document.activeElement;
-      const index = selectables.indexOf(element) || 0;
-      function next() {
-        const nextElement = selectables[index + 1];
-        if (nextElement) {
-          nextElement.focus();
-        }
-      }
-      function previous() {
-        const previousElement = selectables[index - 1];
-        if (previousElement) {
-          previousElement.focus();
-        }
-      }
-      switch (e.keyCode) {
-      case 40:
-        next();
-        break;
-      case 38:
-        previous();
-        break;
-      case 39:
-      {
-        const showTabs = element.parentNode.querySelector(".show-tabs");
-        if(showTabs) {
-          showTabs.click();
-        }
-        break;
-      }
-      case 37:
-      {
-        const hideTabs = document.querySelector(".panel-back-arrow");
-        if(hideTabs) {
-          hideTabs.click();
-        }
-        break;
-      }
-      default:
-        if ((e.keyCode >= 49 && e.keyCode <= 57) &&
-            Logic._currentPanel === "containersList") {
-          const identity = identities[e.keyCode - 49];
-          if (identity) {
-            openNewContainerTab(identity);
-          }
-        }
-        break;
-      }
-    });
   },
 
   unregister() {
-
   },
 
   // This method is called when the panel is shown.
@@ -633,7 +639,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
 
     Logic.identities().forEach(identity => {
       const tr = document.createElement("tr");
-      tr.classList.add("menu-item", "hover-highlight");
+      tr.classList.add("menu-item", "hover-highlight", "keyboard-nav");
       tr.setAttribute("tabindex", "0");
       const td = document.createElement("td");
       const openTabs = identity.numberOfOpenTabs || "" ;
@@ -666,22 +672,9 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
 
     list.innerHTML = "";
     list.appendChild(fragment);
-    /* Not sure why extensions require a focus for the doorhanger,
+
-       however it allows us to have a tabindex before the first selected item
+    document.addEventListener("keydown", Logic.keyboardNavListener);
-     */
+    document.addEventListener("keydown", Logic.shortcutListener);
-    // const focusHandler = () => {
-    //   const identityList = list.querySelector("tr .clickable");
-    //   if (identityList) {
-    //     // otherwise this throws an error when there are no containers present.
-    //     identityList.focus();
-    //     document.removeEventListener("focus", focusHandler);
-    //   }
-    // };
-    // document.addEventListener("focus", focusHandler);
-    // /* If the user mousedown's first then remove the focus handler */
-    // document.addEventListener("mousedown", () => {
-    //   document.removeEventListener("focus", focusHandler);
-    // });
     return Promise.resolve();
   },
 });
@@ -822,7 +815,7 @@ Logic.registerPanel(P_CONTAINER_INFO, {
     for (let tab of tabs) { // eslint-disable-line prefer-const
       const tr = document.createElement("tr");
       fragment.appendChild(tr);
-      tr.classList.add("menu-item", "hover-highlight");
+      tr.classList.add("menu-item", "hover-highlight", "keyboard-nav");
       tr.setAttribute("tabindex", "0");
       tr.innerHTML = Utils.escaped`
         <td>
@@ -883,7 +876,7 @@ Logic.registerPanel(OPEN_NEW_CONTAINER_PICKER, {
 
     Logic.identities().forEach(identity => {
       const tr = document.createElement("tr");
-      tr.classList.add("menu-item", "hover-highlight");
+      tr.classList.add("menu-item", "hover-highlight", "keyboard-nav");
       tr.setAttribute("tabindex", "0");
       const td = document.createElement("td");
 
@@ -942,7 +935,7 @@ Logic.registerPanel(MANAGE_CONTAINERS_PICKER, {
 
     document.getElementById("new-container-div").innerHTML = Utils.escaped`
       <table class="menu">
-        <tr class="menu-item hover-highlight" id="new-container" tabindex="0">
+        <tr class="menu-item hover-highlight keyboard-nav" id="new-container" tabindex="0">
           <td>
             <div class="menu-icon"><img alt="New Container" src="/img/new-16.svg" />
             </div>
@@ -959,7 +952,7 @@ Logic.registerPanel(MANAGE_CONTAINERS_PICKER, {
 
     Logic.identities().forEach(identity => {
       const tr = document.createElement("tr");
-      tr.classList.add("menu-item", "hover-highlight");
+      tr.classList.add("menu-item", "hover-highlight", "keyboard-nav");
       tr.setAttribute("tabindex", "0");
       const td = document.createElement("td");
 
@@ -1022,7 +1015,7 @@ Logic.registerPanel(REOPEN_IN_CONTAINER_PICKER, {
 
     if (currentTab.cookieStoreId !== "firefox-default") {
       const tr = document.createElement("tr");
-      tr.classList.add("menu-item", "hover-highlight");
+      tr.classList.add("menu-item", "hover-highlight", "keyboard-nav");
       const td = document.createElement("td");
 
       td.innerHTML = Utils.escaped`          
@@ -1051,7 +1044,7 @@ Logic.registerPanel(REOPEN_IN_CONTAINER_PICKER, {
     Logic.identities().forEach(identity => {
       if (currentTab.cookieStoreId !== identity.cookieStoreId) {
         const tr = document.createElement("tr");
-        tr.classList.add("menu-item", "hover-highlight");
+        tr.classList.add("menu-item", "hover-highlight", "keyboard-nav");
         tr.setAttribute("tabindex", "0");
         const td = document.createElement("td");
 
@@ -1103,7 +1096,7 @@ Logic.registerPanel(ALWAYS_OPEN_IN_PICKER, {
 
     Logic.identities().forEach(identity => {
       const tr = document.createElement("tr");
-      tr.classList.add("menu-item", "hover-highlight");
+      tr.classList.add("menu-item", "hover-highlight", "keyboard-nav");
       tr.setAttribute("tabindex", "0");
       const td = document.createElement("td");
 
@@ -1196,7 +1189,7 @@ Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, {
           delete assignments[siteKey];
           this.showAssignedContainers(assignments);
         });
-        trElement.classList.add("menu-item", "hover-highlight");
+        trElement.classList.add("menu-item", "hover-highlight", " keyboard-nav");
         tableElement.appendChild(trElement);
       });
     }

src/popup.html

@@ -13,7 +13,7 @@
     <p>
       Use containers to organize tasks, manage accounts, and keep your focus where you want it.
     </p>
-    <a href="#" class="onboarding-button onboarding-start-button" tabindex="0">Get Started</a>
+    <a href="#" class="onboarding-button onboarding-start-button keyboard-nav" tabindex="0">Get Started</a>
   </div>
 
   <div class="hide panel onboarding security-onboarding-panel-1">
@@ -22,49 +22,49 @@
     <p>
       Use containers to organize tasks, manage accounts, and store sensitive data.
     </p>
-    <a href="#" class="onboarding-button onboarding-start-button" tabindex="0">Get Started</a>
+    <a href="#" class="onboarding-button onboarding-start-button keyboard-nav" tabindex="0">Get Started</a>
   </div>
 
   <div class="panel onboarding onboarding-panel-2 hide">
     <img class="onboarding-img" alt="How Containers Work" src="/img/onboarding-2.png" />
     <h3 class="onboarding-title">Put containers to work for you.</h3>
     <p>Features like color-coding and separate container tabs help you find things easily, focus your attention, and minimize distractions.</p>
-    <a href="#" class="onboarding-button onboarding-next-button" tabindex="0">Next</a>
+    <a href="#" class="onboarding-button onboarding-next-button keyboard-nav" tabindex="0">Next</a>
   </div>
 
   <div class="panel onboarding security-onboarding-panel-2 hide">
     <img class="onboarding-img" alt="How Containers Work" src="/img/onboarding-2.png" />
     <h3 class="onboarding-title">Put containers to work for you.</h3>
     <p>Color-coding helps you categorize your online life, find things easily, and minimize distractions.</p>
-    <a href="#" class="onboarding-button onboarding-next-button" tabindex="0">Next</a>
+    <a href="#" class="onboarding-button onboarding-next-button keyboard-nav" tabindex="0">Next</a>
   </div>
 
   <div class="panel onboarding onboarding-panel-3 hide">
     <img class="onboarding-img" alt="How Containers Work" src="/img/onboarding-3.png" />
     <h3 class="onboarding-title">A place for everything, and everything in its place.</h3>
     <p>Start with the containers we've created, or create your own.</p>
-    <a href="#" class="onboarding-button onboarding-almost-done-button" tabindex="0">Next</a>
+    <a href="#" class="onboarding-button onboarding-almost-done-button keyboard-nav" tabindex="0">Next</a>
   </div>
 
   <div class="panel onboarding security-onboarding-panel-3 hide">
     <img class="onboarding-img" alt="How Containers Work" src="/img/onboarding-3-security.png" />
     <h3 class="onboarding-title">Set boundaries for your browsing.</h3>
     <p>Cookies are stored within a container, so you can segment sensitive data and browsing history to stay organized and to limit the impact of online trackers.</p>
-    <a href="#" class="onboarding-button onboarding-almost-done-button" tabindex="0">Next</a>
+    <a href="#" class="onboarding-button onboarding-almost-done-button keyboard-nav" tabindex="0">Next</a>
   </div>
 
   <div class="panel onboarding onboarding-panel-4 hide" id="onboarding-panel-4">
     <img class="onboarding-img" alt="How to assign sites to containers" src="/img/onboarding-4.png" />
     <h3 class="onboarding-title">Always open sites in the containers you want.</h3>
     <p>Right-click inside a container tab to assign the site to always open in the container.</p>
-    <a href="#" id="onboarding-done-button" class="onboarding-button" tabindex="0">Next</a>
+    <a href="#" id="onboarding-done-button" class="onboarding-button keyboard-nav" tabindex="0">Next</a>
   </div>
 
   <div class="panel onboarding onboarding-panel-5 hide" id="onboarding-panel-5">
     <img class="onboarding-img" alt="Long-press the New Tab button to create a new container tab." src="/img/onboarding-3.png" />
     <h3 class="onboarding-title">Container tabs when you need them.</h3>
     <p>Long-press the New Tab button to create a new container tab.</p>
-    <a href="#" id="onboarding-longpress-button" class="onboarding-button" tabindex="0">Next</a>
+    <a href="#" id="onboarding-longpress-button" class="onboarding-button keyboard-nav" tabindex="0">Next</a>
   </div>
 
   <div class="panel onboarding onboarding-panel-6 hide" id="onboarding-panel-6">
@@ -72,8 +72,8 @@
     <h3 class="onboarding-title">Syncing Containers is now Available!</h3>
     <p>Turn on Sync to share container and site assignments with any computer connected to your Firefox Account.</p>
     <div class="half-button-wrapper">
-      <a herf="#" id="no-sync" class="half-onboarding-button grey-button" tabindex="0">Not Now</a>
+      <a herf="#" id="no-sync" class="half-onboarding-button grey-button keyboard-nav" tabindex="0">Not Now</a>
-      <a href="#" id="start-sync-button" class="half-onboarding-button" tabindex="0">Start Syncing</a>
+      <a href="#" id="start-sync-button" class="half-onboarding-button keyboard-nav" tabindex="0">Start Syncing</a>
     </div>
   </div>
 
@@ -82,8 +82,8 @@
     <h3 class="onboarding-title">Firefox Account is required to sync.</h3>
     <p>Click Sign In to confirm that your Firefox Account is active.</p>
     <div class="half-button-wrapper">
-      <a herf="#" id="no-sign-in" class="half-onboarding-button grey-button" tabindex="0">Not Now</a>
+      <a herf="#" id="no-sign-in" class="half-onboarding-button grey-button keyboard-nav" tabindex="0">Not Now</a>
-      <a href="#" id="sign-in" class="half-onboarding-button" tabindex="0">Sign In</a>
+      <a href="#" id="sign-in" class="half-onboarding-button keyboard-nav" tabindex="0">Sign In</a>
     </div>
   </div>
 
@@ -112,7 +112,7 @@
         </span>
       </a>
     </p>
-    <a href="#" id="achievement-done-button" class="onboarding-button">Done</a>
+    <a href="#" id="achievement-done-button" class="onboarding-button keyboard-nav">Done</a>
   </div>
 
   <div class="panel menu-panel container-panel hide" id="container-panel">
@@ -124,7 +124,7 @@
     </a>
     <hr>
     <table class="menu">
-      <tr class="menu-item hover-highlight" id="open-new-tab-in" tabindex="0">
+      <tr class="menu-item hover-highlight keyboard-nav" id="open-new-tab-in" tabindex="0">
         <td>
           <img class="menu-icon" alt="Open in New Tab" src="/img/tab-new-16.svg" />
           <span class="menu-text">Open New Tab in...</span>
@@ -133,7 +133,7 @@
             </span>
         </td>
       </tr>
-      <tr class="menu-item hover-highlight" id="reopen-site-in" tabindex="0">
+      <tr class="menu-item hover-highlight keyboard-nav" id="reopen-site-in" tabindex="0">
         <td>
           <img class="menu-icon" alt="Open in New Tab" src="/img/refresh-16.svg" />
           <span class="menu-text">Reopen This Site in...</span>
@@ -145,7 +145,7 @@
     </table>
     <hr>
     <table class="menu">
-      <tr class="menu-item hover-highlight" id="sort-containers-link" tabindex="0">
+      <tr class="menu-item hover-highlight keyboard-nav" id="sort-containers-link" tabindex="0">
         <td>
           <img class="menu-icon" alt="Open in New Tab" src="/img/sort-16_1.svg" />
           <span class="menu-text">Sort Tabs by Container</span>
@@ -153,7 +153,7 @@
             </span>
         </td>
       </tr>
-      <tr class="menu-item hover-highlight" id="always-open-in" tabindex="0">
+      <tr class="menu-item hover-highlight keyboard-nav" id="always-open-in" tabindex="0">
         <td>
           <img class="menu-icon" alt="Open in New Tab" src="/img/container-openin-16.svg" />
           <span class="menu-text">Always Open This Site in...</span>
@@ -188,7 +188,7 @@
         </tr>
       </table>
     </div>
-    <div class="bottom-btn" id="manage-containers-link" tabindex="0">
+    <div class="bottom-btn keyboard-nav hover-highlight" id="manage-containers-link" tabindex="0">
       Manage Containers
     </div> 
   </div>
@@ -198,10 +198,10 @@
     <h3 class="title" id="container-info-title">
       Personal
     </h3>
-    <button class="btn-return arrow-left" id="close-container-info-panel" tabindex="0"></button>
+    <button class="btn-return arrow-left keyboard-nav-back" id="close-container-info-panel" tabindex="0"></button>
     <hr>
     <table class="menu">
-      <tr class="menu-item hover-highlight" id="open-new-tab-in-info" tabindex="0">
+      <tr class="menu-item hover-highlight keyboard-nav" id="open-new-tab-in-info" tabindex="0">
         <td>
           <img class="menu-icon" alt="Open in New Tab" src="/img/tab-new-16.svg" />
           <span class="menu-text">Open New Tab in this Container</span>
@@ -209,7 +209,7 @@
             </span>
         </td>
       </tr>
-      <tr class="menu-item hover-highlight" id="hideorshow-container" tabindex="0">
+      <tr class="menu-item hover-highlight keyboard-nav" id="hideorshow-container" tabindex="0">
         <td>
           <img id="container-info-hideorshow-icon" class="menu-icon" alt="Hide This Container" src="img/password-hide.svg" />
           <span id="container-info-hideorshow-label" class="menu-text">Hide This Container</span>
@@ -217,7 +217,7 @@
             </span>
         </td>
       </tr>
-      <tr class="menu-item hover-highlight" id="move-to-new-window" tabindex="0">
+      <tr class="menu-item hover-highlight keyboard-nav" id="move-to-new-window" tabindex="0">
         <td>
           <img class="menu-icon" alt="Move Tabs to a New Window" src="/img/movetowindow-16.svg" />
           <span class="menu-text">Move Tabs to a New Window</span>
@@ -225,7 +225,7 @@
             </span>
         </td>
       </tr>
-      <tr class="menu-item hover-highlight hover-highlight" id="always-open" tabindex="0">
+      <tr class="menu-item hover-highlight keyboard-nav" id="always-open" tabindex="0">
         <td>
           <img class="menu-icon" alt="Always Open Site in Container" src="/img/container-openin-16.svg" />
           <span class="menu-text" id="always-open-in-info-panel">Always Open Site in Container</span>
@@ -240,7 +240,7 @@
     </div>
     <div class="scrollable">
       <table class="menu" id="container-info-table">
-        <tr class="menu-item hover-highlight" tabindex="0">
+        <tr class="menu-item hover-highlight keyboard-nav" tabindex="0">
           <td>
             <div class="favicon"><img class="menu-icon" src="https://www.mozilla.org/favicon.ico" /></div>
             <span class="menu-text truncate-text">www.mozillllllllllllllllllllllllllllllllllllla.org</span>
@@ -249,7 +249,7 @@
         </tr>       
       </table>
     </div>
-    <div class="bottom-btn" id="manage-container-link">
+    <div class="bottom-btn keyboard-nav hover-highlight" id="manage-container-link" tabindex="0">
       Manage This Container
     </div>
   </div>
@@ -259,12 +259,12 @@
     <h3 class="title" id="picker-title">
       Multi-Account Containers
     </h3>
-    <button class="btn-return arrow-left" id="close-container-picker-panel" tabindex="0"></button>
+    <button class="btn-return arrow-left keyboard-nav-back" id="close-container-picker-panel" tabindex="0"></button>
     <hr>
     <div id="new-container-div"></div>
     <div class="scrollable identities-list">
       <table class="menu" id="picker-identities-list">
-        <tr class="menu-item hover-highlight">
+        <tr class="menu-item hover-highlight keyboard-nav">
           <td>
             <div class="menu-icon">
               <div class="usercontext-icon"
@@ -305,7 +305,7 @@
           <input type="checkbox" class="site-isolation" id="site-isolation" name="site-isolation">
           <label for="site-isolation" class="options-label">Limit to Designated Sites</label>
         </div>
-        <div class="container-options options-label manage-assigned-sites-list" id="manage-assigned-sites-list">Manage Site List...
+        <div class="container-options options-label manage-assigned-sites-list" id="manage-assigned-sites-list" tabindex="0">Manage Site List...
         </div>
       </div>
     </div>