aria-ease 4.0.0 → 5.0.0

package/README.md

@@ -156,136 +156,253 @@ menu.refresh();
 
 ### 🪗 Accordion
 
-Updates `aria-expanded` attributes for accordion panels.
+Creates accessible accordions with keyboard navigation and automatic state management.
+
+**Features:**
+
+- Arrow key navigation between triggers
+- Automatic ARIA attribute management
+- Single or multiple panel expansion
+- Enter/Space to toggle panels
+- Home/End key support
 
 ```javascript
-import { updateAccordionTriggerAriaAttributes } from "aria-ease/accordion";
-
-const accordionStates = [
-  { expanded: true },
-  { expanded: false },
-  { expanded: false },
-];
-
-// Call when accordion state changes
-updateAccordionTriggerAriaAttributes(
-  "accordion-container", // Container ID
-  "accordion-trigger", // Shared class for triggers
-  accordionStates, // State array
-  0, // Index of trigger that changed
-);
+import { makeAccordionAccessible } from "aria-ease/accordion";
+
+// React Example
+useEffect(() => {
+  const accordion = makeAccordionAccessible({
+    accordionId: "accordion-container",
+    triggersClass: "accordion-trigger",
+    panelsClass: "accordion-panel",
+    allowMultiple: false, // Only one panel open at a time (default)
+  });
+
+  return () => accordion.cleanup();
+}, []);
+
+// Programmatic control
+accordion.expandItem(0); // Expand first panel
+accordion.collapseItem(1); // Collapse second panel
+accordion.toggleItem(2); // Toggle third panel
 ```
 
 **HTML structure:**
 
 ```html
 <div id="accordion-container">
-  <button
-    class="accordion-trigger"
-    aria-expanded="false"
-    aria-controls="panel-1"
-  >
-    Section 1
-  </button>
-  <div id="panel-1">Content 1</div>
-
-  <button
-    class="accordion-trigger"
-    aria-expanded="false"
-    aria-controls="panel-2"
-  >
-    Section 2
-  </button>
-  <div id="panel-2">Content 2</div>
+  <button class="accordion-trigger">Section 1</button>
+  <div class="accordion-panel">Content 1</div>
+
+  <button class="accordion-trigger">Section 2</button>
+  <div class="accordion-panel">Content 2</div>
+
+  <button class="accordion-trigger">Section 3</button>
+  <div class="accordion-panel">Content 3</div>
 </div>
 ```
 
+<details>
+<summary>📌 Legacy API deprecated</summary>
+
+```javascript
+import { makeAccordionAccessible } from "aria-ease/accordion";
+
+const accordionStates = [{ display: true }, { display: false }];
+
+makeAccordionAccessible({
+  accordionId: "faq-div",
+  triggersClass: "dropdown-button",
+  panelsClass: "accordion-panel",
+  allowMultiple: false, // Only one panel open at a time
+});
+```
+
+</details>
+
 ---
 
 ### ✅ Checkbox
 
-Updates `aria-checked` attributes for custom checkboxes.
+Creates accessible checkbox groups with keyboard navigation and state management.
+
+**Features:**
+
+- Arrow key navigation
+- Space to toggle
+- Independent state tracking
+- Home/End key support
+- Query checked states
 
 ```javascript
-import { updateCheckboxAriaAttributes } from "aria-ease/checkbox";
-
-const checkboxStates = [
-  { checked: true },
-  { checked: false },
-  { checked: true },
-];
-
-// Call when checkbox is toggled
-function handleCheckboxClick(index) {
-  checkboxStates[index].checked = !checkboxStates[index].checked;
-
-  updateCheckboxAriaAttributes(
-    "checkbox-group",
-    "custom-checkbox",
-    checkboxStates,
-    index,
-  );
-}
+import { makeCheckboxAccessible } from "aria-ease/checkbox";
+
+// React Example
+useEffect(() => {
+  const checkboxGroup = makeCheckboxAccessible({
+    checkboxGroupId: "checkbox-group",
+    checkboxesClass: "custom-checkbox",
+  });
+
+  return () => checkboxGroup.cleanup();
+}, []);
+
+// Programmatic control
+checkboxGroup.toggleCheckbox(0); // Toggle first checkbox
+checkboxGroup.setCheckboxState(1, true); // Check second checkbox
+const states = checkboxGroup.getCheckedStates(); // [true, false, true]
+const indices = checkboxGroup.getCheckedIndices(); // [0, 2]
 ```
 
 **HTML structure:**
 
 ```html
 <div id="checkbox-group">
-  <div
-    class="custom-checkbox"
-    role="checkbox"
-    aria-checked="false"
-    aria-label="Option 1"
-  ></div>
-  <div
-    class="custom-checkbox"
-    role="checkbox"
-    aria-checked="false"
-    aria-label="Option 2"
-  ></div>
+  <div class="custom-checkbox" aria-label="Option 1"></div>
+  <div class="custom-checkbox" aria-label="Option 2"></div>
+  <div class="custom-checkbox" aria-label="Option 3"></div>
 </div>
 ```
 
+<details>
+<summary>📌 Legacy API deprecated</summary>
+
+```javascript
+import { makeCheckboxAccessible } from "aria-ease/checkbox";
+
+makeCheckboxAccessible({
+  checkboxGroupId: "checkbox-div",
+  checkboxesClass: "course-checkbox",
+});
+```
+
+</details>
+
 ---
 
 ### 🔘 Radio Button
 
-Updates `aria-checked` attributes for custom radio buttons.
+Creates accessible radio groups with keyboard navigation and automatic selection management.
 
-```javascript
-import { updateRadioAriaAttributes } from "aria-ease/radio";
+**Features:**
 
-const radioStates = [{ checked: true }, { checked: false }, { checked: false }];
+- Arrow key navigation (all directions)
+- Automatic unchecking of other radios
+- Space to select
+- Home/End key support
+- Single selection enforcement
 
-function handleRadioSelect(index) {
-  // Uncheck all, check selected
-  radioStates.forEach((state, i) => {
-    state.checked = i === index;
+```javascript
+import { makeRadioAccessible } from "aria-ease/radio";
+
+// React Example
+useEffect(() => {
+  const radioGroup = makeRadioAccessible({
+    radioGroupId: "radio-group",
+    radiosClass: "custom-radio",
+    defaultSelectedIndex: 0, // Initially selected (optional)
   });
 
-  updateRadioAriaAttributes("radio-group", "custom-radio", radioStates);
-}
+  return () => radioGroup.cleanup();
+}, []);
+
+// Programmatic control
+radioGroup.selectRadio(2); // Select third radio
+const selected = radioGroup.getSelectedIndex(); // Get current selection
 ```
 
+**HTML structure:**
+
+```html
+<div id="radio-group">
+  <div class="custom-radio" aria-label="Option 1"></div>
+  <div class="custom-radio" aria-label="Option 2"></div>
+  <div class="custom-radio" aria-label="Option 3"></div>
+</div>
+```
+
+<details>
+<summary>📌 Legacy API deprecated</summary>
+
+```javascript
+import { makeRadioAccessible } from "aria-ease/radio";
+
+makeRadioAccessible({
+  radioGroupId: "radio-div",
+  radiosClass: "radio",
+  defaultSelectedIndex: 0, // Optional: which radio is selected initially
+});
+```
+
+</details>
+
 ---
 
 ### 🔀 Toggle Button
 
-Updates `aria-pressed` attributes for toggle buttons.
+Creates accessible toggle buttons with keyboard interactions and state management.
+
+**Features:**
+
+- Enter/Space to toggle
+- Single toggle or toggle groups
+- Arrow key navigation (groups)
+- Home/End support (groups)
+- Query pressed states
 
 ```javascript
-import { updateToggleAriaAttribute } from "aria-ease/toggle";
+import { makeToggleAccessible } from "aria-ease/toggle";
 
-const toggleStates = [{ pressed: false }, { pressed: true }];
+// Single toggle button
+const toggle = makeToggleAccessible({
+  toggleId: "mute-button",
+  isSingleToggle: true,
+});
 
-function handleToggle(index) {
-  toggleStates[index].pressed = !toggleStates[index].pressed;
+// Toggle button group
+const toggleGroup = makeToggleAccessible({
+  toggleId: "toolbar",
+  togglesClass: "toggle-btn",
+  isSingleToggle: false,
+});
 
-  updateToggleAriaAttribute("toggle-container", "toggle-btn", toggleStates);
-}
+// Programmatic control
+toggle.toggleButton(0); // Toggle the button
+toggle.setPressed(0, true); // Set pressed state
+const states = toggleGroup.getPressedStates(); // [false, true, false]
+const indices = toggleGroup.getPressedIndices(); // [1]
+
+// Cleanup
+toggle.cleanup();
 ```
 
+**HTML structure:**
+
+```html
+<!-- Single toggle -->
+<button id="mute-button">Mute</button>
+
+<!-- Toggle group -->
+<div id="toolbar">
+  <button class="toggle-btn">Bold</button>
+  <button class="toggle-btn">Italic</button>
+  <button class="toggle-btn">Underline</button>
+</div>
+```
+
+<details>
+<summary>📌 Legacy API deprecated</summary>
+
+```javascript
+import { updateToggleAriaAttribute } from "aria-ease/toggle";
+
+const toggleStates = [{ pressed: false }];
+
+updateToggleAriaAttribute("toggle-container", "toggle-btn", toggleStates, 0);
+```
+
+</details>
+
 ---
 
 ### 🧱 Block (Generic Focusable Groups)
@@ -336,23 +453,24 @@ Aria-Ease is designed to be lightweight and tree-shakable:
 
 | Import                       | Size (ESM)            |
 | ---------------------------- | --------------------- |
-| `aria-ease/accordion`        | ~1.5KB                |
-| `aria-ease/checkbox`         | ~1.6KB                |
-| `aria-ease/radio`            | ~1.6KB                |
-| `aria-ease/toggle`           | ~1.4KB                |
-| `aria-ease/menu`             | ~3.7KB                |
+| `aria-ease/accordion`        | ~6.5KB                |
+| `aria-ease/checkbox`         | ~6.0KB                |
+| `aria-ease/radio`            | ~5.5KB                |
+| `aria-ease/toggle`           | ~6.0KB                |
+| `aria-ease/menu`             | ~6.7KB                |
 | `aria-ease/block`            | ~1.7KB                |
-| Full bundle (all components) | ~416KB (uncompressed) |
+| `aria-ease/combobox`         | ~8.1KB                |
+| Full bundle (all components) | ~459KB (uncompressed) |
 
 **💡 Tip:** Always import individual components for optimal bundle size:
 
 ```javascript
-// ✅ Good - only imports menu code (~3.7KB)
+// ✅ Good - only imports menu code (~6.7KB)
 import { makeMenuAccessible } from "aria-ease/menu";
 //or
 import * as Block from "aria-ease/block";
 
-// ❌ Avoid - imports everything (~416KB)
+// ❌ Avoid - imports everything (~459KB)
 import { makeMenuAccessible } from "aria-ease";
 ```
 

package/dist/index.cjs

@@ -9853,40 +9853,10 @@ __export(index_exports, {
   makeMenuAccessible: () => makeMenuAccessible,
   makeRadioAccessible: () => makeRadioAccessible,
   makeToggleAccessible: () => makeToggleAccessible,
-  testUiComponent: () => testUiComponent,
-  updateAccordionTriggerAriaAttributes: () => updateAccordionTriggerAriaAttributes,
-  updateCheckboxAriaAttributes: () => updateCheckboxAriaAttributes,
-  updateRadioAriaAttributes: () => updateRadioAriaAttributes,
-  updateToggleAriaAttribute: () => updateToggleAriaAttribute
+  testUiComponent: () => testUiComponent
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/accordion/src/updateAccordionTriggerAriaAttributes/updateAccordionTriggerAriaAttributes.ts
-function updateAccordionTriggerAriaAttributes(accordionId, accordionTriggersClass, accordionStates, clickedTriggerIndex) {
-  const accordionDiv = document.querySelector(`#${accordionId}`);
-  if (!accordionDiv) {
-    console.error(`[aria-ease] Element with id="${accordionId}" not found. Make sure the accordion element exists before calling updateAccordionTriggerAriaAttributes.`);
-    return;
-  }
-  const accordionItems = Array.from(accordionDiv.querySelectorAll(`.${accordionTriggersClass}`));
-  if (accordionItems.length === 0) {
-    console.error(`[aria-ease] Element with class="${accordionTriggersClass}" not found. Make sure the accordion items exist before calling updateAccordionTriggerAriaAttributes.`);
-    return;
-  }
-  if (accordionItems.length !== accordionStates.length) {
-    console.error(`[aria-ease] Accordion state/DOM length mismatch: found ${accordionItems.length} triggers, but got ${accordionStates.length} state objects.'`);
-    return;
-  }
-  accordionItems.forEach((accordionItem, index) => {
-    const state = accordionStates[index];
-    const expanded = accordionItem.getAttribute("aria-expanded");
-    const shouldBeExpanded = index === clickedTriggerIndex ? state.display ? "true" : "false" : "false";
-    if (expanded && expanded !== shouldBeExpanded) {
-      accordionItem.setAttribute("aria-expanded", shouldBeExpanded);
-    }
-  });
-}
-
 // src/accordion/src/makeAccordionAccessible/makeAccordionAccessible.ts
 function makeAccordionAccessible({ accordionId, triggersClass, panelsClass, allowMultiple = false }) {
   const accordionContainer = document.querySelector(`#${accordionId}`);
@@ -10215,38 +10185,6 @@ function makeBlockAccessible({ blockId, blockItemsClass }) {
   return { cleanup, refresh };
 }
 
-// src/checkbox/src/updateCheckboxAriaAttributes/updateCheckboxAriaAttributes.ts
-function updateCheckboxAriaAttributes(checkboxId, checkboxesClass, checkboxStates, currentPressedCheckboxIndex) {
-  const checkboxDiv = document.querySelector(`#${checkboxId}`);
-  if (!checkboxDiv) {
-    console.error(`[aria-ease] Invalid checkbox main div id provided. No checkbox div with id '${checkboxDiv} found.'`);
-    return;
-  }
-  const checkboxItems = Array.from(document.querySelectorAll(`.${checkboxesClass}`));
-  if (checkboxItems.length === 0) {
-    console.error(`[aria-ease] Element with class="${checkboxesClass}" not found. Make sure the checkbox items exist before calling updateCheckboxAriaAttributes.`);
-    return;
-  }
-  ;
-  if (checkboxStates.length === 0) {
-    console.error(`[aria-ease] Checkbox states array is empty. Make sure the checkboxStates array is populated before calling updateCheckboxAriaAttributes.`);
-    return;
-  }
-  if (currentPressedCheckboxIndex < 0 || currentPressedCheckboxIndex >= checkboxStates.length) {
-    console.error(`[aria-ease] Checkbox index ${currentPressedCheckboxIndex} is out of bounds for states array of length ${checkboxStates.length}.`);
-    return;
-  }
-  checkboxItems.forEach((checkbox, index) => {
-    if (index === currentPressedCheckboxIndex) {
-      const checked = checkbox.getAttribute("aria-checked");
-      const shouldBeChecked = checkboxStates[index].checked ? "true" : "false";
-      if (checked && checked !== shouldBeChecked) {
-        checkbox.setAttribute("aria-checked", shouldBeChecked);
-      }
-    }
-  });
-}
-
 // src/checkbox/src/makeCheckboxAccessible/makeCheckboxAccessible.ts
 function makeCheckboxAccessible({ checkboxGroupId, checkboxesClass }) {
   const checkboxGroup = document.querySelector(`#${checkboxGroupId}`);
@@ -10520,8 +10458,8 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
     });
   }
   function openMenu() {
-    menuDiv.style.display = "block";
     setAria(true);
+    menuDiv.style.display = "block";
     const items = getFilteredItems();
     addListeners();
     if (items && items.length > 0) {
@@ -10529,9 +10467,9 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
     }
   }
   function closeMenu() {
-    removeListeners();
-    menuDiv.style.display = "none";
     setAria(false);
+    menuDiv.style.display = "none";
+    removeListeners();
     triggerButton.focus();
   }
   function intializeMenuItems() {
@@ -10541,19 +10479,8 @@ 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";
+    const isOpen = triggerButton.getAttribute("aria-expanded") === "true";
     if (isOpen) {
       closeMenu();
     } else {
@@ -10561,17 +10488,19 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
     }
   }
   function handleClickOutside(event) {
-    if (menuDiv && triggerButton && !menuDiv.contains(event.target) && !triggerButton.contains(event.target) && getComputedStyle(menuDiv).display !== "none" && triggerButton.getAttribute("aria-expanded") === "true") {
+    const isMenuOpen = triggerButton.getAttribute("aria-expanded") === "true";
+    if (!isMenuOpen) return;
+    const clickedTrigger = triggerButton.contains(event.target);
+    const clickedMenu = menuDiv.contains(event.target);
+    if (!clickedTrigger && !clickedMenu) {
       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";
@@ -10586,36 +10515,6 @@ function makeMenuAccessible({ menuId, menuItemsClass, triggerId }) {
   return { openMenu, closeMenu, cleanup, refresh };
 }
 
-// src/radio/src/updateRadioAriaAttributes/updateRadioAriaAttributes.ts
-function updateRadioAriaAttributes(radioId, radiosClass, radioStates, currentPressedRadioIndex) {
-  const radioDiv = document.querySelector(`#${radioId}`);
-  if (!radioDiv) {
-    console.error(`[aria-ease] Element with id="${radioId}" not found. Make sure the radio element exists before calling updateRadioAriaAttributes.`);
-    return;
-  }
-  const radioItems = Array.from(radioDiv.querySelectorAll(`.${radiosClass}`));
-  if (radioItems.length === 0) {
-    console.error(`[aria-ease] Element with class="${radiosClass}" not found. Make sure the radio items exist before calling updateRadioAriaAttributes.`);
-    return;
-  }
-  if (radioStates.length === 0) {
-    console.error(`[aria-ease] Radio states array is empty. Make sure the radioStates array is populated before calling updateRadioAriaAttributes.`);
-    return;
-  }
-  if (currentPressedRadioIndex < 0 || currentPressedRadioIndex >= radioStates.length) {
-    console.error(`[aria-ease] Radio index ${currentPressedRadioIndex} is out of bounds for states array of length ${radioStates.length}.`);
-    return;
-  }
-  radioItems.forEach((radioItem, index) => {
-    const state = radioStates[index];
-    const checked = radioItem.getAttribute("aria-checked");
-    const shouldBeChecked = index === currentPressedRadioIndex ? state.checked ? "true" : "false" : "false";
-    if (checked && checked !== shouldBeChecked) {
-      radioItem.setAttribute("aria-checked", shouldBeChecked);
-    }
-  });
-}
-
 // src/radio/src/makeRadioAccessible/makeRadioAccessible.ts
 function makeRadioAccessible({ radioGroupId, radiosClass, defaultSelectedIndex = 0 }) {
   const radioGroup = document.querySelector(`#${radioGroupId}`);
@@ -10737,33 +10636,6 @@ function makeRadioAccessible({ radioGroupId, radiosClass, defaultSelectedIndex =
   };
 }
 
-// src/toggle/src/updateToggleAriaAttribute/updateToggleAriaAttribute.ts
-function updateToggleAriaAttribute(toggleId, togglesClass, toggleStates, currentPressedToggleIndex) {
-  const toggleDiv = document.querySelector(`#${toggleId}`);
-  if (!toggleDiv) {
-    console.error(`[aria-ease] Element with id="${toggleId}" not found. Make sure the toggle element exists before calling updateToggleAriaAttribute.`);
-    return;
-  }
-  const toggleItems = Array.from(toggleDiv.querySelectorAll(`.${togglesClass}`));
-  if (toggleItems.length === 0) {
-    console.error(`[aria-ease] Element with class="${togglesClass}" not found. Make sure the toggle items exist before calling updateToggleAriaAttribute.`);
-    return;
-  }
-  if (toggleItems.length !== toggleStates.length) {
-    console.error(`[aria-ease] Toggle state/DOM length mismatch: found ${toggleItems.length} triggers, but got ${toggleStates.length} state objects.'`);
-    return;
-  }
-  toggleItems.forEach((toggle, index) => {
-    if (index === currentPressedToggleIndex) {
-      const pressed = toggle.getAttribute("aria-pressed");
-      const shouldBePressed = toggleStates[index].pressed ? "true" : "false";
-      if (pressed && pressed !== shouldBePressed) {
-        toggle.setAttribute("aria-pressed", shouldBePressed);
-      }
-    }
-  });
-}
-
 // src/toggle/src/makeTogggleAccessible/makeToggleAccessible.ts
 function makeToggleAccessible({ toggleId, togglesClass, isSingleToggle = true }) {
   const toggleContainer = document.querySelector(`#${toggleId}`);
@@ -10908,7 +10780,7 @@ function makeToggleAccessible({ toggleId, togglesClass, isSingleToggle = true })
   };
 }
 
-// src/combobox/src/makeComboBoxAccessible.ts
+// src/combobox/src/makeComboBoxAccessible/makeComboBoxAccessible.ts
 function makeComboboxAccessible({ comboboxInputId, comboboxButtonId, listBoxId, listBoxItemsClass, config: config2 }) {
   const comboboxInput = document.getElementById(`${comboboxInputId}`);
   if (!comboboxInput) {
@@ -14827,11 +14699,7 @@ if (typeof window === "undefined") {
   makeMenuAccessible,
   makeRadioAccessible,
   makeToggleAccessible,
-  testUiComponent,
-  updateAccordionTriggerAriaAttributes,
-  updateCheckboxAriaAttributes,
-  updateRadioAriaAttributes,
-  updateToggleAriaAttribute
+  testUiComponent
 });
 /*! Bundled license information: