@sit-onyx/headless 1.0.0-alpha.10 → 1.0.0-alpha.12

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/headless",
   "description": "Headless composables for Vue",
-  "version": "1.0.0-alpha.10",
+  "version": "1.0.0-alpha.12",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",

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

@@ -36,7 +36,7 @@ const expectToClose = async (
  * Test an implementation of the combobox based on https://w3c.github.io/aria/#combobox
  */
 export const comboboxTesting = async (
-  page: Page,
+  _page: Page,
   listbox: Locator,
   combobox: Locator,
   button: Locator,

package/src/composables/comboBox/createComboBox.ts

@@ -1,4 +1,4 @@
-import { computed, ref, unref, type MaybeRef, type Ref } from "vue";
+import { computed, unref, type MaybeRef, type Ref } from "vue";
 import { createBuilder } from "../../utils/builder";
 import { createId } from "../../utils/id";
 import { isPrintableCharacter, wasKeyPressed, type PressedKey } from "../../utils/keyboard";
@@ -12,8 +12,13 @@ import { useTypeAhead } from "../typeAhead";
 
 export type ComboboxAutoComplete = "none" | "list" | "both";
 
-const OPENING_KEYS: PressedKey[] = ["ArrowDown", "ArrowUp", " ", "Enter", "Home", "End"];
-const CLOSING_KEYS: PressedKey[] = ["Escape", { key: "ArrowUp", altKey: true }, "Enter", "Tab"];
+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_SINGLE: PressedKey[] = ["Enter", " "];
 const SELECTING_KEYS_MULTIPLE: PressedKey[] = ["Enter"];
 
@@ -117,7 +122,6 @@ export const createComboBox = createBuilder(
     onActivatePrevious,
     templateRef,
   }: CreateComboboxOptions<TValue, TAutoComplete, TMultiple>) => {
-    const inputValid = ref(true);
     const controlsId = createId("comboBox-control");
 
     const autocomplete = computed(() => unref(autocompleteRef));
@@ -126,10 +130,6 @@ export const createComboBox = createBuilder(
 
     const handleInput = (event: Event) => {
       const inputElement = event.target as HTMLInputElement;
-      inputValid.value = inputElement.validity.valid;
-      if (!unref(isExpanded)) {
-        onToggle?.();
-      }
 
       if (autocomplete.value !== "none") {
         onAutocomplete?.(inputElement.value);
@@ -173,6 +173,11 @@ export const createComboBox = createBuilder(
     };
 
     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 === " ") {
@@ -193,6 +198,10 @@ export const createComboBox = createBuilder(
         !isExpanded.value && onToggle?.();
         return typeAhead(event);
       }
+      if (autocomplete.value !== "none" && isPrintableCharacter(event.key)) {
+        !isExpanded.value && onToggle?.();
+        return;
+      }
       return handleNavigation(event);
     };
 

package/src/composables/listbox/createListbox.ts

@@ -185,15 +185,24 @@ export const createListbox = createBuilder(
           });
         }),
         option: computed(() => {
-          return (data: { label: string; value: TValue; disabled?: boolean; selected?: boolean }) =>
-            ({
+          return (data: {
+            label: string;
+            value: TValue;
+            disabled?: boolean;
+            selected?: boolean;
+          }) => {
+            const selected = data.selected ?? false;
+
+            return {
               id: getOptionId(data.value),
               role: "option",
               "aria-label": data.label,
               "aria-disabled": data.disabled,
-              [isMultiselect.value ? "aria-checked" : "aria-selected"]: data.selected || false,
+              "aria-checked": isMultiselect.value ? selected : undefined,
+              "aria-selected": !isMultiselect.value ? selected : undefined,
               onClick: () => !data.disabled && options.onSelect?.(data.value),
-            }) as const;
+            } as const;
+          };
         }),
       },
       state: {

package/src/composables/menuButton/TestMenuButton.vue

@@ -12,11 +12,7 @@ const activeItem = ref<string>();
 const {
   elements: { button, menu, menuItem, listItem, flyout },
   state: { isExpanded },
-} = createMenuButton({
-  onSelect: (value) => {
-    activeItem.value = value;
-  },
-});
+} = createMenuButton({});
 </script>
 
 <template>
@@ -24,9 +20,7 @@ const {
   <div v-bind="flyout">
     <ul v-show="isExpanded" v-bind="menu">
       <li v-for="item in items" v-bind="listItem" :key="item.value" title="item">
-        <a v-bind="menuItem({ active: activeItem === item.value, value: item.value })">{{
-          item.label
-        }}</a>
+        <a v-bind="menuItem({ active: activeItem === item.value })" href="#">{{ item.label }}</a>
       </li>
     </ul>
   </div>

package/src/composables/menuButton/createMenuButton.ct.ts

@@ -24,7 +24,12 @@ export type MenuButtonTestingOptions = {
  * Playwright utility for executing accessibility testing for a navigation menu.
  * Will check aria attributes and keyboard shortcuts as defined in https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-links.
  */
-export const menuButtonTesting = async ({ button, menu }: MenuButtonTestingOptions) => {
+export const menuButtonTesting = async ({
+  page,
+  button,
+  menu,
+  menuItems,
+}: MenuButtonTestingOptions) => {
   const menuId = await menu.getAttribute("id");
   expect(menuId).toBeDefined();
   await expect(
@@ -51,4 +56,54 @@ export const menuButtonTesting = async ({ button, menu }: MenuButtonTestingOptio
     button,
     'flyout menu must have an "aria-expanded" attribute set to true',
   ).toHaveAttribute("aria-expanded", "true");
+
+  const firstItem = menuItems[0].getByRole("menuitem");
+  const secondItem = menuItems[1].getByRole("menuitem");
+  const lastItem = menuItems[menuItems.length - 1].getByRole("menuitem");
+
+  await page.keyboard.press("Tab");
+  await expect(button, "Button should be focused when pressing tab key").toBeFocused();
+
+  await button.press("ArrowDown");
+  await expect(
+    firstItem,
+    "First item should be focused when pressing arrow down key",
+  ).toBeFocused();
+
+  await menu.press("ArrowDown");
+  await expect(
+    secondItem,
+    "Second item should be focused when pressing arrow down key",
+  ).toBeFocused();
+
+  await menu.press("ArrowUp");
+  await expect(firstItem, "First item should be focused when pressing arrow up key").toBeFocused();
+
+  await menu.press("ArrowRight");
+  await expect(
+    secondItem,
+    "Second item should be focused when pressing arrow right key",
+  ).toBeFocused();
+
+  await menu.press("ArrowLeft");
+  await expect(
+    firstItem,
+    "First item should be focused when pressing arrow left key",
+  ).toBeFocused();
+
+  await page.keyboard.press("Tab");
+  await expect(button, "Button should be focused when pressing tab key").not.toBeFocused();
+
+  await page.keyboard.press("Tab");
+
+  await menu.press("Home");
+  await expect(firstItem, "First item should be focused when pressing home key").toBeFocused();
+
+  await page.keyboard.press("Tab");
+  await expect(button, "Button should be focused when pressing tab key").not.toBeFocused();
+
+  await page.keyboard.press("Tab");
+
+  await menu.press("End");
+  await expect(lastItem, "Last item should be focused when pressing end key").toBeFocused();
 };

package/src/composables/menuButton/createMenuButton.ts

@@ -3,17 +3,13 @@ import { createBuilder } from "../../utils/builder";
 import { createId } from "../../utils/id";
 import { debounce } from "../../utils/timer";
 
-export type CreateMenuButtonOptions = {
-  /**
-   * Called when a menu item is selected (via mouse or keyboard).
-   */
-  onSelect: (value: string) => void;
-};
-
-export const createMenuButton = createBuilder((options: CreateMenuButtonOptions) => {
+/**
+ * Based on https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/
+ */
+export const createMenuButton = createBuilder(() => {
   const menuId = createId("menu");
   const buttonId = createId("menu-button");
-  const isExpanded = ref<boolean>(false);
+  const isExpanded = ref(false);
 
   /**
    * Debounced expanded state that will only be toggled after a given timeout.
@@ -32,6 +28,67 @@ export const createMenuButton = createBuilder((options: CreateMenuButtonOptions)
     };
   });
 
+  const focusRelativeItem = (next: "next" | "prev" | "first" | "last") => {
+    const currentMenuItem = document.activeElement as HTMLElement;
+
+    // Either the current focus is on a "menuitem", then we can just get the parent menu.
+    // Or the current focus is on the button, then we can get the connected menu using the menuId
+    const currentMenu =
+      currentMenuItem?.closest('[role="menu"]') || document.getElementById(menuId);
+    if (!currentMenu) return;
+
+    const menuItems = [...currentMenu.querySelectorAll<HTMLElement>('[role="menuitem"]')];
+    let nextIndex = 0;
+
+    if (currentMenuItem) {
+      const currentIndex = menuItems.indexOf(currentMenuItem);
+      switch (next) {
+        case "next":
+          nextIndex = currentIndex + 1;
+          break;
+        case "prev":
+          nextIndex = currentIndex - 1;
+          break;
+        case "first":
+          nextIndex = 0;
+          break;
+        case "last":
+          nextIndex = menuItems.length - 1;
+          break;
+      }
+    }
+
+    const nextMenuItem = menuItems[nextIndex];
+    nextMenuItem?.focus();
+  };
+
+  const handleKeydown = (event: KeyboardEvent) => {
+    switch (event.key) {
+      case "ArrowDown":
+      case "ArrowRight":
+        event.preventDefault();
+        focusRelativeItem("next");
+        break;
+      case "ArrowUp":
+      case "ArrowLeft":
+        event.preventDefault();
+        focusRelativeItem("prev");
+        break;
+      case "Home":
+        event.preventDefault();
+        focusRelativeItem("first");
+        break;
+      case "End":
+        event.preventDefault();
+        focusRelativeItem("last");
+        break;
+      case " ":
+        event.preventDefault();
+        (event.target as HTMLElement).click();
+        break;
+    }
+  };
+
   return {
     state: { isExpanded },
     elements: {
@@ -43,11 +100,9 @@ export const createMenuButton = createBuilder((options: CreateMenuButtonOptions)
             "aria-haspopup": true,
             id: buttonId,
             ...hoverEvents.value,
+            onKeydown: handleKeydown,
           }) as const,
       ),
-      listItem: {
-        role: "none",
-      },
       flyout: {
         ...hoverEvents.value,
       },
@@ -55,14 +110,15 @@ export const createMenuButton = createBuilder((options: CreateMenuButtonOptions)
         id: menuId,
         role: "menu",
         "aria-labelledby": buttonId,
+        onKeydown: handleKeydown,
+      },
+      listItem: {
+        role: "none",
       },
-      menuItem: (data: { active?: boolean; value: string }) => ({
+      menuItem: (data: { active?: boolean; disabled?: boolean }) => ({
         "aria-current": data.active ? "page" : undefined,
+        "aria-disabled": data.disabled,
         role: "menuitem",
-        tabindex: -1,
-        onClick: () => {
-          options.onSelect(data.value);
-        },
       }),
     },
   };

package/src/composables/outsideClick.ts

@@ -28,7 +28,7 @@ export const useOutsideClick = (options: UseOutsideClickOptions) => {
     const component = options.queryComponent();
     if (!component || !(event.target instanceof Node)) return;
 
-    const isOutsideClick = !event.composedPath().includes(component);
+    const isOutsideClick = !component.contains(event.target);
     if (isOutsideClick) options.onOutsideClick();
   };