@sit-onyx/headless 1.0.0-beta.0 → 1.0.0-beta.10

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/headless",
   "description": "Headless composables for Vue",
-  "version": "1.0.0-beta.0",
+  "version": "1.0.0-beta.10",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
@@ -24,7 +24,11 @@
   },
   "peerDependencies": {
     "typescript": ">= 5",
-    "vue": ">= 3"
+    "vue": ">= 3.5.0"
+  },
+  "devDependencies": {
+    "@vue/compiler-dom": "3.5.12",
+    "vue": "3.5.12"
   },
   "scripts": {
     "build": "vue-tsc --build --force",

package/src/composables/comboBox/SelectOnlyCombobox.vue

@@ -26,7 +26,6 @@ const onToggle = () => (isExpanded.value = !isExpanded.value);
 const onTypeAhead = () => {};
 
 const comboBox = createComboBox({
-  inputValue: selectedOption,
   autocomplete: "none",
   label: "some label",
   listLabel: "List",
@@ -51,7 +50,12 @@ defineExpose({ comboBox });
 
 <template>
   <div ref="comboboxRef">
-    <input v-bind="input" readonly @keydown.arrow-down="isExpanded = true" />
+    <input
+      v-bind="input"
+      v-model="selectedOption"
+      readonly
+      @keydown.arrow-down="isExpanded = true"
+    />
 
     <button v-bind="button">
       <template v-if="isExpanded">⬆️</template>

package/src/composables/comboBox/TestCombobox.ct.tsx

@@ -1,5 +1,5 @@
 import { test } from "@playwright/experimental-ct-vue";
-import { comboboxSelectOnlyTesting, comboboxTesting } from "./createComboBox.ct";
+import { comboboxSelectOnlyTesting, comboboxTesting } from "./createComboBox.testing";
 import SelectOnlyCombobox from "./SelectOnlyCombobox.vue";
 import TestCombobox from "./TestCombobox.vue";
 

package/src/composables/comboBox/TestCombobox.vue

@@ -30,7 +30,6 @@ const onAutocomplete = (input: string) => (searchTerm.value = input);
 const onToggle = () => (isExpanded.value = !isExpanded.value);
 
 const comboBox = createComboBox({
-  inputValue: searchTerm,
   autocomplete: "list",
   label: "some label",
   listLabel: "List",
@@ -55,13 +54,13 @@ defineExpose({ comboBox });
 
 <template>
   <div ref="comboboxRef">
-    <input v-bind="input" @keydown.arrow-down="isExpanded = true" />
+    <input v-bind="input" v-model="searchTerm" @keydown.arrow-down="isExpanded = true" />
 
-    <button v-bind="button">
-      <template v-if="isExpanded">⬆️</template>
-      <template v-else>⬇️</template>
+    <button v-bind="button" type="button">
+      <template v-if="isExpanded"> ⬆️ </template>
+      <template v-else> ⬇️ </template>
     </button>
-    <ul v-bind="listbox" :class="{ hidden: !isExpanded }" style="width: 400px">
+    <ul v-bind="listbox" :class="{ list: true, hidden: !isExpanded }">
       <li
         v-for="e in filteredOptions"
         :key="e"
@@ -75,6 +74,10 @@ defineExpose({ comboBox });
 </template>
 
 <style>
+.list {
+  width: 400px;
+}
+
 .hidden {
   display: none;
 }

package/src/composables/comboBox/createComboBox.ts

@@ -1,15 +1,15 @@
-import { computed, unref, type MaybeRef, type Ref } from "vue";
+import { computed, unref, useId, type MaybeRef, type Ref } from "vue";
 import { createBuilder } from "../../utils/builder";
-import { createId } from "../../utils/id";
 import { isPrintableCharacter, wasKeyPressed, type PressedKey } from "../../utils/keyboard";
+import { useOutsideClick } from "../helpers/useOutsideClick";
+import { useTypeAhead } from "../helpers/useTypeAhead";
 import {
   createListbox,
   type CreateListboxOptions,
   type ListboxValue,
 } from "../listbox/createListbox";
-import { useOutsideClick } from "../outsideClick";
-import { useTypeAhead } from "../typeAhead";
 
+/** See https://w3c.github.io/aria/#aria-autocomplete */
 export type ComboboxAutoComplete = "none" | "list" | "both";
 
 export const OPENING_KEYS: PressedKey[] = ["ArrowDown", "ArrowUp", " ", "Enter", "Home", "End"];
@@ -19,11 +19,15 @@ export const CLOSING_KEYS: PressedKey[] = [
   "Enter",
   "Tab",
 ];
-const SELECTING_KEYS_SINGLE: PressedKey[] = ["Enter", " "];
-const SELECTING_KEYS_MULTIPLE: PressedKey[] = ["Enter"];
 
-const isSelectingKey = (event: KeyboardEvent, isMultiselect?: boolean) => {
-  const selectingKeys = isMultiselect ? SELECTING_KEYS_MULTIPLE : SELECTING_KEYS_SINGLE;
+const SELECTING_KEYS: PressedKey[] = ["Enter"];
+
+/**
+ * if the a search input is included, space should not be used to select
+ * TODO: idea for the future: move this distinction to the listbox?
+ */
+const isSelectingKey = (event: KeyboardEvent, withSpace?: boolean) => {
+  const selectingKeys = withSpace ? [...SELECTING_KEYS, " "] : SELECTING_KEYS;
   return isKeyOfGroup(event, selectingKeys);
 };
 
@@ -42,9 +46,9 @@ export type CreateComboboxOptions<
    */
   listLabel: MaybeRef<string>;
   /**
-   * The current value of the combobox. Is updated when an option from the controlled listbox is selected or by typing into it.
+   * Provides additional description for the listbox which displays the available options.
    */
-  inputValue: Ref<string | undefined>;
+  listDescription?: MaybeRef<string | undefined>;
   /**
    * Controls the opened/visible state of the associated pop-up. When expanded the activeOption can be controlled via the keyboard.
    */
@@ -105,13 +109,13 @@ export const createComboBox = createBuilder(
     TAutoComplete extends ComboboxAutoComplete,
     TMultiple extends boolean = false,
   >({
-    inputValue,
     autocomplete: autocompleteRef,
     onAutocomplete,
     onTypeAhead,
     multiple: multipleRef,
     label,
     listLabel,
+    listDescription,
     isExpanded: isExpandedRef,
     activeOption,
     onToggle,
@@ -122,7 +126,7 @@ export const createComboBox = createBuilder(
     onActivatePrevious,
     templateRef,
   }: CreateComboboxOptions<TValue, TAutoComplete, TMultiple>) => {
-    const controlsId = createId("comboBox-control");
+    const controlsId = useId();
 
     const autocomplete = computed(() => unref(autocompleteRef));
     const isExpanded = computed(() => unref(isExpandedRef));
@@ -188,7 +192,7 @@ export const createComboBox = createBuilder(
         }
         return onActivateFirst?.();
       }
-      if (isSelectingKey(event, multiple.value)) {
+      if (isSelectingKey(event, autocomplete.value === "none")) {
         return handleSelect(activeOption.value!);
       }
       if (isExpanded.value && isKeyOfGroup(event, CLOSING_KEYS)) {
@@ -218,14 +222,16 @@ export const createComboBox = createBuilder(
       internals: { getOptionId },
     } = createListbox({
       label: listLabel,
+      description: listDescription,
       multiple,
       controlled: true,
       activeOption,
+      isExpanded,
       onSelect: handleSelect,
     });
 
     useOutsideClick({
-      queryComponent: () => templateRef.value,
+      inside: templateRef,
       onOutsideClick() {
         if (!isExpanded.value) return;
         onToggle?.(true);
@@ -250,7 +256,6 @@ export const createComboBox = createBuilder(
          * The input MAY be either a single-line text field that supports editing and typing or an element that only displays the current value of the combobox.
          */
         input: computed(() => ({
-          value: inputValue.value,
           role: "combobox",
           "aria-expanded": isExpanded.value,
           "aria-controls": controlsId,

package/src/composables/helpers/useDismissible.ts

@@ -0,0 +1,19 @@
+import { computed, type Ref } from "vue";
+import { useGlobalEventListener } from "./useGlobalListener";
+
+type UseDismissibleOptions = { isExpanded: Ref<boolean> };
+
+/**
+ * Composable that sets `isExpanded` to false, when the `Escape` key is pressed.
+ * Addresses the "dismissible" aspect of https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html
+ */
+export const useDismissible = ({ isExpanded }: UseDismissibleOptions) =>
+  useGlobalEventListener({
+    type: "keydown",
+    listener: (e) => {
+      if (e.key === "Escape") {
+        isExpanded.value = false;
+      }
+    },
+    disabled: computed(() => !isExpanded.value),
+  });

package/src/composables/helpers/useGlobalListener.spec.ts

@@ -0,0 +1,93 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { ref, type Ref } from "vue";
+import { mockVueLifecycle } from "../../utils/vitest";
+import { useGlobalEventListener } from "./useGlobalListener";
+
+let unmount: () => Promise<void> | undefined;
+
+describe("useGlobalEventListener", () => {
+  let target: Ref<HTMLButtonElement>;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    unmount = mockVueLifecycle();
+    target = ref(document.createElement("button"));
+    document.body.appendChild(target.value);
+  });
+
+  it("should be defined", () => {
+    expect(useGlobalEventListener).toBeDefined();
+  });
+
+  it("should listen to global events", () => {
+    // ARRANGE
+    const listener = vi.fn();
+    useGlobalEventListener({ type: "click", listener });
+    // ACT
+    const event = new MouseEvent("click", { bubbles: true });
+    target.value.dispatchEvent(event);
+    // ASSERT
+    expect(listener).toHaveBeenCalledTimes(1);
+    expect(listener).toBeCalledWith(event);
+  });
+
+  it("should stop to listen to global events after unmount", async () => {
+    // ARRANGE
+    const listener = vi.fn();
+    useGlobalEventListener({ type: "click", listener });
+    // ACT
+    await unmount();
+    expect(listener).toHaveBeenCalledTimes(0);
+    target.value.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    // ASSERT
+    expect(listener).toHaveBeenCalledTimes(0);
+  });
+
+  it("should allow for multiple of the same listener types", async () => {
+    // ARRANGE
+    vi.useFakeTimers();
+    const listener = vi.fn();
+    const disabled = ref(false);
+    const listener2 = vi.fn();
+    useGlobalEventListener({ type: "click", listener, disabled });
+    useGlobalEventListener({ type: "click", listener: listener2 });
+    // ACT
+    target.value.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    // ASSERT
+    expect(listener).toHaveBeenCalledTimes(1);
+    expect(listener2).toHaveBeenCalledTimes(1);
+    // ACT
+    disabled.value = true;
+    await vi.runAllTimersAsync();
+    // ACT
+    target.value.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    // ASSERT
+    expect(listener).toHaveBeenCalledTimes(1);
+    expect(listener2).toHaveBeenCalledTimes(2);
+  });
+
+  it("should not listen to events when disabled", async () => {
+    // ARRANGE
+    vi.useFakeTimers();
+    const disabled = ref(false);
+    const listener = vi.fn();
+    useGlobalEventListener({ type: "click", listener, disabled });
+    // ACT
+    await vi.runAllTimersAsync();
+    target.value.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    // ASSERT
+    expect(listener).toHaveBeenCalledTimes(1);
+    // ACT
+    disabled.value = true;
+    await vi.runAllTimersAsync();
+    target.value.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    // ASSERT
+    expect(listener).toHaveBeenCalledTimes(1);
+    // ACT
+    disabled.value = false;
+    await vi.runAllTimersAsync();
+    target.value.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    // ASSERT
+    expect(listener).toHaveBeenCalledTimes(2);
+  });
+});

package/src/composables/helpers/useGlobalListener.ts

@@ -0,0 +1,64 @@
+import { onBeforeMount, onBeforeUnmount, reactive, watchEffect, type Ref } from "vue";
+
+type DocumentEventType = keyof DocumentEventMap;
+type GlobalListener<K extends DocumentEventType = DocumentEventType> = (
+  event: DocumentEventMap[K],
+) => void;
+
+export type UseGlobalEventListenerOptions<K extends DocumentEventType> = {
+  type: K;
+  listener: GlobalListener<K>;
+  disabled?: Ref<boolean>;
+};
+
+const GLOBAL_LISTENERS = reactive(new Map<DocumentEventType, Set<GlobalListener>>());
+
+const updateRemainingListeners = (type: DocumentEventType, remaining?: Set<GlobalListener>) => {
+  if (remaining?.size) {
+    GLOBAL_LISTENERS.set(type, remaining);
+    return;
+  }
+  GLOBAL_LISTENERS.delete(type);
+  document.removeEventListener(type, GLOBAL_HANDLER);
+};
+
+const removeGlobalListener = <K extends DocumentEventType>(
+  type: K,
+  listener: GlobalListener<K>,
+) => {
+  const globalListener = GLOBAL_LISTENERS.get(type);
+  globalListener?.delete(listener as GlobalListener);
+
+  updateRemainingListeners(type, globalListener);
+};
+
+const addGlobalListener = <K extends DocumentEventType>(type: K, listener: GlobalListener<K>) => {
+  const globalListener = GLOBAL_LISTENERS.get(type) ?? new Set();
+  globalListener.add(listener as GlobalListener);
+  GLOBAL_LISTENERS.set(type, globalListener);
+
+  document.addEventListener(type, GLOBAL_HANDLER);
+};
+
+/**
+ * A single and unique function for all event types.
+ * We use the fact that `addEventListener` and `removeEventListener` are idempotent when called with the same function reference.
+ */
+const GLOBAL_HANDLER = (event: Event) => {
+  const type = event.type as DocumentEventType;
+  GLOBAL_LISTENERS.get(type)?.forEach((cb) => cb(event));
+};
+
+export const useGlobalEventListener = <K extends DocumentEventType>({
+  type,
+  listener,
+  disabled,
+}: UseGlobalEventListenerOptions<K>) => {
+  onBeforeMount(() =>
+    watchEffect(() =>
+      disabled?.value ? removeGlobalListener(type, listener) : addGlobalListener(type, listener),
+    ),
+  );
+
+  onBeforeUnmount(() => removeGlobalListener(type, listener));
+};

package/src/composables/helpers/useOutsideClick.spec.ts

@@ -0,0 +1,83 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { ref } from "vue";
+import { mockVueLifecycle } from "../../utils/vitest";
+import { useOutsideClick } from "./useOutsideClick";
+
+describe("useOutsideClick", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockVueLifecycle();
+  });
+
+  it("should be defined", () => {
+    expect(useOutsideClick).toBeDefined();
+  });
+
+  it("should detect outside clicks", () => {
+    // ARRANGE
+    const inside = ref(document.createElement("button"));
+    document.body.appendChild(inside.value);
+    const outside = ref(document.createElement("button"));
+    document.body.appendChild(outside.value);
+
+    const onOutsideClick = vi.fn();
+    useOutsideClick({ inside, onOutsideClick });
+    // ACT
+    const event = new MouseEvent("click", { bubbles: true });
+    outside.value.dispatchEvent(event);
+    // ASSERT
+    expect(onOutsideClick).toHaveBeenCalledTimes(1);
+    expect(onOutsideClick).toBeCalledWith(event);
+  });
+
+  it("should detect outside clicks correctly for multiple inside elements", () => {
+    // ARRANGE
+    const inside = [document.createElement("button"), document.createElement("button")];
+    inside.forEach((e) => document.body.appendChild(e));
+    const outside = ref(document.createElement("button"));
+    document.body.appendChild(outside.value);
+
+    const onOutsideClick = vi.fn();
+    useOutsideClick({ inside, onOutsideClick });
+    // ACT
+    const event = new MouseEvent("click", { bubbles: true });
+    inside[0].dispatchEvent(event);
+    inside[1].dispatchEvent(event);
+    // ASSERT
+    expect(onOutsideClick).not.toHaveBeenCalled();
+
+    // ACT
+    outside.value.dispatchEvent(event);
+    // ASSERT
+    expect(onOutsideClick).toHaveBeenCalledTimes(1);
+    expect(onOutsideClick).toBeCalledWith(event);
+  });
+
+  it("should ignore outside clicks when disabled", async () => {
+    // ARRANGE
+    vi.useFakeTimers();
+    const inside = ref(document.createElement("button"));
+    document.body.appendChild(inside.value);
+    const outside = ref(document.createElement("button"));
+    document.body.appendChild(outside.value);
+
+    const disabled = ref(false);
+    const onOutsideClick = vi.fn();
+    useOutsideClick({ inside, disabled, onOutsideClick });
+
+    // ACT
+    const event = new MouseEvent("click", { bubbles: true });
+    outside.value.dispatchEvent(event);
+    // ASSERT
+    expect(onOutsideClick).toHaveBeenCalledTimes(1);
+    expect(onOutsideClick).toBeCalledWith(event);
+
+    // ACT
+    disabled.value = true;
+    await vi.runAllTimersAsync();
+    const event2 = new MouseEvent("click", { bubbles: true });
+    outside.value.dispatchEvent(event2);
+    // ASSERT
+    expect(onOutsideClick).toHaveBeenCalledTimes(1);
+  });
+});

package/src/composables/helpers/useOutsideClick.ts

@@ -0,0 +1,40 @@
+import type { Arrayable } from "vitest";
+import { toValue, type Ref } from "vue";
+import type { MaybeReactiveSource } from "../../utils/types";
+import { useGlobalEventListener } from "./useGlobalListener";
+
+export type UseOutsideClickOptions = {
+  /**
+   * HTML element of the component where clicks should be ignored
+   */
+  inside: MaybeReactiveSource<Arrayable<HTMLElement | undefined>>;
+  /**
+   * Callback when an outside click occurred.
+   */
+  onOutsideClick: (event: MouseEvent) => void;
+  /**
+   * If `true`, event listeners will be removed and no outside clicks will be captured.
+   */
+  disabled?: Ref<boolean>;
+};
+
+/**
+ * Composable for listening to click events that occur outside of a component.
+ * Useful to e.g. close flyouts or tooltips.
+ */
+export const useOutsideClick = ({ inside, onOutsideClick, disabled }: UseOutsideClickOptions) => {
+  /**
+   * Document click handle that closes then tooltip when clicked outside.
+   * Should only be called when trigger is "click".
+   */
+  const listener = (event: MouseEvent) => {
+    const raw = toValue(inside);
+    const elements = Array.isArray(raw) ? raw : [raw];
+    const isOutsideClick = !elements.some((element) =>
+      element?.contains(event.target as HTMLElement),
+    );
+    if (isOutsideClick) onOutsideClick(event);
+  };
+
+  useGlobalEventListener({ type: "click", listener, disabled });
+};

package/src/composables/{typeAhead.spec.ts → helpers/useTypeAhead.spec.ts}

@@ -1,5 +1,5 @@
 import { beforeAll, expect, test, vi } from "vitest";
-import { useTypeAhead } from "./typeAhead";
+import { useTypeAhead } from "./useTypeAhead";
 
 beforeAll(() => {
   vi.useFakeTimers();

package/src/composables/{typeAhead.ts → helpers/useTypeAhead.ts}

@@ -1,5 +1,5 @@
-import { isPrintableCharacter } from "../utils/keyboard";
-import { debounce } from "../utils/timer";
+import { isPrintableCharacter } from "../../utils/keyboard";
+import { debounce } from "../../utils/timer";
 
 /**
  * Enhances typeAhead to combine multiple inputs in quick succession and filter out non-printable characters.

package/src/composables/listbox/TestListbox.ct.tsx

@@ -1,6 +1,6 @@
 import { test } from "@playwright/experimental-ct-vue";
 import TestListbox from "./TestListbox.vue";
-import { listboxTesting } from "./createListbox.ct";
+import { listboxTesting } from "./createListbox.testing";
 
 test("listbox", async ({ mount, page }) => {
   await mount(<TestListbox />);

package/src/composables/listbox/TestListbox.vue

@@ -30,7 +30,9 @@ const {
   elements: { listbox, option: headlessOption },
 } = createListbox({
   label: "Test listbox",
+  description: "Test description",
   activeOption,
+  isExpanded: true,
   onSelect: (id) => {
     selectedOption.value = selectedOption.value === id ? undefined : id;
   },

package/src/composables/listbox/createListbox.ts

@@ -1,7 +1,6 @@
-import { computed, ref, unref, watchEffect, type MaybeRef, type Ref } from "vue";
-import { createId } from "../..";
-import { createBuilder, type HeadlessElementAttributes } from "../../utils/builder";
-import { useTypeAhead } from "../typeAhead";
+import { computed, nextTick, ref, unref, useId, watchEffect, type MaybeRef, type Ref } from "vue";
+import { createBuilder, type VBindAttributes } from "../../utils/builder";
+import { useTypeAhead } from "../helpers/useTypeAhead";
 
 export type ListboxValue = string | number | boolean;
 
@@ -10,6 +9,10 @@ export type CreateListboxOptions<TValue extends ListboxValue, TMultiple extends
    * Aria label for the listbox.
    */
   label: MaybeRef<string>;
+  /**
+   * Aria description for the listbox.
+   */
+  description?: MaybeRef<string | undefined>;
   /**
    * Value of currently (visually) active option.
    */
@@ -19,6 +22,10 @@ export type CreateListboxOptions<TValue extends ListboxValue, TMultiple extends
    * This disables keyboard events and makes the listbox not focusable.
    */
   controlled?: boolean;
+  /**
+   * Controls the opened/visible state of the listbox. When expanded the activeOption can be controlled via the keyboard.
+   */
+  isExpanded?: MaybeRef<boolean>;
   /**
    * Whether the listbox is multiselect.
    */
@@ -77,6 +84,7 @@ export const createListbox = createBuilder(
     options: CreateListboxOptions<TValue, TMultiple>,
   ) => {
     const isMultiselect = computed(() => unref(options.multiple) ?? false);
+    const isExpanded = computed(() => unref(options.isExpanded) ?? false);
 
     /**
      * Map for option IDs. key = option value, key = ID for the HTML element
@@ -85,7 +93,7 @@ export const createListbox = createBuilder(
 
     const getOptionId = (value: TValue) => {
       if (!descendantKeyIdMap.has(value)) {
-        descendantKeyIdMap.set(value, createId("listbox-option"));
+        descendantKeyIdMap.set(value, useId());
       }
       return descendantKeyIdMap.get(value)!;
     };
@@ -96,11 +104,18 @@ export const createListbox = createBuilder(
     const isFocused = ref(false);
 
     // scroll currently active option into view if needed
-    watchEffect(() => {
-      if (options.activeOption.value == undefined || (!isFocused.value && !options.controlled))
+    watchEffect(async () => {
+      if (
+        !isExpanded.value ||
+        options.activeOption.value == undefined ||
+        (!isFocused.value && !options.controlled)
+      )
         return;
       const id = getOptionId(options.activeOption.value);
-      document.getElementById(id)?.scrollIntoView({ block: "nearest", inline: "nearest" });
+
+      await nextTick(() => {
+        document.getElementById(id)?.scrollIntoView({ block: "end", inline: "nearest" });
+      });
     });
 
     const typeAhead = useTypeAhead((inputString) => options.onTypeAhead?.(inputString));
@@ -152,18 +167,20 @@ export const createListbox = createBuilder(
       }
     };
 
-    const listbox = computed<HeadlessElementAttributes>(() =>
+    const listbox = computed<VBindAttributes>(() =>
       options.controlled
         ? {
             role: "listbox",
             "aria-multiselectable": isMultiselect.value,
             "aria-label": unref(options.label),
+            "aria-description": options.description,
             tabindex: "-1",
           }
         : {
             role: "listbox",
             "aria-multiselectable": isMultiselect.value,
             "aria-label": unref(options.label),
+            "aria-description": options.description,
             tabindex: "0",
             "aria-activedescendant":
               options.activeOption.value != undefined

package/src/composables/menuButton/TestMenuButton.ct.tsx

@@ -1,5 +1,5 @@
 import { test } from "@playwright/experimental-ct-vue";
-import { menuButtonTesting } from "./createMenuButton.ct";
+import { menuButtonTesting } from "./createMenuButton.testing";
 import TestMenuButton from "./TestMenuButton.vue";
 
 test("menuButton", async ({ mount, page }) => {
@@ -9,6 +9,6 @@ test("menuButton", async ({ mount, page }) => {
     page,
     button: page.getByRole("button"),
     menu: page.locator("ul"),
-    menuItems: await page.locator("li").all(),
+    menuItems: page.getByRole("menuitem"),
   });
 });

package/src/composables/menuButton/TestMenuButton.vue

@@ -8,18 +8,19 @@ const items = Array.from({ length: 10 }, (_, index) => {
 });
 
 const activeItem = ref<string>();
+const isExpanded = ref(false);
+const onToggle = () => (isExpanded.value = !isExpanded.value);
 
 const {
-  elements: { button, menu, menuItem, listItem, flyout },
-  state: { isExpanded },
-} = createMenuButton({});
+  elements: { root, button, menu, menuItem, listItem },
+} = createMenuButton({ isExpanded, onToggle });
 </script>
 
 <template>
-  <button v-bind="button">Toggle nav menu</button>
-  <div v-bind="flyout">
+  <div v-bind="root">
+    <button v-bind="button">Toggle nav menu</button>
     <ul v-show="isExpanded" v-bind="menu">
-      <li v-for="item in items" v-bind="listItem" :key="item.value" title="item">
+      <li v-for="item in items" v-bind="listItem" :key="item.value">
         <a v-bind="menuItem({ active: activeItem === item.value })" href="#">{{ item.label }}</a>
       </li>
     </ul>