aria-ease 3.0.3 → 4.0.1

package/dist/src/toggle/index.cjs

@@ -27,4 +27,149 @@ function updateToggleAriaAttribute(toggleId, togglesClass, toggleStates, current
   });
 }
 
+// src/toggle/src/makeTogggleAccessible/makeToggleAccessible.ts
+function makeToggleAccessible({ toggleId, togglesClass, isSingleToggle = true }) {
+  const toggleContainer = document.querySelector(`#${toggleId}`);
+  if (!toggleContainer) {
+    console.error(`[aria-ease] Element with id="${toggleId}" not found. Make sure the toggle element exists before calling makeToggleAccessible.`);
+    return { cleanup: () => {
+    } };
+  }
+  let toggles;
+  if (isSingleToggle) {
+    toggles = [toggleContainer];
+  } else {
+    if (!togglesClass) {
+      console.error(`[aria-ease] togglesClass is required when isSingleToggle is false.`);
+      return { cleanup: () => {
+      } };
+    }
+    toggles = Array.from(toggleContainer.querySelectorAll(`.${togglesClass}`));
+    if (toggles.length === 0) {
+      console.error(`[aria-ease] No elements with class="${togglesClass}" found. Make sure toggle buttons exist before calling makeToggleAccessible.`);
+      return { cleanup: () => {
+      } };
+    }
+  }
+  const handlerMap = /* @__PURE__ */ new WeakMap();
+  const clickHandlerMap = /* @__PURE__ */ new WeakMap();
+  function initialize() {
+    toggles.forEach((toggle) => {
+      if (toggle.tagName.toLowerCase() !== "button" && !toggle.getAttribute("role")) {
+        toggle.setAttribute("role", "button");
+      }
+      if (!toggle.hasAttribute("aria-pressed")) {
+        toggle.setAttribute("aria-pressed", "false");
+      }
+      if (!toggle.hasAttribute("tabindex")) {
+        toggle.setAttribute("tabindex", "0");
+      }
+    });
+  }
+  function toggleButton(index) {
+    if (index < 0 || index >= toggles.length) {
+      console.error(`[aria-ease] Invalid toggle index: ${index}`);
+      return;
+    }
+    const toggle = toggles[index];
+    const isPressed = toggle.getAttribute("aria-pressed") === "true";
+    toggle.setAttribute("aria-pressed", isPressed ? "false" : "true");
+  }
+  function setPressed(index, pressed) {
+    if (index < 0 || index >= toggles.length) {
+      console.error(`[aria-ease] Invalid toggle index: ${index}`);
+      return;
+    }
+    toggles[index].setAttribute("aria-pressed", pressed ? "true" : "false");
+  }
+  function handleToggleClick(index) {
+    return () => {
+      toggleButton(index);
+    };
+  }
+  function handleToggleKeydown(index) {
+    return (event) => {
+      const { key } = event;
+      switch (key) {
+        case "Enter":
+        case " ":
+          event.preventDefault();
+          toggleButton(index);
+          break;
+        case "ArrowDown":
+        case "ArrowRight":
+          if (!isSingleToggle && toggles.length > 1) {
+            event.preventDefault();
+            const nextIndex = (index + 1) % toggles.length;
+            toggles[nextIndex].focus();
+          }
+          break;
+        case "ArrowUp":
+        case "ArrowLeft":
+          if (!isSingleToggle && toggles.length > 1) {
+            event.preventDefault();
+            const prevIndex = (index - 1 + toggles.length) % toggles.length;
+            toggles[prevIndex].focus();
+          }
+          break;
+        case "Home":
+          if (!isSingleToggle && toggles.length > 1) {
+            event.preventDefault();
+            toggles[0].focus();
+          }
+          break;
+        case "End":
+          if (!isSingleToggle && toggles.length > 1) {
+            event.preventDefault();
+            toggles[toggles.length - 1].focus();
+          }
+          break;
+      }
+    };
+  }
+  function addListeners() {
+    toggles.forEach((toggle, index) => {
+      const clickHandler = handleToggleClick(index);
+      const keydownHandler = handleToggleKeydown(index);
+      toggle.addEventListener("click", clickHandler);
+      toggle.addEventListener("keydown", keydownHandler);
+      handlerMap.set(toggle, keydownHandler);
+      clickHandlerMap.set(toggle, clickHandler);
+    });
+  }
+  function removeListeners() {
+    toggles.forEach((toggle) => {
+      const keydownHandler = handlerMap.get(toggle);
+      const clickHandler = clickHandlerMap.get(toggle);
+      if (keydownHandler) {
+        toggle.removeEventListener("keydown", keydownHandler);
+        handlerMap.delete(toggle);
+      }
+      if (clickHandler) {
+        toggle.removeEventListener("click", clickHandler);
+        clickHandlerMap.delete(toggle);
+      }
+    });
+  }
+  function cleanup() {
+    removeListeners();
+  }
+  function getPressedStates() {
+    return toggles.map((toggle) => toggle.getAttribute("aria-pressed") === "true");
+  }
+  function getPressedIndices() {
+    return toggles.map((toggle, index) => toggle.getAttribute("aria-pressed") === "true" ? index : -1).filter((index) => index !== -1);
+  }
+  initialize();
+  addListeners();
+  return {
+    toggleButton,
+    setPressed,
+    getPressedStates,
+    getPressedIndices,
+    cleanup
+  };
+}
+
+exports.makeToggleAccessible = makeToggleAccessible;
 exports.updateToggleAriaAttribute = updateToggleAriaAttribute;

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

@@ -1,4 +1,4 @@
-import { T as ToggleStates } from '../Types.d-uG0Hm1yK.cjs';
+import { T as ToggleStates, a as AccessibilityInstance } from '../Types.d-BrHSyS03.cjs';
 
 /**
  * Adds screen reader accessibility to toggle buttons. Updates the aria attributes of the toggle buttons. Button must be a semantic button element or a non-semantic element with a role of button, and possess the aria-pressed attribute.
@@ -10,4 +10,19 @@ import { T as ToggleStates } from '../Types.d-uG0Hm1yK.cjs';
 
 declare function updateToggleAriaAttribute(toggleId: string, togglesClass: string, toggleStates: ToggleStates[], currentPressedToggleIndex: number): void;
 
-export { updateToggleAriaAttribute };
+/**
+ * Makes a toggle button accessible by managing ARIA attributes and keyboard interactions.
+ * Handles toggle button state with proper focus management.
+ * @param {string} toggleId - The id of the toggle button or toggle button container.
+ * @param {string} togglesClass - The shared class of toggle buttons (for groups).
+ * @param {boolean} isSingleToggle - Whether this is a single toggle button (default: true).
+ */
+
+interface ToggleConfig {
+    toggleId: string;
+    togglesClass?: string;
+    isSingleToggle?: boolean;
+}
+declare function makeToggleAccessible({ toggleId, togglesClass, isSingleToggle }: ToggleConfig): AccessibilityInstance;
+
+export { makeToggleAccessible, updateToggleAriaAttribute };

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

@@ -1,4 +1,4 @@
-import { T as ToggleStates } from '../Types.d-uG0Hm1yK.js';
+import { T as ToggleStates, a as AccessibilityInstance } from '../Types.d-BrHSyS03.js';
 
 /**
  * Adds screen reader accessibility to toggle buttons. Updates the aria attributes of the toggle buttons. Button must be a semantic button element or a non-semantic element with a role of button, and possess the aria-pressed attribute.
@@ -10,4 +10,19 @@ import { T as ToggleStates } from '../Types.d-uG0Hm1yK.js';
 
 declare function updateToggleAriaAttribute(toggleId: string, togglesClass: string, toggleStates: ToggleStates[], currentPressedToggleIndex: number): void;
 
-export { updateToggleAriaAttribute };
+/**
+ * Makes a toggle button accessible by managing ARIA attributes and keyboard interactions.
+ * Handles toggle button state with proper focus management.
+ * @param {string} toggleId - The id of the toggle button or toggle button container.
+ * @param {string} togglesClass - The shared class of toggle buttons (for groups).
+ * @param {boolean} isSingleToggle - Whether this is a single toggle button (default: true).
+ */
+
+interface ToggleConfig {
+    toggleId: string;
+    togglesClass?: string;
+    isSingleToggle?: boolean;
+}
+declare function makeToggleAccessible({ toggleId, togglesClass, isSingleToggle }: ToggleConfig): AccessibilityInstance;
+
+export { makeToggleAccessible, updateToggleAriaAttribute };

package/dist/src/toggle/index.js

@@ -25,4 +25,148 @@ function updateToggleAriaAttribute(toggleId, togglesClass, toggleStates, current
   });
 }
 
-export { updateToggleAriaAttribute };
+// src/toggle/src/makeTogggleAccessible/makeToggleAccessible.ts
+function makeToggleAccessible({ toggleId, togglesClass, isSingleToggle = true }) {
+  const toggleContainer = document.querySelector(`#${toggleId}`);
+  if (!toggleContainer) {
+    console.error(`[aria-ease] Element with id="${toggleId}" not found. Make sure the toggle element exists before calling makeToggleAccessible.`);
+    return { cleanup: () => {
+    } };
+  }
+  let toggles;
+  if (isSingleToggle) {
+    toggles = [toggleContainer];
+  } else {
+    if (!togglesClass) {
+      console.error(`[aria-ease] togglesClass is required when isSingleToggle is false.`);
+      return { cleanup: () => {
+      } };
+    }
+    toggles = Array.from(toggleContainer.querySelectorAll(`.${togglesClass}`));
+    if (toggles.length === 0) {
+      console.error(`[aria-ease] No elements with class="${togglesClass}" found. Make sure toggle buttons exist before calling makeToggleAccessible.`);
+      return { cleanup: () => {
+      } };
+    }
+  }
+  const handlerMap = /* @__PURE__ */ new WeakMap();
+  const clickHandlerMap = /* @__PURE__ */ new WeakMap();
+  function initialize() {
+    toggles.forEach((toggle) => {
+      if (toggle.tagName.toLowerCase() !== "button" && !toggle.getAttribute("role")) {
+        toggle.setAttribute("role", "button");
+      }
+      if (!toggle.hasAttribute("aria-pressed")) {
+        toggle.setAttribute("aria-pressed", "false");
+      }
+      if (!toggle.hasAttribute("tabindex")) {
+        toggle.setAttribute("tabindex", "0");
+      }
+    });
+  }
+  function toggleButton(index) {
+    if (index < 0 || index >= toggles.length) {
+      console.error(`[aria-ease] Invalid toggle index: ${index}`);
+      return;
+    }
+    const toggle = toggles[index];
+    const isPressed = toggle.getAttribute("aria-pressed") === "true";
+    toggle.setAttribute("aria-pressed", isPressed ? "false" : "true");
+  }
+  function setPressed(index, pressed) {
+    if (index < 0 || index >= toggles.length) {
+      console.error(`[aria-ease] Invalid toggle index: ${index}`);
+      return;
+    }
+    toggles[index].setAttribute("aria-pressed", pressed ? "true" : "false");
+  }
+  function handleToggleClick(index) {
+    return () => {
+      toggleButton(index);
+    };
+  }
+  function handleToggleKeydown(index) {
+    return (event) => {
+      const { key } = event;
+      switch (key) {
+        case "Enter":
+        case " ":
+          event.preventDefault();
+          toggleButton(index);
+          break;
+        case "ArrowDown":
+        case "ArrowRight":
+          if (!isSingleToggle && toggles.length > 1) {
+            event.preventDefault();
+            const nextIndex = (index + 1) % toggles.length;
+            toggles[nextIndex].focus();
+          }
+          break;
+        case "ArrowUp":
+        case "ArrowLeft":
+          if (!isSingleToggle && toggles.length > 1) {
+            event.preventDefault();
+            const prevIndex = (index - 1 + toggles.length) % toggles.length;
+            toggles[prevIndex].focus();
+          }
+          break;
+        case "Home":
+          if (!isSingleToggle && toggles.length > 1) {
+            event.preventDefault();
+            toggles[0].focus();
+          }
+          break;
+        case "End":
+          if (!isSingleToggle && toggles.length > 1) {
+            event.preventDefault();
+            toggles[toggles.length - 1].focus();
+          }
+          break;
+      }
+    };
+  }
+  function addListeners() {
+    toggles.forEach((toggle, index) => {
+      const clickHandler = handleToggleClick(index);
+      const keydownHandler = handleToggleKeydown(index);
+      toggle.addEventListener("click", clickHandler);
+      toggle.addEventListener("keydown", keydownHandler);
+      handlerMap.set(toggle, keydownHandler);
+      clickHandlerMap.set(toggle, clickHandler);
+    });
+  }
+  function removeListeners() {
+    toggles.forEach((toggle) => {
+      const keydownHandler = handlerMap.get(toggle);
+      const clickHandler = clickHandlerMap.get(toggle);
+      if (keydownHandler) {
+        toggle.removeEventListener("keydown", keydownHandler);
+        handlerMap.delete(toggle);
+      }
+      if (clickHandler) {
+        toggle.removeEventListener("click", clickHandler);
+        clickHandlerMap.delete(toggle);
+      }
+    });
+  }
+  function cleanup() {
+    removeListeners();
+  }
+  function getPressedStates() {
+    return toggles.map((toggle) => toggle.getAttribute("aria-pressed") === "true");
+  }
+  function getPressedIndices() {
+    return toggles.map((toggle, index) => toggle.getAttribute("aria-pressed") === "true" ? index : -1).filter((index) => index !== -1);
+  }
+  initialize();
+  addListeners();
+  return {
+    toggleButton,
+    setPressed,
+    getPressedStates,
+    getPressedIndices,
+    cleanup
+  };
+}
+
+export { makeToggleAccessible, updateToggleAriaAttribute };

package/dist/src/utils/test/{contractTestRunnerPlaywright-4UOHWGWD.js → contractTestRunnerPlaywright-UQQI5MYS.js}

@@ -141,6 +141,38 @@ async function runContractTestsPlaywright(componentName, url) {
           }
         }
       }
+      let shouldSkipTest = false;
+      for (const act of action) {
+        if (act.type === "keypress" && (act.target === "submenuTrigger" || act.target === "submenu")) {
+          const submenuSelector = componentContract.selectors[act.target];
+          if (submenuSelector) {
+            const submenuCount = await page.locator(submenuSelector).count();
+            if (submenuCount === 0) {
+              reporter.reportTest(dynamicTest, "skip", `Skipping test - ${act.target} element not found (optional submenu test)`);
+              shouldSkipTest = true;
+              break;
+            }
+          }
+        }
+      }
+      if (!shouldSkipTest) {
+        for (const assertion of assertions) {
+          if (assertion.target === "submenu" || assertion.target === "submenuTrigger") {
+            const submenuSelector = componentContract.selectors[assertion.target];
+            if (submenuSelector) {
+              const submenuCount = await page.locator(submenuSelector).count();
+              if (submenuCount === 0) {
+                reporter.reportTest(dynamicTest, "skip", `Skipping test - ${assertion.target} element not found (optional submenu test)`);
+                shouldSkipTest = true;
+                break;
+              }
+            }
+          }
+        }
+      }
+      if (shouldSkipTest) {
+        continue;
+      }
       for (const act of action) {
         if (act.type === "focus") {
           const focusSelector = componentContract.selectors[act.target];

package/dist/src/utils/test/contracts/MenuContract.json

@@ -115,7 +115,6 @@
         {
             "description": "Pressing Enter key on trigger opens the menu and focuses first item.",
             "action": [
-                { "type": "focus", "target": "trigger" },
                 { "type": "keypress", "target": "trigger", "key": "Enter" }
             ],
             "assertions": [

package/dist/src/utils/test/index.cjs

@@ -9405,6 +9405,38 @@ async function runContractTestsPlaywright(componentName, url) {
           }
         }
       }
+      let shouldSkipTest = false;
+      for (const act of action) {
+        if (act.type === "keypress" && (act.target === "submenuTrigger" || act.target === "submenu")) {
+          const submenuSelector = componentContract.selectors[act.target];
+          if (submenuSelector) {
+            const submenuCount = await page.locator(submenuSelector).count();
+            if (submenuCount === 0) {
+              reporter.reportTest(dynamicTest, "skip", `Skipping test - ${act.target} element not found (optional submenu test)`);
+              shouldSkipTest = true;
+              break;
+            }
+          }
+        }
+      }
+      if (!shouldSkipTest) {
+        for (const assertion of assertions) {
+          if (assertion.target === "submenu" || assertion.target === "submenuTrigger") {
+            const submenuSelector = componentContract.selectors[assertion.target];
+            if (submenuSelector) {
+              const submenuCount = await page.locator(submenuSelector).count();
+              if (submenuCount === 0) {
+                reporter.reportTest(dynamicTest, "skip", `Skipping test - ${assertion.target} element not found (optional submenu test)`);
+                shouldSkipTest = true;
+                break;
+              }
+            }
+          }
+        }
+      }
+      if (shouldSkipTest) {
+        continue;
+      }
       for (const act of action) {
         if (act.type === "focus") {
           const focusSelector = componentContract.selectors[act.target];

package/dist/src/utils/test/index.js

@@ -12580,7 +12580,7 @@ Error: ${error instanceof Error ? error.message : String(error)}`
 URL must include protocol (e.g., "http://localhost:5173/test")`
         );
       }
-      const { runContractTestsPlaywright } = await import('./contractTestRunnerPlaywright-4UOHWGWD.js');
+      const { runContractTestsPlaywright } = await import('./contractTestRunnerPlaywright-UQQI5MYS.js');
       contract = await runContractTestsPlaywright(componentName, url);
     } else {
       console.log(`\u{1F9EA} Running jsdom tests (limited event handling)`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aria-ease",
-  "version": "3.0.3",
+  "version": "4.0.1",
   "description": "Out-of-the-box accessibility utility package to develop production ready applications.",
   "main": "dist/index.cjs",
   "type": "module",