From 24d8825c8c5860d5bf99c7cd68f42d0ccc8e3568 Mon Sep 17 00:00:00 2001
From: Dr Tracy Gardner <tracygardner@users.noreply.github.com>
Date: Sat, 21 Mar 2026 17:51:06 +0000
Subject: [PATCH 1/9] Fix Escape handling for menu modal

---
 index.html   |   6 +-
 main/menu.js | 577 +++++++++++++++++++++++++++------------------------
 2 files changed, 311 insertions(+), 272 deletions(-)

diff --git a/index.html b/index.html
index 05a37c21..7143fa53 100644
--- a/index.html
+++ b/index.html
@@ -635,12 +635,14 @@ <h1 class="sr-only">FlockXR</h1>
               aria-modal="true"
             >
               <div class="modal-content" tabindex="-1">
-                <span
+                <button
+                  type="button"
                   class="close-button"
                   id="closeInfoModal"
                   aria-label="Close information modal"
-                  >&times;</span
                 >
+                  &times;
+                </button>
                 <h2 id="modal-title" data-i18n="about_heading">
                   About Flock XR
                 </h2>
diff --git a/main/menu.js b/main/menu.js
index e831b72b..838b4f73 100644
--- a/main/menu.js
+++ b/main/menu.js
@@ -6,342 +6,379 @@ const infoModal = document.getElementById("infoModal");
 const closeInfoModal = document.getElementById("closeInfoModal");
 let previouslyFocused = null;
 
+function openInfoModal() {
+  previouslyFocused = document.activeElement;
+  infoModal.classList.remove("hidden");
+  infoModal.setAttribute("aria-hidden", "false");
+  infoModal.setAttribute("aria-modal", "true");
+
+  setTimeout(() => {
+    closeInfoModal.focus();
+  }, 0);
+}
 
-class AccessibleFlyoutMenu {
-    constructor() {
-        this.menuButton = document.getElementById('menuBtn');
-        this.menuDropdown = document.getElementById('menuDropdown');
-        this.menuItems = this.menuDropdown.querySelectorAll('.menu-item');
-        this.isMenuOpen = false;
-        this.currentFocus = -1;
-        this.currentOpenSubmenu = null;
-
-        this.init();
-    }
-
-    init() {
-        // Main menu button events
-        this.menuButton.addEventListener('click', (e) => {
-            e.preventDefault();
-            this.toggleMainMenu();
-        });
+function hideInfoModal() {
+  infoModal.classList.add("hidden");
+  infoModal.setAttribute("aria-hidden", "true");
+  infoModal.removeAttribute("aria-modal");
 
-        this.menuButton.addEventListener('keydown', (e) => {
-            if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault();
-                this.openMainMenu();
-                this.focusFirstMenuItem();
-            }
-        });
+  if (previouslyFocused) {
+    previouslyFocused.focus();
+    previouslyFocused = null;
+  }
+}
 
-        // Menu item events
-        this.menuItems.forEach((item, index) => {
-            // Mouse events (preserve existing functionality)
-            item.addEventListener('mouseenter', () => {
-                this.handleMouseEnter(item);
-            });
-
-            item.addEventListener('mouseleave', () => {
-                this.handleMouseLeave(item);
-            });
-
-            // Keyboard events
-            item.addEventListener('keydown', (e) => {
-                this.handleMenuItemKeydown(e, item, index);
-            });
-
-            item.addEventListener('click', (e) => {
-                this.handleMenuItemClick(e, item);
-            });
-
-            // Submenu events
-            const submenu = item.querySelector('.submenu');
-            if (submenu) {
-                const submenuItems = submenu.querySelectorAll('a');
-                submenuItems.forEach((subItem, subIndex) => {
-                    subItem.addEventListener('keydown', (e) => {
-                        this.handleSubmenuKeydown(e, subItem, submenuItems, subIndex, item);
-                    });
-
-                    subItem.addEventListener('click', (e) => {  
-                        e.stopPropagation();                      
-                        this.closeAllMenus();
-                    });
-                });
-            }
+class AccessibleFlyoutMenu {
+  constructor() {
+    this.menuButton = document.getElementById("menuBtn");
+    this.menuDropdown = document.getElementById("menuDropdown");
+    this.menuItems = this.menuDropdown.querySelectorAll(".menu-item");
+    this.isMenuOpen = false;
+    this.currentFocus = -1;
+    this.currentOpenSubmenu = null;
+
+    this.init();
+  }
+
+  init() {
+    // Main menu button events
+    this.menuButton.addEventListener("click", (e) => {
+      e.preventDefault();
+      this.toggleMainMenu();
+    });
+
+    this.menuButton.addEventListener("keydown", (e) => {
+      if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        this.openMainMenu();
+        this.focusFirstMenuItem();
+      }
+    });
+
+    // Menu item events
+    this.menuItems.forEach((item, index) => {
+      // Mouse events (preserve existing functionality)
+      item.addEventListener("mouseenter", () => {
+        this.handleMouseEnter(item);
+      });
+
+      item.addEventListener("mouseleave", () => {
+        this.handleMouseLeave(item);
+      });
+
+      // Keyboard events
+      item.addEventListener("keydown", (e) => {
+        this.handleMenuItemKeydown(e, item, index);
+      });
+
+      item.addEventListener("click", (e) => {
+        this.handleMenuItemClick(e, item);
+      });
+
+      // Submenu events
+      const submenu = item.querySelector(".submenu");
+      if (submenu) {
+        const submenuItems = submenu.querySelectorAll("a");
+        submenuItems.forEach((subItem, subIndex) => {
+          subItem.addEventListener("keydown", (e) => {
+            this.handleSubmenuKeydown(e, subItem, submenuItems, subIndex, item);
+          });
+
+          subItem.addEventListener("click", (e) => {
+            e.stopPropagation();
+            this.closeAllMenus();
+          });
         });
+      }
+    });
+
+    // Close menu when clicking outside
+    document.addEventListener("click", (e) => {
+      if (
+        !this.menuButton.contains(e.target) &&
+        !this.menuDropdown.contains(e.target)
+      ) {
+        this.closeAllMenus();
+      }
+    });
+
+    // Close menu on Escape
+    window.addEventListener(
+      "keydown",
+      (e) => {
+        if (e.key !== "Escape") {
+          return;
+        }
 
-        // Close menu when clicking outside
-        document.addEventListener('click', (e) => {
-            if (!this.menuButton.contains(e.target) && !this.menuDropdown.contains(e.target)) {
-                this.closeAllMenus();
-            }
-        });
+        let handled = false;
 
-        // Close menu on Escape
-        window.addEventListener('keydown', (e) => {                      
-            if (e.key === 'Escape' && this.isMenuOpen) {                            
-                this.closeAllMenus();
-                this.menuButton.focus();                
-            }
-        }, true); // Fire before blockly handles escape
-    }
+        if (!infoModal.classList.contains("hidden")) {
+          hideInfoModal();
+          handled = true;
+        }
 
-    toggleMainMenu() {
         if (this.isMenuOpen) {
-            this.closeAllMenus();
-        } else {
-            this.openMainMenu();
+          this.closeAllMenus();
+          this.menuButton.focus();
+          handled = true;
         }
-    }
 
-    openMainMenu() {
-        this.isMenuOpen = true;
-        this.menuDropdown.classList.remove('hidden');
-        this.menuButton.setAttribute('aria-expanded', 'true');
-        this.currentFocus = -1;
+        if (handled) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      },
+      true,
+    ); // Fire before blockly handles escape
+  }
+
+  toggleMainMenu() {
+    if (this.isMenuOpen) {
+      this.closeAllMenus();
+    } else {
+      this.openMainMenu();
     }
-
-    closeAllMenus() {
-        this.isMenuOpen = false;
-        this.menuDropdown.classList.add('hidden');
-        this.menuButton.setAttribute('aria-expanded', 'false');
-        this.closeAllSubmenus();
-        this.currentFocus = -1;
+  }
+
+  openMainMenu() {
+    this.isMenuOpen = true;
+    this.menuDropdown.classList.remove("hidden");
+    this.menuButton.setAttribute("aria-expanded", "true");
+    this.currentFocus = -1;
+  }
+
+  closeAllMenus() {
+    this.isMenuOpen = false;
+    this.menuDropdown.classList.add("hidden");
+    this.menuButton.setAttribute("aria-expanded", "false");
+    this.closeAllSubmenus();
+    this.currentFocus = -1;
+  }
+
+  closeAllSubmenus() {
+    this.menuItems.forEach((item) => {
+      const submenu = item.querySelector(".submenu");
+      if (submenu) {
+        submenu.hidden = true;
+        item.setAttribute("aria-expanded", "false");
+      }
+    });
+    this.currentOpenSubmenu = null;
+  }
+
+  focusFirstMenuItem() {
+    this.currentFocus = 0;
+    this.menuItems[0].focus();
+  }
+
+  focusMenuItem(index) {
+    if (index >= 0 && index < this.menuItems.length) {
+      this.currentFocus = index;
+      this.menuItems[index].focus();
     }
-
-    closeAllSubmenus() {
-        this.menuItems.forEach(item => {
-            const submenu = item.querySelector('.submenu');
-            if (submenu) {
-                submenu.hidden = true;
-                item.setAttribute('aria-expanded', 'false');
-            }
+  }
+
+  handleMouseEnter(item) {
+    // Close other submenus
+    this.closeAllSubmenus();
+
+    // Open this submenu if it has one
+    const submenu = item.querySelector(".submenu");
+    if (submenu) {
+      submenu.hidden = false;
+      item.setAttribute("aria-expanded", "true");
+      this.currentOpenSubmenu = item;
+    }
+  }
+
+  handleMouseLeave() {
+    // Keep submenu open for keyboard navigation
+    // Only close on mouse leave from the entire menu area
+  }
+
+  handleMenuItemClick(e, item) {
+    const submenu = item.querySelector(".submenu");
+    if (submenu) {
+      e.preventDefault();
+      this.toggleSubmenu(item);
+    } else {
+      // For leaf menu items (like "About"), trigger the actual click event
+      // This will fire any existing click handlers you have attached
+      if (e.type === "keydown") {
+        // If this was triggered by keyboard, create a synthetic click event
+        const clickEvent = new MouseEvent("click", {
+          bubbles: true,
+          cancelable: true,
         });
-        this.currentOpenSubmenu = null;
+        item.dispatchEvent(clickEvent);
+      }
+      this.closeAllMenus();
     }
+  }
 
-    focusFirstMenuItem() {
-        this.currentFocus = 0;
-        this.menuItems[0].focus();
-    }
+  toggleSubmenu(item) {
+    const submenu = item.querySelector(".submenu");
+    const isOpen = !submenu.hidden;
 
-    focusMenuItem(index) {
-        if (index >= 0 && index < this.menuItems.length) {
-            this.currentFocus = index;
-            this.menuItems[index].focus();
-        }
+    this.closeAllSubmenus();
+
+    if (!isOpen) {
+      submenu.hidden = false;
+      item.setAttribute("aria-expanded", "true");
+      this.currentOpenSubmenu = item;
     }
+  }
 
-    handleMouseEnter(item) {
-        // Close other submenus
-        this.closeAllSubmenus();
+  handleMenuItemKeydown(e, item, index) {
+    const submenu = item.querySelector(".submenu");
 
-        // Open this submenu if it has one
-        const submenu = item.querySelector('.submenu');
-        if (submenu) {
-            submenu.hidden = false;
-            item.setAttribute('aria-expanded', 'true');
-            this.currentOpenSubmenu = item;
-        }
-    }
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        this.focusMenuItem((index + 1) % this.menuItems.length);
+        break;
 
-    handleMouseLeave(item) {
-        // Keep submenu open for keyboard navigation
-        // Only close on mouse leave from the entire menu area
-    }
+      case "ArrowUp":
+        e.preventDefault();
+        this.focusMenuItem(index === 0 ? this.menuItems.length - 1 : index - 1);
+        break;
 
-    handleMenuItemClick(e, item) {
-        const submenu = item.querySelector('.submenu');
+      case "ArrowRight":
         if (submenu) {
-            e.preventDefault();
-            this.toggleSubmenu(item);
-        } else {
-            // For leaf menu items (like "About"), trigger the actual click event
-            // This will fire any existing click handlers you have attached
-            if (e.type === 'keydown') {
-                // If this was triggered by keyboard, create a synthetic click event
-                const clickEvent = new MouseEvent('click', {
-                    bubbles: true,
-                    cancelable: true
-                });
-                item.dispatchEvent(clickEvent);
-            }
-            this.closeAllMenus();
+          e.preventDefault();
+          this.showSubmenu(item);
+          const firstSubmenuItem = submenu.querySelector("a");
+          if (firstSubmenuItem) {
+            firstSubmenuItem.focus();
+          }
         }
-    }
-
-    toggleSubmenu(item) {
-        const submenu = item.querySelector('.submenu');
-        const isOpen = !submenu.hidden;
+        break;
 
-        this.closeAllSubmenus();
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        this.handleMenuItemClick(e, item);
+        break;
 
-        if (!isOpen) {
-            submenu.hidden = false;
-            item.setAttribute('aria-expanded', 'true');
-            this.currentOpenSubmenu = item;
-        }
+      case "Escape":
+        this.closeAllMenus();
+        this.menuButton.focus();
+        break;
     }
-
-    handleMenuItemKeydown(e, item, index) {
-        const submenu = item.querySelector('.submenu');
-
-        switch (e.key) {
-            case 'ArrowDown':
-                e.preventDefault();
-                this.focusMenuItem((index + 1) % this.menuItems.length);
-                break;
-
-            case 'ArrowUp':
-                e.preventDefault();
-                this.focusMenuItem(index === 0 ? this.menuItems.length - 1 : index - 1);
-                break;
-
-            case 'ArrowRight':
-                if (submenu) {
-                    e.preventDefault();
-                    this.showSubmenu(item);
-                    const firstSubmenuItem = submenu.querySelector('a');
-                    if (firstSubmenuItem) {
-                        firstSubmenuItem.focus();
-                    }
-                }
-                break;
-
-            case 'Enter':
-            case ' ':
-                e.preventDefault();
-                this.handleMenuItemClick(e, item);
-                break;
-
-            case 'Escape':
-                this.closeAllMenus();
-                this.menuButton.focus();
-                break;
-        }
+  }
+
+  showSubmenu(item) {
+    this.closeAllSubmenus();
+    const submenu = item.querySelector(".submenu");
+    if (submenu) {
+      submenu.hidden = false;
+      item.setAttribute("aria-expanded", "true");
+      this.currentOpenSubmenu = item;
     }
+  }
 
-    showSubmenu(item) {
-        this.closeAllSubmenus();
-        const submenu = item.querySelector('.submenu');
+  handleSubmenuKeydown(e, subItem, submenuItems, subIndex, parentItem) {
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault();
+        e.stopPropagation();
+        const nextIndex = (subIndex + 1) % submenuItems.length;
+        submenuItems[nextIndex].focus();
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        e.stopPropagation();
+        const prevIndex =
+          subIndex === 0 ? submenuItems.length - 1 : subIndex - 1;
+        submenuItems[prevIndex].focus();
+        break;
+      }
+      case "ArrowLeft": {
+        e.preventDefault();
+        e.stopPropagation();
+        parentItem.focus();
+        const submenu = parentItem.querySelector(".submenu");
         if (submenu) {
-            submenu.hidden = false;
-            item.setAttribute('aria-expanded', 'true');
-            this.currentOpenSubmenu = item;
+          submenu.hidden = true;
+          parentItem.setAttribute("aria-expanded", "false");
         }
-    }
+        break;
+      }
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        e.stopPropagation();
+        subItem.click();
+        break;
 
-    handleSubmenuKeydown(e, subItem, submenuItems, subIndex, parentItem) {
-        switch (e.key) {
-            case 'ArrowDown': {
-                e.preventDefault();
-                e.stopPropagation();
-                const nextIndex = (subIndex + 1) % submenuItems.length;
-                submenuItems[nextIndex].focus();
-                break;
-            }
-            case 'ArrowUp': {
-                e.preventDefault();
-                e.stopPropagation();
-                const prevIndex = subIndex === 0 ? submenuItems.length - 1 : subIndex - 1;
-                submenuItems[prevIndex].focus();
-                break;
-            }
-            case 'ArrowLeft': {
-                e.preventDefault();
-                e.stopPropagation();
-                parentItem.focus();
-                const submenu = parentItem.querySelector('.submenu');
-                if (submenu) {
-                    submenu.hidden = true;
-                    parentItem.setAttribute('aria-expanded', 'false');
-                }
-                break;
-            }
-            case 'Enter':
-            case ' ':
-                e.preventDefault();
-                e.stopPropagation();
-                subItem.click();
-                break;
-
-            case 'Escape':
-                e.preventDefault();
-                e.stopPropagation();
-                this.closeAllMenus();
-                this.menuButton.focus();
-                break;
-        }
+      case "Escape":
+        e.preventDefault();
+        e.stopPropagation();
+        this.closeAllMenus();
+        this.menuButton.focus();
+        break;
     }
+  }
 }
 
 // Initialize the menu when DOM is loaded
 let menuFlyout;
-document.addEventListener('DOMContentLoaded', () => {
-    menuFlyout = new AccessibleFlyoutMenu();
+document.addEventListener("DOMContentLoaded", () => {
+  menuFlyout = new AccessibleFlyoutMenu();
 });
 
 hubMenuItem.addEventListener("click", (e) => {
-    e.preventDefault();
-    window.open("https://hub.flockxr.com/", "_blank", "noopener,noreferrer");
-    menuFlyout.closeAllMenus();
+  e.preventDefault();
+  window.open("https://hub.flockxr.com/", "_blank", "noopener,noreferrer");
+  menuFlyout.closeAllMenus();
 });
 
 // Language menu interactions are now handled in main/translation.js
 
 // Open modal when About is clicked
 openAbout.addEventListener("click", (e) => {
-    e.preventDefault();
-    previouslyFocused = document.activeElement;
-    infoModal.classList.remove("hidden");
-    menuDropdown.classList.add("hidden");
-    menuBtn.setAttribute("aria-expanded", "false");
-
-    // Focus the close button in the modal
-    setTimeout(() => closeInfoModal.focus(), 0);
+  e.preventDefault();
+  menuFlyout?.closeAllMenus();
+  openInfoModal();
 });
 
 // Close modal on close button
 closeInfoModal.addEventListener("click", () => {
-    infoModal.classList.add("hidden");
-    if (previouslyFocused) {
-    previouslyFocused.focus();
-    previouslyFocused = null;
-    }
+  hideInfoModal();
 });
 
 // Handle keyboard events for modal
 infoModal.addEventListener("keydown", (e) => {
-    if (e.key === "Escape") {
+  if (e.key === "Escape") {
     e.preventDefault();
-    closeInfoModal.click();
-    } else if (e.key === "Tab") {
+    e.stopPropagation();
+    hideInfoModal();
+  } else if (e.key === "Tab") {
     // Trap focus within modal
     const focusableElements = infoModal.querySelectorAll(
-        'button, input, select, textarea, [href], [tabindex]:not([tabindex="-1"])'
+      'button, input, select, textarea, [href], [tabindex]:not([tabindex="-1"])',
     );
     const firstElement = focusableElements[0];
     const lastElement = focusableElements[focusableElements.length - 1];
 
     if (e.shiftKey && document.activeElement === firstElement) {
-        e.preventDefault();
-        lastElement.focus();
+      e.preventDefault();
+      lastElement.focus();
     } else if (!e.shiftKey && document.activeElement === lastElement) {
-        e.preventDefault();
-        firstElement.focus();
-    }
+      e.preventDefault();
+      firstElement.focus();
     }
+  }
 });
 
 // Close menu when clicking outside
 window.addEventListener("click", (e) => {
-    if (!menuBtn.contains(e.target) && !menuDropdown.contains(e.target)) {
-        menuFlyout.closeAllMenus();
-    }
+  if (!menuBtn.contains(e.target) && !menuDropdown.contains(e.target)) {
+    menuFlyout.closeAllMenus();
+  }
 
-    if (e.target === infoModal) {
-        closeInfoModal.click();
-    }
+  if (e.target === infoModal) {
+    hideInfoModal();
+  }
 });
-

From ae71e90d624987b443b6f4ab4e9f0ee58ad5f09c Mon Sep 17 00:00:00 2001
From: Dr Tracy Gardner <tracygardner@users.noreply.github.com>
Date: Sat, 21 Mar 2026 18:01:40 +0000
Subject: [PATCH 2/9] Close colour picker with Escape

---
 ui/colourpicker.js | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/ui/colourpicker.js b/ui/colourpicker.js
index e3419892..bfafffd2 100644
--- a/ui/colourpicker.js
+++ b/ui/colourpicker.js
@@ -88,6 +88,16 @@ class CustomColorPicker {
     this.excludeFromClose = options.excludeFromClose || null;
 
     this.isOpen = false;
+    this.globalEscapeHandler = (event) => {
+      if (!this.isOpen || this._eyedropperActive || event.key !== "Escape") {
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+      this.close();
+      document.getElementById("colorPickerButton")?.focus();
+    };
 
     // Eyedropper state
     this._eyedropperActive = false;
@@ -1986,6 +1996,7 @@ class CustomColorPicker {
     setTimeout(() => {
       document.addEventListener("click", this.outsideClickHandler, true);
     }, 100);
+    window.addEventListener("keydown", this.globalEscapeHandler, true);
 
     // Focus for keyboard nav
     setTimeout(() => {
@@ -2086,6 +2097,7 @@ class CustomColorPicker {
     this.isOpen = false;
     document.body.classList.remove("color-picker-open");
     document.removeEventListener("click", this.outsideClickHandler, true);
+    window.removeEventListener("keydown", this.globalEscapeHandler, true);
   }
 
   confirmColor() {

From f25293ef47197fa3c7dda76737c264f2da073e34 Mon Sep 17 00:00:00 2001
From: Dr Tracy Gardner <tracygardner@users.noreply.github.com>
Date: Sat, 21 Mar 2026 18:10:05 +0000
Subject: [PATCH 3/9] Close menu when tabbing away

---
 main/menu.js | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/main/menu.js b/main/menu.js
index 838b4f73..25d4dc42 100644
--- a/main/menu.js
+++ b/main/menu.js
@@ -52,9 +52,24 @@ class AccessibleFlyoutMenu {
         e.preventDefault();
         this.openMainMenu();
         this.focusFirstMenuItem();
+      } else if (e.key === "Tab" && this.isMenuOpen) {
+        this.closeAllMenus();
       }
     });
 
+    this.menuDropdown.addEventListener("focusout", () => {
+      window.requestAnimationFrame(() => {
+        const activeElement = document.activeElement;
+        if (
+          this.isMenuOpen &&
+          activeElement !== this.menuButton &&
+          !this.menuDropdown.contains(activeElement)
+        ) {
+          this.closeAllMenus();
+        }
+      });
+    });
+
     // Menu item events
     this.menuItems.forEach((item, index) => {
       // Mouse events (preserve existing functionality)
@@ -260,6 +275,10 @@ class AccessibleFlyoutMenu {
         this.handleMenuItemClick(e, item);
         break;
 
+      case "Tab":
+        this.closeAllMenus();
+        break;
+
       case "Escape":
         this.closeAllMenus();
         this.menuButton.focus();
@@ -312,6 +331,10 @@ class AccessibleFlyoutMenu {
         subItem.click();
         break;
 
+      case "Tab":
+        this.closeAllMenus();
+        break;
+
       case "Escape":
         e.preventDefault();
         e.stopPropagation();

From 6b85e00f0e63432fee08be8a169edf13de3f7e20 Mon Sep 17 00:00:00 2001
From: Dr Tracy Gardner <tracygardner@users.noreply.github.com>
Date: Sat, 21 Mar 2026 18:20:34 +0000
Subject: [PATCH 4/9] Restore modal focus to visible control

---
 main/menu.js | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/main/menu.js b/main/menu.js
index 25d4dc42..9d5a7d10 100644
--- a/main/menu.js
+++ b/main/menu.js
@@ -6,6 +6,24 @@ const infoModal = document.getElementById("infoModal");
 const closeInfoModal = document.getElementById("closeInfoModal");
 let previouslyFocused = null;
 
+function canRestoreFocus(element) {
+  if (!element || !element.isConnected) {
+    return false;
+  }
+
+  let currentElement = element;
+  while (currentElement) {
+    const style = window.getComputedStyle(currentElement);
+    if (style.display === "none" || style.visibility === "hidden") {
+      return false;
+    }
+    currentElement = currentElement.parentElement;
+  }
+
+  const rect = element.getBoundingClientRect();
+  return rect.width > 0 && rect.height > 0;
+}
+
 function openInfoModal() {
   previouslyFocused = document.activeElement;
   infoModal.classList.remove("hidden");
@@ -22,10 +40,13 @@ function hideInfoModal() {
   infoModal.setAttribute("aria-hidden", "true");
   infoModal.removeAttribute("aria-modal");
 
-  if (previouslyFocused) {
+  if (canRestoreFocus(previouslyFocused)) {
     previouslyFocused.focus();
-    previouslyFocused = null;
+  } else {
+    menuBtn.focus();
   }
+
+  previouslyFocused = null;
 }
 
 class AccessibleFlyoutMenu {

From 514ecc4915dfceb6cfc910594c0c1419c5b3fd21 Mon Sep 17 00:00:00 2001
From: Dr Tracy Gardner <tracygardner@users.noreply.github.com>
Date: Sat, 21 Mar 2026 18:33:52 +0000
Subject: [PATCH 5/9] Restore focus before opening hub link

---
 main/menu.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/main/menu.js b/main/menu.js
index 9d5a7d10..79f9048b 100644
--- a/main/menu.js
+++ b/main/menu.js
@@ -374,8 +374,9 @@ document.addEventListener("DOMContentLoaded", () => {
 
 hubMenuItem.addEventListener("click", (e) => {
   e.preventDefault();
+  menuFlyout?.closeAllMenus();
+  menuBtn.focus();
   window.open("https://hub.flockxr.com/", "_blank", "noopener,noreferrer");
-  menuFlyout.closeAllMenus();
 });
 
 // Language menu interactions are now handled in main/translation.js

From 127bfd25b18d43420f3d88c8e05b0df433648b47 Mon Sep 17 00:00:00 2001
From: Dr Tracy Gardner <tracygardner@users.noreply.github.com>
Date: Sat, 21 Mar 2026 19:01:48 +0000
Subject: [PATCH 6/9] Deduplicate menu outside-click handler

---
 main/menu.js | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/main/menu.js b/main/menu.js
index 79f9048b..6937d6a8 100644
--- a/main/menu.js
+++ b/main/menu.js
@@ -1,5 +1,4 @@
 const menuBtn = document.getElementById("menuBtn");
-const menuDropdown = document.getElementById("menuDropdown");
 const openAbout = document.getElementById("about-menu-item");
 const hubMenuItem = document.getElementById("hub-menu-item");
 const infoModal = document.getElementById("infoModal");
@@ -417,12 +416,7 @@ infoModal.addEventListener("keydown", (e) => {
   }
 });
 
-// Close menu when clicking outside
 window.addEventListener("click", (e) => {
-  if (!menuBtn.contains(e.target) && !menuDropdown.contains(e.target)) {
-    menuFlyout.closeAllMenus();
-  }
-
   if (e.target === infoModal) {
     hideInfoModal();
   }

From 35d409463abbfbc39fa1c8d8f6bbcf49d144ffa5 Mon Sep 17 00:00:00 2001
From: Dr Tracy Gardner <tracygardner@users.noreply.github.com>
Date: Sat, 21 Mar 2026 19:23:36 +0000
Subject: [PATCH 7/9] Stop immediate propagation for picker escape

---
 ui/colourpicker.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/ui/colourpicker.js b/ui/colourpicker.js
index bfafffd2..a9708d84 100644
--- a/ui/colourpicker.js
+++ b/ui/colourpicker.js
@@ -94,9 +94,10 @@ class CustomColorPicker {
       }
 
       event.preventDefault();
-      event.stopPropagation();
+      event.stopImmediatePropagation();
       this.close();
-      document.getElementById("colorPickerButton")?.focus();
+      const colorPickerButton = document.getElementById("colorPickerButton");
+      colorPickerButton?.focus();
     };
 
     // Eyedropper state

From 2069c263c859de14b108e5b4fa9ff6b15c386272 Mon Sep 17 00:00:00 2001
From: Dr Tracy Gardner <tracygardner@users.noreply.github.com>
Date: Sat, 21 Mar 2026 19:39:58 +0000
Subject: [PATCH 8/9] Avoid double menu close on keyboard click

---
 main/menu.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/main/menu.js b/main/menu.js
index 6937d6a8..70fe3f2d 100644
--- a/main/menu.js
+++ b/main/menu.js
@@ -246,6 +246,7 @@ class AccessibleFlyoutMenu {
           cancelable: true,
         });
         item.dispatchEvent(clickEvent);
+        return;
       }
       this.closeAllMenus();
     }

From 447d2ef53c9d7a42b4c664e7b54bb3b5a10a017a Mon Sep 17 00:00:00 2001
From: Dr Tracy Gardner <tracygardner@users.noreply.github.com>
Date: Sat, 21 Mar 2026 19:44:52 +0000
Subject: [PATCH 9/9] Stop immediate propagation for menu escape

---
 main/menu.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/main/menu.js b/main/menu.js
index 70fe3f2d..621c9ca1 100644
--- a/main/menu.js
+++ b/main/menu.js
@@ -160,7 +160,7 @@ class AccessibleFlyoutMenu {
 
         if (handled) {
           e.preventDefault();
-          e.stopPropagation();
+          e.stopImmediatePropagation();
         }
       },
       true,