@sit-onyx/headless 1.0.0-beta.20 → 1.0.0-beta.22

package/src/composables/comboBox/SelectOnlyCombobox.vue

@@ -1,90 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, useTemplateRef } from "vue";
-import { createComboBox } from "./createComboBox";
-
-const options = ["a", "b", "c", "d"];
-const isExpanded = ref(false);
-const comboboxRef = useTemplateRef("combobox");
-const activeOption = ref("");
-const selectedOption = ref("");
-const selectedIndex = computed<number | undefined>(() => {
-  const index = options.indexOf(activeOption.value);
-  return index !== -1 ? index : undefined;
-});
-
-const onActivateFirst = () => (activeOption.value = options[0]);
-const onActivateLast = () => (activeOption.value = options[options.length - 1]);
-const onActivateNext = () => {
-  if (selectedIndex.value === undefined) {
-    return onActivateFirst();
-  }
-  activeOption.value = options[selectedIndex.value + (1 % (options.length - 1))];
-};
-const onActivatePrevious = () => (activeOption.value = options[(selectedIndex.value ?? 0) - 1]);
-const onSelect = (newValue: string) => (selectedOption.value = newValue);
-const onToggle = () => (isExpanded.value = !isExpanded.value);
-const onTypeAhead = () => {};
-
-const comboBox = createComboBox({
-  autocomplete: "none",
-  label: "some label",
-  listLabel: "List",
-  activeOption,
-  isExpanded,
-  templateRef: comboboxRef,
-  onToggle,
-  onTypeAhead,
-  onActivateFirst,
-  onActivateLast,
-  onActivateNext,
-  onActivatePrevious,
-  onSelect,
-});
-
-const {
-  elements: { input, listbox, button, option },
-} = comboBox;
-
-defineExpose({ comboBox });
-</script>
-
-<template>
-  <div ref="combobox">
-    <input
-      v-bind="input"
-      v-model="selectedOption"
-      readonly
-      @keydown.arrow-down="isExpanded = true"
-    />
-
-    <button v-bind="button" type="button">
-      <template v-if="isExpanded">⬆️</template>
-      <template v-else>⬇️</template>
-    </button>
-    <ul class="listbox" v-bind="listbox" :class="{ hidden: !isExpanded }">
-      <li
-        v-for="e in options"
-        :key="e"
-        v-bind="option({ value: e, label: e, disabled: false, selected: e === selectedOption })"
-        :class="{ active: e === activeOption }"
-      >
-        {{ e }}
-      </li>
-    </ul>
-  </div>
-</template>
-
-<style>
-.hidden {
-  display: none;
-}
-.active {
-  outline: 2px solid black;
-}
-[aria-selected="true"] {
-  background-color: red;
-}
-.listbox {
-  width: 400px;
-}
-</style>

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

@@ -1,24 +0,0 @@
-import { test } from "@playwright/experimental-ct-vue";
-import { comboboxSelectOnlyTesting, comboboxTesting } from "./createComboBox.testing";
-import SelectOnlyCombobox from "./SelectOnlyCombobox.vue";
-import TestCombobox from "./TestCombobox.vue";
-
-test("combobox", async ({ mount, page }) => {
-  await mount(<TestCombobox />);
-  const listbox = page.getByRole("listbox");
-  const combobox = page.getByRole("combobox");
-  const button = page.getByRole("button");
-  const options = page.getByRole("option");
-
-  await comboboxTesting(page, listbox, combobox, button, options);
-});
-
-test("select only combobox", async ({ mount, page }) => {
-  await mount(<SelectOnlyCombobox />);
-  const listbox = page.getByRole("listbox");
-  const combobox = page.getByRole("combobox");
-
-  await comboboxSelectOnlyTesting(page, listbox, combobox, (loc) =>
-    loc.evaluate((e) => e.classList.contains("active")),
-  );
-});

package/src/composables/comboBox/TestCombobox.vue

@@ -1,84 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, useTemplateRef } from "vue";
-import { createComboBox } from "./createComboBox";
-
-const options = ["a", "b", "c", "d"];
-const isExpanded = ref(false);
-const searchTerm = ref("");
-const comboboxRef = useTemplateRef("combobox");
-const activeOption = ref("");
-const filteredOptions = computed(() => options.filter((v) => v.includes(searchTerm.value)));
-const selectedIndex = computed<number | undefined>(() => {
-  const index = filteredOptions.value.indexOf(activeOption.value);
-  return index !== -1 ? index : undefined;
-});
-
-const onActivateFirst = () => (activeOption.value = filteredOptions.value[0]);
-const onActivateLast = () =>
-  (activeOption.value = filteredOptions.value[filteredOptions.value.length - 1]);
-const onActivateNext = () => {
-  if (selectedIndex.value === undefined) {
-    return onActivateFirst();
-  }
-  activeOption.value =
-    filteredOptions.value[selectedIndex.value + (1 % (filteredOptions.value.length - 1))];
-};
-const onActivatePrevious = () =>
-  (activeOption.value = filteredOptions.value[(selectedIndex.value ?? 0) - 1]);
-const onSelect = (newValue: string) => (searchTerm.value = newValue);
-const onAutocomplete = (input: string) => (searchTerm.value = input);
-const onToggle = () => (isExpanded.value = !isExpanded.value);
-
-const comboBox = createComboBox({
-  autocomplete: "list",
-  label: "some label",
-  listLabel: "List",
-  activeOption,
-  isExpanded,
-  templateRef: comboboxRef,
-  onToggle,
-  onAutocomplete,
-  onActivateFirst,
-  onActivateLast,
-  onActivateNext,
-  onActivatePrevious,
-  onSelect,
-});
-
-const {
-  elements: { input, listbox, button, option },
-} = comboBox;
-
-defineExpose({ comboBox });
-</script>
-
-<template>
-  <div ref="combobox">
-    <input v-bind="input" v-model="searchTerm" @keydown.arrow-down="isExpanded = true" />
-
-    <button v-bind="button" type="button">
-      <template v-if="isExpanded"> ⬆️ </template>
-      <template v-else> ⬇️ </template>
-    </button>
-    <ul v-bind="listbox" :class="{ list: true, hidden: !isExpanded }">
-      <li
-        v-for="e in filteredOptions"
-        :key="e"
-        v-bind="option({ value: e, label: e, disabled: false })"
-        :style="{ 'background-color': e === activeOption ? 'red' : undefined }"
-      >
-        {{ e }}
-      </li>
-    </ul>
-  </div>
-</template>
-
-<style>
-.list {
-  width: 400px;
-}
-
-.hidden {
-  display: none;
-}
-</style>

package/src/composables/comboBox/createComboBox.testing.ts

@@ -1,168 +0,0 @@
-import { expect, test } from "@playwright/experimental-ct-vue";
-import type { Locator, Page } from "@playwright/test";
-
-const expectToOpen = async (
-  keyCombo: string,
-  combobox: Locator,
-  listbox: Locator,
-  checkActive?: () => Promise<boolean>,
-) => {
-  await closeCombobox(combobox, listbox);
-  await combobox.press(keyCombo);
-  await expect(listbox, `Listbox should be opened after pressing ${keyCombo}.`).toBeVisible();
-  if (checkActive) {
-    const active = await checkActive();
-    expect(active, "Given option should be active").toBeTruthy();
-  }
-};
-
-const expectToClose = async (
-  keyCombo: string,
-  combobox: Locator,
-  listbox: Locator,
-  selectedLocator?: () => Locator,
-) => {
-  await openCombobox(combobox, listbox);
-  await combobox.press(keyCombo);
-  await expect(listbox, `Listbox should be closed after pressing ${keyCombo}.`).toBeHidden();
-  await expect(combobox).toBeFocused();
-  await openCombobox(combobox, listbox);
-  if (selectedLocator) {
-    await expectToBeSelected(selectedLocator());
-  }
-};
-
-/**
- * Test an implementation of the combobox based on https://w3c.github.io/aria/#combobox
- */
-export const comboboxTesting = async (
-  _page: Page,
-  listbox: Locator,
-  combobox: Locator,
-  button: Locator,
-  options: Locator,
-) => {
-  await expect(listbox, "Typically, the initial state of a combobox is collapsed.").toBeHidden();
-
-  await expect(combobox, "In the collapsed state, the combobox element is visible.").toBeVisible();
-  await expect(
-    button,
-    "In the collapsed state, the optional button element is visible.",
-  ).toBeVisible();
-
-  await button.click(); // toggle to be expanded
-  await expect(
-    combobox,
-    "A combobox is said to be expanded when the combobox element shows its current value",
-  ).toHaveValue("");
-  await expect(
-    listbox,
-    "A combobox is said to be expanded when the associated popup is visible",
-  ).toBeVisible();
-  await button.click(); // toggle to be closed
-
-  await expect(
-    combobox,
-    "Authors MUST set aria-expanded to false when it is collapsed.",
-  ).toHaveAttribute("aria-expanded", "false");
-  await button.click(); // toggle to be expanded
-  await expect(
-    combobox,
-    "Authors MUST set aria-expanded to true when it is expanded.",
-  ).toHaveAttribute("aria-expanded", "true");
-  await button.click(); // toggle to be closed
-
-  await button.focus();
-  await expect(button, "authors SHOULD ensure that the button is focusable").toBeFocused();
-  await expect(
-    button,
-    "authors SHOULD ensure that the button is not included in the page Tab sequence",
-  ).toHaveAttribute("tabindex", "-1");
-  await expect(
-    combobox.getByRole("button"),
-    "authors SHOULD ensure that the button is not a descendant of the element with role combobox",
-  ).toHaveCount(0);
-
-  const firstElement = options.first();
-
-  // open and select first option
-  await combobox.focus();
-  expectToOpen("ArrowDown", combobox, listbox);
-
-  const firstId = await (await firstElement.elementHandle())!.getAttribute("id");
-  expect(typeof firstId).toBe("string");
-  await expect(
-    combobox,
-    "When a descendant of the popup element is active, authors MAY set aria-activedescendant on the combobox to a value that refers to the active element within the popup.",
-  ).toHaveAttribute("aria-activedescendant", firstId as string);
-  await expect(
-    combobox,
-    "When a descendant of the popup element is active, authors MAY ensure that the focus remains on the combobox element",
-  ).toBeFocused();
-
-  // Single Select Pattern
-};
-
-const closeCombobox = async (combobox: Locator, listbox: Locator) => {
-  await combobox.press("Escape");
-  return expect(listbox, "Listbox should be collapsed again").toBeHidden();
-};
-
-const openCombobox = async (combobox: Locator, listbox: Locator) => {
-  await combobox.press("Home");
-  return expect(listbox, "Listbox should be open again").toBeVisible();
-};
-
-const expectToBeSelected = async (selectedItem: Locator) =>
-  expect(selectedItem, "Option should be selected").toHaveAttribute("aria-selected", "true");
-
-export type CheckLocator = (option: Locator) => Promise<boolean>;
-
-/**
- * Test an implementation of the combobox based on https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/
- */
-export const comboboxSelectOnlyTesting = async (
-  page: Page,
-  listbox: Locator,
-  combobox: Locator,
-  isActive: CheckLocator,
-) => {
-  await expect(listbox, "Initial state of a combobox is collapsed.").toBeHidden();
-
-  await combobox.focus();
-
-  await test.step("Test opening keys", async () => {
-    await expectToOpen("ArrowUp", combobox, listbox, () =>
-      isActive(page.getByRole("option").first()),
-    );
-    await expectToOpen("Alt+ArrowDown", combobox, listbox);
-    await expectToOpen("Space", combobox, listbox);
-    await expectToOpen("Enter", combobox, listbox);
-    await expectToOpen("Home", combobox, listbox, () => isActive(page.getByRole("option").first()));
-    await expectToOpen("End", combobox, listbox, () => isActive(page.getByRole("option").last()));
-    await expectToOpen("ArrowDown", combobox, listbox);
-    await expectToOpen("a", combobox, listbox);
-  });
-
-  await test.step("Selecting with Enter", async () => {
-    await expectToClose("Enter", combobox, listbox, () => page.getByRole("option").first());
-    await expectToClose(" ", combobox, listbox, () => page.getByRole("option").first());
-    await expectToClose("Escape", combobox, listbox, () => page.getByRole("option").first());
-  });
-
-  await test.step("Activating with End", async () => {
-    await openCombobox(combobox, listbox);
-    await combobox.press("End");
-    const active = await isActive(listbox.getByRole("option").last());
-    expect(active, "Given option should be active").toBeTruthy();
-    await expect(combobox).toBeFocused();
-  });
-
-  await test.step("Activating with Home", async () => {
-    await openCombobox(combobox, listbox);
-    await combobox.press("Home");
-    const active = await isActive(listbox.getByRole("option").first());
-    expect(active, "Given option should be active").toBeTruthy();
-    await expect(combobox).toBeFocused();
-  });
-};

package/src/composables/comboBox/createComboBox.ts

@@ -1,280 +0,0 @@
-import { computed, unref, useId, type MaybeRef, type Ref } from "vue";
-import { createBuilder } from "../../utils/builder";
-import { isPrintableCharacter, wasKeyPressed, type PressedKey } from "../../utils/keyboard";
-import type { Nullable } from "../../utils/types";
-import { useOutsideClick } from "../helpers/useOutsideClick";
-import { useTypeAhead } from "../helpers/useTypeAhead";
-import {
-  createListbox,
-  type CreateListboxOptions,
-  type ListboxValue,
-} from "../listbox/createListbox";
-
-/** See https://w3c.github.io/aria/#aria-autocomplete */
-export type ComboboxAutoComplete = "none" | "list" | "both";
-
-export const OPENING_KEYS: PressedKey[] = ["ArrowDown", "ArrowUp", " ", "Enter", "Home", "End"];
-export const CLOSING_KEYS: PressedKey[] = [
-  "Escape",
-  { key: "ArrowUp", altKey: true },
-  "Enter",
-  "Tab",
-];
-
-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);
-};
-
-const isKeyOfGroup = (event: KeyboardEvent, group: PressedKey[]) =>
-  group.some((key) => wasKeyPressed(event, key));
-
-export type CreateComboboxOptions<
-  TValue extends ListboxValue,
-  TAutoComplete extends ComboboxAutoComplete,
-  TMultiple extends boolean = false,
-> = {
-  autocomplete: MaybeRef<TAutoComplete>;
-  label: MaybeRef<string>;
-  /**
-   * Labels the listbox which displays the available options. E.g. the list label could be "Countries" for a combobox which is labelled "Country".
-   */
-  listLabel: MaybeRef<string>;
-  /**
-   * Provides additional description for the listbox which displays the available options.
-   */
-  listDescription?: MaybeRef<Nullable<string>>;
-  /**
-   * Controls the opened/visible state of the associated pop-up. When expanded the activeOption can be controlled via the keyboard.
-   */
-  isExpanded: MaybeRef<boolean>;
-  /**
-   * If expanded, the active option is the currently highlighted option of the controlled listbox.
-   */
-  activeOption: Ref<Nullable<TValue>>;
-  /**
-   * Template ref to the component root (required to close combobox on outside click).
-   */
-  templateRef: Ref<Nullable<HTMLElement>>;
-  /**
-   * Hook when the popover should toggle.
-   *
-   * @param preventFocus If `true`, the parent combobox should not be focused (e.g. on outside click).
-   */
-  onToggle?: (preventFocus?: boolean) => void;
-  /**
-   * Hook when an option is (un-)selected.
-   */
-  onSelect?: (value: TValue) => void;
-  /**
-   * Hook when the first option should be activated.
-   */
-  onActivateFirst?: () => void;
-  /**
-   * Hook when the last option should be activated.
-   */
-  onActivateLast?: () => void;
-  /**
-   * Hook when the next option should be activated.
-   */
-  onActivateNext?: (currentValue: TValue) => void;
-  /**
-   * Hook when the previous option should be activated.
-   */
-  onActivatePrevious?: (currentValue: TValue) => void;
-} & (TAutoComplete extends Exclude<ComboboxAutoComplete, "none">
-  ? { onAutocomplete: (input: string) => void }
-  : { onAutocomplete?: undefined }) &
-  (TAutoComplete extends "none"
-    ? { onTypeAhead: (input: string) => void }
-    : { onTypeAhead?: undefined }) &
-  Pick<
-    CreateListboxOptions<TValue, TMultiple>,
-    | "onActivateFirst"
-    | "onActivateLast"
-    | "onActivateNext"
-    | "onActivatePrevious"
-    | "onSelect"
-    | "multiple"
-  >;
-
-export const createComboBox = createBuilder(
-  <
-    TValue extends ListboxValue,
-    TAutoComplete extends ComboboxAutoComplete,
-    TMultiple extends boolean = false,
-  >({
-    autocomplete: autocompleteRef,
-    onAutocomplete,
-    onTypeAhead,
-    multiple: multipleRef,
-    label,
-    listLabel,
-    listDescription,
-    isExpanded: isExpandedRef,
-    activeOption,
-    onToggle,
-    onSelect,
-    onActivateFirst,
-    onActivateLast,
-    onActivateNext,
-    onActivatePrevious,
-    templateRef,
-  }: CreateComboboxOptions<TValue, TAutoComplete, TMultiple>) => {
-    const controlsId = useId();
-
-    const autocomplete = computed(() => unref(autocompleteRef));
-    const isExpanded = computed(() => unref(isExpandedRef));
-    const multiple = computed(() => unref(multipleRef));
-
-    const handleInput = (event: Event) => {
-      const inputElement = event.target as HTMLInputElement;
-
-      if (autocomplete.value !== "none") {
-        onAutocomplete?.(inputElement.value);
-      }
-    };
-
-    const typeAhead = useTypeAhead((inputString) => onTypeAhead?.(inputString));
-
-    const handleSelect = (value: TValue) => {
-      onSelect?.(value);
-      if (!unref(multiple)) {
-        onToggle?.();
-      }
-    };
-
-    const handleNavigation = (event: KeyboardEvent) => {
-      switch (event.key) {
-        case "ArrowUp":
-          event.preventDefault();
-          if (activeOption.value == undefined) {
-            return onActivateLast?.();
-          }
-          onActivatePrevious?.(activeOption.value);
-          break;
-        case "ArrowDown":
-          event.preventDefault();
-          if (activeOption.value == undefined) {
-            return onActivateFirst?.();
-          }
-          onActivateNext?.(activeOption.value);
-          break;
-        case "Home":
-          event.preventDefault();
-          onActivateFirst?.();
-          break;
-        case "End":
-          event.preventDefault();
-          onActivateLast?.();
-          break;
-      }
-    };
-
-    const handleKeydown = (event: KeyboardEvent) => {
-      if (event.key === "Enter") {
-        // prevent submitting on pressing enter when the combo box is used inside a <form>
-        event.preventDefault();
-      }
-
-      if (!isExpanded.value && isKeyOfGroup(event, OPENING_KEYS)) {
-        onToggle?.();
-        if (event.key === " ") {
-          event.preventDefault();
-        }
-        if (event.key === "End") {
-          return onActivateLast?.();
-        }
-        return onActivateFirst?.();
-      }
-      if (isSelectingKey(event, autocomplete.value === "none")) {
-        return handleSelect(activeOption.value!);
-      }
-      if (isExpanded.value && isKeyOfGroup(event, CLOSING_KEYS)) {
-        return onToggle?.();
-      }
-      if (autocomplete.value === "none" && isPrintableCharacter(event.key)) {
-        !isExpanded.value && onToggle?.();
-        return typeAhead(event);
-      }
-      if (autocomplete.value !== "none" && isPrintableCharacter(event.key)) {
-        !isExpanded.value && onToggle?.();
-        return;
-      }
-      return handleNavigation(event);
-    };
-
-    const autocompleteInput = computed(() => {
-      if (autocomplete.value === "none") return null;
-      return {
-        "aria-autocomplete": autocomplete.value,
-        type: "text",
-      };
-    });
-
-    const {
-      elements: { option, group, listbox },
-      internals: { getOptionId },
-    } = createListbox({
-      label: listLabel,
-      description: listDescription,
-      multiple,
-      controlled: true,
-      activeOption,
-      isExpanded,
-      onSelect: handleSelect,
-    });
-
-    useOutsideClick({
-      inside: templateRef,
-      onOutsideClick() {
-        if (!isExpanded.value) return;
-        onToggle?.(true);
-      },
-    });
-
-    return {
-      elements: {
-        option,
-        group,
-        /**
-         * The listbox associated with the combobox.
-         */
-        listbox: computed(() => ({
-          ...listbox.value,
-          id: controlsId,
-          // preventDefault to not lose focus of the combobox
-          onMousedown: (e) => e.preventDefault(),
-        })),
-        /**
-         * An input that controls another element, that can dynamically pop-up to help the user set the value of the input.
-         * 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(() => ({
-          role: "combobox",
-          "aria-expanded": isExpanded.value,
-          "aria-controls": controlsId,
-          "aria-label": unref(label),
-          "aria-activedescendant":
-            activeOption.value != undefined ? getOptionId(activeOption.value) : undefined,
-          onInput: handleInput,
-          onKeydown: handleKeydown,
-          ...autocompleteInput.value,
-        })),
-        /**
-         * An optional button to control the visibility of the popup.
-         */
-        button: computed(() => ({
-          tabindex: "-1",
-          onClick: () => onToggle?.(),
-        })),
-      },
-    };
-  },
-);

package/src/composables/helpers/useDismissible.ts

@@ -1,19 +0,0 @@
-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),
-  });