decidim-core 0.32.0.rc3 → 0.32.1

data/app/packs/src/decidim/controllers/accordion/accordion.test.js

@@ -1,36 +1,44 @@
 /* global jest */
 
 import AccordionController from "src/decidim/controllers/accordion/controller";
+import { screens } from "tailwindcss/defaultTheme"
 
 jest.mock("a11y-accordion-component", () => ({
   render: jest.fn(),
   destroy: jest.fn()
 }));
 
+const createController = (controllerElement) => {
+  const instance = Object.create(AccordionController.prototype);
+  Reflect.defineProperty(instance, "element", {
+    get: () => controllerElement,
+    configurable: true
+  });
+  return instance;
+};
+
 describe("AccordionController", () => {
   let controller = null;
   let accordionElement = null;
   let panel1 = null;
   let panel2 = null;
 
-  const createController = (controllerElement) => {
-    const ControllerClass = AccordionController;
-    const instance = Object.create(ControllerClass.prototype);
-    Reflect.defineProperty(instance, "element", {
-      get: () => controllerElement,
-      configurable: true
+  const mockMatchMedia = (matchesOrPredicate = false) => {
+    window.matchMedia = jest.fn().mockImplementation((query) => {
+      const matches = typeof matchesOrPredicate === "function"
+        ? matchesOrPredicate(query)
+        : matchesOrPredicate;
+      return {
+        matches,
+        media: query,
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn()
+      };
     });
-    return instance;
   };
 
   beforeEach(() => {
-    window.matchMedia = jest.fn().mockImplementation((query) => ({
-      matches: false,
-      media: query,
-      addListener: jest.fn(),
-      removeListener: jest.fn()
-    }));
-
+    mockMatchMedia(false);
     document.body.innerHTML = `
       <div id="test-accordion" data-controller="accordion">
         <button id="trigger-1" data-controls="panel-1">Trigger 1</button>
@@ -39,11 +47,9 @@ describe("AccordionController", () => {
         <div id="panel-2">Panel 2 Content</div>
       </div>
     `;
-
     accordionElement = document.getElementById("test-accordion");
     panel1 = document.getElementById("panel-1");
     panel2 = document.getElementById("panel-2");
-
     controller = createController(accordionElement);
   });
 
@@ -56,10 +62,8 @@ describe("AccordionController", () => {
     it("changes role from region to group when data-panel-role is group", () => {
       panel1.setAttribute("role", "region");
       panel2.setAttribute("role", "region");
-
       accordionElement.dataset.panelRole = "group";
       controller.fixPanelRole();
-
       expect(panel1.getAttribute("role")).toBe("group");
       expect(panel2.getAttribute("role")).toBe("group");
     });
@@ -67,52 +71,202 @@ describe("AccordionController", () => {
     it("removes role attribute when data-panel-role is none", () => {
       panel1.setAttribute("role", "region");
       panel2.setAttribute("role", "region");
-
       accordionElement.dataset.panelRole = "none";
       controller.fixPanelRole();
-
       expect(panel1.getAttribute("role")).toBeNull();
       expect(panel2.getAttribute("role")).toBeNull();
     });
 
-    it("does nothing when data-panel-role is not set", () => {
-      panel1.setAttribute("role", "region");
-      panel2.setAttribute("role", "region");
-
-      Reflect.deleteProperty(accordionElement.dataset, "panelRole");
-      controller.fixPanelRole();
-
-      expect(panel1.getAttribute("role")).toBe("region");
-      expect(panel2.getAttribute("role")).toBe("region");
-    });
-
-    it("does nothing when data-panel-role is empty", () => {
+    it("does nothing when data-panel-role is not set or empty", () => {
       panel1.setAttribute("role", "region");
-
-      accordionElement.dataset.panelRole = "";
       controller.fixPanelRole();
-
       expect(panel1.getAttribute("role")).toBe("region");
     });
 
     it("sets custom role value when data-panel-role is set", () => {
       panel1.setAttribute("role", "region");
-
       accordionElement.dataset.panelRole = "navigation";
       controller.fixPanelRole();
-
       expect(panel1.getAttribute("role")).toBe("navigation");
     });
 
     it("handles nonexistent panels gracefully", () => {
       accordionElement.dataset.panelRole = "group";
+      const trigger = document.createElement("button");
+      trigger.dataset.controls = "nonexistent-panel";
+      accordionElement.appendChild(trigger);
+      expect(() => controller.fixPanelRole()).not.toThrow();
+    });
+  });
 
-      const nonExistentTrigger = document.createElement("button");
-      nonExistentTrigger.dataset.controls = "nonexistent-panel";
-      accordionElement.appendChild(nonExistentTrigger);
+  describe("_applyBreakpointOpenAttributes", () => {
+    beforeEach(() => {
+      controller.initialize();
+    });
 
-      expect(() => controller.fixPanelRole()).not.toThrow();
+    it("removes data-open when no breakpoint matches and no original exists", () => {
+      accordionElement.innerHTML = `
+        <button data-controls="panel-1" data-open-lg="true">Trigger</button>
+        <div id="panel-1">Panel 1</div>
+      `;
+      controller._applyBreakpointOpenAttributes();
+      expect(accordionElement.querySelector("[data-controls]").hasAttribute("data-open")).toBe(false);
+    });
+
+    it("sets data-open from breakpoint attribute when viewport matches", () => {
+      mockMatchMedia((query) => query === `(min-width: ${screens.lg})`);
+      accordionElement.innerHTML = `
+        <button data-controls="panel-1" data-open-lg="true">Trigger</button>
+        <div id="panel-1">Panel 1</div>
+      `;
+      controller.initialize();
+      controller._applyBreakpointOpenAttributes();
+      expect(accordionElement.querySelector("[data-controls]").getAttribute("data-open")).toBe("true");
+    });
+
+    it("restores original data-open when breakpoint no longer matches", () => {
+      const lgQuery = `(min-width: ${screens.lg})`;
+      accordionElement.innerHTML = `
+        <button data-controls="panel-1" data-open="false" data-open-lg="true">Trigger</button>
+        <div id="panel-1">Panel 1</div>
+      `;
+      const trigger = accordionElement.querySelector("[data-controls]");
+      controller.initialize();
+
+      mockMatchMedia((query) => query === lgQuery);
+      controller._applyBreakpointOpenAttributes();
+      expect(trigger.getAttribute("data-open")).toBe("true");
+
+      mockMatchMedia(() => false);
+      controller._applyBreakpointOpenAttributes();
+      expect(trigger.getAttribute("data-open")).toBe("false");
+    });
+
+    it("removes data-open when breakpoint stops matching and no original existed", () => {
+      const lgQuery = `(min-width: ${screens.lg})`;
+      accordionElement.innerHTML = `
+        <button data-controls="panel-1" data-open-lg="true">Trigger</button>
+        <div id="panel-1">Panel 1</div>
+      `;
+      const trigger = accordionElement.querySelector("[data-controls]");
+      controller.initialize();
+
+      mockMatchMedia((query) => query === lgQuery);
+      controller._applyBreakpointOpenAttributes();
+      expect(trigger.getAttribute("data-open")).toBe("true");
+
+      mockMatchMedia(() => false);
+      controller._applyBreakpointOpenAttributes();
+      expect(trigger.hasAttribute("data-open")).toBe(false);
+    });
+
+    it("applies the last matching breakpoint when multiple match", () => {
+      mockMatchMedia((query) =>
+        query === `(min-width: ${screens.sm})` || query === `(min-width: ${screens.lg})`
+      );
+      accordionElement.innerHTML = `
+        <button data-controls="panel-1" data-open-sm="false" data-open-lg="true">Trigger</button>
+        <div id="panel-1">Panel 1</div>
+      `;
+      controller.initialize();
+      controller._applyBreakpointOpenAttributes();
+      expect(accordionElement.querySelector("[data-controls]").getAttribute("data-open")).toBe("true");
+    });
+
+    it("leaves triggers without breakpoint attributes unchanged", () => {
+      controller.initialize();
+      controller._applyBreakpointOpenAttributes();
+      expect(accordionElement.querySelector("#trigger-1").hasAttribute("data-open")).toBe(false);
+      expect(accordionElement.querySelector("#trigger-2").hasAttribute("data-open")).toBe(false);
     });
   });
-});
 
+  describe("_listenForBreakpointChanges", () => {
+    beforeEach(() => {
+      controller.initialize();
+    });
+
+    it("registers change listeners for breakpoints with matching triggers", () => {
+      accordionElement.innerHTML = `
+        <button data-controls="panel-1" data-open-lg="true">Trigger</button>
+        <div id="panel-1">Panel 1</div>
+      `;
+      controller._listenForBreakpointChanges();
+      expect(window.matchMedia).toHaveBeenCalledWith(`(min-width: ${screens.lg})`);
+      expect(window.matchMedia.mock.results[0].value.addEventListener).toHaveBeenCalledWith("change", expect.any(Function));
+    });
+
+    it("skips breakpoints without matching triggers", () => {
+      accordionElement.innerHTML = `
+        <button data-controls="panel-1" data-open-lg="true">Trigger</button>
+        <div id="panel-1">Panel 1</div>
+      `;
+      controller._listenForBreakpointChanges();
+      expect(window.matchMedia).toHaveBeenCalledTimes(1);
+    });
+
+    it("registers nothing when there are no breakpoint triggers", () => {
+      controller._listenForBreakpointChanges();
+      expect(controller._mediaQueries.length).toBe(0);
+    });
+
+    it("registers listeners for multiple breakpoints", () => {
+      accordionElement.innerHTML = `
+        <button data-controls="panel-1" data-open-sm="true" data-open-lg="false">Trigger</button>
+        <div id="panel-1">Panel 1</div>
+      `;
+      controller._listenForBreakpointChanges();
+      expect(window.matchMedia).toHaveBeenCalledWith(`(min-width: ${screens.sm})`);
+      expect(window.matchMedia).toHaveBeenCalledWith(`(min-width: ${screens.lg})`);
+      expect(controller._mediaQueries.length).toBe(2);
+    });
+  });
+
+  describe("_stopListeningForBreakpointChanges", () => {
+    beforeEach(() => {
+      controller.initialize();
+    });
+
+    it("removes all registered change listeners", () => {
+      accordionElement.innerHTML = `
+        <button data-controls="panel-1" data-open-lg="true">Trigger</button>
+        <div id="panel-1">Panel 1</div>
+      `;
+      controller._listenForBreakpointChanges();
+      const mql = window.matchMedia.mock.results[0].value;
+      controller._stopListeningForBreakpointChanges();
+      expect(mql.removeEventListener).toHaveBeenCalledWith("change", expect.any(Function));
+      expect(controller._mediaQueries.length).toBe(0);
+    });
+
+    it("does nothing when no listeners exist", () => {
+      expect(() => controller._stopListeningForBreakpointChanges()).not.toThrow();
+    });
+  });
+
+  describe("connect/disconnect/reconnect with breakpoints", () => {
+    beforeEach(() => {
+      controller.initialize();
+    });
+
+    it("connect applies breakpoint attributes and sets up listeners", () => {
+      const applySpy = jest.spyOn(controller, "_applyBreakpointOpenAttributes");
+      const listenSpy = jest.spyOn(controller, "_listenForBreakpointChanges");
+      controller.connect();
+      expect(applySpy).toHaveBeenCalled();
+      expect(listenSpy).toHaveBeenCalled();
+    });
+
+    it("disconnect tears down breakpoint listeners", () => {
+      const spy = jest.spyOn(controller, "_stopListeningForBreakpointChanges");
+      controller.disconnect();
+      expect(spy).toHaveBeenCalled();
+    });
+
+    it("reconnect re-evaluates breakpoint attributes", () => {
+      const spy = jest.spyOn(controller, "_applyBreakpointOpenAttributes");
+      controller.reconnect({});
+      expect(spy).toHaveBeenCalled();
+    });
+  });
+});

data/app/packs/src/decidim/controllers/accordion/controller.js

@@ -2,6 +2,9 @@ import { Controller } from "@hotwired/stimulus"
 import Accordions from "a11y-accordion-component";
 import { screens } from "tailwindcss/defaultTheme"
 export default class extends Controller {
+  initialize() {
+    this._originalOpenValues = new WeakMap();
+  }
 
   /**
    * Create accordion from a component
@@ -16,21 +19,8 @@ export default class extends Controller {
     accordionOptions.isMultiSelectable = this.element.dataset.multiselectable !== "false";
     accordionOptions.isCollapsible = this.element.dataset.collapsible !== "false";
 
-    // This snippet allows to change the OPEN data-attribute based on the current viewport
-    // Just include the breakpoint where the different value will be applied from.
-    // Ex:
-    // data-open="false" data-open-md="true"
-    Object.keys(screens).forEach((key) => {
-      if (!this.isScreenSize(key)) {
-        return;
-      }
-
-      const elementsToOpen = this.element.querySelectorAll(`[data-controls][data-open-${key}]`);
-
-      elementsToOpen.forEach((elem) => {
-        (elem.dataset.open = elem.dataset[`open-${key}`.replace(/-([a-z])/g, (str) => str[1].toUpperCase())])
-      })
-    })
+    this._applyBreakpointOpenAttributes();
+    this._listenForBreakpointChanges();
 
     if (!this.element.id) {
       // when component has no id, we enforce to have it one
@@ -59,20 +49,106 @@ export default class extends Controller {
     }
 
     if (this.boundExpand) {
-      this.toggleButton.addEventListener("click", this.boundExpand);
+      this.toggleButton.removeEventListener("click", this.boundExpand);
     }
+
+    this._stopListeningForBreakpointChanges();
   }
 
   reconnect(event) {
     this.disconnect();
 
-    if (event.detail && event.detail.collapse) {
+    if (event && event.detail && event.detail.collapse) {
       this.previouslyExpanded = false;
     }
 
     this.connect();
   }
 
+  /**
+   * Applies viewport-conditional data-open attributes and resets
+   * previously applied values when the viewport no longer matches.
+   *
+   * @returns {void}
+   */
+  _applyBreakpointOpenAttributes() {
+    const controlledTriggers = new Set();
+
+    Object.keys(screens).forEach((key) => {
+      this.element.querySelectorAll(`[data-controls][data-open-${key}]`).forEach((elem) => {
+        controlledTriggers.add(elem);
+
+        if (!this._originalOpenValues.has(elem)) {
+          this._originalOpenValues.set(elem, elem.getAttribute("data-open"));
+        }
+      });
+    });
+
+    // Reset all controlled triggers to their original data-open state
+    controlledTriggers.forEach((elem) => {
+      const original = this._originalOpenValues.get(elem);
+      if (original === null) {
+        elem.removeAttribute("data-open");
+      } else {
+        elem.setAttribute("data-open", original);
+      }
+    });
+
+    // Apply breakpoint-specific values for the current viewport
+    Object.keys(screens).forEach((key) => {
+      if (!this.isScreenSize(key)) {
+        return;
+      }
+
+      this.element.querySelectorAll(`[data-controls][data-open-${key}]`).forEach((elem) => {
+        elem.dataset.open = elem.getAttribute(`data-open-${key}`);
+      });
+    });
+  }
+
+  /**
+   * Listens for viewport changes that cross breakpoints relevant
+   * to this accordion and reconnects to keep state in sync.
+   *
+   * @returns {void}
+   */
+  _listenForBreakpointChanges() {
+    this._mediaQueries = [];
+
+    Object.keys(screens).forEach((key) => {
+      const hasRelevantTriggers = this.element.querySelector(`[data-controls][data-open-${key}]`);
+      if (!hasRelevantTriggers) {
+        return;
+      }
+
+      const mql = window.matchMedia(`(min-width: ${screens[key]})`);
+      const handler = () => {
+        this.reconnect({ detail: { collapse: true } });
+      };
+
+      if (mql.addEventListener) {
+        mql.addEventListener("change", handler);
+      } else if (mql.addListener) {
+        mql.addListener(handler);
+      }
+
+      this._mediaQueries.push({ mql, handler });
+    });
+  }
+
+  _stopListeningForBreakpointChanges() {
+    if (this._mediaQueries) {
+      this._mediaQueries.forEach(({ mql, handler }) => {
+        if (mql.removeEventListener) {
+          mql.removeEventListener("change", handler);
+        } else if (mql.removeListener) {
+          mql.removeListener(handler);
+        }
+      });
+      this._mediaQueries = [];
+    }
+  }
+
   expandIfNeeded()
   {
     if (!this.toggleButton) {

data/app/packs/src/decidim/controllers/dropdown/controller.js

@@ -47,6 +47,12 @@ export default class extends Controller {
       this.element.id = `dropdown-${Math.random().toString(36).substring(7)}`
     }
 
+    if (!this.element.hasAttribute("aria-expanded")) {
+      this.element.setAttribute("aria-expanded", dropdownOptions.isOpen
+        ? "true"
+        : "false");
+    }
+
     const autofocus = this.element.dataset.autofocus;
     if (autofocus) {
       // set the focus to some inner element, use setTimeout hack due to waiting for element to display

data/app/packs/src/decidim/controllers/dropdown/dropdown.test.js

@@ -142,6 +142,34 @@ describe("DropdownController", () => {
     });
   });
 
+  describe("aria-expanded initialization", () => {
+    it("sets aria-expanded to false when missing and isOpen is false", () => {
+      const testController = createController(element);
+
+      testController.connect();
+
+      expect(element.getAttribute("aria-expanded")).toBe("false");
+    });
+
+    it("sets aria-expanded to true when missing and data-open is true", () => {
+      element.setAttribute("data-open", "true");
+      const testController = createController(element);
+
+      testController.connect();
+
+      expect(element.getAttribute("aria-expanded")).toBe("true");
+    });
+
+    it("does not override existing aria-expanded attribute", () => {
+      element.setAttribute("aria-expanded", "true");
+      const testController = createController(element);
+
+      testController.connect();
+
+      expect(element.getAttribute("aria-expanded")).toBe("true");
+    });
+  });
+
   describe("data-add-aria-roles option", () => {
     it("keeps role menu when data-add-aria-roles is true", () => {
       element.setAttribute("data-add-aria-roles", "true");

data/app/packs/src/decidim/controllers/main_menu/controller.js

@@ -2,6 +2,14 @@ import { Controller } from "@hotwired/stimulus"
 
 const OPEN_DELAY_MS = 50
 
+const FOCUSABLE_SELECTORS = "a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex='-1'])"
+
+const getFocusableElements = (container) => {
+  return Array.from(container.querySelectorAll(FOCUSABLE_SELECTORS)).filter(
+    (el) => el.offsetParent !== null
+  );
+}
+
 /**
  * Main menu dropdown controller and traps page scroll while the menu is open.
  *
@@ -24,6 +32,11 @@ export default class extends Controller {
     this.handleButtonClick = this.handleButtonClick.bind(this)
     this.handleKeydown = this.handleKeydown.bind(this)
     this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this)
+    this.focusTrapHandler = this.focusTrapHandler.bind(this)
+
+    if (!this.menuButton.hasAttribute("aria-expanded")) {
+      this.menuButton.setAttribute("aria-expanded", "false");
+    }
 
     this.menuButton.addEventListener("click", this.handleButtonClick)
     this.menuContainer.addEventListener("click", this.handleContainerClick)
@@ -96,6 +109,23 @@ export default class extends Controller {
     return this.menuContainer.getAttribute("aria-hidden") === "true"
   }
 
+  focusTrapHandler(event) {
+    if (event.key !== "Tab") {
+      return;
+    }
+    const focusable = getFocusableElements(this.menuContainer);
+    if (focusable.length === 0) {
+      return;
+    }
+    if (event.shiftKey && document.activeElement === focusable[0]) {
+      event.preventDefault();
+      focusable[focusable.length - 1].focus({ preventScroll: true });
+    } else if (!event.shiftKey && document.activeElement === focusable[focusable.length - 1]) {
+      event.preventDefault();
+      focusable[0].focus({ preventScroll: true });
+    }
+  }
+
   openMenu() {
     if (typeof this.previousBodyOverflow === "undefined") {
       this.previousBodyOverflow = document.body.style.overflow;
@@ -104,9 +134,16 @@ export default class extends Controller {
     this.element.setAttribute("aria-expanded", "true")
     this.menuContainer.setAttribute("aria-hidden", "false")
     this.menuContainer.setAttribute("aria-modal", "true")
+    this.menuContainer.addEventListener("keydown", this.focusTrapHandler)
+
+    const focusable = getFocusableElements(this.menuContainer);
+    if (focusable.length > 0) {
+      focusable[0].focus({ preventScroll: true });
+    }
   }
 
   closeMenu() {
+    this.menuContainer.removeEventListener("keydown", this.focusTrapHandler)
     document.body.style.overflow = this.previousBodyOverflow ?? ""
     this.element.setAttribute("aria-expanded", "false")
     this.menuContainer.setAttribute("aria-hidden", "true")

data/app/packs/src/decidim/controllers/main_menu/main_menu.test.js

@@ -20,6 +20,8 @@ describe("MainMenuController", () => {
         Menu
       </button>
       <div id="main-menu-container" aria-hidden="true">
+        <a href="/link">Link</a>
+        <button>Action</button>
         <div id="main-menu-item"></div>
       </div>
       <button id="main-menu-close">Close</button>
@@ -68,6 +70,29 @@ describe("MainMenuController", () => {
       expect(closeSpy).toHaveBeenCalledWith("click", controller.handleCloseButtonClick)
     })
 
+    it("sets aria-expanded to false when missing", async () => {
+      document.body.innerHTML = `
+        <button data-controller="main-menu" data-target="main-menu-container" data-close-button="main-menu-close">
+          Menu
+        </button>
+        <div id="main-menu-container" aria-hidden="true"></div>
+        <button id="main-menu-close">Close</button>
+      `
+
+      application.stop()
+      application = Application.start()
+      application.register("main-menu", MainMenuController)
+
+      const newButton = document.querySelector('[data-controller="main-menu"]')
+      await new Promise((resolve) => {
+        setTimeout(() => {
+          resolve(application.getControllerForElementAndIdentifier(newButton, "main-menu"))
+        }, 0)
+      })
+
+      expect(newButton.getAttribute("aria-expanded")).toBe("false")
+    })
+
     it("returns early when menu container is missing", async () => {
       document.body.innerHTML = `
         <button data-controller="main-menu" data-target="missing-menu"></button>
@@ -165,6 +190,81 @@ describe("MainMenuController", () => {
     })
   })
 
+  describe("focusTrapHandler", () => {
+    beforeEach(() => {
+      jest.spyOn(HTMLElement.prototype, "offsetParent", "get").mockReturnValue(menuContainer)
+      controller.openMenu()
+    })
+
+    afterEach(() => {
+      controller.closeMenu()
+    })
+
+    it("focuses the first focusable element when menu opens", () => {
+      const focusable = menuContainer.querySelectorAll("a[href], button:not([disabled])")
+      const firstEl = focusable[0]
+      expect(document.activeElement).toBe(firstEl)
+    })
+
+    it("cycles focus to first element when Tab is pressed on last focusable element", () => {
+      const focusable = menuContainer.querySelectorAll("a[href], button:not([disabled])")
+      expect(focusable.length).toBeGreaterThan(1)
+      const lastEl = focusable[focusable.length - 1]
+      const firstEl = focusable[0]
+
+      lastEl.focus()
+      const event = new KeyboardEvent("keydown", { key: "Tab", bubbles: true })
+      jest.spyOn(event, "preventDefault")
+      jest.spyOn(firstEl, "focus")
+
+      menuContainer.dispatchEvent(event)
+
+      expect(event.preventDefault).toHaveBeenCalled()
+      expect(firstEl.focus).toHaveBeenCalledWith({ preventScroll: true })
+    })
+
+    it("cycles focus to last element when Shift+Tab is pressed on first focusable element", () => {
+      const focusable = menuContainer.querySelectorAll("a[href], button:not([disabled])")
+      expect(focusable.length).toBeGreaterThan(1)
+      const firstEl = focusable[0]
+      const lastEl = focusable[focusable.length - 1]
+
+      firstEl.focus()
+      const event = new KeyboardEvent("keydown", { key: "Tab", shiftKey: true, bubbles: true })
+      jest.spyOn(event, "preventDefault")
+      jest.spyOn(lastEl, "focus")
+
+      menuContainer.dispatchEvent(event)
+
+      expect(event.preventDefault).toHaveBeenCalled()
+      expect(lastEl.focus).toHaveBeenCalledWith({ preventScroll: true })
+    })
+
+    it("does nothing when a non-Tab key is pressed", () => {
+      const event = new KeyboardEvent("keydown", { key: "Enter", bubbles: true })
+      jest.spyOn(event, "preventDefault")
+
+      menuContainer.dispatchEvent(event)
+
+      expect(event.preventDefault).not.toHaveBeenCalled()
+    })
+
+    it("does nothing when there are no focusable elements", () => {
+      controller.closeMenu()
+      menuContainer.innerHTML = ""
+      controller.openMenu()
+
+      const event = new KeyboardEvent("keydown", { key: "Tab", bubbles: true })
+      expect(() => menuContainer.dispatchEvent(event)).not.toThrow()
+    })
+
+    it("removes the keydown handler when menu is closed", () => {
+      const spy = jest.spyOn(menuContainer, "removeEventListener")
+      controller.closeMenu()
+      expect(spy).toHaveBeenCalledWith("keydown", controller.focusTrapHandler)
+    })
+  })
+
   describe("disconnect", () => {
     it("removes listeners and closes the menu if open", () => {
       const buttonSpy = jest.spyOn(menuButton, "removeEventListener")