aria-ease 3.0.3 → 4.0.0

package/dist/src/checkbox/index.js

@@ -29,4 +29,132 @@ function updateCheckboxAriaAttributes(checkboxId, checkboxesClass, checkboxState
   });
 }
 
-export { updateCheckboxAriaAttributes };
+// src/checkbox/src/makeCheckboxAccessible/makeCheckboxAccessible.ts
+function makeCheckboxAccessible({ checkboxGroupId, checkboxesClass }) {
+  const checkboxGroup = document.querySelector(`#${checkboxGroupId}`);
+  if (!checkboxGroup) {
+    console.error(`[aria-ease] Element with id="${checkboxGroupId}" not found. Make sure the checkbox group container exists before calling makeCheckboxAccessible.`);
+    return { cleanup: () => {
+    } };
+  }
+  const checkboxes = Array.from(checkboxGroup.querySelectorAll(`.${checkboxesClass}`));
+  if (checkboxes.length === 0) {
+    console.error(`[aria-ease] No elements with class="${checkboxesClass}" found. Make sure checkboxes exist before calling makeCheckboxAccessible.`);
+    return { cleanup: () => {
+    } };
+  }
+  const handlerMap = /* @__PURE__ */ new WeakMap();
+  const clickHandlerMap = /* @__PURE__ */ new WeakMap();
+  function initialize() {
+    if (!checkboxGroup.getAttribute("role")) {
+      checkboxGroup.setAttribute("role", "group");
+    }
+    checkboxes.forEach((checkbox) => {
+      checkbox.setAttribute("role", "checkbox");
+      if (!checkbox.hasAttribute("aria-checked")) {
+        checkbox.setAttribute("aria-checked", "false");
+      }
+      if (!checkbox.hasAttribute("tabindex")) {
+        checkbox.setAttribute("tabindex", "0");
+      }
+    });
+  }
+  function toggleCheckbox(index) {
+    if (index < 0 || index >= checkboxes.length) {
+      console.error(`[aria-ease] Invalid checkbox index: ${index}`);
+      return;
+    }
+    const checkbox = checkboxes[index];
+    const isChecked = checkbox.getAttribute("aria-checked") === "true";
+    checkbox.setAttribute("aria-checked", isChecked ? "false" : "true");
+  }
+  function setCheckboxState(index, checked) {
+    if (index < 0 || index >= checkboxes.length) {
+      console.error(`[aria-ease] Invalid checkbox index: ${index}`);
+      return;
+    }
+    checkboxes[index].setAttribute("aria-checked", checked ? "true" : "false");
+  }
+  function handleCheckboxClick(index) {
+    return () => {
+      toggleCheckbox(index);
+    };
+  }
+  function handleCheckboxKeydown(index) {
+    return (event) => {
+      const { key } = event;
+      switch (key) {
+        case " ":
+          event.preventDefault();
+          toggleCheckbox(index);
+          break;
+        case "ArrowDown":
+          event.preventDefault();
+          {
+            const nextIndex = (index + 1) % checkboxes.length;
+            checkboxes[nextIndex].focus();
+          }
+          break;
+        case "ArrowUp":
+          event.preventDefault();
+          {
+            const prevIndex = (index - 1 + checkboxes.length) % checkboxes.length;
+            checkboxes[prevIndex].focus();
+          }
+          break;
+        case "Home":
+          event.preventDefault();
+          checkboxes[0].focus();
+          break;
+        case "End":
+          event.preventDefault();
+          checkboxes[checkboxes.length - 1].focus();
+          break;
+      }
+    };
+  }
+  function addListeners() {
+    checkboxes.forEach((checkbox, index) => {
+      const clickHandler = handleCheckboxClick(index);
+      const keydownHandler = handleCheckboxKeydown(index);
+      checkbox.addEventListener("click", clickHandler);
+      checkbox.addEventListener("keydown", keydownHandler);
+      handlerMap.set(checkbox, keydownHandler);
+      clickHandlerMap.set(checkbox, clickHandler);
+    });
+  }
+  function removeListeners() {
+    checkboxes.forEach((checkbox) => {
+      const keydownHandler = handlerMap.get(checkbox);
+      const clickHandler = clickHandlerMap.get(checkbox);
+      if (keydownHandler) {
+        checkbox.removeEventListener("keydown", keydownHandler);
+        handlerMap.delete(checkbox);
+      }
+      if (clickHandler) {
+        checkbox.removeEventListener("click", clickHandler);
+        clickHandlerMap.delete(checkbox);
+      }
+    });
+  }
+  function cleanup() {
+    removeListeners();
+  }
+  function getCheckedStates() {
+    return checkboxes.map((checkbox) => checkbox.getAttribute("aria-checked") === "true");
+  }
+  function getCheckedIndices() {
+    return checkboxes.map((checkbox, index) => checkbox.getAttribute("aria-checked") === "true" ? index : -1).filter((index) => index !== -1);
+  }
+  initialize();
+  addListeners();
+  return {
+    toggleCheckbox,
+    setCheckboxState,
+    getCheckedStates,
+    getCheckedIndices,
+    cleanup
+  };
+}
+
+export { makeCheckboxAccessible, updateCheckboxAriaAttributes };

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

@@ -1,4 +1,4 @@
-import { b as ComboboxConfig, a as AccessibilityInstance } from '../Types.d-uG0Hm1yK.cjs';
+import { b as ComboboxConfig, a as AccessibilityInstance } from '../Types.d-BrHSyS03.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 { b as ComboboxConfig, a as AccessibilityInstance } from '../Types.d-uG0Hm1yK.js';
+import { b as ComboboxConfig, a as AccessibilityInstance } from '../Types.d-BrHSyS03.js';
 
 /**
  * Makes a Combobox accessible by adding appropriate ARIA attributes, keyboard interactions and focus management.

package/dist/src/menu/index.cjs

@@ -149,6 +149,7 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
   triggerButton.setAttribute("aria-controls", menuId);
   triggerButton.setAttribute("aria-expanded", "false");
   menuDiv.setAttribute("role", "menu");
+  menuDiv.setAttribute("aria-labelledby", triggerId);
   const handlerMap = /* @__PURE__ */ new WeakMap();
   const submenuInstances = /* @__PURE__ */ new Map();
   let cachedItems = null;
@@ -285,8 +286,39 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
     });
   }
   intializeMenuItems();
+  function handleTriggerKeydown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      const isOpen = menuDiv.style.display !== "none";
+      if (isOpen) {
+        closeMenu();
+      } else {
+        openMenu();
+      }
+    }
+  }
+  function handleTriggerClick() {
+    const isOpen = menuDiv.style.display !== "none";
+    if (isOpen) {
+      closeMenu();
+    } else {
+      openMenu();
+    }
+  }
+  function handleClickOutside(event) {
+    if (menuDiv && triggerButton && !menuDiv.contains(event.target) && !triggerButton.contains(event.target) && getComputedStyle(menuDiv).display !== "none" && triggerButton.getAttribute("aria-expanded") === "true") {
+      closeMenu();
+    }
+  }
+  triggerButton.addEventListener("keydown", handleTriggerKeydown);
+  triggerButton.addEventListener("click", handleTriggerClick);
+  document.addEventListener("click", handleClickOutside);
+  triggerButton.setAttribute("data-menu-initialized", "true");
   function cleanup() {
     removeListeners();
+    triggerButton.removeEventListener("keydown", handleTriggerKeydown);
+    triggerButton.removeEventListener("click", handleTriggerClick);
+    document.removeEventListener("click", handleClickOutside);
     menuDiv.style.display = "none";
     setAria(false);
     submenuInstances.forEach((instance) => instance.cleanup());

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

@@ -1,4 +1,4 @@
-import { a as AccessibilityInstance } from '../Types.d-uG0Hm1yK.cjs';
+import { a as AccessibilityInstance } from '../Types.d-BrHSyS03.cjs';
 
 /**
   * Adds keyboard interaction to toggle menu. The menu traps focus and can be interacted with using the keyboard. The first interactive item of the menu has focus when menu open.

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

@@ -1,4 +1,4 @@
-import { a as AccessibilityInstance } from '../Types.d-uG0Hm1yK.js';
+import { a as AccessibilityInstance } from '../Types.d-BrHSyS03.js';
 
 /**
   * Adds keyboard interaction to toggle menu. The menu traps focus and can be interacted with using the keyboard. The first interactive item of the menu has focus when menu open.

package/dist/src/menu/index.js

@@ -29,6 +29,7 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
   triggerButton.setAttribute("aria-controls", menuId);
   triggerButton.setAttribute("aria-expanded", "false");
   menuDiv.setAttribute("role", "menu");
+  menuDiv.setAttribute("aria-labelledby", triggerId);
   const handlerMap = /* @__PURE__ */ new WeakMap();
   const submenuInstances = /* @__PURE__ */ new Map();
   let cachedItems = null;
@@ -165,8 +166,39 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
     });
   }
   intializeMenuItems();
+  function handleTriggerKeydown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      const isOpen = menuDiv.style.display !== "none";
+      if (isOpen) {
+        closeMenu();
+      } else {
+        openMenu();
+      }
+    }
+  }
+  function handleTriggerClick() {
+    const isOpen = menuDiv.style.display !== "none";
+    if (isOpen) {
+      closeMenu();
+    } else {
+      openMenu();
+    }
+  }
+  function handleClickOutside(event) {
+    if (menuDiv && triggerButton && !menuDiv.contains(event.target) && !triggerButton.contains(event.target) && getComputedStyle(menuDiv).display !== "none" && triggerButton.getAttribute("aria-expanded") === "true") {
+      closeMenu();
+    }
+  }
+  triggerButton.addEventListener("keydown", handleTriggerKeydown);
+  triggerButton.addEventListener("click", handleTriggerClick);
+  document.addEventListener("click", handleClickOutside);
+  triggerButton.setAttribute("data-menu-initialized", "true");
   function cleanup() {
     removeListeners();
+    triggerButton.removeEventListener("keydown", handleTriggerKeydown);
+    triggerButton.removeEventListener("click", handleTriggerClick);
+    document.removeEventListener("click", handleClickOutside);
     menuDiv.style.display = "none";
     setAria(false);
     submenuInstances.forEach((instance) => instance.cleanup());

package/dist/src/radio/index.cjs

@@ -30,4 +30,126 @@ function updateRadioAriaAttributes(radioId, radiosClass, radioStates, currentPre
   });
 }
 
+// src/radio/src/makeRadioAccessible/makeRadioAccessible.ts
+function makeRadioAccessible({ radioGroupId, radiosClass, defaultSelectedIndex = 0 }) {
+  const radioGroup = document.querySelector(`#${radioGroupId}`);
+  if (!radioGroup) {
+    console.error(`[aria-ease] Element with id="${radioGroupId}" not found. Make sure the radio group container exists before calling makeRadioAccessible.`);
+    return { cleanup: () => {
+    } };
+  }
+  const radios = Array.from(radioGroup.querySelectorAll(`.${radiosClass}`));
+  if (radios.length === 0) {
+    console.error(`[aria-ease] No elements with class="${radiosClass}" found. Make sure radio buttons exist before calling makeRadioAccessible.`);
+    return { cleanup: () => {
+    } };
+  }
+  const handlerMap = /* @__PURE__ */ new WeakMap();
+  const clickHandlerMap = /* @__PURE__ */ new WeakMap();
+  let currentSelectedIndex = defaultSelectedIndex;
+  function initialize() {
+    if (!radioGroup.getAttribute("role")) {
+      radioGroup.setAttribute("role", "radiogroup");
+    }
+    radios.forEach((radio, index) => {
+      radio.setAttribute("role", "radio");
+      radio.setAttribute("tabindex", index === currentSelectedIndex ? "0" : "-1");
+      if (index === currentSelectedIndex) {
+        radio.setAttribute("aria-checked", "true");
+      } else {
+        radio.setAttribute("aria-checked", "false");
+      }
+    });
+  }
+  function selectRadio(index) {
+    if (index < 0 || index >= radios.length) {
+      console.error(`[aria-ease] Invalid radio index: ${index}`);
+      return;
+    }
+    if (currentSelectedIndex >= 0 && currentSelectedIndex < radios.length) {
+      radios[currentSelectedIndex].setAttribute("aria-checked", "false");
+      radios[currentSelectedIndex].setAttribute("tabindex", "-1");
+    }
+    radios[index].setAttribute("aria-checked", "true");
+    radios[index].setAttribute("tabindex", "0");
+    radios[index].focus();
+    currentSelectedIndex = index;
+  }
+  function handleRadioClick(index) {
+    return () => {
+      selectRadio(index);
+    };
+  }
+  function handleRadioKeydown(index) {
+    return (event) => {
+      const { key } = event;
+      let nextIndex = index;
+      switch (key) {
+        case "ArrowDown":
+        case "ArrowRight":
+          event.preventDefault();
+          nextIndex = (index + 1) % radios.length;
+          selectRadio(nextIndex);
+          break;
+        case "ArrowUp":
+        case "ArrowLeft":
+          event.preventDefault();
+          nextIndex = (index - 1 + radios.length) % radios.length;
+          selectRadio(nextIndex);
+          break;
+        case " ":
+          event.preventDefault();
+          selectRadio(index);
+          break;
+        case "Home":
+          event.preventDefault();
+          selectRadio(0);
+          break;
+        case "End":
+          event.preventDefault();
+          selectRadio(radios.length - 1);
+          break;
+      }
+    };
+  }
+  function addListeners() {
+    radios.forEach((radio, index) => {
+      const clickHandler = handleRadioClick(index);
+      const keydownHandler = handleRadioKeydown(index);
+      radio.addEventListener("click", clickHandler);
+      radio.addEventListener("keydown", keydownHandler);
+      handlerMap.set(radio, keydownHandler);
+      clickHandlerMap.set(radio, clickHandler);
+    });
+  }
+  function removeListeners() {
+    radios.forEach((radio) => {
+      const keydownHandler = handlerMap.get(radio);
+      const clickHandler = clickHandlerMap.get(radio);
+      if (keydownHandler) {
+        radio.removeEventListener("keydown", keydownHandler);
+        handlerMap.delete(radio);
+      }
+      if (clickHandler) {
+        radio.removeEventListener("click", clickHandler);
+        clickHandlerMap.delete(radio);
+      }
+    });
+  }
+  function cleanup() {
+    removeListeners();
+  }
+  function getSelectedIndex() {
+    return currentSelectedIndex;
+  }
+  initialize();
+  addListeners();
+  return {
+    selectRadio,
+    getSelectedIndex,
+    cleanup
+  };
+}
+
+exports.makeRadioAccessible = makeRadioAccessible;
 exports.updateRadioAriaAttributes = updateRadioAriaAttributes;

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

@@ -1,4 +1,4 @@
-import { R as RadioStates } from '../Types.d-uG0Hm1yK.cjs';
+import { R as RadioStates, a as AccessibilityInstance } from '../Types.d-BrHSyS03.cjs';
 
 /**
  * Adds screen reader accessibility to multiple radio buttons. Updates the aria attributes of the radio buttons. Radio elements must possess the following aria attributes; aria-checked and aria-label.
@@ -10,4 +10,19 @@ import { R as RadioStates } from '../Types.d-uG0Hm1yK.cjs';
 
 declare function updateRadioAriaAttributes(radioId: string, radiosClass: string, radioStates: RadioStates[], currentPressedRadioIndex: number): void;
 
-export { updateRadioAriaAttributes };
+/**
+ * Makes a radio group accessible by managing ARIA attributes, keyboard navigation, and state.
+ * Handles radio button selection with proper focus management and keyboard interactions.
+ * @param {string} radioGroupId - The id of the radio group container.
+ * @param {string} radiosClass - The shared class of all radio buttons.
+ * @param {number} defaultSelectedIndex - The index of the initially selected radio (default: 0).
+ */
+
+interface RadioConfig {
+    radioGroupId: string;
+    radiosClass: string;
+    defaultSelectedIndex?: number;
+}
+declare function makeRadioAccessible({ radioGroupId, radiosClass, defaultSelectedIndex }: RadioConfig): AccessibilityInstance;
+
+export { makeRadioAccessible, updateRadioAriaAttributes };

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

@@ -1,4 +1,4 @@
-import { R as RadioStates } from '../Types.d-uG0Hm1yK.js';
+import { R as RadioStates, a as AccessibilityInstance } from '../Types.d-BrHSyS03.js';
 
 /**
  * Adds screen reader accessibility to multiple radio buttons. Updates the aria attributes of the radio buttons. Radio elements must possess the following aria attributes; aria-checked and aria-label.
@@ -10,4 +10,19 @@ import { R as RadioStates } from '../Types.d-uG0Hm1yK.js';
 
 declare function updateRadioAriaAttributes(radioId: string, radiosClass: string, radioStates: RadioStates[], currentPressedRadioIndex: number): void;
 
-export { updateRadioAriaAttributes };
+/**
+ * Makes a radio group accessible by managing ARIA attributes, keyboard navigation, and state.
+ * Handles radio button selection with proper focus management and keyboard interactions.
+ * @param {string} radioGroupId - The id of the radio group container.
+ * @param {string} radiosClass - The shared class of all radio buttons.
+ * @param {number} defaultSelectedIndex - The index of the initially selected radio (default: 0).
+ */
+
+interface RadioConfig {
+    radioGroupId: string;
+    radiosClass: string;
+    defaultSelectedIndex?: number;
+}
+declare function makeRadioAccessible({ radioGroupId, radiosClass, defaultSelectedIndex }: RadioConfig): AccessibilityInstance;
+
+export { makeRadioAccessible, updateRadioAriaAttributes };

package/dist/src/radio/index.js

@@ -28,4 +28,125 @@ function updateRadioAriaAttributes(radioId, radiosClass, radioStates, currentPre
   });
 }
 
-export { updateRadioAriaAttributes };
+// src/radio/src/makeRadioAccessible/makeRadioAccessible.ts
+function makeRadioAccessible({ radioGroupId, radiosClass, defaultSelectedIndex = 0 }) {
+  const radioGroup = document.querySelector(`#${radioGroupId}`);
+  if (!radioGroup) {
+    console.error(`[aria-ease] Element with id="${radioGroupId}" not found. Make sure the radio group container exists before calling makeRadioAccessible.`);
+    return { cleanup: () => {
+    } };
+  }
+  const radios = Array.from(radioGroup.querySelectorAll(`.${radiosClass}`));
+  if (radios.length === 0) {
+    console.error(`[aria-ease] No elements with class="${radiosClass}" found. Make sure radio buttons exist before calling makeRadioAccessible.`);
+    return { cleanup: () => {
+    } };
+  }
+  const handlerMap = /* @__PURE__ */ new WeakMap();
+  const clickHandlerMap = /* @__PURE__ */ new WeakMap();
+  let currentSelectedIndex = defaultSelectedIndex;
+  function initialize() {
+    if (!radioGroup.getAttribute("role")) {
+      radioGroup.setAttribute("role", "radiogroup");
+    }
+    radios.forEach((radio, index) => {
+      radio.setAttribute("role", "radio");
+      radio.setAttribute("tabindex", index === currentSelectedIndex ? "0" : "-1");
+      if (index === currentSelectedIndex) {
+        radio.setAttribute("aria-checked", "true");
+      } else {
+        radio.setAttribute("aria-checked", "false");
+      }
+    });
+  }
+  function selectRadio(index) {
+    if (index < 0 || index >= radios.length) {
+      console.error(`[aria-ease] Invalid radio index: ${index}`);
+      return;
+    }
+    if (currentSelectedIndex >= 0 && currentSelectedIndex < radios.length) {
+      radios[currentSelectedIndex].setAttribute("aria-checked", "false");
+      radios[currentSelectedIndex].setAttribute("tabindex", "-1");
+    }
+    radios[index].setAttribute("aria-checked", "true");
+    radios[index].setAttribute("tabindex", "0");
+    radios[index].focus();
+    currentSelectedIndex = index;
+  }
+  function handleRadioClick(index) {
+    return () => {
+      selectRadio(index);
+    };
+  }
+  function handleRadioKeydown(index) {
+    return (event) => {
+      const { key } = event;
+      let nextIndex = index;
+      switch (key) {
+        case "ArrowDown":
+        case "ArrowRight":
+          event.preventDefault();
+          nextIndex = (index + 1) % radios.length;
+          selectRadio(nextIndex);
+          break;
+        case "ArrowUp":
+        case "ArrowLeft":
+          event.preventDefault();
+          nextIndex = (index - 1 + radios.length) % radios.length;
+          selectRadio(nextIndex);
+          break;
+        case " ":
+          event.preventDefault();
+          selectRadio(index);
+          break;
+        case "Home":
+          event.preventDefault();
+          selectRadio(0);
+          break;
+        case "End":
+          event.preventDefault();
+          selectRadio(radios.length - 1);
+          break;
+      }
+    };
+  }
+  function addListeners() {
+    radios.forEach((radio, index) => {
+      const clickHandler = handleRadioClick(index);
+      const keydownHandler = handleRadioKeydown(index);
+      radio.addEventListener("click", clickHandler);
+      radio.addEventListener("keydown", keydownHandler);
+      handlerMap.set(radio, keydownHandler);
+      clickHandlerMap.set(radio, clickHandler);
+    });
+  }
+  function removeListeners() {
+    radios.forEach((radio) => {
+      const keydownHandler = handlerMap.get(radio);
+      const clickHandler = clickHandlerMap.get(radio);
+      if (keydownHandler) {
+        radio.removeEventListener("keydown", keydownHandler);
+        handlerMap.delete(radio);
+      }
+      if (clickHandler) {
+        radio.removeEventListener("click", clickHandler);
+        clickHandlerMap.delete(radio);
+      }
+    });
+  }
+  function cleanup() {
+    removeListeners();
+  }
+  function getSelectedIndex() {
+    return currentSelectedIndex;
+  }
+  initialize();
+  addListeners();
+  return {
+    selectRadio,
+    getSelectedIndex,
+    cleanup
+  };
+}
+
+export { makeRadioAccessible, updateRadioAriaAttributes };