aria-ease 1.3.0 → 1.3.2

package/README.md

@@ -19,9 +19,9 @@ The updateMenuTriggerAriaAttributes function take two string arguments; the id o
 ```
 import { makeMenuAccessible, updateMenuTriggerAriaAttributes, cleanUpMenuEventListeners } from 'aria-ease'
 
-const HomeExampleMenu = () => {
+const MenuExample = () => {
   const toggleMenuDisplay = (event) => {
-    if (event.key === 'Enter' || event.key === ' ') {
+    if (event.type === 'mousedown' || (event.type === 'keydown' && (event.key === 'Enter' || event.key === ' '))) {
       event.preventDefault();
       const menu = document.querySelector('#custom-menu');
       if (getComputedStyle(menu).display === 'none') {
@@ -35,17 +35,18 @@ const HomeExampleMenu = () => {
       }
     }
   };
+
   return (
     <div>
       <button
         id="display-button"
-        onClick={toggleMenuDisplay}
+        onMouseDown={toggleMenuDisplay}
         aria-haspopup={true}
         aria-pressed={false}
         aria-expanded={false}
         aria-controls="custom-menu"
         aria-label="Display profile menu"
-        className='home-menu-example-trigger-button block-interactive'
+        className='menu-example-trigger-button block-interactive'
         onKeyDown={toggleMenuDisplay}
       >
         Display Example Menu
@@ -59,7 +60,7 @@ const HomeExampleMenu = () => {
   )
 }
 
-export default HomeExampleMenu
+export default MenuExample
 ```
 
 Add accessibility to block: block can be entire web page body, tabs, interactive sliders and carousels e.t.c. Basically any component that is permanently displayed and has a list of related interractive children items. The function creates a focus trap within the block and the focus can be navigated using the arrow keys.
@@ -72,7 +73,7 @@ The makeBlockAccessible function takes two string arguments; the id of the block
 import { useEffect } from 'react'
 import { makeBlockAccessible } from "aria-ease"
 
-const App = () => {
+const BlockExample = () => {
   useEffect(() => {
     const cleanUp = makeBlockAccessible('custom-tab', 'custom-tab-item')
 
@@ -90,7 +91,7 @@ const App = () => {
   )
 }
 
-export default App
+export default BlockExample
 ```
 
 ### P.S.

package/Types.d.ts

@@ -2,8 +2,17 @@ declare global {
     type HTMLElement = Element;
     type NodeListOf<HTMLElement> = Iterable<HTMLElement>;
 }
+
+interface AccordionStates {
+    id: string;
+    display: boolean;
+    openedAriaLabel: string;
+    closedAriaLabel: string;
+}
+  
   
 export {
     HTMLElement,
     NodeListOfHTMLElement,
+    AccordionStates
 };

package/aria-ease.d.ts

@@ -1,26 +1,29 @@
 /**
  * Declares the module 'aria-ease' and includes type information and JSDoc comments.
  */
+
+import { AccordionStates } 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.
-     */
+    */
     function makeMenuAccessible(menuId: string, menuItemClass: string): void;
   
     /**
      * Adds keyboard interaction to block. The block traps focus and can be interacted with using the keyboard.
      * @param {string} blockId - The id of the block container.
      * @param {string} blockItemClass - The class of the individual block items.
-     */
+    */
     function makeBlockAccessible(blockId: string, blockItemClass: string);
 
     /**
      * Updates the aria attributes of the menu trigger button. Trigger button element must possess the following aria attributes; aria-expanded, aria-pressed, aria-label.
      * @param {string} triggerId The id of the trigger button that toggles the menu.
      * @param {string} ariaLabel The aria-label to be updated.
-     */
+    */
     function updateMenuTriggerAriaAttributes(triggerId: string, ariaLabel: string): void;
 
     /**
@@ -29,7 +32,15 @@ declare module 'aria-ease' {
      * @param {string} menuItemClass The class of the items that are children of the menu
     */
    function cleanUpMenuEventListeners(menuId: string, menuItemClass: string): void;
+
+   /**
+     * Adds screen reader accessibility to accordions. Updates the aria attributes of the accordion trigger button. Trigger button element must possess the following aria attributes; aria-expanded, aria-pressed, aria-label.
+     * @param {AccordionStates[]} accordionStates Array of objects containing accordion state information
+     * @param {string} accordionsClass The shared class of all the accordion triggers
+     * @param {number} currentClickedTriggerIndex Index of the currently clicked accordion trigger
+   */
+   function updateAccordionTriggerAriaAttributes(accordionStates: AccordionStates[], accordionsClass: string, currentClickedTriggerIndex: number): void;
   
-    export { makeMenuAccessible, makeBlockAccessible, updateMenuTriggerAriaAttributes, cleanUpMenuEventListeners };
+    export { makeMenuAccessible, makeBlockAccessible, updateMenuTriggerAriaAttributes, cleanUpMenuEventListeners, updateAccordionTriggerAriaAttributes };
   }
   

package/index.js

@@ -2,10 +2,12 @@ import { makeMenuAccessible } from './src/menu/makeMenuAccessible.js'
 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'
 
 export {
     makeMenuAccessible,
     makeBlockAccessible,
     updateMenuTriggerAriaAttributes,
-    cleanUpMenuEventListeners
+    cleanUpMenuEventListeners,
+    updateAccordionTriggerAriaAttributes
 }

package/package.json

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

package/src/accordion/updateAccordionTriggerAriaAttributes.js

@@ -0,0 +1,23 @@
+/**
+ * Adds screen reader accessibility to accordions. Updates the aria attributes of the accordion trigger button. Trigger button element must possess the following aria attributes; aria-expanded, aria-pressed, aria-label.
+ * @param {AccordionStates[]} accordionStates Array of objects containing accordions state information
+ * @param {string} accordionsClass The shared class of all the accordion triggers
+ * @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.');
+    }
+    allAccordionTrigger.forEach(function (trigger, index) {
+        if (index === currentClickedTriggerIndex) {
+            trigger.setAttribute("aria-expanded", accordionStates[index].display ? 'true' : 'false');
+            trigger.setAttribute("aria-pressed", accordionStates[index].display ? 'true' : 'false');
+        }
+        else {
+            trigger.setAttribute("aria-expanded", 'false');
+            trigger.setAttribute("aria-pressed", 'false');
+        }
+        trigger.setAttribute("aria-label", accordionStates[index].display ? accordionStates[index].openedAriaLabel : accordionStates[index].closedAriaLabel);
+    });
+}

package/src/accordion/updateAccordionTriggerAriaAttributes.ts

@@ -0,0 +1,28 @@
+/**
+ * Adds screen reader accessibility to accordions. Updates the aria attributes of the accordion trigger button. Trigger button element must possess the following aria attributes; aria-expanded, aria-pressed, aria-label.
+ * @param {AccordionStates[]} accordionStates Array of objects containing accordions state information
+ * @param {string} accordionsClass The shared class of all the accordion triggers
+ * @param {number} currentClickedTriggerIndex Index of the currently clicked accordion trigger
+ */
+
+import { HTMLElement, AccordionStates } from "../../Types";
+
+export function updateAccordionTriggerAriaAttributes(accordionStates: AccordionStates[], accordionsClass: string, currentClickedTriggerIndex: number): void {
+    const allAccordionTrigger: HTMLElement[] = Array.from(document.querySelectorAll(`.${accordionsClass}`));
+
+    if ( !allAccordionTrigger) {
+        throw new Error('Invalid trigger class provided.');
+    }
+
+    allAccordionTrigger.forEach((trigger, index) => {
+        if (index === currentClickedTriggerIndex) {
+          trigger.setAttribute("aria-expanded", accordionStates[index].display ? 'true' : 'false');
+          trigger.setAttribute("aria-pressed", accordionStates[index].display ? 'true' : 'false');
+        } else {
+          trigger.setAttribute("aria-expanded", 'false');
+          trigger.setAttribute("aria-pressed", 'false');
+        }
+    
+        trigger.setAttribute("aria-label", accordionStates[index].display ? accordionStates[index].openedAriaLabel : accordionStates[index].closedAriaLabel);
+    });
+}

package/src/block/makeBlockAccessible.js

@@ -1,7 +1,7 @@
 /**
  * Adds keyboard interaction to block. The block traps focus and can be interacted with using the keyboard.
  * @param {string} blockId The id of the block
- * @param {string} blockItemClass The class of the items that are children of the block
+ * @param {string} blockItemClass The shared class of the items that are children of the block
 */
 import { handleKeyPress } from '../handleKeyPress';
 var eventListenersAdded = new Set();

package/src/block/makeBlockAccessible.ts

@@ -1,7 +1,7 @@
 /** 
  * Adds keyboard interaction to block. The block traps focus and can be interacted with using the keyboard.
  * @param {string} blockId The id of the block
- * @param {string} blockItemClass The class of the items that are children of the block
+ * @param {string} blockItemClass The shared class of the items that are children of the block
 */
 
 import { HTMLElement, NodeListOfHTMLElement } from "../../Types"

package/src/menu/makeMenuAccessible.js

@@ -1,7 +1,7 @@
 /**
  * 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} menuItemClass The shared class of the items that are children of the menu
 */
 import { handleKeyPress } from '../handleKeyPress';
 var eventListenersAdded = new Set();

package/src/menu/makeMenuAccessible.ts

@@ -1,7 +1,7 @@
 /**
  * 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} menuItemClass The shared class of the items that are children of the menu
 */
 
 import { HTMLElement, NodeListOfHTMLElement } from '../../Types'

package/src/menu/updateMenuTriggerAriaAttributes.js

@@ -1,5 +1,5 @@
 /**
- * Updates the aria attributes of the menu trigger button. Trigger button element must possess the following aria attributes; aria-expanded, aria-pressed, aria-label.
+ * 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, aria-pressed, aria-label.
  * @param {string} triggerId The id of the trigger button that toggles the menu.
  * @param {string} ariaLabel The aria-label to be updated.
  */

package/src/menu/updateMenuTriggerAriaAttributes.ts

@@ -1,5 +1,5 @@
 /**
- * Updates the aria attributes of the menu trigger button. Trigger button element must possess the following aria attributes; aria-expanded, aria-pressed, aria-label.
+ * 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, aria-pressed, aria-label.
  * @param {string} triggerId The id of the trigger button that toggles the menu.
  * @param {string} ariaLabel The aria-label to be updated.
  */