@sit-onyx/headless 1.0.0-alpha.11 → 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.11",
+  "version": "1.0.0-alpha.12",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",

package/src/composables/comboBox/createComboBox.ts

@@ -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 === " ") {

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();
   };