@aurodesignsystem/auro-library 5.11.2 → 5.12.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # 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)
+
+
+### Bug Fixes
+
+* correct focus local check for shadow DOM ([e713cfc](https://github.com/AlaskaAirlines/auro-library/commit/e713cfc07f1be4809c97e05af97b89050478e988))
+
 ## [5.11.2](https://github.com/AlaskaAirlines/auro-library/compare/v5.11.1...v5.11.2) (2026-03-17)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem/auro-library",
-  "version": "5.11.2",
+  "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
      */
@@ -331,11 +336,10 @@ export default class AuroFloatingUI {
       return;
     }
 
-    const { activeElement } = document;
     // if focus is still inside of trigger or bib, do not close
     if (
-      this.element.contains(activeElement) ||
-      this.element.bib?.contains(activeElement)
+      this.element.matches(":focus") ||
+      this.element.matches(":focus-within")
     ) {
       return;
     }
@@ -406,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
@@ -663,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) {
@@ -697,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);

package/scripts/runtime/floatingUI.test.js

@@ -0,0 +1,102 @@
+import { expect } from "@open-wc/testing";
+import sinon from "sinon";
+import AuroFloatingUI from "./floatingUI.mjs";
+
+describe("AuroFloatingUI", () => {
+  let host;
+  let bib;
+  let floatingUI;
+  let hideBibSpy;
+
+  beforeEach(() => {
+    host = document.createElement("div");
+    bib = document.createElement("div");
+    host.bib = bib;
+    host.triggerChevron = document.createElement("span");
+
+    document.body.append(host, bib);
+
+    AuroFloatingUI.isMousePressed = false;
+    floatingUI = new AuroFloatingUI(host, "dropdown");
+    hideBibSpy = sinon.spy(floatingUI, "hideBib");
+  });
+
+  afterEach(() => {
+    sinon.restore();
+    AuroFloatingUI.isMousePressed = false;
+    host?.remove();
+    bib?.remove();
+  });
+
+  it("does not hide when the host matches focus-within", () => {
+    const checkedSelectors = [];
+
+    sinon.stub(host, "matches").callsFake((selector) => {
+      checkedSelectors.push(selector);
+
+      if (selector === ":focus") {
+        return false;
+      }
+
+      if (selector === ":focus-within") {
+        return true;
+      }
+
+      return false;
+    });
+
+    floatingUI.handleFocusLoss();
+
+    expect(checkedSelectors).to.deep.equal([":focus", ":focus-within"]);
+    expect(hideBibSpy.called).to.be.false;
+  });
+
+  it("does not hide when the host matches focus", () => {
+    const checkedSelectors = [];
+
+    sinon.stub(host, "matches").callsFake((selector) => {
+      checkedSelectors.push(selector);
+
+      if (selector === ":focus") {
+        return true;
+      }
+
+      return false;
+    });
+
+    floatingUI.handleFocusLoss();
+
+    expect(checkedSelectors).to.deep.equal([":focus"]);
+    expect(hideBibSpy.called).to.be.false;
+  });
+
+  it("does not hide when the bib is fullscreen", () => {
+    const checkedSelectors = [];
+
+    bib.setAttribute("isfullscreen", "");
+
+    sinon.stub(host, "matches").callsFake((selector) => {
+      checkedSelectors.push(selector);
+      return false;
+    });
+
+    floatingUI.handleFocusLoss();
+
+    expect(checkedSelectors).to.deep.equal([":focus", ":focus-within"]);
+    expect(hideBibSpy.called).to.be.false;
+  });
+
+  it("hides with a keydown event when the host no longer has focus", () => {
+    const checkedSelectors = [];
+
+    sinon.stub(host, "matches").callsFake((selector) => {
+      checkedSelectors.push(selector);
+      return false;
+    });
+
+    floatingUI.handleFocusLoss();
+
+    expect(checkedSelectors).to.deep.equal([":focus", ":focus-within"]);
+    expect(hideBibSpy.calledOnceWithExactly("keydown")).to.be.true;
+  });
+});