aria-ease 1.3.7 → 1.3.9

package/README.md

@@ -77,9 +77,8 @@ import { makeBlockAccessible } from "aria-ease"
 
 const BlockExample = () => {
   useEffect(() => {
-    const cleanUp = makeBlockAccessible('custom-tab', 'custom-tab-item')
-
-    return cleanUp
+    const accessibleBlock = makeBlockAccessible('custom-tab', 'custom-tab-item');
+    return accessibleBlock
   },[])
 
   return (

package/Types.d.ts

@@ -10,15 +10,21 @@ interface AccordionStates {
 }
 
 interface CheckboxStates {
-    pressed: boolean;
+    checked: boolean;
     checkedAriaLabel: string;
     uncheckedAriaLabel: string;
 }
   
+interface RadioStates {
+    checked: boolean;
+    checkedAriaLabel: string;
+    uncheckedAriaLabel: string;
+}
   
 export {
     HTMLElement,
     NodeListOfHTMLElement,
     AccordionStates,
-    CheckboxStates
+    CheckboxStates,
+    RadioStates
 };

package/aria-ease.d.ts

@@ -2,7 +2,7 @@
  * Declares the module 'aria-ease' and includes type information and JSDoc comments.
  */
 
-import { AccordionStates, CheckboxStates } from "./Types";
+import { AccordionStates, CheckboxStates, RadioStates } from "./Types";
 
 declare module 'aria-ease' {
     /**
@@ -43,13 +43,28 @@ declare module 'aria-ease' {
    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.
+     * Adds screen reader accessibility to checkboxes. Updates the aria attributes of the checkbox. Checkbox element must possess the following aria attributes; aria-checked 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;
+
+   /**
+     * Adds screen reader accessibility to radio buttons. Updates the aria attributes of the radio button. Radio element must possess the following aria attributes; aria-checked and aria-label.
+     * @param {RadioStates[]} radioStates Array of objects containing radio buttons state information
+     * @param {string} radiosClass The shared class of all the radio buttons
+     * @param {number} currentPressedRadioIndex Index of the currently checked or unchecked radio button
+   */
+   function updateRadioAriaAttributes(radioStates: RadioStates[], radiosClass: string, currentPressedRadioIndex: number): void;
   
-    export { makeMenuAccessible, makeBlockAccessible, updateMenuTriggerAriaAttributes, cleanUpMenuEventListeners, updateAccordionTriggerAriaAttributes, updateCheckboxAriaAttributes };
-  }
-  
+  export { 
+    makeMenuAccessible, 
+    makeBlockAccessible, 
+    updateMenuTriggerAriaAttributes, 
+    cleanUpMenuEventListeners, 
+    updateAccordionTriggerAriaAttributes, 
+    updateCheckboxAriaAttributes, 
+    updateRadioAriaAttributes 
+  };
+}

package/index.js

@@ -4,6 +4,7 @@ import { updateMenuTriggerAriaAttributes } from './src/menu/updateMenuTriggerAri
 import { cleanUpMenuEventListeners } from './src/menu/cleanUpMenuEventListeners.js'
 import { updateAccordionTriggerAriaAttributes } from './src/accordion/updateAccordionTriggerAriaAttributes.js'
 import { updateCheckboxAriaAttributes } from './src/checkbox/updateCheckboxAriaAttributes.js'
+import { updateRadioAriaAttributes } from './src/radio/updateRadioAriaAttributes.js'
 
 export {
     makeMenuAccessible,
@@ -11,5 +12,6 @@ export {
     updateMenuTriggerAriaAttributes,
     cleanUpMenuEventListeners,
     updateAccordionTriggerAriaAttributes,
-    updateCheckboxAriaAttributes
+    updateCheckboxAriaAttributes,
+    updateRadioAriaAttributes
 }

package/package.json

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

package/src/checkbox/updateCheckboxAriaAttributes.js

@@ -1,5 +1,5 @@
 /**
- * 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.
+ * Adds screen reader accessibility to checkboxes. Updates the aria attributes of the checkbox. Checkbox element must possess the following aria attributes; aria-checked 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
@@ -9,10 +9,11 @@ export function updateCheckboxAriaAttributes(checkboxStates, checkboxesClass, cu
     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);
+            checkbox.setAttribute("aria-checked", checkboxStates[index].checked ? 'true' : 'false');
+            checkbox.setAttribute("aria-label", checkboxStates[index].checked ? checkboxStates[index].checkedAriaLabel : checkboxStates[index].uncheckedAriaLabel);
         }
     });
 }

package/src/checkbox/updateCheckboxAriaAttributes.ts

@@ -1,5 +1,5 @@
 /**
- * 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.
+ * Adds screen reader accessibility to checkboxes. Updates the aria attributes of the checkbox. Checkbox element must possess the following aria attributes; aria-checked 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
@@ -12,12 +12,12 @@ export function updateCheckboxAriaAttributes(checkboxStates: CheckboxStates[], c
 
     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);
+        checkbox.setAttribute("aria-checked", checkboxStates[index].checked ? 'true' : 'false');
+        checkbox.setAttribute("aria-label", checkboxStates[index].checked ? checkboxStates[index].checkedAriaLabel : checkboxStates[index].uncheckedAriaLabel);
       }
     });
 }

package/src/radio/updateRadioAriaAttributes.js

@@ -0,0 +1,23 @@
+/**
+ * Adds screen reader accessibility to radio buttons. Updates the aria attributes of the radio button. Radio element must possess the following aria attributes; aria-checked and aria-label.
+ * @param {RadioStates[]} radioStates Array of objects containing radio buttons state information
+ * @param {string} radiosClass The shared class of all the radio buttons
+ * @param {number} currentPressedRadioIndex Index of the currently checked or unchecked radio button
+ */
+export function updateRadioAriaAttributes(radioStates, radiosClass, currentPressedRadioIndex) {
+    var allRadios = Array.from(document.querySelectorAll(".".concat(radiosClass)));
+    if (!allRadios) {
+        throw new Error('Invalid radios class provided.');
+    }
+    allRadios.forEach(function (radio, index) {
+        if (index === currentPressedRadioIndex) {
+            radio.setAttribute("aria-checked", radioStates[index].checked ? 'true' : 'false');
+        }
+        else {
+            if (radio.getAttribute("aria-checked") === "true") {
+                radio.setAttribute("aria-checked", 'false');
+            }
+        }
+        radio.setAttribute("aria-label", radioStates[index].checked ? radioStates[index].checkedAriaLabel : radioStates[index].uncheckedAriaLabel);
+    });
+}

package/src/radio/updateRadioAriaAttributes.ts

@@ -0,0 +1,27 @@
+/**
+ * Adds screen reader accessibility to radio buttons. Updates the aria attributes of the radio button. Radio element must possess the following aria attributes; aria-checked and aria-label.
+ * @param {RadioStates[]} radioStates Array of objects containing radio buttons state information
+ * @param {string} radiosClass The shared class of all the radio buttons
+ * @param {number} currentPressedRadioIndex Index of the currently checked or unchecked radio button
+ */
+
+import { HTMLElement, RadioStates } from "../../Types";
+
+export function updateRadioAriaAttributes(radioStates: RadioStates[], radiosClass: string, currentPressedRadioIndex: number): void {
+    const allRadios: HTMLElement[] = Array.from(document.querySelectorAll(`.${radiosClass}`));
+
+    if ( !allRadios) {
+      throw new Error('Invalid radios class provided.');
+    }
+
+    allRadios.forEach((radio, index) => {
+      if (index === currentPressedRadioIndex) {
+        radio.setAttribute("aria-checked", radioStates[index].checked ? 'true' : 'false');
+      } else {
+        if(radio.getAttribute("aria-checked") === "true") {
+            radio.setAttribute("aria-checked", 'false');
+        }
+      }
+      radio.setAttribute("aria-label", radioStates[index].checked ? radioStates[index].checkedAriaLabel : radioStates[index].uncheckedAriaLabel);
+    });
+}