aria-ease 6.5.0 → 6.6.0

package/dist/index.js

@@ -2,7 +2,7 @@ import {
   ContractReporter,
   closeSharedBrowser,
   contract_default
-} from "./chunk-AUJAN4RK.js";
+} from "./chunk-LKN5PRYD.js";
 import "./chunk-I2KLQ2HA.js";
 
 // src/accordion/src/makeAccordionAccessible/makeAccordionAccessible.ts
@@ -208,38 +208,11 @@ function moveFocus(elementItems, currentIndex, direction) {
 function isClickableButNotSemantic(el) {
   return el.getAttribute("data-custom-click") !== null && el.getAttribute("data-custom-click") !== void 0;
 }
-function handleMenuClose(menuElement, menuTriggerButton) {
-  menuElement.style.display = "none";
-  const menuTriggerButtonId = menuTriggerButton.getAttribute("id");
-  if (!menuTriggerButtonId) {
-    console.error("[aria-ease] Menu trigger button must have an id attribute to properly set aria attributes.");
-    return;
-  }
-  menuTriggerButton.setAttribute("aria-expanded", "false");
-}
-function hasSubmenu(menuItem) {
-  return menuItem.getAttribute("aria-haspopup") === "true" || menuItem.getAttribute("aria-haspopup") === "menu";
-}
-function getSubmenuId(menuItem) {
-  return menuItem.getAttribute("aria-controls");
-}
-function handleKeyPress(event, elementItems, elementItemIndex, menuElementDiv, triggerButton, openSubmenu, closeSubmenu, onOpenChange) {
+function handleKeyPress(event, elementItems, elementItemIndex) {
   const currentEl = elementItems.item(elementItemIndex);
   switch (event.key) {
     case "ArrowUp":
     case "ArrowLeft": {
-      if (event.key === "ArrowLeft" && menuElementDiv && closeSubmenu) {
-        const labelledBy = menuElementDiv.getAttribute("aria-labelledby");
-        if (labelledBy) {
-          const parentTrigger = document.getElementById(labelledBy);
-          if (parentTrigger && parentTrigger.getAttribute("role") === "menuitem") {
-            event.preventDefault();
-            closeSubmenu();
-            parentTrigger.focus();
-            return;
-          }
-        }
-      }
       if (!isTextInput(currentEl) && !isTextArea(currentEl)) {
         event.preventDefault();
         moveFocus(elementItems, elementItemIndex, -1);
@@ -254,14 +227,6 @@ function handleKeyPress(event, elementItems, elementItemIndex, menuElementDiv, t
     }
     case "ArrowDown":
     case "ArrowRight": {
-      if (event.key === "ArrowRight" && hasSubmenu(currentEl) && openSubmenu) {
-        event.preventDefault();
-        const submenuId = getSubmenuId(currentEl);
-        if (submenuId) {
-          openSubmenu(submenuId);
-          return;
-        }
-      }
       if (!isTextInput(currentEl) && !isTextArea(currentEl)) {
         event.preventDefault();
         moveFocus(elementItems, elementItemIndex, 1);
@@ -277,15 +242,6 @@ function handleKeyPress(event, elementItems, elementItemIndex, menuElementDiv, t
     }
     case "Escape": {
       event.preventDefault();
-      if (menuElementDiv && triggerButton) {
-        if (getComputedStyle(menuElementDiv).display === "block") {
-          handleMenuClose(menuElementDiv, triggerButton);
-          if (onOpenChange) {
-            onOpenChange(false);
-          }
-        }
-        triggerButton.focus();
-      }
       break;
     }
     case "Enter":
@@ -300,12 +256,6 @@ function handleKeyPress(event, elementItems, elementItemIndex, menuElementDiv, t
       break;
     }
     case "Tab": {
-      if (menuElementDiv && triggerButton && (!event.shiftKey || event.shiftKey)) {
-        handleMenuClose(menuElementDiv, triggerButton);
-        if (onOpenChange) {
-          onOpenChange(false);
-        }
-      }
       break;
     }
     default:
@@ -514,11 +464,14 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId, callback }) {
       for (let i = 0; i < allItems.length; i++) {
         const item = allItems.item(i);
         const isNested = isItemInNestedSubmenu(item);
+        const isDisabled = item.getAttribute("aria-disabled") === "true";
         if (!isNested) {
           if (!item.hasAttribute("tabindex")) {
             item.setAttribute("tabindex", "-1");
           }
-          filteredItems.push(item);
+          if (!isDisabled) {
+            filteredItems.push(item);
+          }
         }
       }
     }
@@ -543,15 +496,123 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId, callback }) {
     const items = getItems();
     items.forEach((item) => {
       item.setAttribute("role", "menuitem");
+      const submenuId = item.getAttribute("data-submenu-id") ?? item.getAttribute("aria-controls");
+      const hasSubmenuTriggerAttributes = item.hasAttribute("aria-haspopup") && submenuId;
+      if (submenuId && (item.hasAttribute("data-submenu-id") || hasSubmenuTriggerAttributes)) {
+        item.setAttribute("aria-haspopup", "menu");
+        item.setAttribute("aria-controls", submenuId);
+        if (!item.hasAttribute("aria-expanded")) {
+          item.setAttribute("aria-expanded", "false");
+        }
+      }
     });
   }
+  function moveFocus2(elementItems, currentIndex, direction) {
+    const len = elementItems.length;
+    const nextIndex = (currentIndex + direction + len) % len;
+    elementItems.item(nextIndex).focus();
+  }
+  function focusItemAtIndex(items, index) {
+    if (items.length === 0) return;
+    items[index]?.focus();
+  }
+  function hasSubmenu(menuItem) {
+    return menuItem.hasAttribute("aria-controls") && menuItem.hasAttribute("aria-haspopup") && menuItem.getAttribute("role") === "menuitem";
+  }
   intializeMenuItems();
+  function handleItemsKeydown(event, menuItem, menuItemIndex) {
+    switch (event.key) {
+      case "ArrowLeft": {
+        if (event.key === "ArrowLeft" && triggerButton.getAttribute("role") === "menuitem") {
+          event.preventDefault();
+          closeMenu();
+          return;
+        }
+        break;
+      }
+      case "ArrowUp": {
+        event.preventDefault();
+        moveFocus2(toNodeListLike(getFilteredItems()), menuItemIndex, -1);
+        break;
+      }
+      case "ArrowRight": {
+        if (event.key === "ArrowRight" && hasSubmenu(menuItem)) {
+          event.preventDefault();
+          const submenuId = menuItem.getAttribute("aria-controls");
+          if (submenuId) {
+            openSubmenu(submenuId);
+            return;
+          }
+        }
+        break;
+      }
+      case "ArrowDown": {
+        event.preventDefault();
+        moveFocus2(toNodeListLike(getFilteredItems()), menuItemIndex, 1);
+        break;
+      }
+      case "Home": {
+        event.preventDefault();
+        focusItemAtIndex(getFilteredItems(), 0);
+        break;
+      }
+      case "End": {
+        event.preventDefault();
+        const items = getFilteredItems();
+        focusItemAtIndex(items, items.length - 1);
+        break;
+      }
+      case "Escape": {
+        event.preventDefault();
+        closeMenu();
+        triggerButton.focus();
+        if (onOpenChange) {
+          onOpenChange(false);
+        }
+        break;
+      }
+      case "Enter":
+      case " ": {
+        event.preventDefault();
+        if (hasSubmenu(menuItem)) {
+          const submenuId = menuItem.getAttribute("aria-controls");
+          if (submenuId) {
+            openSubmenu(submenuId);
+            return;
+          }
+        }
+        menuItem.click();
+        closeMenu();
+        if (onOpenChange) {
+          onOpenChange(false);
+        }
+        break;
+      }
+      case "Tab": {
+        if (!event.shiftKey || event.shiftKey) {
+          closeMenu();
+          if (onOpenChange) {
+            onOpenChange(false);
+          }
+        }
+        break;
+      }
+      default:
+        break;
+    }
+  }
   function isItemInNestedSubmenu(item) {
     let parent = item.parentElement;
     while (parent && parent !== menuDiv) {
       if (parent.getAttribute("role") === "menu") {
         return true;
       }
+      if (parent.id) {
+        const parentMenuTrigger = menuDiv.querySelector(`[aria-controls="${parent.id}"]`);
+        if (parentMenuTrigger) {
+          return true;
+        }
+      }
       parent = parent.parentElement;
     }
     return false;
@@ -587,9 +648,6 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId, callback }) {
     }
     submenuInstance.openMenu();
   }
-  function closeSubmenu() {
-    closeMenu();
-  }
   function onOpenChange(isOpen) {
     if (callback?.onOpenChange) {
       try {
@@ -601,19 +659,9 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId, callback }) {
   }
   function addListeners() {
     const items = getFilteredItems();
-    const nodeListLike = toNodeListLike(items);
     items.forEach((menuItem, index) => {
       if (!handlerMap.has(menuItem)) {
-        const handler = (event) => handleKeyPress(
-          event,
-          nodeListLike,
-          index,
-          menuDiv,
-          triggerButton,
-          openSubmenu,
-          closeSubmenu,
-          onOpenChange
-        );
+        const handler = (event) => handleItemsKeydown(event, menuItem, index);
         menuItem.addEventListener("keydown", handler);
         handlerMap.set(menuItem, handler);
       }
@@ -646,6 +694,7 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId, callback }) {
     }
   }
   function closeMenu() {
+    submenuInstances.forEach((instance) => instance.closeMenu());
     setAria(false);
     menuDiv.style.display = "none";
     removeListeners();
@@ -677,7 +726,6 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId, callback }) {
   }
   triggerButton.addEventListener("click", handleTriggerClick);
   document.addEventListener("click", handleClickOutside);
-  triggerButton.setAttribute("data-menu-initialized", "true");
   function cleanup() {
     removeListeners();
     triggerButton.removeEventListener("click", handleTriggerClick);
@@ -1541,7 +1589,7 @@ Error: ${error instanceof Error ? error.message : String(error)}`
       const devServerUrl = await checkDevServer(url);
       if (devServerUrl) {
         console.log(`\u{1F3AD} Running Playwright tests on ${devServerUrl}`);
-        const { runContractTestsPlaywright } = await import("./contractTestRunnerPlaywright-7F756CFB.js");
+        const { runContractTestsPlaywright } = await import("./contractTestRunnerPlaywright-PC6JOYYV.js");
         contract = await runContractTestsPlaywright(componentName, devServerUrl);
       } else {
         throw new Error(

package/dist/src/{Types.d-yGC2bBaB.d.cts → Types.d-DYfYR3Vc.d.cts}

@@ -88,4 +88,4 @@ interface MenuCallback {
     onOpenChange?: (isOpen: boolean) => void;
 }
 
-export type { AccessibilityInstance as A, ComboboxConfig as C, MenuConfig as M, TabsConfig as T, AccordionConfig as a };
+export type { AccordionConfig as A, ComboboxConfig as C, MenuConfig as M, TabsConfig as T, AccessibilityInstance as a };

package/dist/src/{Types.d-yGC2bBaB.d.ts → Types.d-DYfYR3Vc.d.ts}

@@ -88,4 +88,4 @@ interface MenuCallback {
     onOpenChange?: (isOpen: boolean) => void;
 }
 
-export type { AccessibilityInstance as A, ComboboxConfig as C, MenuConfig as M, TabsConfig as T, AccordionConfig as a };
+export type { AccordionConfig as A, ComboboxConfig as C, MenuConfig as M, TabsConfig as T, AccessibilityInstance as a };

package/dist/src/accordion/index.d.cts

@@ -1,4 +1,4 @@
-import { a as AccordionConfig, A as AccessibilityInstance } from '../Types.d-yGC2bBaB.cjs';
+import { A as AccordionConfig, a as AccessibilityInstance } from '../Types.d-DYfYR3Vc.cjs';
 
 /**
  * Makes an accordion accessible by managing ARIA attributes, keyboard interaction, and state.

package/dist/src/accordion/index.d.ts

@@ -1,4 +1,4 @@
-import { a as AccordionConfig, A as AccessibilityInstance } from '../Types.d-yGC2bBaB.js';
+import { A as AccordionConfig, a as AccessibilityInstance } from '../Types.d-DYfYR3Vc.js';
 
 /**
  * Makes an accordion accessible by managing ARIA attributes, keyboard interaction, and state.

package/dist/src/block/index.cjs

@@ -23,15 +23,11 @@ function moveFocus(elementItems, currentIndex, direction) {
 function isClickableButNotSemantic(el) {
   return el.getAttribute("data-custom-click") !== null && el.getAttribute("data-custom-click") !== void 0;
 }
-function hasSubmenu(menuItem) {
-  return menuItem.getAttribute("aria-haspopup") === "true" || menuItem.getAttribute("aria-haspopup") === "menu";
-}
-function handleKeyPress(event, elementItems, elementItemIndex, menuElementDiv, triggerButton, openSubmenu, closeSubmenu, onOpenChange) {
+function handleKeyPress(event, elementItems, elementItemIndex) {
   const currentEl = elementItems.item(elementItemIndex);
   switch (event.key) {
     case "ArrowUp":
     case "ArrowLeft": {
-      if (event.key === "ArrowLeft" && menuElementDiv) ;
       if (!isTextInput(currentEl) && !isTextArea(currentEl)) {
         event.preventDefault();
         moveFocus(elementItems, elementItemIndex, -1);
@@ -46,7 +42,6 @@ function handleKeyPress(event, elementItems, elementItemIndex, menuElementDiv, t
     }
     case "ArrowDown":
     case "ArrowRight": {
-      if (event.key === "ArrowRight" && hasSubmenu(currentEl) && openSubmenu) ;
       if (!isTextInput(currentEl) && !isTextArea(currentEl)) {
         event.preventDefault();
         moveFocus(elementItems, elementItemIndex, 1);

package/dist/src/block/index.d.cts

@@ -1,4 +1,4 @@
-import { A as AccessibilityInstance } from '../Types.d-yGC2bBaB.cjs';
+import { a as AccessibilityInstance } from '../Types.d-DYfYR3Vc.cjs';
 
 /**
  * Adds keyboard interaction to block. The block traps focus and can be interacted with using the keyboard.

package/dist/src/block/index.d.ts

@@ -1,4 +1,4 @@
-import { A as AccessibilityInstance } from '../Types.d-yGC2bBaB.js';
+import { a as AccessibilityInstance } from '../Types.d-DYfYR3Vc.js';
 
 /**
  * Adds keyboard interaction to block. The block traps focus and can be interacted with using the keyboard.

package/dist/src/block/index.js

@@ -1,4 +1,75 @@
-import { handleKeyPress } from '../chunk-ZJXZZDUR.js';
+// src/utils/handleKeyPress/handleKeyPress.ts
+function isTextInput(el) {
+  if (el.tagName !== "INPUT") return false;
+  const type = el.type;
+  return ["text", "email", "password", "tel", "number"].includes(type);
+}
+function isTextArea(el) {
+  return el.tagName === "TEXTAREA";
+}
+function isNativeButton(el) {
+  return el.tagName === "BUTTON" || el.tagName === "INPUT" && ["button", "submit", "reset"].includes(el.type);
+}
+function isLink(el) {
+  return el.tagName === "A";
+}
+function moveFocus(elementItems, currentIndex, direction) {
+  const len = elementItems.length;
+  const nextIndex = (currentIndex + direction + len) % len;
+  elementItems.item(nextIndex).focus();
+}
+function isClickableButNotSemantic(el) {
+  return el.getAttribute("data-custom-click") !== null && el.getAttribute("data-custom-click") !== void 0;
+}
+function handleKeyPress(event, elementItems, elementItemIndex) {
+  const currentEl = elementItems.item(elementItemIndex);
+  switch (event.key) {
+    case "ArrowUp":
+    case "ArrowLeft": {
+      if (!isTextInput(currentEl) && !isTextArea(currentEl)) {
+        event.preventDefault();
+        moveFocus(elementItems, elementItemIndex, -1);
+      } else if (isTextInput(currentEl) || isTextArea(currentEl)) {
+        const cursorStart = currentEl.selectionStart;
+        if (cursorStart === 0) {
+          event.preventDefault();
+          moveFocus(elementItems, elementItemIndex, -1);
+        }
+      }
+      break;
+    }
+    case "ArrowDown":
+    case "ArrowRight": {
+      if (!isTextInput(currentEl) && !isTextArea(currentEl)) {
+        event.preventDefault();
+        moveFocus(elementItems, elementItemIndex, 1);
+      } else if (isTextInput(currentEl) || isTextArea(currentEl)) {
+        const value = currentEl.value;
+        const cursorEnd = currentEl.selectionStart;
+        if (cursorEnd === value.length) {
+          event.preventDefault();
+          moveFocus(elementItems, elementItemIndex, 1);
+        }
+      }
+      break;
+    }
+    case "Escape": {
+      event.preventDefault();
+      break;
+    }
+    case "Enter":
+    case " ": {
+      if (!isNativeButton(currentEl) && !isLink(currentEl) && isClickableButNotSemantic(currentEl)) {
+        event.preventDefault();
+        currentEl.click();
+      } else if (isNativeButton(currentEl)) {
+        event.preventDefault();
+        currentEl.click();
+      }
+      break;
+    }
+  }
+}
 
 // src/block/src/makeBlockAccessible/makeBlockAccessible.ts
 function makeBlockAccessible({ blockId, blockItemsClass }) {

package/dist/src/checkbox/index.d.cts

@@ -1,4 +1,4 @@
-import { A as AccessibilityInstance } from '../Types.d-yGC2bBaB.cjs';
+import { a as AccessibilityInstance } from '../Types.d-DYfYR3Vc.cjs';
 
 /**
  * Makes a checkbox group accessible by managing ARIA attributes and keyboard interaction.

package/dist/src/checkbox/index.d.ts

@@ -1,4 +1,4 @@
-import { A as AccessibilityInstance } from '../Types.d-yGC2bBaB.js';
+import { a as AccessibilityInstance } from '../Types.d-DYfYR3Vc.js';
 
 /**
  * Makes a checkbox group accessible by managing ARIA attributes and keyboard interaction.

package/dist/src/combobox/index.d.cts

@@ -1,4 +1,4 @@
-import { C as ComboboxConfig, A as AccessibilityInstance } from '../Types.d-yGC2bBaB.cjs';
+import { C as ComboboxConfig, a as AccessibilityInstance } from '../Types.d-DYfYR3Vc.cjs';
 
 /**
  * Makes a Combobox accessible by adding appropriate ARIA attributes, keyboard interactions and focus management.

package/dist/src/combobox/index.d.ts

@@ -1,4 +1,4 @@
-import { C as ComboboxConfig, A as AccessibilityInstance } from '../Types.d-yGC2bBaB.js';
+import { C as ComboboxConfig, a as AccessibilityInstance } from '../Types.d-DYfYR3Vc.js';
 
 /**
  * Makes a Combobox accessible by adding appropriate ARIA attributes, keyboard interactions and focus management.