aria-ease 2.0.0 → 2.0.2

package/README.md

@@ -16,123 +16,31 @@ The package currently has support for 6 components: accordions, blocks, checkbox
 
 Add accessibility to menu: menu can be a dropdown, combo box, slide navigation menu, e.t.c. Basically any component that toggles display and has a list of interactive children items. The function creates a focus trap within the menu and focus can be navigated using the arrow keys. The escape key also closes the menu and returns the focus back to the trigger.
 
-The makeMenuAccessible function takes two string arguments; the id of the menu, the class name of the children items of the menu. And should only be invoked after the menu has become visible or added to the DOM. When the menu is visible the first item of the menu is in focus and focus can be navigated using the Arrow keys. The Space and Enter keys clicks the menu item if they are buttons or links element. The Escape key closes the menu, and returns the focus back to the button that toggles the menu. The Tab key exits the trap.
-
-The updateMenuTriggerAriaAttributes function take two string arguments; the id of the menu trigger, and the aria-label that will replace the current one in the DOM. Behind the scene the aria-expanded and aria-attributes are also updated based on the visibility of the menu.
-
-#### Usage
-
-```javascript
-import {
-  makeMenuAccessible,
-  updateMenuTriggerAriaAttributes,
-  cleanUpMenuEventListeners,
-} from "aria-ease";
-
-const MenuExample = () => {
-  const toggleMenuDisplay = (event) => {
-    if (
-      event.type === "mousedown" ||
-      (event.type === "keydown" && (event.key === "Enter" || event.key === " "))
-    ) {
-      event.preventDefault();
-      const menu = document.querySelector("#menu-div");
-      if (getComputedStyle(menu).display === "none") {
-        menu.style.display = "block";
-        makeMenuAccessible("menu-div", "menu-interactive-items");
-        updateMenuTriggerAriaAttributes("display-button", "Close profile menu");
-      } else {
-        cleanUpMenuEventListeners("menu-div", "menu-interactive-items");
-        menu.style.display = "none";
-        updateMenuTriggerAriaAttributes("display-button", "Open profile menu");
-      }
-    }
-  };
-
-  return (
-    <div>
-      <button
-        id="display-button"
-        onMouseDown={toggleMenuDisplay}
-        aria-haspopup={true}
-        role="button"
-        aria-expanded={false}
-        aria-controls="menu-div"
-        aria-label="Display profile menu"
-        className="menu-example-trigger-button"
-        onKeyDown={toggleMenuDisplay}
-      >
-        Display Example Menu
-      </button>
-      <div
-        id="menu-div"
-        role="menu"
-        aria-labelledby="display-button"
-        style={{ display: "none", marginTop: "5px" }}
-      >
-        <button
-          role="menuitem"
-          className="menu-interactive-items"
-          onClick={() => alert("Button clicked")}
-        >
-          One
-        </button>
-        <button
-          role="menuitem"
-          className="menu-interactive-items"
-          onClick={() => alert("Button clicked")}
-        >
-          Two
-        </button>
-        <button
-          role="menuitem"
-          className="menu-interactive-items"
-          onClick={() => alert("Button clicked")}
-        >
-          Three
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default MenuExample;
-```
-
-Add accessibility to block: block can be tabs, entire web page body, interactive sliders and carousels e.t.c. Basically any 'block' component that is permanently displayed and has a list of related interactive children items. The function creates a focus trap within the block and the focus can be navigated using the arrow keys. Using the entire page as a block, the page serves as a focus trap, and the page can be navigated from one interactive item to another from the top of the page to the bottom and cycles back to the top.
-
-The makeBlockAccessible function takes two string arguments; the id of the block main div, and the class name of the children items of the div. The function should be called on page render, so the event listeners get activated. On click of a button, the clicked button gets focused and the focus can be navigated using the arrow keys.
-
 #### Usage
 
 ```javascript
-import { useEffect } from "react";
-import { makeBlockAccessible } from "aria-ease";
-
-const BlockExample = () => {
-  useEffect(() => {
-    const accessibleBlock = makeBlockAccessible(
-      "block-div",
-      "block-div-interactive-items"
-    );
-    return accessibleBlock;
-  }, []);
-
-  return (
-    <div>
-      <div id="block-div">
-        <button className="block-div-interactive-items">One</button>
-        <button className="block-div-interactive-items">Two</button>
-        <button className="block-div-interactive-items">Three</button>
-      </div>
-    </div>
-  );
+import { Menu } from "aria-ease";
+
+useEffect(() => {
+  menuRef.current = Menu.makeMenuAccessible({
+    menuId: "menu-div",
+    menuElementsClass: "profile-menu-items",
+    triggerId: "display-button",
+  });
+}, []);
+
+const toggleMenuDisplay = (event) => {
+  event.preventDefault();
+  const menuDiv = document.querySelector("#menu-div");
+  if (getComputedStyle(menuDiv).display === "none") {
+    menuRef.current.openMenu();
+  } else {
+    menuRef.current.closeMenu();
+  }
 };
-
-export default BlockExample;
 ```
 
-[Check out more features/functionality in the docs](https://ariaease.xyz/docs)
+[Check out more features/functionality in the docs](https://ariaease.web.app/docs)
 
 [Start contributing on GitHub](https://github.com/aria-ease/aria-ease)
 

package/dist/index.cjs

@@ -0,0 +1,320 @@
+'use strict';
+var __defProp = Object.defineProperty;
+var __export = function(target, all) {
+    for(var name in all)__defProp(target, name, {
+        get: all[name],
+        enumerable: true
+    });
+};
+// src/accordion/index.ts
+var accordion_exports = {};
+__export(accordion_exports, {
+    updateAccordionTriggerAriaAttributes: function() {
+        return updateAccordionTriggerAriaAttributes;
+    }
+});
+// src/accordion/src/updateAccordionTriggerAriaAttributes/updateAccordionTriggerAriaAttributes.ts
+function updateAccordionTriggerAriaAttributes(accordionId, accordionTriggersClass, accordionStates, clickedTriggerIndex) {
+    var accordionDiv = document.querySelector("#".concat(accordionId));
+    if (!accordionDiv) {
+        throw new Error("Invalid accordion main div id provided.");
+    }
+    var accordionItems = Array.from(accordionDiv.querySelectorAll(".".concat(accordionTriggersClass)));
+    if (accordionItems.length === 0) {
+        throw new Error("Invalid accordion items shared class provided.");
+    }
+    if (accordionItems.length !== accordionStates.length) {
+        throw new Error("Accordion state/DOM length mismatch: found ".concat(accordionItems.length, " triggers, but got ").concat(accordionStates.length, " state objects."));
+    }
+    accordionItems.forEach(function(accordionItem, index) {
+        var state = accordionStates[index];
+        var expanded = accordionItem.getAttribute("aria-expanded");
+        var shouldBeExpanded = index === clickedTriggerIndex ? state.display ? "true" : "false" : "false";
+        if (expanded && expanded !== shouldBeExpanded) {
+            accordionItem.setAttribute("aria-expanded", shouldBeExpanded);
+        }
+    });
+}
+// src/block/index.ts
+var block_exports = {};
+__export(block_exports, {
+    makeBlockAccessible: function() {
+        return makeBlockAccessible;
+    }
+});
+// src/utils/handleKeyPress/handleKeyPress.ts
+function isTextInput(el) {
+    if (el.tagName !== "INPUT") return false;
+    var 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) {
+    var len = elementItems.length;
+    var 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 handleMenuEscapeKeyPress(menuElement, menuTriggerButton) {
+    menuElement.style.display = "none";
+    var menuTriggerButtonId = menuTriggerButton.getAttribute("id");
+    if (!menuTriggerButtonId) {
+        throw new Error("Menu trigger button does not have id attribute");
+    }
+    menuTriggerButton.setAttribute("aria-expanded", "false");
+}
+function handleKeyPress(event, elementItems, elementItemIndex, menuElementDiv, triggerButton) {
+    var 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)) {
+                    var 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)) {
+                    var value = currentEl.value;
+                    var cursorEnd = currentEl.selectionStart;
+                    if (cursorEnd === value.length) {
+                        event.preventDefault();
+                        moveFocus(elementItems, elementItemIndex, 1);
+                    }
+                }
+                break;
+            }
+        case "Escape":
+            {
+                event.preventDefault();
+                if (menuElementDiv && triggerButton) {
+                    if (getComputedStyle(menuElementDiv).display === "block") {
+                        handleMenuEscapeKeyPress(menuElementDiv, triggerButton);
+                    }
+                    triggerButton.focus();
+                }
+                break;
+            }
+        case "Enter":
+        case " ":
+            {
+                if (!isNativeButton(currentEl) && !isLink(currentEl) && isClickableButNotSemantic(currentEl)) {
+                    event.preventDefault();
+                    currentEl.click();
+                }
+                break;
+            }
+    }
+}
+// src/block/src/makeBlockAccessible/makeBlockAccessible.ts
+var eventListenersMap = /* @__PURE__ */ new Map();
+function makeBlockAccessible(blockId, blockElementsClass) {
+    var blockDiv = document.querySelector("#".concat(blockId));
+    if (!blockDiv) {
+        throw new Error("Invalid block main div id provided.");
+    }
+    var blockItems = blockDiv.querySelectorAll(".".concat(blockElementsClass));
+    if (!blockItems) {
+        throw new Error("Invalid block items shared class provided.");
+    }
+    blockItems.forEach(function(blockItem) {
+        if (!eventListenersMap.has(blockItem)) {
+            blockItem.addEventListener("keydown", function(event) {
+                var items = blockDiv.querySelectorAll(".".concat(blockElementsClass));
+                var index = Array.prototype.indexOf.call(items, blockItem);
+                handleKeyPress(event, items, index);
+                var handler = function(event2) {
+                    return handleKeyPress(event2, items, index);
+                };
+                eventListenersMap.set(blockItem, handler);
+            });
+        }
+    });
+    return function cleanUpBlockEventListeners() {
+        blockItems.forEach(function(blockItem, blockItemIndex) {
+            if (eventListenersMap.has(blockItem)) {
+                blockItem.removeEventListener("keydown", function(event) {
+                    return handleKeyPress(event, blockItems, blockItemIndex);
+                });
+                eventListenersMap.delete(blockItem);
+            }
+        });
+    };
+}
+// src/checkbox/index.ts
+var checkbox_exports = {};
+__export(checkbox_exports, {
+    updateCheckboxAriaAttributes: function() {
+        return updateCheckboxAriaAttributes;
+    }
+});
+// src/checkbox/src/updateCheckboxAriaAttributes/updateCheckboxAriaAttributes.ts
+function updateCheckboxAriaAttributes(checkboxId, checkboxesClass, checkboxStates, currentPressedCheckboxIndex) {
+    var checkboxDiv = document.querySelector("#".concat(checkboxId));
+    if (!checkboxDiv) {
+        throw new Error("Invalid checkbox main div id provided.");
+    }
+    var checkboxItems = Array.from(document.querySelectorAll(".".concat(checkboxesClass)));
+    if (checkboxItems.length === 0) {
+        throw new Error("Invalid checkboxes shared class provided.");
+    }
+    checkboxItems.forEach(function(checkbox, index) {
+        if (index === currentPressedCheckboxIndex) {
+            checkbox.setAttribute("aria-checked", checkboxStates[index].checked ? "true" : "false");
+        }
+    });
+}
+// src/menu/index.ts
+var menu_exports = {};
+__export(menu_exports, {
+    makeMenuAccessible: function() {
+        return makeMenuAccessible;
+    }
+});
+// src/menu/src/makeMenuAccessible/makeMenuAccessible.ts
+function makeMenuAccessible(param) {
+    var menuId = param.menuId, menuElementsClass = param.menuElementsClass, triggerId = param.triggerId;
+    var menuDiv = document.querySelector("#".concat(menuId));
+    if (!menuDiv) throw new Error("Invalid menu div id provided");
+    var triggerButton = document.querySelector("#".concat(triggerId));
+    if (!triggerButton) throw new Error("Invalid trigger button id provided");
+    var handlerMap = /* @__PURE__ */ new Map();
+    function setAria(isOpen) {
+        triggerButton.setAttribute("aria-expanded", isOpen ? "true" : "false");
+    }
+    function addListeners() {
+        var menuItems = menuDiv.querySelectorAll(".".concat(menuElementsClass));
+        menuItems.forEach(function(menuItem, index) {
+            if (!handlerMap.has(menuItem)) {
+                var handler = function(event) {
+                    return handleKeyPress(event, menuItems, index, menuDiv, triggerButton);
+                };
+                menuItem.addEventListener("keydown", handler);
+                handlerMap.set(menuItem, handler);
+            }
+        });
+    }
+    function removeListeners() {
+        var menuItems = menuDiv.querySelectorAll(".".concat(menuElementsClass));
+        menuItems.forEach(function(menuItem) {
+            var handler = handlerMap.get(menuItem);
+            if (handler) {
+                menuItem.removeEventListener("keydown", handler);
+                handlerMap.delete(menuItem);
+            }
+        });
+    }
+    function openMenu() {
+        menuDiv.style.display = "block";
+        setAria(true);
+        addListeners();
+        var menuItems = menuDiv.querySelectorAll(".".concat(menuElementsClass));
+        if (menuItems.length > 0) menuItems[0].focus();
+    }
+    function closeMenu() {
+        removeListeners();
+        menuDiv.style.display = "none";
+        setAria(false);
+        triggerButton.focus();
+    }
+    function cleanup() {
+        removeListeners();
+    }
+    return {
+        openMenu: openMenu,
+        closeMenu: closeMenu,
+        cleanup: cleanup
+    };
+}
+// src/radio/index.ts
+var radio_exports = {};
+__export(radio_exports, {
+    updateRadioAriaAttributes: function() {
+        return updateRadioAriaAttributes;
+    }
+});
+// src/radio/src/updateRadioAriaAttributes/updateRadioAriaAttributes.ts
+function updateRadioAriaAttributes(radioId, radiosClass, radioStates, currentPressedRadioIndex) {
+    var radioDiv = document.querySelector("#".concat(radioId));
+    if (!radioDiv) {
+        throw new Error("Invalid radio main div id provided.");
+    }
+    var radioItems = Array.from(radioDiv.querySelectorAll(".".concat(radiosClass)));
+    if (radioItems.length === 0) {
+        throw new Error("Invalid radios shared class provided.");
+    }
+    radioItems.forEach(function(radioItem, index) {
+        var state = radioStates[index];
+        var checked = radioItem.getAttribute("aria-checked");
+        var shouldBeChecked = index === currentPressedRadioIndex ? state.checked ? "true" : "false" : "false";
+        if (checked && checked !== shouldBeChecked) {
+            radioItem.setAttribute("aria-checked", shouldBeChecked);
+        }
+    });
+}
+// src/toggle/index.ts
+var toggle_exports = {};
+__export(toggle_exports, {
+    updateToggleAriaAttribute: function() {
+        return updateToggleAriaAttribute;
+    }
+});
+// src/toggle/src/updateToggleAriaAttribute/updateToggleAriaAttribute.ts
+function updateToggleAriaAttribute(toggleId, togglesClass, toggleStates, currentPressedToggleIndex) {
+    var toggleDiv = document.querySelector("#".concat(toggleId));
+    if (!toggleDiv) {
+        throw new Error("Invalid toggle main div id provided.");
+    }
+    var toggleItems = Array.from(toggleDiv.querySelectorAll(".".concat(togglesClass)));
+    if (toggleItems.length === 0) {
+        throw new Error("Invalid toggles shared class provided.");
+    }
+    if (toggleItems.length !== toggleStates.length) {
+        throw new Error("Toggle state/DOM length mismatch: found ".concat(toggleItems.length, " triggers, but got ").concat(toggleStates.length, " state objects."));
+    }
+    toggleItems.forEach(function(toggle, index) {
+        if (index === currentPressedToggleIndex) {
+            toggle.setAttribute("aria-pressed", toggleStates[index].pressed ? "true" : "false");
+        }
+    });
+}
+exports.Accordion = accordion_exports;
+exports.Block = block_exports;
+exports.Checkbox = checkbox_exports;
+exports.Menu = menu_exports;
+exports.Radio = radio_exports;
+exports.Toggle = toggle_exports; //# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/Users/macx/aria-ease/package/dist/index.cjs","../src/accordion/index.ts"],"names":["accordion_exports","__export"],"mappings":"AAAA;SAK0D,GAAA,EAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,EAAA,GAAA,CAAA,IAAA,CAAA,KAAA,MAAA,EAAA,MAAA;SAAA,GAAA,EAAA,CAAA,SAAA,CAAA,CAAA,EAAA,GAAA,CAAA,IAAA,MAAA,MAAA,EAAA,MAAA;SAAA,GAAA,EAAA,GAAA,CAAA,EAAA,GAAA,KAAA,MAAA,MAAA,EAAA,MAAA;QAAA,KAAA,GAAA,CAAA,KAAA;QAAA,YAAA;IAAA;IAAA;AAG1D,yBAAyB;ACRzB,IAAAA,oBAAA,CAAA;AAAAC,SAAAD,mBAAA","sourcesContent":["'use strict';\n\nvar __defProp = Object.defineProperty;\nvar __export = (target, all) => {\n  for (var name in all)\n    __defProp(target, name, { get: all[name], enumerable: true });\n};\n\n// src/accordion/index.ts\nvar accordion_exports = {};\n__export(accordion_exports, {\n  updateAccordionTriggerAriaAttributes: () => updateAccordionTriggerAriaAttributes\n});\n\n// src/accordion/src/updateAccordionTriggerAriaAttributes/updateAccordionTriggerAriaAttributes.ts\nfunction updateAccordionTriggerAriaAttributes(accordionStates, accordionsClass, currentClickedTriggerIndex) {\n  console.log(\"Accordion updateAccordionTriggerAriaAttributes initiated\");\n}\n\n// src/block/index.ts\nvar block_exports = {};\n__export(block_exports, {\n  makeBlockAccessible: () => makeBlockAccessible\n});\n\n// src/block/src/makeBlockAccessible/makeBlockAccessible.ts\nfunction makeBlockAccessible(blockId, blockItemsClass) {\n  console.log(\"Block makeBlockAccessible initiated\");\n}\n\n// src/checkbox/index.ts\nvar checkbox_exports = {};\n__export(checkbox_exports, {\n  updateGroupCheckboxesAriaAttributes: () => updateGroupCheckboxesAriaAttributes,\n  updateSingleCheckboxAriaAttributes: () => updateSingleCheckboxAriaAttributes\n});\n\n// src/checkbox/src/single-checkbox/updateSingleCheckboxAriaAttributes/updateSingleCheckboxAriaAttributes.ts\nfunction updateSingleCheckboxAriaAttributes(checkboxClass, updatedAriaLabel) {\n  console.log(\"Checkbox updateSingleCheckboxAriaAttributes initiated\");\n}\n\n// src/checkbox/src/group-checkbox/updateGroupCheckboxesAriaAttributes/updateGroupCheckboxesAriaAttributes.ts\nfunction updateGroupCheckboxesAriaAttributes(checkboxStates, checkboxesClass, currentPressedCheckboxIndex) {\n  console.log(\"Checkbox updateGroupCheckboxesAriaAttributes initiated\");\n}\n\n// src/menu/index.ts\nvar menu_exports = {};\n__export(menu_exports, {\n  cleanUpMenuEventListeners: () => cleanUpMenuEventListeners,\n  makeMenuAccessible: () => makeMenuAccessible,\n  updateMenuTriggerAriaAttributes: () => updateMenuTriggerAriaAttributes\n});\n\n// src/menu/src/cleanUpMenuEventListeners/cleanUpMenuEventListeners.ts\nfunction cleanUpMenuEventListeners(menuId, menuItemsClass) {\n  console.log(\"Menu cleanUpMenuEventListeners initiated\");\n}\n\n// src/menu/src/makeMenuAccessible/makeMenuAccessible.ts\nfunction makeMenuAccessible(menuId, menuItemsClass) {\n  console.log(\"Menu makeMenuAccessible initiated\");\n}\n\n// src/menu/src/updateMenuTriggerAriaAttributes/updateMenuTriggerAriaAttributes.ts\nfunction updateMenuTriggerAriaAttributes(triggerId, ariaLabel) {\n  console.log(\"Menu updateMenuTriggerAriaAttributes initiated\");\n}\n\n// src/radio/index.ts\nvar radio_exports = {};\n__export(radio_exports, {\n  updateGroupRadiosAriaAttributes: () => updateGroupRadiosAriaAttributes,\n  updateSingleRadioAriaAttributes: () => updateSingleRadioAriaAttributes\n});\n\n// src/radio/src/single-radio/updateSingleRadioAriaAttributes.ts\nfunction updateSingleRadioAriaAttributes(radioClass) {\n  console.log(\"Radio updateSingleRadioAriaAttributes initiated\");\n}\n\n// src/radio/src/group-radio/updateGroupRadiosAriaAttributes.ts\nfunction updateGroupRadiosAriaAttributes(radioStates, radiosClass, currentPressedRadioIndex) {\n  console.log(\"Radio updateGroupRadiosAriaAttributes initiated\");\n}\n\n// src/toggle/index.ts\nvar toggle_exports = {};\n__export(toggle_exports, {\n  updateGroupTogglesAriaAttributes: () => updateGroupTogglesAriaAttributes,\n  updateSingleToggleAriaAttributes: () => updateSingleToggleAriaAttributes\n});\n\n// src/toggle/src/single-toggle/updateSingleToggleAriaAttributes.ts\nfunction updateSingleToggleAriaAttributes(toggleClass) {\n  console.log(\"Toggle updateSingleToggleAriaAttributes initiated\");\n}\n\n// src/toggle/src/group-toggle/updateGroupTogglesAriaAttributes.ts\nfunction updateGroupTogglesAriaAttributes(toggleStates, togglesClass, currentPressedToggleIndex) {\n  console.log(\"Toggle updateGroupTogglesAriaAttributes initiated\");\n}\n\nexports.Accordion = accordion_exports;\nexports.Block = block_exports;\nexports.Checkbox = checkbox_exports;\nexports.Menu = menu_exports;\nexports.Radio = radio_exports;\nexports.Toggle = toggle_exports;\n//# sourceMappingURL=index.cjs.map\n","import { updateAccordionTriggerAriaAttributes } from \"./src/updateAccordionTriggerAriaAttributes/updateAccordionTriggerAriaAttributes\";\n\nexport { updateAccordionTriggerAriaAttributes }"]}

package/dist/index.d.cts

@@ -0,0 +1,115 @@
+declare global {
+  type HTMLElement = Element;
+  type NodeListOf<HTMLElement> = Iterable<HTMLElement>;
+}
+
+interface AccordionStates {
+    display: boolean;
+}
+
+interface CheckboxStates {
+    checked: boolean;
+}
+  
+interface RadioStates {
+    checked: boolean;
+}
+  
+interface ToggleStates {
+    pressed: boolean;
+}
+
+/**
+ * Adds screen reader accessibility to accordions. Updates the aria attributes of the accordion trigger button. Trigger button element must possess the following aria attributes; aria-expanded, aria-controls, aria-label (for only non-text triggers).
+ * @param {string} accordionId The id of the accordion triggers parent container.
+ * @param {string} accordionTriggersClass The shared class of all the accordion triggers.
+ * @param {AccordionStates[]} accordionStates Array of objects containing accordions state information.
+ * @param {number} clickedTriggerIndex Index of the currently clicked accordion trigger within the accordion div container.
+*/
+
+declare function updateAccordionTriggerAriaAttributes(accordionId: string, accordionTriggersClass: string, accordionStates: AccordionStates[], clickedTriggerIndex: number): void;
+
+declare const index$5_updateAccordionTriggerAriaAttributes: typeof updateAccordionTriggerAriaAttributes;
+declare namespace index$5 {
+  export { index$5_updateAccordionTriggerAriaAttributes as updateAccordionTriggerAriaAttributes };
+}
+
+/**
+ * Adds keyboard interaction to block. The block traps focus and can be interacted with using the keyboard.
+ * @param {string} blockId The id of the block container.
+ * @param {string} blockElementsClass The shared class of the elements that are children of the block.
+*/
+declare function makeBlockAccessible(blockId: string, blockElementsClass: string): () => void;
+
+declare const index$4_makeBlockAccessible: typeof makeBlockAccessible;
+declare namespace index$4 {
+  export { index$4_makeBlockAccessible as makeBlockAccessible };
+}
+
+/**
+ * Adds screen reader accessibility to multiple checkboxes. Updates the aria attributes of the checkboxes. Checkbox elements must possess the following aria attributes; aria-checked and aria-label.
+ * @param {string} checkboxId The id of the checkbox parent container.
+ * @param {string} checkboxesClass The shared class of all the checkboxes.
+ * @param {CheckboxStates[]} checkboxStates Array of objects containing checkboxes state information.
+ * @param {number} currentPressedCheckboxIndex Index of the currently checked or unchecked checkbox.
+ */
+
+declare function updateCheckboxAriaAttributes(checkboxId: string, checkboxesClass: string, checkboxStates: CheckboxStates[], currentPressedCheckboxIndex: number): void;
+
+declare const index$3_updateCheckboxAriaAttributes: typeof updateCheckboxAriaAttributes;
+declare namespace index$3 {
+  export { index$3_updateCheckboxAriaAttributes as updateCheckboxAriaAttributes };
+}
+
+/**
+  * 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.
+  * @param {string} menuId - The id of the menu.
+  * @param {string} menuElementsClass - The class of the items that are children of the menu.
+  * @param {string} triggerId - The id of the button that triggers the menu.
+*/
+declare function makeMenuAccessible({ menuId, menuElementsClass, triggerId }: {
+    menuId: string;
+    menuElementsClass: string;
+    triggerId: string;
+}): {
+    openMenu: () => void;
+    closeMenu: () => void;
+    cleanup: () => void;
+};
+
+declare const index$2_makeMenuAccessible: typeof makeMenuAccessible;
+declare namespace index$2 {
+  export { index$2_makeMenuAccessible as makeMenuAccessible };
+}
+
+/**
+ * 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.
+ * @param {string} radioId The id of the radio parent container.
+ * @param {string} radiosClass The shared class of all the radios.
+ * @param {RadioStates[]} radioStates Array of objects containing radio buttons state information.
+ * @param {number} currentPressedRadioIndex Index of the currently checked or unchecked radio button.
+ */
+
+declare function updateRadioAriaAttributes(radioId: string, radiosClass: string, radioStates: RadioStates[], currentPressedRadioIndex: number): void;
+
+declare const index$1_updateRadioAriaAttributes: typeof updateRadioAriaAttributes;
+declare namespace index$1 {
+  export { index$1_updateRadioAriaAttributes as updateRadioAriaAttributes };
+}
+
+/**
+ * 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.
+ * @param {string} toggleId The id of the toggle buttons parent container.
+ * @param {string} togglesClass The shared class of all the toggle buttons.
+ * @param {ToggleStates[]} toggleStates Array of objects containing toggle buttons state information.
+ * @param {number} currentPressedToggleIndex Index of the currently pressed or unpressed toggle button.
+*/
+
+declare function updateToggleAriaAttribute(toggleId: string, togglesClass: string, toggleStates: ToggleStates[], currentPressedToggleIndex: number): void;
+
+declare const index_updateToggleAriaAttribute: typeof updateToggleAriaAttribute;
+declare namespace index {
+  export { index_updateToggleAriaAttribute as updateToggleAriaAttribute };
+}
+
+export { index$5 as Accordion, index$4 as Block, index$3 as Checkbox, index$2 as Menu, index$1 as Radio, index as Toggle };