@sit-onyx/headless 0.1.0-alpha.7 → 0.1.0

package/src/composables/comboBox/TestCombobox.vue

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

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

@@ -1,72 +0,0 @@
-import { expect } from "@playwright/experimental-ct-vue";
-import type { Locator, Page } from "@playwright/test";
-
-/**
- * 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();
-  await page.keyboard.press("ArrowDown");
-  await page.keyboard.press("ArrowDown");
-
-  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();
-};

package/src/composables/comboBox/createComboBox.ts

@@ -1,163 +0,0 @@
-import { computed, ref, type MaybeRef, type Ref } from "vue";
-import { createBuilder } from "../../utils/builder";
-import { createId } from "../../utils/id";
-import {
-  createListbox,
-  type CreateListboxOptions,
-  type ListboxValue,
-} from "../listbox/createListbox";
-
-export type CreateComboboxOptions<
-  TValue extends ListboxValue = ListboxValue,
-  TMultiple extends boolean = false,
-> = {
-  /**
-   * 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>;
-  /**
-   * The current value of the combobox. Is updated when an option from the controlled listbox is selected or by typing into it.
-   */
-  inputValue: Ref<TValue | undefined>;
-  /**
-   * Controls the opened/visible state of the associated pop-up. When expanded the activeOption can be controlled via the keyboard.
-   */
-  isExpanded: Ref<boolean>;
-  /**
-   * If expanded, the active option is the currently highlighted option of the controlled listbox.
-   */
-  activeOption: Ref<TValue | undefined>;
-  /**
-   * Hook when the popover should toggle.
-   */
-  onToggle?: () => void;
-} & Pick<
-  CreateListboxOptions<TValue, TMultiple>,
-  "onActivateFirst" | "onActivateLast" | "onActivateNext" | "onActivatePrevious" | "onSelect"
->;
-
-// TODO: https://w3c.github.io/aria/#aria-autocomplete
-// TODO: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
-// TODO: button as optional
-
-export const createComboBox = createBuilder(
-  <TValue extends ListboxValue = ListboxValue, TMultiple extends boolean = false>({
-    listLabel,
-    inputValue,
-    isExpanded,
-    activeOption,
-    onToggle,
-    onSelect,
-    onActivateFirst,
-    onActivateLast,
-    onActivateNext,
-    onActivatePrevious,
-  }: CreateComboboxOptions<TValue, TMultiple>) => {
-    const inputValid = ref(true);
-    const controlsId = createId("comboBox-control");
-    const labelId = createId("comboBox-label");
-
-    const handleInput = (event: Event) => {
-      const inputElement = event.target as HTMLInputElement;
-      inputValue.value = inputElement.value as TValue;
-      inputValid.value = inputElement.validity.valid;
-    };
-
-    const handleBlur = () => {
-      if (isExpanded.value) {
-        onToggle?.();
-      }
-    };
-
-    const handleKeydown = (event: KeyboardEvent) => {
-      if (!isExpanded.value) {
-        return;
-      }
-      switch (event.key) {
-        case "Enter":
-          event.preventDefault();
-          if (activeOption.value) {
-            onSelect?.(activeOption.value);
-            inputValue.value = activeOption.value;
-          }
-          break;
-        case "Escape":
-          event.preventDefault();
-          onToggle?.();
-          break;
-        case "ArrowUp":
-          event.preventDefault();
-          if (!activeOption.value) {
-            return onActivateLast?.();
-          }
-          onActivatePrevious?.(activeOption.value);
-          break;
-        case "ArrowDown":
-          event.preventDefault();
-          if (!activeOption.value) {
-            return onActivateFirst?.();
-          }
-          onActivateNext?.(activeOption.value);
-          break;
-        case "Home":
-          event.preventDefault();
-          onActivateFirst?.();
-          break;
-        case "End":
-          event.preventDefault();
-          onActivateLast?.();
-          break;
-      }
-    };
-
-    const {
-      elements: { option, group, listbox },
-      internals: { getOptionId },
-    } = createListbox({
-      label: listLabel,
-      controlled: true,
-      activeOption,
-      selectedOption: activeOption,
-      onSelect,
-    });
-
-    return {
-      elements: {
-        option,
-        group,
-        label: {
-          id: labelId,
-        },
-        /**
-         * The listbox associated with the combobox.
-         */
-        listBox: computed(() => ({
-          ...listbox.value,
-          id: controlsId,
-        })),
-        /**
-         * 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(() => ({
-          value: inputValue.value,
-          role: "combobox",
-          "aria-expanded": isExpanded.value,
-          "aria-controls": controlsId,
-          "aria-labelledby": labelId,
-          "aria-activedescendant": activeOption.value ? getOptionId(activeOption.value) : undefined,
-          onInput: handleInput,
-          onKeydown: handleKeydown,
-          onBlur: handleBlur,
-        })),
-        /**
-         * An optional button to control the visibility of the popup.
-         */
-        button: computed(() => ({
-          tabindex: "-1",
-          onClick: onToggle,
-        })),
-      },
-    };
-  },
-);

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

@@ -1,17 +0,0 @@
-import { test } from "@playwright/experimental-ct-vue";
-import TestListbox from "./TestListbox.vue";
-import { listboxTesting } from "./createListbox.ct";
-
-test("listbox", async ({ mount, page }) => {
-  await mount(<TestListbox />);
-
-  await listboxTesting({
-    page,
-    listbox: page.getByRole("listbox"),
-    options: page.getByRole("option"),
-    isOptionActive: async (locator) => {
-      const className = await locator.getAttribute("class");
-      return className?.includes("focused") ?? false;
-    },
-  });
-});

package/src/composables/listbox/TestListbox.vue

@@ -1,91 +0,0 @@
-<script lang="ts" setup>
-import { ref } from "vue";
-import { createListbox } from "./createListbox";
-
-type Options = (typeof options)[number];
-
-const selectedOption = ref<Options>();
-const activeOption = ref<Options>();
-
-const options = [
-  "Apple",
-  "Banana",
-  "Mango",
-  "Kiwi",
-  "Orange",
-  "Papaya",
-  "Apricot",
-  "Lemon",
-  "Cranberry",
-  "Avocado",
-  "Cherry",
-  "Coconut",
-  "Lychee",
-  "Melon",
-  "Raspberry",
-  "Strawberry",
-] as const;
-
-const {
-  elements: { listbox, option: headlessOption },
-} = createListbox({
-  label: "Test listbox",
-  selectedOption,
-  activeOption,
-  onSelect: (id) => {
-    selectedOption.value = selectedOption.value === id ? undefined : id;
-  },
-  onActivateFirst: () => (activeOption.value = options[0]),
-  onActivateLast: () => (activeOption.value = options.at(-1)),
-  onActivateNext: (currentValue) => {
-    const currentIndex = options.findIndex((i) => i === currentValue);
-    if (currentIndex < options.length - 1) {
-      activeOption.value = options[currentIndex + 1];
-    }
-  },
-  onActivatePrevious: (currentValue) => {
-    const currentIndex = options.findIndex((i) => i === currentValue);
-    if (currentIndex > 0) activeOption.value = options[currentIndex - 1];
-  },
-  onTypeAhead: (label) => {
-    const firstMatch = options.find((i) => {
-      return i.toLowerCase().trim().startsWith(label.toLowerCase());
-    });
-    if (!firstMatch) return;
-    activeOption.value = firstMatch;
-  },
-});
-</script>
-
-<template>
-  <ul v-bind="listbox">
-    <li
-      v-for="option in options"
-      :key="option"
-      v-bind="
-        headlessOption({
-          value: option,
-          label: option,
-          selected: option === selectedOption,
-        })
-      "
-      :class="{ focused: option === activeOption, selected: option === selectedOption }"
-    >
-      {{ option }}
-    </li>
-  </ul>
-</template>
-
-<style lang="scss" scoped>
-li {
-  height: 1.5rem;
-}
-
-.focused {
-  background-color: orange;
-}
-
-.selected {
-  background-color: red;
-}
-</style>

package/src/composables/listbox/createListbox.ct.ts

@@ -1,141 +0,0 @@
-import { expect } from "@playwright/experimental-ct-vue";
-import type { Locator, Page } from "@playwright/test";
-
-export type ListboxTestingOptions = {
-  /**
-   * Playwright page.
-   */
-  page: Page;
-  /**
-   * Locator for the listbox element.
-   */
-  listbox: Locator;
-  /**
-   * Options (at least 3).
-   */
-  options: Locator;
-  /**
-   * Function that returns whether the given option locator is visually active.
-   */
-  isOptionActive: (locator: Locator) => Promise<boolean>;
-};
-
-/**
- * Playwright utility for executing accessibility testing for a listbox.
- * Will check aria attributes and keyboard shortcuts as defined in https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-scrollable.
- */
-export const listboxTesting = async ({
-  page,
-  listbox,
-  options,
-  isOptionActive,
-}: ListboxTestingOptions) => {
-  const expectOptionToBeActive = async (locator: Locator, message: string) => {
-    expect(await isOptionActive(locator), message).toBeTruthy();
-    const optionId = await locator.getAttribute("id");
-    expect(optionId).toBeDefined();
-    await expect(
-      listbox,
-      "listbox should have set aria-activedescendant to the ID of the currently visually active option",
-    ).toHaveAttribute("aria-activedescendant", optionId!);
-  };
-
-  await expect(listbox).toBeVisible();
-
-  // ensure correct listbox aria attributes
-  await expect(
-    listbox,
-    'listbox must have a "aria-label" attribute with an existing id',
-  ).toHaveAttribute("aria-label");
-
-  await listbox
-    .getAttribute("aria-label")
-    .then((label) => expect(page.locator(`#${label}`)).toBeDefined());
-
-  await expect(listbox, "listbox must have role attribute with value listbox").toHaveAttribute(
-    "role",
-    "listbox",
-  );
-
-  // ensure that all options have correct aria attributes
-  for (const option of await options.all()) {
-    await expect(option, "option must have arial-label attribute").toHaveAttribute("aria-label");
-    await expect(option, "option must have role attribute with value option").toHaveAttribute(
-      "role",
-      "option",
-    );
-  }
-
-  await page.keyboard.press("Tab");
-  await expect(listbox, "Listbox should be focused when pressing tab key").toBeFocused();
-
-  await listbox.press("ArrowDown");
-
-  await expectOptionToBeActive(
-    options.first(),
-    "Pressing arrow down key when no option is active should activate the first option",
-  );
-  await expect(
-    listbox,
-    "When option is visually active, DOM focus should still be on the listbox",
-  ).toBeFocused();
-
-  await listbox.press("ArrowDown");
-  await expectOptionToBeActive(
-    options.nth(1),
-    "Pressing arrow down key should activate the next option",
-  );
-
-  await listbox.press(" ");
-  await expect(
-    options.nth(1),
-    "Pressing space key should select the currently active option",
-  ).toHaveAttribute("aria-selected", "true");
-
-  await listbox.press("ArrowUp");
-  await expectOptionToBeActive(
-    options.first(),
-    "Pressing arrow up key should activate the previous option",
-  );
-
-  await listbox.press("End");
-  await expectOptionToBeActive(options.last(), "Pressing End key should activate the last option");
-
-  const secondOptionText = await options.nth(1).textContent();
-  expect(secondOptionText).toBeDefined();
-
-  const firstCharacter = secondOptionText!.charAt(0);
-  await listbox.press(firstCharacter);
-
-  await expectOptionToBeActive(
-    listbox.getByLabel(firstCharacter).first(),
-    "Pressing any other printable character should activate the fist option starting with the pressed key",
-  );
-
-  await listbox.press("Home");
-  await expectOptionToBeActive(
-    options.first(),
-    "Pressing Home key should activate the first option",
-  );
-
-  const firstOptionHeight = await options.first().evaluate((element) => element.clientHeight);
-
-  await listbox.evaluate((element, height) => {
-    element.style.height = `${height}px`;
-    element.style.overflow = "hidden";
-  }, firstOptionHeight);
-
-  await expect(options.nth(1)).not.toBeInViewport();
-
-  await listbox.press("ArrowDown");
-  await expect(
-    options.nth(1),
-    "activating an option should scroll it into viewport if not visible",
-  ).toBeInViewport();
-
-  // reset temporary styles
-  await listbox.evaluate((element) => {
-    element.style.height = "";
-    element.style.overflow = "";
-  });
-};