aria-ease 1.3.6 → 1.3.7

package/Types.d.ts

@@ -8,10 +8,17 @@ interface AccordionStates {
     openedAriaLabel: string;
     closedAriaLabel: string;
 }
+
+interface CheckboxStates {
+    pressed: boolean;
+    checkedAriaLabel: string;
+    uncheckedAriaLabel: string;
+}
   
   
 export {
     HTMLElement,
     NodeListOfHTMLElement,
-    AccordionStates
+    AccordionStates,
+    CheckboxStates
 };

package/aria-ease.d.ts

@@ -2,7 +2,7 @@
  * Declares the module 'aria-ease' and includes type information and JSDoc comments.
  */
 
-import { AccordionStates } from "./Types";
+import { AccordionStates, CheckboxStates } from "./Types";
 
 declare module 'aria-ease' {
     /**
@@ -41,7 +41,15 @@ declare module 'aria-ease' {
      * @param {number} currentClickedTriggerIndex Index of the currently clicked accordion trigger
    */
    function updateAccordionTriggerAriaAttributes(accordionStates: AccordionStates[], accordionsClass: string, currentClickedTriggerIndex: number): void;
+
+   /**
+     * Adds screen reader accessibility to checkboxes. Updates the aria attributes of the checkbox. Checkbox element must possess the following aria attributes; aria-pressed and aria-label.
+     * @param {CheckboxStates[]} checkboxStates Array of objects containing checkboxes state information
+     * @param {string} checkboxesClass The shared class of all the checkboxes
+     * @param {number} currentPressedCheckboxIndex Index of the currently checked or unchecked checkbox
+   */
+   function updateCheckboxAriaAttributes(checkboxStates: CheckboxStates[], checkboxesClass: string, currentPressedCheckboxIndex: number): void;
   
-    export { makeMenuAccessible, makeBlockAccessible, updateMenuTriggerAriaAttributes, cleanUpMenuEventListeners, updateAccordionTriggerAriaAttributes };
+    export { makeMenuAccessible, makeBlockAccessible, updateMenuTriggerAriaAttributes, cleanUpMenuEventListeners, updateAccordionTriggerAriaAttributes, updateCheckboxAriaAttributes };
   }
   

package/index.js

@@ -3,11 +3,13 @@ import { makeBlockAccessible } from './src/block/makeBlockAccessible.js'
 import { updateMenuTriggerAriaAttributes } from './src/menu/updateMenuTriggerAriaAttributes.js'
 import { cleanUpMenuEventListeners } from './src/menu/cleanUpMenuEventListeners.js'
 import { updateAccordionTriggerAriaAttributes } from './src/accordion/updateAccordionTriggerAriaAttributes.js'
+import { updateCheckboxAriaAttributes } from './src/checkbox/updateCheckboxAriaAttributes.js'
 
 export {
     makeMenuAccessible,
     makeBlockAccessible,
     updateMenuTriggerAriaAttributes,
     cleanUpMenuEventListeners,
-    updateAccordionTriggerAriaAttributes
+    updateAccordionTriggerAriaAttributes,
+    updateCheckboxAriaAttributes
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aria-ease",
-  "version": "1.3.6",
+  "version": "1.3.7",
   "description": "Out-of-the-box accessibility utility package to develop production ready applications.",
   "main": "index.js",
   "scripts": {

package/src/accordion/updateAccordionTriggerAriaAttributes.ts

@@ -15,12 +15,11 @@ export function updateAccordionTriggerAriaAttributes(accordionStates: AccordionS
     }
 
     allAccordionTrigger.forEach((trigger, index) => {
-        if (index === currentClickedTriggerIndex) {
-          trigger.setAttribute("aria-expanded", accordionStates[index].display ? 'true' : 'false');
-        } else {
-          trigger.setAttribute("aria-expanded", 'false');
-        }
-    
-        trigger.setAttribute("aria-label", accordionStates[index].display ? accordionStates[index].openedAriaLabel : accordionStates[index].closedAriaLabel);
+      if (index === currentClickedTriggerIndex) {
+        trigger.setAttribute("aria-expanded", accordionStates[index].display ? 'true' : 'false');
+      } else {
+        trigger.setAttribute("aria-expanded", 'false');
+      }
+      trigger.setAttribute("aria-label", accordionStates[index].display ? accordionStates[index].openedAriaLabel : accordionStates[index].closedAriaLabel);
     });
 }

package/src/checkbox/updateCheckboxAriaAttributes.js

@@ -0,0 +1,18 @@
+/**
+ * Adds screen reader accessibility to checkboxes. Updates the aria attributes of the checkbox. Checkbox element must possess the following aria attributes; aria-pressed and aria-label.
+ * @param {CheckboxStates[]} checkboxStates Array of objects containing checkboxes state information
+ * @param {string} checkboxesClass The shared class of all the checkboxes
+ * @param {number} currentPressedCheckboxIndex Index of the currently checked or unchecked checkbox
+ */
+export function updateCheckboxAriaAttributes(checkboxStates, checkboxesClass, currentPressedCheckboxIndex) {
+    var allCheckboxes = Array.from(document.querySelectorAll(".".concat(checkboxesClass)));
+    if (!allCheckboxes) {
+        throw new Error('Invalid checkboxes class provided.');
+    }
+    allCheckboxes.forEach(function (checkbox, index) {
+        if (index === currentPressedCheckboxIndex) {
+            checkbox.setAttribute("aria-pressed", checkboxStates[index].pressed ? 'true' : 'false');
+            checkbox.setAttribute("aria-label", checkboxStates[index].pressed ? checkboxStates[index].checkedAriaLabel : checkboxStates[index].uncheckedAriaLabel);
+        }
+    });
+}

package/src/checkbox/updateCheckboxAriaAttributes.ts

@@ -0,0 +1,23 @@
+/**
+ * Adds screen reader accessibility to checkboxes. Updates the aria attributes of the checkbox. Checkbox element must possess the following aria attributes; aria-pressed and aria-label.
+ * @param {CheckboxStates[]} checkboxStates Array of objects containing checkboxes state information
+ * @param {string} checkboxesClass The shared class of all the checkboxes
+ * @param {number} currentPressedCheckboxIndex Index of the currently checked or unchecked checkbox
+ */
+
+import { HTMLElement, CheckboxStates } from "../../Types";
+
+export function updateCheckboxAriaAttributes(checkboxStates: CheckboxStates[], checkboxesClass: string, currentPressedCheckboxIndex: number): void {
+    const allCheckboxes: HTMLElement[] = Array.from(document.querySelectorAll(`.${checkboxesClass}`));
+
+    if ( !allCheckboxes) {
+      throw new Error('Invalid checkboxes class provided.');
+    }
+
+    allCheckboxes.forEach((checkbox, index) => {
+      if (index === currentPressedCheckboxIndex) {
+        checkbox.setAttribute("aria-pressed", checkboxStates[index].pressed ? 'true' : 'false');
+        checkbox.setAttribute("aria-label", checkboxStates[index].pressed ? checkboxStates[index].checkedAriaLabel : checkboxStates[index].uncheckedAriaLabel);
+      }
+    });
+}

package/src/handleKeyPress.js

@@ -46,14 +46,6 @@ export function handleKeyPress(event, elementItems, elementItemIndex, menuElemen
                 window.location.href = elementItems.item(elementItemIndex).href;
                 break;
             }
-            else if (elementItems.item(elementItemIndex).type === 'radio') {
-                elementItems.item(elementItemIndex).checked = true;
-                break;
-            }
-            else if (elementItems.item(elementItemIndex).type === 'checkbox') {
-                elementItems.item(elementItemIndex).checked = !elementItems.item(elementItemIndex).checked;
-                break;
-            }
             break;
         default:
             break;

package/src/handleKeyPress.ts

@@ -41,17 +41,11 @@ export function handleKeyPress(event: KeyboardEvent, elementItems: NodeListOfHTM
         case ' ':
             event.preventDefault()
             if(elementItems.item(elementItemIndex).tagName === 'BUTTON') {
-                elementItems.item(elementItemIndex).click()
+                elementItems.item(elementItemIndex).click();
                 break;
             } else if (elementItems.item(elementItemIndex).tagName === 'A') {
                 window.location.href = elementItems.item(elementItemIndex).href; 
                 break;
-            } else if (elementItems.item(elementItemIndex).type === 'radio') {
-                elementItems.item(elementItemIndex).checked = true
-                break;
-            } else if (elementItems.item(elementItemIndex).type === 'checkbox') {
-                elementItems.item(elementItemIndex).checked = !elementItems.item(elementItemIndex).checked
-                break;
             }
             break;
         default: