Convert menus to disclosure pattern

app/assets/javascripts/menu.js

@@ -2,73 +2,179 @@
   "use strict";
 
   const registerKeyDownEscape = window.utils.registerKeyDownEscape;
+  const registerKeyBasedMenuNavigation =
+    window.utils.registerKeyBasedMenuNavigation;
+  const registerDisclosureMenuBlur = window.utils.registerDisclosureMenuBlur;
 
   function open($menu, $items) {
     // show menu if closed
-    if (!this.hasFocus) {
-      $items.toggleClass("hidden", false);
-      $items.removeAttr("hidden");
-      const $arrow = $menu.find(".arrow");
-      if ($arrow.length > 0) {
-        $arrow.toggleClass("flip", true);
-      }
+    $items.toggleClass("hidden", false);
+    $items.removeAttr("hidden");
+    const $arrow = $menu.find(".arrow");
+    if ($arrow.length > 0) {
+      $arrow.toggleClass("flip", true);
+    }
 
-      $menu.attr("aria-expanded", true);
-      this.hasFocus = true;
+    $menu.attr("aria-expanded", true);
+    $menu.isExpanded = true;
+    $items.children()[0].querySelector("a").focus();
 
-      window.setTimeout(function () {
-        $items.removeClass("opacity-0");
-        $items.addClass("opacity-100");
-      }, 1);
-    }
+    window.setTimeout(function () {
+      $items.removeClass("opacity-0");
+      $items.addClass("opacity-100");
+    }, 1);
   }
 
   function close($menu, $items) {
-    // hide menu if open
-    if (this.hasFocus) {
-      $items.toggleClass("hidden", true);
-      $items.removeClass("opacity-100");
-      $items.addClass("opacity-0");
-      const $arrow = $menu.find(".arrow");
-      if ($arrow.length > 0) {
-        $arrow.toggleClass("flip", false);
-      }
+    $items.toggleClass("hidden", true);
+    $items.removeClass("opacity-100");
+    $items.addClass("opacity-0");
+    const $arrow = $menu.find(".arrow");
+    if ($arrow.length > 0) {
+      $arrow.toggleClass("flip", false);
+    }
 
-      $menu.attr("aria-expanded", false);
-      this.hasFocus = false;
+    $menu.attr("aria-expanded", false);
+    $menu.isExpanded = false;
+    $menu.focus();
 
-      window.setTimeout(function () {
-        $items.toggleClass("hidden", true);
-        $items.attr("hidden");
-      }, 1);
-    }
+    window.setTimeout(function () {
+      $items.toggleClass("hidden", true);
+      $items.attr("hidden");
+    }, 1);
   }
 
+  /**
+   * Toggles the aria-expanded state of the menu to show/hide the disclosure menu's items.
+   * Before opening a menu, it checks for any other menus that may be open and closes them
+   *
+   * @param {jQuery} $menu The menu button that controls the disclosure menu items container
+   * @param {jQuery} $items The unordered list containing menu items
+   */
   function toggleMenu($menu, $items) {
-    // Show the menu..
-    if (!this.hasFocus) {
+    // Get all the menus on the page that are open excluding the currently open menu and close them
+    const openMenus = Array.from(
+      document.querySelectorAll("button[data-module='menu']"),
+    ).filter(
+      (menu) =>
+        menu.getAttribute("aria-expanded") == "true" && menu !== $menu[0],
+    );
+    openMenus.forEach((menu) => {
+      close(
+        $(menu),
+        $(
+          document.querySelectorAll(
+            `ul[id=${$(menu).attr("data-menu-items")}]`,
+          ),
+        ),
+      );
+    });
+
+    // We're using aria-expanded to determine the open/close state of the menu.
+    // The menu object's state does not get updated in time to use $menu.isExpanded
+    // Open the menu if it's closed.
+    if ($menu.attr("aria-expanded") === "false") {
       open($menu, $items);
     }
-    // Hide the menu..
-    else {
+    // Hide the menu if it's open
+    else if ($menu.attr("aria-expanded") === "true") {
       close($menu, $items);
     }
   }
 
+  /**
+   * Handles closing any open menus when the user clicks outside of the menu with their mouse.
+   *
+   * @param {FocusEvent} event The focus event
+   * @param {jQuery} $menu The menu button that controls the disclosure menu items container
+   * @param {jQuery} $items The unordered list containing menu items
+   */
+  function handleMenuBlur(event, $menu, $items) {
+    if (event.relatedTarget === null) {
+      close($menu, $items);
+    }
+  }
+
+  /**
+   * Handles the keydown event for the $menu so the user can navigate the menu items via the keyboard.
+   * This function supports the following key presses:
+   * - Home/End to navigate to the first and last items in the menu
+   * - Up/Left/Shift + Tab to navigate to the previous item in the menu
+   * - Down/Right/Tab to navigate to the next item in the menu
+   * - Meta + (Left/Right OR Up/Down) to navigate to the first/last items in the menu
+   *
+   * @param {KeyboardEvent} event The keydown event object
+   * @param {jQuery Object} $menu The menu button that controls the disclosure menu items container
+   * @param {jQuery Object} $items The unordered list containing menu items
+   */
+  function handleKeyBasedMenuNavigation(event, $menu, $items) {
+    var menuItems = $items.children();
+
+    if ($menu.attr("aria-expanded") == "true") {
+      // Support for Home/End on Windows and Linux + Cmd + Arrows for Mac
+      if (event.key == "Home" || (event.metaKey && event.key == "ArrowLeft")) {
+        event.preventDefault();
+        $menu.selectedMenuItem = 0;
+      } else if (
+        event.key == "End" ||
+        (event.metaKey && event.key == "ArrowRight")
+      ) {
+        event.preventDefault();
+        $menu.selectedMenuItem = menuItems.length - 1;
+      } else if (
+        event.key === "ArrowUp" ||
+        event.key === "ArrowLeft" ||
+        (event.shiftKey && event.key === "Tab")
+      ) {
+        event.preventDefault();
+        $menu.selectedMenuItem =
+          $menu.selectedMenuItem == 0
+            ? menuItems.length - 1
+            : Math.max(0, $menu.selectedMenuItem - 1);
+      } else if (
+        event.key === "ArrowDown" ||
+        event.key === "ArrowRight" ||
+        event.key === "Tab"
+      ) {
+        event.preventDefault();
+        $menu.selectedMenuItem =
+          $menu.selectedMenuItem == menuItems.length - 1
+            ? 0
+            : Math.min(menuItems.length - 1, $menu.selectedMenuItem + 1);
+      }
+    }
+
+    // Once we've determined the new selected menu item, we need to focus on it
+    $($items.children()[$menu.selectedMenuItem]).find("a").focus();
+  }
+
   function init($menu) {
     const itemsId = "#" + $menu.attr("data-menu-items");
     const $items = $(itemsId);
-    this.hasFocus = false;
+    $menu.isExpanded = false;
+    $menu.selectedMenuItem = 0;
 
     // Click toggler
     $menu.click(() => toggleMenu($menu, $items));
 
-    // Register Escape key from anywhere in the window to close the menu
+    // Bind Keypress events to the window so the user can use the arrow/home/end keys to navigate the drop down menu
+    registerKeyBasedMenuNavigation($(window), (event) =>
+      handleKeyBasedMenuNavigation(event, $menu, $items),
+    );
+
+    // Bind blur events to each menu button and it's anchor link items.
+    registerDisclosureMenuBlur(
+      [...$items.children().find("a"), ...$menu, window],
+      (event) => handleMenuBlur(event, $menu, $items),
+    );
+
+    // Bind a Keydown event to the window so the user can use the Escape key from anywhere in the window to close the menu
     registerKeyDownEscape($(window), () => close($menu, $items));
   }
 
   Modules.Menu = function () {
-    this.hasFocus;
+    this.isExpanded;
+    this.selectedMenuItem;
 
     this.start = function (component) {
       let $component = $(component);

app/assets/javascripts/utils.js

@@ -16,6 +16,21 @@
     });
   }
 
+  function registerKeyBasedMenuNavigation($selector, fn) {
+    $selector.keydown(function (e) {
+      var menuVisible = !!$selector.not(":hidden");
+      if (menuVisible) fn(e);
+    });
+  }
+
+  function registerDisclosureMenuBlur($selectors, fn) {
+    $selectors.forEach((selector) => {
+      selector.addEventListener("blur", function (e) {
+        fn(e);
+      });
+    });
+  }
+
   /**
    * Make branding links automatically go back to the previous page without keeping track of them
    */
@@ -28,5 +43,7 @@
 
   global.utils = {
     registerKeyDownEscape: registerKeyDownEscape,
+    registerKeyBasedMenuNavigation: registerKeyBasedMenuNavigation,
+    registerDisclosureMenuBlur: registerDisclosureMenuBlur,
   };
 })(window);

app/assets/stylesheets/tailwind/components/menu.css

@@ -0,0 +1,11 @@
+@layer components {
+  /*! purgecss start ignore */
+  .mobile-menu-container {
+    width: 20ch;
+    @apply text-left max-w-full;
+  }
+
+  .mt-3_4 {
+    margin-top: 3.3rem;
+  }
+}

app/assets/stylesheets/tailwind/style.css

@@ -41,6 +41,7 @@
 @import "./components/remaining-messages.css";
 @import "./components/empty-list.css";
 @import "./components/autocomplete.css";
+@import "./components/menu.css";
 
 /* views */
 @import "./views/dashboard.css";
@@ -132,6 +133,7 @@ section[id]:target {
       0 0 0 15px var(--white),
       0 0 0 20px var(--yellow);
   }
+
   100% {
     box-shadow:
       0 0 0 15px var(--white),
@@ -231,16 +233,19 @@ label {
   height: 1px;
   width: 1px;
   overflow: hidden;
-  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+  clip: rect(1px 1px 1px 1px);
+  /* IE6, IE7 */
   clip: rect(1px, 1px, 1px, 1px);
-  white-space: nowrap; /* added line */
+  white-space: nowrap;
+  /* added line */
 }
 
 .border-box {
   font-size: 0.9em;
   border: 1px solid #000;
   @apply p-8 mb-8;
 }
+
 .border-box strong {
   @apply font-bold;
 }
@@ -288,6 +293,7 @@ label {
     margin: -1px;
     @apply absolute overflow-hidden border-0 p-0;
   }
+
   .research-mode {
     @apply font-bold inline-block bg-blue text-white py-2 px-4 rounded;
   }
@@ -305,7 +311,8 @@ label {
   }
 
   .loading-indicator:after {
-    content: "\2026"; /* ellipsis */
+    content: "\2026";
+    /* ellipsis */
     @apply overflow-hidden inline-block align-bottom animate-ellipsis w-0;
   }
 
@@ -317,6 +324,7 @@ label {
   .highlight {
     @apply font-monospace overflow-x-scroll p-4 pr-0;
   }
+
   @screen md {
     .inline.block-label {
       @apply inline-block float-none;
@@ -336,6 +344,7 @@ label {
     outline: 2px solid #000;
     @apply p-2 max-w-full;
   }
+
   @screen smaller {
     #global-header .header-proposition #proposition-links li {
       width: 95%;
@@ -362,4 +371,5 @@ label {
 .overflow-anywhere {
   overflow-wrap: anywhere;
 }
+
 /*! purgecss end ignore */