aria-ease 1.4.7 → 1.4.9

package/README.md

@@ -10,11 +10,11 @@ Out of the box accessibility utility package to develop production ready applica
 
 ## Features
 
-Don't spend hours wrestling with accessibility code. Aria-Ease provides pre-built, customizable functions that help you integrate accessibility seamlessly into your development workflow. It simplifies the process of adding essential accessibility features to common UI components like menus, accordions, and checkboxes, e.t.c. This allows you to focus on building great user experiences for everyone.
+Don't spend hours wrestling with accessibility code. Aria-Ease provides pre-built functions that help you integrate accessibility seamlessly into your development workflow. It simplifies the process of adding essential accessibility features (e.g. assistive capability, keyboard navigation, focus management) to common UI components like menus, accordions, and checkboxes, e.t.c. This allows you to focus on building great user experiences for everyone.
 
-The package currently has support for 5 components: accordions, blocks, checkboxes, menus, radio buttons
+The package currently has support for 5 components: accordions, blocks, checkboxes, menus, radios, toggle butttons
 
-Add accessibility to menu: menu can be a dropdown, 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.
+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.
 

package/Types.d.ts

@@ -21,10 +21,17 @@ interface RadioStates {
     uncheckedAriaLabel: string;
 }
   
+interface ToggleStates {
+    pressed: boolean;
+    pressedAriaLabel: string;
+    unpressedAriaLabel: string;
+}
+
 export {
     HTMLElement,
     NodeListOfHTMLElement,
     AccordionStates,
     CheckboxStates,
-    RadioStates
+    RadioStates,
+    ToggleStates
 };

package/aria-ease.d.ts

@@ -2,7 +2,7 @@
  * Declares the module 'aria-ease' and includes type information and JSDoc comments.
  */
 
-import { AccordionStates, CheckboxStates, RadioStates } from "./Types";
+import { AccordionStates, CheckboxStates, RadioStates, ToggleStates } from "./Types";
 
 declare module 'aria-ease' {
     /**
@@ -42,28 +42,61 @@ 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-checked and aria-label.
+     * Adds screen reader accessibility to a single checkbox. Updates the aria attributes of the checkbox. Checkbox element must possess the following aria attributes; aria-checked and aria-label.
+     * @param {string} checkboxClass The shared class of all the checkboxes
+     * @param {string} updatedAriaLabel The aria label to be updated to checkbox element
+   */
+   function updateSingleCheckboxAriaAttribute(checkboxClass: string, updatedAriaLabel: string): void
+
+   /**
+     * 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 {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;
+   function updateGroupCheckboxesAriaAttributes(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.
+     * 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 {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;
-  
+   function updateGroupRadiosAriaAttributes(radioStates: RadioStates[], radiosClass: string, currentPressedRadioIndex: number): void;
+
+   /**
+     * Adds screen reader accessibility to a single toggle element. Updates the aria attributes of the toggle element. Toggle element must possess the following aria attributes; aria-pressed and aria-label.
+     * @param {string} togglesClass The shared class of all the toggle elements
+     * @param {string} updatedAriaLabel The aria label to be updated to toggle element
+   */
+   function updateSingleToggleAriaAttribute(toggleClass: string, updatedAriaLabel: string): void
+
+   /**
+     * Adds screen reader accessibility to toggle elements. Updates the aria attributes of the toggle elements. Toggle element must possess the following aria attributes; aria-pressed and aria-label.
+     * @param {ToggleStates[]} toggleStates Array of objects containing toggle elements state information
+     * @param {string} togglesClass The shared class of all the toggle elements
+     * @param {number} currentPressedToggleIndex Index of the currently pressed or unpressed toggle element
+   */
+   function updateGroupTogglesAriaAttributes(toggleStates: ToggleStates[], togglesClass: string, currentPressedToggleIndex: number): void
+
+   /**
+     * Adds screen reader accessibility to single radio button. Updates the aria attribute of the radio button. Radio element must possess the following aria attributes; aria-checked and aria-label.
+     * @param {string} radioClass The class of the radio button
+     * @param {string} updatedAriaLabel The aria label to be updated to button element
+   */
+   function updateSingleRadioAriaAttribute(radioClass: string, updatedAriaLabel: string): void
+
   export { 
     makeMenuAccessible, 
     makeBlockAccessible, 
     updateMenuTriggerAriaAttributes, 
     cleanUpMenuEventListeners, 
     updateAccordionTriggerAriaAttributes, 
-    updateCheckboxAriaAttributes, 
-    updateRadioAriaAttributes 
+    updateSingleCheckboxAriaAttribute,
+    updateGroupCheckboxesAriaAttributes,
+    updateSingleRadioAriaAttribute, 
+    updateGroupRadiosAriaAttributes,
+    updateSingleToggleAriaAttribute,
+    updateGroupTogglesAriaAttributes 
   };
 }

package/index.js

@@ -3,8 +3,12 @@ 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'
-import { updateRadioAriaAttributes } from './src/radio/updateRadioAriaAttributes.js'
+import { updateSingleCheckboxAriaAttribute } from './src/checkbox/single/updateSingleCheckboxAriaAttribute.js'
+import { updateGroupCheckboxesAriaAttributes } from './src/checkbox/group/updateGroupCheckboxesAriaAttributes.js'
+import { updateSingleRadioAriaAttribute } from './src/radio/single/updateSingleRadioAriaAttribute.js'
+import { updateGroupRadiosAriaAttributes } from './src/radio/group/updateGroupRadiosAriaAttributes.js'
+import { updateSingleToggleAriaAttribute } from './src/toggle/single/updateSingleToggleAriaAttribute.js'
+import { updateGroupTogglesAriaAttributes } from './src/toggle/group/updateGroupTogglesAriaAttributes.js'
 
 export {
     makeMenuAccessible,
@@ -12,6 +16,10 @@ export {
     updateMenuTriggerAriaAttributes,
     cleanUpMenuEventListeners,
     updateAccordionTriggerAriaAttributes,
-    updateCheckboxAriaAttributes,
-    updateRadioAriaAttributes
+    updateSingleCheckboxAriaAttribute,
+    updateGroupCheckboxesAriaAttributes,
+    updateSingleRadioAriaAttribute,
+    updateGroupRadiosAriaAttributes,
+    updateSingleToggleAriaAttribute,
+    updateGroupTogglesAriaAttributes
 }

package/package.json

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

package/src/accordion/updateAccordionTriggerAriaAttributes.js

@@ -5,11 +5,11 @@
  * @param {number} currentClickedTriggerIndex Index of the currently clicked accordion trigger
  */
 export function updateAccordionTriggerAriaAttributes(accordionStates, accordionsClass, currentClickedTriggerIndex) {
-    var allAccordionTrigger = Array.from(document.querySelectorAll(".".concat(accordionsClass)));
-    if (!allAccordionTrigger) {
-        throw new Error('Invalid trigger class provided.');
+    var allAccordionTriggers = Array.from(document.querySelectorAll(".".concat(accordionsClass)));
+    if (!allAccordionTriggers) {
+        throw new Error('Invalid triggers shared class provided.');
     }
-    allAccordionTrigger.forEach(function (trigger, index) {
+    allAccordionTriggers.forEach(function (trigger, index) {
         if (index === currentClickedTriggerIndex) {
             trigger.setAttribute("aria-expanded", accordionStates[index].display ? 'true' : 'false');
         }

package/src/accordion/updateAccordionTriggerAriaAttributes.ts

@@ -8,13 +8,13 @@
 import { HTMLElement, AccordionStates } from "../../Types";
 
 export function updateAccordionTriggerAriaAttributes(accordionStates: AccordionStates[], accordionsClass: string, currentClickedTriggerIndex: number): void {
-    const allAccordionTrigger: HTMLElement[] = Array.from(document.querySelectorAll(`.${accordionsClass}`));
+    const allAccordionTriggers: HTMLElement[] = Array.from(document.querySelectorAll(`.${accordionsClass}`));
 
-    if ( !allAccordionTrigger) {
-      throw new Error('Invalid trigger class provided.');
+    if ( !allAccordionTriggers) {
+      throw new Error('Invalid triggers shared class provided.');
     }
 
-    allAccordionTrigger.forEach((trigger, index) => {
+    allAccordionTriggers.forEach((trigger, index) => {
       if (index === currentClickedTriggerIndex) {
         trigger.setAttribute("aria-expanded", accordionStates[index].display ? 'true' : 'false');
       } else {

package/src/block/makeBlockAccessible.js

@@ -12,7 +12,7 @@ export function makeBlockAccessible(blockId, blockItemsClass) {
     }
     var blockItems = blockDiv.querySelectorAll(".".concat(blockItemsClass));
     if (!blockItems) {
-        throw new Error('Invalid block items class provided.');
+        throw new Error('Invalid block items shared class provided.');
     }
     blockItems.forEach(function (blockItem, blockItemIndex) {
         if (!eventListenersAdded.has(blockItem)) {

package/src/block/makeBlockAccessible.ts

@@ -17,7 +17,7 @@ export function makeBlockAccessible(blockId: string, blockItemsClass: string) {
 
   const blockItems: NodeListOfHTMLElement = blockDiv.querySelectorAll(`.${blockItemsClass}`);
   if(!blockItems) {
-    throw new Error('Invalid block items class provided.');
+    throw new Error('Invalid block items shared class provided.');
   }
 
   blockItems.forEach((blockItem: HTMLElement, blockItemIndex: number): void => {

package/src/checkbox/{updateCheckboxAriaAttributes.js → group/updateGroupCheckboxesAriaAttributes.js}

@@ -1,13 +1,13 @@
 /**
- * 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.
+ * 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 {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) {
+export function updateGroupCheckboxesAriaAttributes(checkboxStates, checkboxesClass, currentPressedCheckboxIndex) {
     var allCheckboxes = Array.from(document.querySelectorAll(".".concat(checkboxesClass)));
     if (!allCheckboxes) {
-        throw new Error('Invalid checkboxes class provided.');
+        throw new Error('Invalid checkboxes shared class provided.');
     }
     ;
     allCheckboxes.forEach(function (checkbox, index) {

package/src/checkbox/{updateCheckboxAriaAttributes.ts → group/updateGroupCheckboxesAriaAttributes.ts}

@@ -1,17 +1,17 @@
 /**
- * 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.
+ * 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 {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";
+import { HTMLElement, CheckboxStates } from "../../../Types";
 
-export function updateCheckboxAriaAttributes(checkboxStates: CheckboxStates[], checkboxesClass: string, currentPressedCheckboxIndex: number): void {
+export function updateGroupCheckboxesAriaAttributes(checkboxStates: CheckboxStates[], checkboxesClass: string, currentPressedCheckboxIndex: number): void {
     const allCheckboxes: HTMLElement[] = Array.from(document.querySelectorAll(`.${checkboxesClass}`));
 
     if ( !allCheckboxes) {
-      throw new Error('Invalid checkboxes class provided.');
+      throw new Error('Invalid checkboxes shared class provided.');
     };
 
     allCheckboxes.forEach((checkbox, index) => {

package/src/checkbox/single/updateSingleCheckboxAriaAttribute.js

@@ -0,0 +1,27 @@
+/**
+ * Adds screen reader accessibility to a single checkbox. Updates the aria attributes of the checkbox. Checkbox element must possess the following aria attributes; aria-checked and aria-label.
+ * @param {string} checkboxClass The shared class of all the checkboxes
+ * @param {string} updatedAriaLabel The aria label to be updated to checkbox element
+ */
+export function updateSingleCheckboxAriaAttribute(checkboxClass, updatedAriaLabel) {
+    var checkbox = document.querySelector(".".concat(checkboxClass));
+    if (!checkbox) {
+        throw new Error('Invalid checkbox class provided.');
+    }
+    ;
+    var currentAriaCheckedState = checkbox.getAttribute('aria-checked');
+    if (!currentAriaCheckedState) {
+        throw new Error("Checkbox element does not have aria-checked attribute");
+    }
+    function checkboxChecked(ariaLabel) {
+        checkbox.setAttribute('aria-checked', 'true');
+        checkbox.setAttribute('aria-label', ariaLabel);
+    }
+    function checkboxUnchecked(ariaLabel) {
+        checkbox.setAttribute('aria-checked', 'false');
+        checkbox.setAttribute('aria-label', ariaLabel);
+    }
+    (currentAriaCheckedState === 'false') ?
+        checkboxChecked(updatedAriaLabel) :
+        checkboxUnchecked(updatedAriaLabel);
+}

package/src/checkbox/single/updateSingleCheckboxAriaAttribute.ts

@@ -0,0 +1,34 @@
+/**
+ * Adds screen reader accessibility to a single checkbox. Updates the aria attributes of the checkbox. Checkbox element must possess the following aria attributes; aria-checked and aria-label.
+ * @param {string} checkboxClass The shared class of all the checkboxes
+ * @param {string} updatedAriaLabel The aria label to be updated to checkbox element
+ */
+
+import { HTMLElement } from "../../../Types";
+
+export function updateSingleCheckboxAriaAttribute(checkboxClass: string, updatedAriaLabel: string): void {
+    const checkbox: HTMLElement = document.querySelector(`.${checkboxClass}`) as HTMLElement;
+
+    if ( !checkbox) {
+      throw new Error('Invalid checkbox class provided.');
+    };
+
+    const currentAriaCheckedState: string = checkbox.getAttribute('aria-checked') as string
+    if(!currentAriaCheckedState) {
+        throw new Error("Checkbox element does not have aria-checked attribute")
+    }
+
+    function checkboxChecked(ariaLabel: string): void {
+        checkbox.setAttribute('aria-checked', 'true');
+        checkbox.setAttribute('aria-label', ariaLabel);
+    }
+
+    function checkboxUnchecked(ariaLabel: string): void {
+        checkbox.setAttribute('aria-checked', 'false');
+        checkbox.setAttribute('aria-label', ariaLabel);
+    }
+
+    (currentAriaCheckedState === 'false') ?
+        checkboxChecked(updatedAriaLabel) :
+        checkboxUnchecked(updatedAriaLabel)
+}

package/src/handleKeyPress.js

@@ -11,7 +11,7 @@ export function handleKeyPress(event, elementItems, elementItemIndex, menuElemen
     switch (event.key) {
         case 'ArrowUp':
         case 'ArrowLeft':
-            if ((elementItems.item(elementItemIndex).tagName !== 'INPUT') || (elementItems.item(elementItemIndex).tagName === 'INPUT' && elementItems.item(elementItemIndex).type === 'text' && event.key === 'ArrowUp')) {
+            if ((elementItems.item(elementItemIndex).tagName !== 'INPUT') || (elementItems.item(elementItemIndex).tagName === 'INPUT' && elementItems.item(elementItemIndex).type !== 'text')) {
                 event.preventDefault();
                 if (elementItemIndex === 0) {
                     elementItems.item(elementItems.length - 1).focus();
@@ -20,10 +20,21 @@ export function handleKeyPress(event, elementItems, elementItemIndex, menuElemen
                     elementItems.item(elementItemIndex - 1).focus();
                 }
             }
+            if ((elementItems.item(elementItemIndex).tagName === 'INPUT' && elementItems.item(elementItemIndex).type === 'text') || (elementItems.item(elementItemIndex).tagName === 'TEXTAREA')) {
+                if (elementItems.item(elementItemIndex).selectionStart === 0) {
+                    event.preventDefault();
+                    if (elementItemIndex === 0) {
+                        elementItems.item(elementItems.length - 1).focus();
+                    }
+                    else {
+                        elementItems.item(elementItemIndex - 1).focus();
+                    }
+                }
+            }
             break;
         case 'ArrowDown':
         case 'ArrowRight':
-            if ((elementItems.item(elementItemIndex).tagName !== 'INPUT') || (elementItems.item(elementItemIndex).tagName === 'INPUT' && elementItems.item(elementItemIndex).type === 'text' && event.key === 'ArrowDown')) {
+            if ((elementItems.item(elementItemIndex).tagName !== 'INPUT') || (elementItems.item(elementItemIndex).tagName === 'INPUT' && elementItems.item(elementItemIndex).type !== 'text')) {
                 event.preventDefault();
                 if (elementItemIndex === elementItems.length - 1) {
                     elementItems.item(0).focus();
@@ -32,6 +43,17 @@ export function handleKeyPress(event, elementItems, elementItemIndex, menuElemen
                     elementItems.item(elementItemIndex + 1).focus();
                 }
             }
+            if ((elementItems.item(elementItemIndex).tagName === 'INPUT' && elementItems.item(elementItemIndex).type === 'text') || (elementItems.item(elementItemIndex).tagName === 'TEXTAREA')) {
+                if (elementItems.item(elementItemIndex).selectionStart === elementItems.item(elementItemIndex).value.length) {
+                    event.preventDefault();
+                    if (elementItemIndex === elementItems.length - 1) {
+                        elementItems.item(0).focus();
+                    }
+                    else {
+                        elementItems.item(elementItemIndex + 1).focus();
+                    }
+                }
+            }
             break;
         case 'Escape':
             event.preventDefault();

package/src/handleKeyPress.ts

@@ -15,7 +15,7 @@ export function handleKeyPress(event: KeyboardEvent, elementItems: NodeListOfHTM
     switch(event.key) {
         case 'ArrowUp':
         case 'ArrowLeft':
-            if((elementItems.item(elementItemIndex).tagName !== 'INPUT') || (elementItems.item(elementItemIndex).tagName === 'INPUT' && elementItems.item(elementItemIndex).type === 'text' && event.key === 'ArrowUp')) {
+            if((elementItems.item(elementItemIndex).tagName !== 'INPUT') || (elementItems.item(elementItemIndex).tagName === 'INPUT' && elementItems.item(elementItemIndex).type !== 'text')) {
                 event.preventDefault()
                 if (elementItemIndex === 0) {
                     elementItems.item(elementItems.length - 1).focus();
@@ -23,10 +23,20 @@ export function handleKeyPress(event: KeyboardEvent, elementItems: NodeListOfHTM
                     elementItems.item(elementItemIndex - 1).focus();
                 }
             }
+            if((elementItems.item(elementItemIndex).tagName === 'INPUT' && elementItems.item(elementItemIndex).type === 'text') || (elementItems.item(elementItemIndex).tagName === 'TEXTAREA')) {
+                if (elementItems.item(elementItemIndex).selectionStart === 0) {
+                    event.preventDefault()
+                    if (elementItemIndex === 0) {
+                        elementItems.item(elementItems.length - 1).focus();
+                    } else {
+                        elementItems.item(elementItemIndex - 1).focus();
+                    }
+                }
+            }
             break;
         case 'ArrowDown':
         case 'ArrowRight':
-            if((elementItems.item(elementItemIndex).tagName !== 'INPUT') || (elementItems.item(elementItemIndex).tagName === 'INPUT' && elementItems.item(elementItemIndex).type === 'text' && event.key === 'ArrowDown')) {
+            if((elementItems.item(elementItemIndex).tagName !== 'INPUT') || (elementItems.item(elementItemIndex).tagName === 'INPUT' && elementItems.item(elementItemIndex).type !== 'text')) {
                 event.preventDefault()
                 if (elementItemIndex === elementItems.length - 1) {
                     elementItems.item(0).focus();
@@ -34,6 +44,16 @@ export function handleKeyPress(event: KeyboardEvent, elementItems: NodeListOfHTM
                     elementItems.item(elementItemIndex + 1).focus();
                 }
             }
+            if((elementItems.item(elementItemIndex).tagName === 'INPUT' && elementItems.item(elementItemIndex).type === 'text') || (elementItems.item(elementItemIndex).tagName === 'TEXTAREA')) {
+                if (elementItems.item(elementItemIndex).selectionStart === elementItems.item(elementItemIndex).value.length) {
+                    event.preventDefault()
+                    if (elementItemIndex === elementItems.length - 1) {
+                        elementItems.item(0).focus();
+                    } else {
+                        elementItems.item(elementItemIndex + 1).focus();
+                    }
+                }
+            }
             break;
         case 'Escape':
             event.preventDefault();

package/src/menu/cleanUpMenuEventListeners.js

@@ -6,7 +6,7 @@ export function cleanUpMenuEventListeners(menuId, menuItemsClass) {
     }
     var menuItems = menuDiv.querySelectorAll(".".concat(menuItemsClass));
     if (!menuItems) {
-        throw new Error("Invalid menu items class provided");
+        throw new Error("Invalid menu items shared class provided");
     }
     var triggerId = menuDiv.getAttribute('aria-labelledby');
     if (!triggerId) {

package/src/menu/cleanUpMenuEventListeners.ts

@@ -10,7 +10,7 @@ export function cleanUpMenuEventListeners(menuId: string, menuItemsClass: string
 
     const menuItems: NodeListOfHTMLElement = menuDiv.querySelectorAll(`.${menuItemsClass}`)
     if(!menuItems) {
-        throw new Error("Invalid menu items class provided")
+        throw new Error("Invalid menu items shared class provided")
     }
 
     const triggerId: string = menuDiv.getAttribute('aria-labelledby') as string

package/src/menu/makeMenuAccessible.js

@@ -33,6 +33,6 @@ export function makeMenuAccessible(menuId, menuItemsClass) {
         });
     }
     else {
-        throw new Error("Invalid menu items class provided");
+        throw new Error("Invalid menu items shared class provided");
     }
 }

package/src/menu/makeMenuAccessible.ts

@@ -41,6 +41,6 @@ export function makeMenuAccessible(menuId: string, menuItemsClass: string): void
             }
         })
     } else {
-        throw new Error("Invalid menu items class provided")
+        throw new Error("Invalid menu items shared class provided")
     }
 }

package/src/menu/updateMenuTriggerAriaAttributes.js

@@ -1,7 +1,7 @@
 /**
  * Adds screen reader accessibility to menus. Updates the aria attributes of the menu trigger button. Trigger button element must possess the following aria attributes; aria-expanded and aria-label.
- * @param {string} triggerId The id of the trigger button that toggles the menu.
- * @param {string} ariaLabel The aria-label to be updated.
+ * @param {string} triggerId The id of the trigger button that toggles the menu
+ * @param {string} ariaLabel The aria label to be updated to trigger element
  */
 export function updateMenuTriggerAriaAttributes(triggerId, ariaLabel) {
     var triggerButton = document.querySelector("#".concat(triggerId));

package/src/menu/updateMenuTriggerAriaAttributes.ts

@@ -1,7 +1,7 @@
 /**
  * Adds screen reader accessibility to menus. Updates the aria attributes of the menu trigger button. Trigger button element must possess the following aria attributes; aria-expanded and aria-label.
- * @param {string} triggerId The id of the trigger button that toggles the menu.
- * @param {string} ariaLabel The aria-label to be updated.
+ * @param {string} triggerId The id of the trigger button that toggles the menu
+ * @param {string} ariaLabel The aria label to be updated to trigger element
  */
 
 import { HTMLElement } from "../../Types";

package/src/radio/{updateRadioAriaAttributes.js → group/updateGroupRadiosAriaAttributes.js}

@@ -1,13 +1,13 @@
 /**
- * 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.
+ * 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 {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) {
+export function updateGroupRadiosAriaAttributes(radioStates, radiosClass, currentPressedRadioIndex) {
     var allRadios = Array.from(document.querySelectorAll(".".concat(radiosClass)));
     if (!allRadios) {
-        throw new Error('Invalid radios class provided.');
+        throw new Error('Invalid radios shared class provided.');
     }
     allRadios.forEach(function (radio, index) {
         if (index === currentPressedRadioIndex) {

package/src/radio/{updateRadioAriaAttributes.ts → group/updateGroupRadiosAriaAttributes.ts}

@@ -1,17 +1,17 @@
 /**
- * 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.
+ * 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 {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";
+import { HTMLElement, RadioStates } from "../../../Types";
 
-export function updateRadioAriaAttributes(radioStates: RadioStates[], radiosClass: string, currentPressedRadioIndex: number): void {
+export function updateGroupRadiosAriaAttributes(radioStates: RadioStates[], radiosClass: string, currentPressedRadioIndex: number): void {
     const allRadios: HTMLElement[] = Array.from(document.querySelectorAll(`.${radiosClass}`));
 
-    if ( !allRadios) {
-      throw new Error('Invalid radios class provided.');
+    if( !allRadios) {
+      throw new Error('Invalid radios shared class provided.');
     }
 
     allRadios.forEach((radio, index) => {

package/src/radio/single/updateSingleRadioAriaAttribute.js

@@ -0,0 +1,26 @@
+/**
+ * Adds screen reader accessibility to single radio button. Updates the aria attribute of the radio button. Radio element must possess the following aria attributes; aria-checked and aria-label.
+ * @param {string} radioClass The class of the radio button
+ * @param {string} updatedAriaLabel The aria label to be updated to button element
+ */
+export function updateSingleRadioAriaAttribute(radioClass, updatedAriaLabel) {
+    var radio = document.querySelector(".".concat(radioClass));
+    if (!radio) {
+        throw new Error('Invalid radio button class provided.');
+    }
+    var currentAriaCheckedState = radio.getAttribute('aria-checked');
+    if (!currentAriaCheckedState) {
+        throw new Error("Radio element does not have aria-checked attribute");
+    }
+    function radioChecked(ariaLabel) {
+        radio.setAttribute('aria-checked', 'true');
+        radio.setAttribute('aria-label', ariaLabel);
+    }
+    function radioUnchecked(ariaLabel) {
+        radio.setAttribute('aria-checked', 'false');
+        radio.setAttribute('aria-label', ariaLabel);
+    }
+    (currentAriaCheckedState === 'false') ?
+        radioChecked(updatedAriaLabel) :
+        radioUnchecked(updatedAriaLabel);
+}

package/src/radio/single/updateSingleRadioAriaAttribute.ts

@@ -0,0 +1,34 @@
+/**
+ * Adds screen reader accessibility to single radio button. Updates the aria attribute of the radio button. Radio element must possess the following aria attributes; aria-checked and aria-label.
+ * @param {string} radioClass The class of the radio button
+ * @param {string} updatedAriaLabel The aria label to be updated to button element
+ */
+
+import { HTMLElement } from "../../../Types";
+
+export function updateSingleRadioAriaAttribute(radioClass: string, updatedAriaLabel: string): void {
+    const radio: HTMLElement = document.querySelector(`.${radioClass}`) as HTMLElement;
+
+    if( !radio) {
+      throw new Error('Invalid radio button class provided.');
+    }
+
+    const currentAriaCheckedState: string = radio.getAttribute('aria-checked') as string
+    if(!currentAriaCheckedState) {
+        throw new Error("Radio element does not have aria-checked attribute")
+    }
+
+    function radioChecked(ariaLabel: string): void {
+        radio.setAttribute('aria-checked', 'true');
+        radio.setAttribute('aria-label', ariaLabel);
+    }
+
+    function radioUnchecked(ariaLabel: string): void {
+        radio.setAttribute('aria-checked', 'false');
+        radio.setAttribute('aria-label', ariaLabel);
+    }
+
+    (currentAriaCheckedState === 'false') ?
+        radioChecked(updatedAriaLabel) :
+        radioUnchecked(updatedAriaLabel)
+}

package/src/toggle/group/updateGroupTogglesAriaAttributes.js

@@ -0,0 +1,18 @@
+/**
+ * Adds screen reader accessibility to toggle buttons. Updates the aria attributes of the toggle buttons. Button must be button element with a role of button, and possess the following aria attributes; aria-pressed and aria-label.
+ * @param {ToggleStates[]} toggleStates Array of objects containing toggle buttons state information
+ * @param {string} togglesClass The shared class of all the toggle buttons
+ * @param {number} currentPressedToggleIndex Index of the currently pressed or unpressed toggle button
+ */
+export function updateGroupTogglesAriaAttributes(toggleStates, togglesClass, currentPressedToggleIndex) {
+    var allToggles = Array.from(document.querySelectorAll(".".concat(togglesClass)));
+    if (!allToggles) {
+        throw new Error('Invalid toggles shared class provided.');
+    }
+    allToggles.forEach(function (toggle, index) {
+        if (index === currentPressedToggleIndex) {
+            toggle.setAttribute("aria-pressed", toggleStates[index].pressed ? 'true' : 'false');
+            toggle.setAttribute("aria-label", toggleStates[index].pressed ? toggleStates[index].pressedAriaLabel : toggleStates[index].unpressedAriaLabel);
+        }
+    });
+}

package/src/toggle/group/updateGroupTogglesAriaAttributes.ts

@@ -0,0 +1,23 @@
+/**
+ * Adds screen reader accessibility to toggle buttons. Updates the aria attributes of the toggle buttons. Button must be button element with a role of button, and possess the following aria attributes; aria-pressed and aria-label.
+ * @param {ToggleStates[]} toggleStates Array of objects containing toggle buttons state information
+ * @param {string} togglesClass The shared class of all the toggle buttons
+ * @param {number} currentPressedToggleIndex Index of the currently pressed or unpressed toggle button
+ */
+
+import { HTMLElement, ToggleStates } from "../../../Types";
+
+export function updateGroupTogglesAriaAttributes(toggleStates: ToggleStates[], togglesClass: string, currentPressedToggleIndex: number): void {
+    const allToggles: HTMLElement[] = Array.from(document.querySelectorAll(`.${togglesClass}`));
+
+    if ( !allToggles) {
+      throw new Error('Invalid toggles shared class provided.');
+    }
+
+    allToggles.forEach((toggle, index) => {
+      if (index === currentPressedToggleIndex) {
+        toggle.setAttribute("aria-pressed", toggleStates[index].pressed ? 'true' : 'false');
+        toggle.setAttribute("aria-label", toggleStates[index].pressed ? toggleStates[index].pressedAriaLabel : toggleStates[index].unpressedAriaLabel);
+      }
+    });
+}

package/src/toggle/single/updateSingleToggleAriaAttribute.js

@@ -0,0 +1,26 @@
+/**
+ * Adds screen reader accessibility to a single toggle element. Updates the aria attributes of the toggle element. Toggle element must possess the following aria attributes; aria-pressed and aria-label.
+ * @param {string} toggleClass The class of all the toggle element
+ * @param {string} updatedAriaLabel The aria label to be updated to toggle element
+ */
+export function updateSingleToggleAriaAttribute(toggleClass, updatedAriaLabel) {
+    var toggle = document.querySelector(".".concat(toggleClass));
+    if (!toggle) {
+        throw new Error('Invalid toggle class provided.');
+    }
+    var currentAriaPressedState = toggle.getAttribute('aria-pressed');
+    if (!currentAriaPressedState) {
+        throw new Error("Toggle element does not have aria-pressed attribute");
+    }
+    function togglePressed(ariaLabel) {
+        toggle.setAttribute('aria-pressed', 'true');
+        toggle.setAttribute('aria-label', ariaLabel);
+    }
+    function toggleUnpressed(ariaLabel) {
+        toggle.setAttribute('aria-pressed', 'false');
+        toggle.setAttribute('aria-label', ariaLabel);
+    }
+    (currentAriaPressedState === 'false') ?
+        togglePressed(updatedAriaLabel) :
+        toggleUnpressed(updatedAriaLabel);
+}

package/src/toggle/single/updateSingleToggleAriaAttribute.ts

@@ -0,0 +1,34 @@
+/**
+ * Adds screen reader accessibility to a single toggle element. Updates the aria attributes of the toggle element. Toggle element must possess the following aria attributes; aria-pressed and aria-label.
+ * @param {string} toggleClass The class of all the toggle element
+ * @param {string} updatedAriaLabel The aria label to be updated to toggle element
+ */
+
+import { HTMLElement } from "../../../Types";
+
+export function updateSingleToggleAriaAttribute(toggleClass: string, updatedAriaLabel: string): void {
+    const toggle: HTMLElement = document.querySelector(`.${toggleClass}`) as HTMLElement;
+
+    if( !toggle) {
+      throw new Error('Invalid toggle class provided.');
+    }
+
+    const currentAriaPressedState: string = toggle.getAttribute('aria-pressed') as string
+    if(!currentAriaPressedState) {
+        throw new Error("Toggle element does not have aria-pressed attribute")
+    }
+
+    function togglePressed(ariaLabel: string): void {
+        toggle.setAttribute('aria-pressed', 'true');
+        toggle.setAttribute('aria-label', ariaLabel);
+    }
+
+    function toggleUnpressed(ariaLabel: string): void {
+        toggle.setAttribute('aria-pressed', 'false');
+        toggle.setAttribute('aria-label', ariaLabel);
+    }
+
+    (currentAriaPressedState === 'false') ?
+        togglePressed(updatedAriaLabel) :
+        toggleUnpressed(updatedAriaLabel)
+}