@aurodesignsystem/auro-library 5.11.3 → 5.12.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Semantic Release Automated Changelog
 
+# [5.12.0](https://github.com/AlaskaAirlines/auro-library/compare/v5.11.3...v5.12.0) (2026-04-01)
+
+
+### Features
+
+* add keyboard handling toggle to AuroFloatingUI ([100bbe9](https://github.com/AlaskaAirlines/auro-library/commit/100bbe940ff2f1589d8b738ce83631bd5c7b8568))
+
 ## [5.11.3](https://github.com/AlaskaAirlines/auro-library/compare/v5.11.2...v5.11.3) (2026-03-31)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem/auro-library",
-  "version": "5.11.3",
+  "version": "5.12.0",
   "description": "This repository holds shared scripts, utilities, and workflows utilized across repositories along the Auro Design System.",
   "repository": {
     "type": "git",

package/scripts/runtime/floatingUI/test/floatingUI.test.js

@@ -0,0 +1,189 @@
+import { expect } from "@open-wc/testing";
+import { html, render } from "lit";
+import sinon from "sinon";
+import AuroFloatingUI from "../../floatingUI.mjs";
+
+async function fixture(template) {
+  const wrapper = document.createElement("div");
+  render(template, wrapper);
+  document.body.appendChild(wrapper);
+  await new Promise((resolve) => setTimeout(resolve, 0));
+  return wrapper.firstElementChild;
+}
+
+/**
+ * Builds a minimal element stub that satisfies the properties AuroFloatingUI
+ * reads during configure() and keyboard event handling.
+ */
+function makeElement(trigger, bib) {
+  return {
+    trigger,
+    bib,
+    bibSizer: null,
+    triggerChevron: null,
+    shadowRoot: {
+      querySelector: () => null,
+      append: () => {},
+    },
+    behavior: "dropdown",
+    disabled: false,
+    isPopoverVisible: false,
+    showing: false,
+    noToggle: false,
+    modal: false,
+    disableEventShow: false,
+    hoverToggle: false,
+    focusShow: false,
+    floaterConfig: null,
+    cleanup: null,
+    contains: () => false,
+    dispatchEvent: () => {},
+    getAttribute: () => null,
+    setAttribute: () => {},
+    querySelectorAll: () => [],
+    style: {},
+  };
+}
+
+describe("AuroFloatingUI keyboard gate (enableKeyboardHandling)", () => {
+  let triggerEl;
+  let bibEl;
+  let elem;
+  let floatingUi;
+
+  beforeEach(async () => {
+    triggerEl = await fixture(html`<button id="trigger">Toggle</button>`);
+    bibEl = await fixture(html`<div id="bib"></div>`);
+
+    elem = makeElement(triggerEl, bibEl);
+    floatingUi = new AuroFloatingUI(elem, "dropdown");
+  });
+
+  afterEach(async () => {
+    // Let any setTimeout(0) handlers (e.g. click listener setup in setupHideHandlers)
+    // fire before cleanup so cleanupHideHandlers can remove them.
+    await new Promise((resolve) => setTimeout(resolve, 10));
+    document.expandedAuroFloater = null;
+    document.expandedAuroFormkitDropdown = null;
+    floatingUi?.disconnect();
+    floatingUi = null;
+    triggerEl?.parentNode?.remove();
+    bibEl?.parentNode?.remove();
+    sinon.restore();
+  });
+
+  describe("default behavior (enableKeyboardHandling = true)", () => {
+    beforeEach(() => {
+      floatingUi.configure(elem, "auro-dropdown", true);
+    });
+
+    it("Enter on the trigger calls handleClick()", () => {
+      const spy = sinon.spy(floatingUi, "handleClick");
+      triggerEl.dispatchEvent(
+        new KeyboardEvent("keydown", {
+          key: "Enter",
+          bubbles: true,
+          composed: true,
+        }),
+      );
+      expect(spy.calledOnce).to.be.true;
+    });
+
+    it("Space on the trigger calls handleClick()", () => {
+      const spy = sinon.spy(floatingUi, "handleClick");
+      triggerEl.dispatchEvent(
+        new KeyboardEvent("keydown", {
+          key: " ",
+          bubbles: true,
+          composed: true,
+        }),
+      );
+      expect(spy.calledOnce).to.be.true;
+    });
+
+    it("Escape dismisses when bib is visible", () => {
+      elem.isPopoverVisible = true;
+      floatingUi.showing = true;
+      document.expandedAuroFloater = floatingUi;
+      const spy = sinon.spy(floatingUi, "hideBib");
+
+      // setupHideHandlers attaches the document keydown listener
+      floatingUi.setupHideHandlers();
+      document.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "Escape", bubbles: true }),
+      );
+
+      expect(spy.calledOnce).to.be.true;
+      document.expandedAuroFloater = null;
+    });
+  });
+
+  describe("keyboard disabled (enableKeyboardHandling = false)", () => {
+    beforeEach(() => {
+      floatingUi.configure(elem, "auro-dropdown", false);
+    });
+
+    it("Enter on the trigger does NOT call handleClick()", () => {
+      const spy = sinon.spy(floatingUi, "handleClick");
+      triggerEl.dispatchEvent(
+        new KeyboardEvent("keydown", {
+          key: "Enter",
+          bubbles: true,
+          composed: true,
+        }),
+      );
+      expect(spy.called).to.be.false;
+    });
+
+    it("Space on the trigger does NOT call handleClick()", () => {
+      const spy = sinon.spy(floatingUi, "handleClick");
+      triggerEl.dispatchEvent(
+        new KeyboardEvent("keydown", {
+          key: " ",
+          bubbles: true,
+          composed: true,
+        }),
+      );
+      expect(spy.called).to.be.false;
+    });
+
+    it("Escape does NOT dismiss the bib", () => {
+      elem.isPopoverVisible = true;
+      floatingUi.showing = true;
+      document.expandedAuroFloater = floatingUi;
+      const spy = sinon.spy(floatingUi, "hideBib");
+
+      // setupHideHandlers should skip attaching the document keydown listener
+      floatingUi.setupHideHandlers();
+      document.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "Escape", bubbles: true }),
+      );
+
+      expect(spy.called).to.be.false;
+      document.expandedAuroFloater = null;
+    });
+
+    it("click on the trigger still calls handleClick()", () => {
+      const spy = sinon.spy(floatingUi, "handleClick");
+      triggerEl.dispatchEvent(
+        new MouseEvent("click", { bubbles: true, composed: true }),
+      );
+      expect(spy.calledOnce).to.be.true;
+    });
+  });
+
+  describe("default argument", () => {
+    it("omitting enableKeyboardHandling defaults to true (Enter still works)", () => {
+      floatingUi.configure(elem, "auro-dropdown");
+      const spy = sinon.spy(floatingUi, "handleClick");
+      triggerEl.dispatchEvent(
+        new KeyboardEvent("keydown", {
+          key: "Enter",
+          bubbles: true,
+          composed: true,
+        }),
+      );
+      expect(spy.calledOnce).to.be.true;
+    });
+  });
+});

package/scripts/runtime/floatingUI.mjs

@@ -71,6 +71,11 @@ export default class AuroFloatingUI {
     this.clickHandler = null;
     this.keyDownHandler = null;
 
+    /**
+     * @private
+     */
+    this.enableKeyboardHandling = true;
+
     /**
      * @private
      */
@@ -405,7 +410,9 @@ export default class AuroFloatingUI {
       document.addEventListener("focusin", this.focusHandler);
     }
 
-    document.addEventListener("keydown", this.keyDownHandler);
+    if (this.enableKeyboardHandling) {
+      document.addEventListener("keydown", this.keyDownHandler);
+    }
 
     // send this task to the end of queue to prevent conflicting
     // it conflicts if showBib gets call from a button that's not this.element.trigger
@@ -662,8 +669,9 @@ export default class AuroFloatingUI {
     this.element.bib.setAttribute("id", `${this.id}-floater-bib`);
   }
 
-  configure(elem, eventPrefix) {
+  configure(elem, eventPrefix, enableKeyboardHandling = true) {
     AuroFloatingUI.setupMousePressChecker();
+    this.enableKeyboardHandling = enableKeyboardHandling;
 
     this.eventPrefix = eventPrefix;
     if (this.element !== elem) {
@@ -696,7 +704,9 @@ export default class AuroFloatingUI {
 
     this.handleEvent = this.handleEvent.bind(this);
     if (this.element.trigger) {
-      this.element.trigger.addEventListener("keydown", this.handleEvent);
+      if (this.enableKeyboardHandling) {
+        this.element.trigger.addEventListener("keydown", this.handleEvent);
+      }
       this.element.trigger.addEventListener("click", this.handleEvent);
       this.element.trigger.addEventListener("mouseenter", this.handleEvent);
       this.element.trigger.addEventListener("mouseleave", this.handleEvent);