aria-ease 1.3.8 → 1.4.0

package/README.md

@@ -10,9 +10,11 @@ Out of the box accessibility utility package to develop production ready applica
 
 ## Features
 
+The package currently has support for 5 components: accordions, blocks, checkboxes, menus, radio buttons
+
 Add accessibility to menu: menu can be a dropdown, side menu, slide navigation 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 three string arguments; the id of the menu, the class name of the children item of the menu, and the aria-label for the closed/hidden state 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 makeMenuAccessible function takes two string arguments; the id of the menu, the class name of the children item 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 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.
 
@@ -28,12 +30,12 @@ const MenuExample = () => {
       const menu = document.querySelector('#custom-menu');
       if (getComputedStyle(menu).display === 'none') {
         menu.style.display = 'block';
-        makeMenuAccessible('custom-menu', 'profile-menu-item', 'Display profile menu);
-        updateMenuTriggerAriaAttributes('display-button', 'Hide profile menu');
+        makeMenuAccessible('custom-menu', 'profile-menu-item');
+        updateMenuTriggerAriaAttributes('display-button', 'Close profile menu');
       } else {
         cleanUpMenuEventListeners('custom-menu', 'profile-menu-item');
         menu.style.display = 'none';
-        updateMenuTriggerAriaAttributes('display-button', 'Display profile menu');
+        updateMenuTriggerAriaAttributes('display-button', 'Close profile menu');
       }
     }
   };
@@ -77,9 +79,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

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

package/aria-ease.d.ts

@@ -2,16 +2,15 @@
  * 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' {
     /**
      * Adds keyboard interaction to toggle menu. The menu traps focus and can be interacted with using the keyboard. The first item of the menu has focus when menu appears.
      * @param {string} menuId - The id of the menu.
      * @param {string} menuItemClass - The class of the items that are children of the menu.
-     * @param {string} menuClosedStateAriaLabel The aria label for when the menu is closed and not displayed
     */
-    function makeMenuAccessible(menuId: string, menuItemClass: string, menuClosedStateAriaLabel: string): void;
+    function makeMenuAccessible(menuId: string, menuItemClass: string): void;
   
     /**
      * Adds keyboard interaction to block. The block traps focus and can be interacted with using the keyboard.
@@ -49,7 +48,22 @@ declare module 'aria-ease' {
      * @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.8",
+  "version": "1.4.0",
   "description": "Out-of-the-box accessibility utility package to develop production ready applications.",
   "main": "index.js",
   "scripts": {

package/src/checkbox/updateCheckboxAriaAttributes.js

@@ -9,6 +9,7 @@ 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-checked", checkboxStates[index].checked ? 'true' : 'false');

package/src/checkbox/updateCheckboxAriaAttributes.ts

@@ -12,7 +12,7 @@ export function updateCheckboxAriaAttributes(checkboxStates: CheckboxStates[], c
 
     if ( !allCheckboxes) {
       throw new Error('Invalid checkboxes class provided.');
-    }
+    };
 
     allCheckboxes.forEach((checkbox, index) => {
       if (index === currentPressedCheckboxIndex) {

package/src/handleKeyPress.ts

@@ -35,7 +35,6 @@ export function handleKeyPress(event: KeyboardEvent, elementItems: NodeListOfHTM
                     null
                 triggerButton.focus()
             }
-            
             break;
         case 'Enter':
         case ' ':

package/src/menu/makeMenuAccessible.js

@@ -2,15 +2,15 @@
  * Adds keyboard interaction to toggle menu. The menu traps focus and can be interacted with using the keyboard. The first item of the menu has focus when menu appears.
  * @param {string} menuId The id of the menu
  * @param {string} menuItemClass The shared class of the items that are children of the menu
- * @param {string} menuClosedStateAriaLabel The aria label for when the menu is closed and not displayed
 */
 import { handleKeyPress } from '../handleKeyPress';
 var eventListenersAdded = new Set();
-export function makeMenuAccessible(menuId, menuItemClass, menuClosedStateAriaLabel) {
+export function makeMenuAccessible(menuId, menuItemClass) {
     var menuDiv = document.querySelector("#".concat(menuId));
     var menuItems = menuDiv.querySelectorAll(".".concat(menuItemClass));
     var triggerId = menuDiv.getAttribute('aria-labelledby');
     var triggerButton = document.querySelector("#".concat(triggerId));
+    var menuClosedStateAriaLabel = triggerButton.getAttribute('aria-label');
     menuItems.item(0).focus();
     menuItems.forEach(function (menuItem, menuItemIndex) {
         if (!eventListenersAdded.has(menuItem)) {

package/src/menu/makeMenuAccessible.ts

@@ -2,7 +2,6 @@
  * Adds keyboard interaction to toggle menu. The menu traps focus and can be interacted with using the keyboard. The first item of the menu has focus when menu appears.
  * @param {string} menuId The id of the menu
  * @param {string} menuItemClass The shared class of the items that are children of the menu
- * @param {string} menuClosedStateAriaLabel The aria label for when the menu is closed and not displayed
 */
 
 import { HTMLElement, NodeListOfHTMLElement } from '../../Types'
@@ -10,18 +9,20 @@ import { handleKeyPress } from '../handleKeyPress';
 
 let eventListenersAdded: Set<HTMLElement> = new Set();
 
-export function makeMenuAccessible(menuId: string, menuItemClass: string, menuClosedStateAriaLabel: string): void {
-    const menuDiv: HTMLElement = document.querySelector(`#${menuId}`) as HTMLElement
-    const menuItems: NodeListOfHTMLElement = menuDiv.querySelectorAll(`.${menuItemClass}`)
+export function makeMenuAccessible(menuId: string, menuItemClass: string): void {
+    const menuDiv: HTMLElement = document.querySelector(`#${menuId}`) as HTMLElement;
+    const menuItems: NodeListOfHTMLElement = menuDiv.querySelectorAll(`.${menuItemClass}`);
 
-    const triggerId: string = menuDiv.getAttribute('aria-labelledby') as string
-    const triggerButton: HTMLElement = document.querySelector(`#${triggerId}`) as HTMLElement
+    const triggerId: string = menuDiv.getAttribute('aria-labelledby') as string;
+    const triggerButton: HTMLElement = document.querySelector(`#${triggerId}`) as HTMLElement;
+
+    const menuClosedStateAriaLabel: string = triggerButton.getAttribute('aria-label')  as string;
 
     menuItems.item(0).focus();
     menuItems.forEach((menuItem: HTMLElement, menuItemIndex: number): void => {
         if (!eventListenersAdded.has(menuItem)) {
             eventListenersAdded.add(menuItem);
-            menuItem.addEventListener('keydown', (event: KeyboardEvent): void => handleKeyPress(event, menuItems, menuItemIndex, menuDiv, triggerButton, menuClosedStateAriaLabel))
+            menuItem.addEventListener('keydown', (event: KeyboardEvent): void => handleKeyPress(event, menuItems, menuItemIndex, menuDiv, triggerButton, menuClosedStateAriaLabel));
         }
     })
 }

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);
+    });
+}