@cocreate/aria 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+# [1.1.0](https://github.com/CoCreate-app/CoCreate-aria/compare/v1.0.0...v1.1.0) (2025-11-16)
+
+
+### Features
+
+* Enhance popup close conditions and aria attributes handling ([608da59](https://github.com/CoCreate-app/CoCreate-aria/commit/608da59ac5f179a2c9ddf27d2657c2f28d355766))
+* Initialize aria controls and enhance event handling ([a62f790](https://github.com/CoCreate-app/CoCreate-aria/commit/a62f79079a0c889b8d395406df2ef4a704ac6552))
+
 # 1.0.0 (2025-08-25)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/aria",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Chain multiple component executions to generate your desired logic, when one action is complete next one will start. The sequence goes until all aria have been completed. Vanilla javascript, easily configured using HTML5 attributes and/or JavaScript API.",
   "keywords": [
     "aria",

package/src/index.js

@@ -11,6 +11,7 @@ let popupListener = null;
 function addPopupListener() {
 	if (!popupListener) {
 		popupListener = function (event) {
+			
 			const hasPopUps = document.querySelectorAll(
 				'[aria-controls][aria-haspopup][aria-expanded="true"]'
 			);
@@ -25,6 +26,7 @@ function addPopupListener() {
 					skipControlledId = controlledId;
 					continue; // Ignore clicks inside the popup
 				}
+
 				const controlledElement = document.getElementById(controlledId);
 				let closeOn = controlledElement.getAttribute("aria-close-on");
 				let closeOnEl = controlledElement;
@@ -37,13 +39,26 @@ function addPopupListener() {
 					}
 				}
 
-				if (closeOn === "outside") {
-					if (closeOnEl.contains(event.target)) continue;
-				} else if (closeOn === "button" || closeOn === "btn") {
-					continue;
+				let closeOnConditions = closeOn ? closeOn.split(",").map(c => c.trim()) : [];
+
+				let shouldClose = false;
+				for (let condition of closeOnConditions) {
+					if (condition === "outside" && !closeOnEl.contains(event.target)) {
+						shouldClose = true;
+					} else if (condition === "inside" && closeOnEl.contains(event.target)) {
+						shouldClose = true;
+					} else if (condition === "anywhere") {
+						shouldClose = true;
+					}
+
+					// If any condition matches, break the loop
+					if (shouldClose) break;
 				}
 
+				if (!shouldClose) continue;
+
 				controlledElement.classList.remove("show");
+				controlledElement.setAttribute("aria-hidden", "true");
 				updateAllControls(controlledId, "false");
 			}
 			// Remove listener if no popups remain open
@@ -104,6 +119,7 @@ function initElement(elements) {
 			const hasAriaOpen = this.hasAttribute("aria-open");
 			const hasAriaClose = this.hasAttribute("aria-close");
 			const expanded = this.getAttribute("aria-expanded");
+			const controlsClass = this.getAttribute("aria-controls-class") || "show";
 
 			// Apply aria-open and aria-close logic globally, before any role-specific logic
 			if (hasAriaOpen && expanded === "true") {
@@ -124,20 +140,32 @@ function initElement(elements) {
 						document.getElementById(tabControlledId);
 					if (this === tab) {
 						tab.setAttribute("aria-selected", "true");
-						tabControlledEl.classList.add("show");
+						tabControlledEl.setAttribute("aria-hidden", "false");
+						if (controlsClass) {
+							tabControlledEl.classList.add(controlsClass);
+						}
 					} else {
 						tab.setAttribute("aria-selected", "false");
-						tabControlledEl.classList.remove("show");
+						tabControlledEl.setAttribute("aria-hidden", "true");
+						if (controlsClass) {
+							tabControlledEl.classList.remove(controlsClass);
+						}
 					}
 				}
 			} else {
 				// Default toggle logic
 				if (expanded === "true") {
-					controlledElement.classList.remove("show");
+					controlledElement.setAttribute("aria-hidden", "true");
+						if (controlsClass) {
+							controlledElement.classList.remove(controlsClass);
+						}
 					updateAllControls(controlledId, "false");
 					removePopupListener();
 				} else {
-					controlledElement.classList.add("show");
+					controlledElement.setAttribute("aria-hidden", "false");
+					if (controlsClass) {
+						controlledElement.classList.add(controlsClass);
+					}
 					updateAllControls(controlledId, "true");
 					if (closeOn !== "btn" && closeOn !== "button") {
 						addPopupListener();