aria-ease 1.2.3 → 1.2.5

package/README.md

@@ -1,6 +1,6 @@
 # Aria-Ease
 
-Out of the box accessibility utility package to develop production ready packages.
+Out of the box accessibility utility package to develop production ready applications.
 
 ## Install
 
@@ -57,19 +57,19 @@ const App = () => {
 export default App
 ```
 
-Add accessibility to tab: tab can be 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 tab and the focus can be navigated using the arrow keys.
+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.
 
-The makeTabAccessible function takes two string arguments; the id of the tab main div, and the class name of the children item of the div. The function should be called on page render, so the event listeners get activated. On click of a button, the clicked button gets focused and the focus can be navigated using the arrow keys.
+The makeBlockAccessible function takes two string arguments; the id of the block main div, and the class name of the children item of the div. The function should be called on page render, so the event listeners get activated. On click of a button, the clicked button gets focused and the focus can be navigated using the arrow keys.
 
 #### Usage
 
 ```
 import { useEffect } from 'react'
-import { makeTabAccessible } from "aria-ease"
+import { makeBlockAccessible } from "aria-ease"
 
 const App = () => {
   useEffect(() => {
-    makeTabAccessible('custom-tab', 'custom-tab-item')
+    makeBlockAccessible('custom-tab', 'custom-tab-item')
   },[])
 
   return (

package/aria-ease.d.ts

@@ -10,11 +10,11 @@ declare module 'aria-ease' {
     function makeMenuAccessible(menuId: string, menuItemClass: string): void;
   
     /**
-     * Adds keyboard interaction to tab. The tab traps focus and can be interacted with using the keyboard.
-     * @param {string} tabId - The id of the tab container.
-     * @param {string} tabItemClass - The class of the individual tab items.
+     * 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 makeTabAccessible(tabId: string, tabItemClass: string): void;
+    function makeBlockAccessible(blockId: string, blockItemClass: string): void;
 
     /**
      * Updates the aria attributes of the menu trigger button. Trigger button element must possess the following aria attributes; aria-expanded, aria-pressed, aria-label.
@@ -22,7 +22,14 @@ declare module 'aria-ease' {
      * @param {string} ariaLabel The aria-label to be updated.
      */
     function updateMenuTriggerAriaAttributes(triggerId: string, ariaLabel: string): void;
+
+    /**
+     * Cleans up the event listeners that were added to childen items of the menu, to prevent memory leak.
+     * @param {string} menuId The id of the menu
+     * @param {string} menuItemClass The class of the items that are children of the menu
+    */
+   function cleanUpMenuEventListeners(menuId: string, menuItemClass: string): void;
   
-    export { makeMenuAccessible, makeTabAccessible, updateMenuTriggerAriaAttributes };
+    export { makeMenuAccessible, makeBlockAccessible, updateMenuTriggerAriaAttributes, cleanUpMenuEventListeners };
   }
   

package/index.js

@@ -1,9 +1,11 @@
 import { makeMenuAccessible } from './src/menu/makeMenuAccessible.js'
-import { makeTabAccessible } from './src/tab/makeTabAccessible.js'
+import { makeBlockAccessible } from './src/block/makeBlockAccessible.js'
 import { updateMenuTriggerAriaAttributes } from './src/menu/updateMenuTriggerAriaAttributes.js'
+import { cleanUpMenuEventListeners } from './src/menu/cleanUpMenuEventListeners.js'
 
 export {
     makeMenuAccessible,
-    makeTabAccessible,
-    updateMenuTriggerAriaAttributes
+    makeBlockAccessible,
+    updateMenuTriggerAriaAttributes,
+    cleanUpMenuEventListeners
 }

package/package.json

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

package/src/block/makeBlockAccessible.js

@@ -0,0 +1,17 @@
+/**
+ * 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
+*/
+import { handleKeyPress } from '../handleKeyPress';
+var eventListenersAdded = new Set();
+export function makeBlockAccessible(blockId, blockItemClass) {
+    var blockDiv = document.querySelector("#".concat(blockId));
+    var blockItems = blockDiv.querySelectorAll(".".concat(blockItemClass));
+    blockItems.forEach(function (blockItem, blockItemIndex) {
+        if (!eventListenersAdded.has(blockItem)) {
+            eventListenersAdded.add(blockItem);
+            blockItem.addEventListener('keydown', function (event) { return handleKeyPress(event, blockItems, blockItemIndex); });
+        }
+    });
+}

package/src/block/makeBlockAccessible.ts

@@ -0,0 +1,23 @@
+/** 
+ * 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
+*/
+
+import { HTMLElement, NodeListOfHTMLElement } from "../../Types"
+import { handleKeyPress } from '../handleKeyPress';
+
+let eventListenersAdded: Set<HTMLElement> = new Set();
+
+export function makeBlockAccessible(blockId: string, blockItemClass: string): void {
+    const blockDiv: HTMLElement = document.querySelector(`#${blockId}`) as HTMLElement
+    const blockItems: NodeListOfHTMLElement = blockDiv.querySelectorAll(`.${blockItemClass}`)
+
+    blockItems.forEach((blockItem: HTMLElement, blockItemIndex: number): void => {
+        if (!eventListenersAdded.has(blockItem)) {
+          eventListenersAdded.add(blockItem);
+          blockItem.addEventListener('keydown', (event: KeyboardEvent) => handleKeyPress(event, blockItems, blockItemIndex));
+        }
+    });
+
+}

package/src/handleKeyPress.js

@@ -0,0 +1,55 @@
+export function handleKeyPress(event, elementItems, elementItemIndex, elementDiv, triggerButton) {
+    switch (event.key) {
+        case 'ArrowUp':
+        case 'ArrowLeft':
+            event.preventDefault();
+            if (elementItemIndex === 0) {
+                elementItems.item(elementItems.length - 1).focus();
+            }
+            else {
+                elementItems.item(elementItemIndex - 1).focus();
+            }
+            break;
+        case 'ArrowDown':
+        case 'ArrowRight':
+            event.preventDefault();
+            if (elementItemIndex === elementItems.length - 1) {
+                elementItems.item(0).focus();
+            }
+            else {
+                elementItems.item(elementItemIndex + 1).focus();
+            }
+            break;
+        case 'Escape':
+            event.preventDefault();
+            if (elementDiv && triggerButton) {
+                (getComputedStyle(elementDiv).display === 'block') ?
+                    triggerButton.click() :
+                    null;
+                triggerButton.focus();
+            }
+            break;
+        case 'Enter':
+        case ' ':
+            event.preventDefault();
+            if (elementItems.item(elementItemIndex).tagName === 'BUTTON') {
+                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:
+            break;
+    }
+}

package/src/handleKeyPress.ts

@@ -0,0 +1,53 @@
+import { NodeListOfHTMLElement, HTMLElement } from "../Types";
+
+export function handleKeyPress(event: KeyboardEvent, elementItems: NodeListOfHTMLElement, elementItemIndex: number, elementDiv?: HTMLElement | undefined, triggerButton?: HTMLElement | undefined): void {
+    switch(event.key) {
+        case 'ArrowUp':
+        case 'ArrowLeft':
+            event.preventDefault()
+            if (elementItemIndex === 0) {
+                elementItems.item(elementItems.length - 1).focus();
+            } else {
+                elementItems.item(elementItemIndex - 1).focus();
+            }
+            break;
+        case 'ArrowDown':
+        case 'ArrowRight':
+            event.preventDefault()
+            if (elementItemIndex === elementItems.length - 1) {
+                elementItems.item(0).focus();
+            } else {
+                elementItems.item(elementItemIndex + 1).focus();
+            }
+            break;
+        case 'Escape':
+            event.preventDefault();
+            if(elementDiv && triggerButton) {
+                (getComputedStyle(elementDiv).display === 'block') ?
+                    triggerButton.click() :
+                    null
+                triggerButton.focus()
+            }
+            
+            break;
+        case 'Enter':
+        case ' ':
+            event.preventDefault()
+            if(elementItems.item(elementItemIndex).tagName === 'BUTTON') {
+                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:
+            break;
+    }
+}

package/src/menu/cleanUpMenuEventListeners.js

@@ -0,0 +1,10 @@
+import { handleKeyPress } from "../handleKeyPress";
+export function cleanUpMenuEventListeners(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));
+    menuItems.forEach(function (menuItem, menuItemIndex) {
+        menuItem.removeEventListener('keydown', function (event) { return handleKeyPress(event, menuItems, menuItemIndex, menuDiv, triggerButton); });
+    });
+}

package/src/menu/cleanUpMenuEventListeners.ts

@@ -0,0 +1,15 @@
+import { NodeListOfHTMLElement } from "../../Types"
+import { handleKeyPress } from "../handleKeyPress"
+
+
+export function cleanUpMenuEventListeners(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
+
+    menuItems.forEach((menuItem: HTMLElement, menuItemIndex: number): void => {
+        menuItem.removeEventListener('keydown', (event: KeyboardEvent): void => handleKeyPress(event, menuItems, menuItemIndex, menuDiv, triggerButton));
+    })
+}

package/src/menu/makeMenuAccessible.js

@@ -3,6 +3,7 @@
  * @param {string} menuId The id of the menu
  * @param {string} menuItemClass The class of the items that are children of the menu
 */
+import { handleKeyPress } from '../handleKeyPress';
 var eventListenersAdded = new Set();
 export function makeMenuAccessible(menuId, menuItemClass) {
     var menuDiv = document.querySelector("#".concat(menuId));
@@ -13,60 +14,7 @@ export function makeMenuAccessible(menuId, menuItemClass) {
     menuItems.forEach(function (menuItem, menuItemIndex) {
         if (!eventListenersAdded.has(menuItem)) {
             eventListenersAdded.add(menuItem);
-            menuItem.addEventListener('keydown', function (event) { return handleKeyPress(event, menuItems, menuItemIndex); });
+            menuItem.addEventListener('keydown', function (event) { return handleKeyPress(event, menuItems, menuItemIndex, menuDiv, triggerButton); });
         }
     });
-    function handleKeyPress(event, menuItems, menuItemIndex) {
-        switch (event.key) {
-            case 'ArrowUp':
-            case 'ArrowLeft':
-                event.preventDefault();
-                if (menuItemIndex === 0) {
-                    menuItems.item(menuItems.length - 1).focus();
-                }
-                else {
-                    menuItems.item(menuItemIndex - 1).focus();
-                }
-                break;
-            case 'ArrowDown':
-            case 'ArrowRight':
-                event.preventDefault();
-                if (menuItemIndex === menuItems.length - 1) {
-                    menuItems.item(0).focus();
-                }
-                else {
-                    menuItems.item(menuItemIndex + 1).focus();
-                }
-                break;
-            case 'Escape':
-                event.preventDefault();
-                (getComputedStyle(menuDiv).display === 'block') ?
-                    triggerButton.click() :
-                    null;
-                triggerButton.focus();
-                break;
-            case 'Enter':
-            case ' ':
-                event.preventDefault();
-                if (menuItems.item(menuItemIndex).tagName === 'BUTTON') {
-                    menuItems.item(menuItemIndex).click();
-                    break;
-                }
-                else if (menuItems.item(menuItemIndex).tagName === 'A') {
-                    window.location.href = menuItems.item(menuItemIndex).href;
-                    break;
-                }
-                else if (menuItems.item(menuItemIndex).type === 'radio') {
-                    menuItems.item(menuItemIndex).checked = true;
-                    break;
-                }
-                else if (menuItems.item(menuItemIndex).type === 'checkbox') {
-                    menuItems.item(menuItemIndex).checked = !menuItems.item(menuItemIndex).checked;
-                    break;
-                }
-                break;
-            default:
-                break;
-        }
-    }
 }

package/src/menu/makeMenuAccessible.ts

@@ -5,6 +5,7 @@
 */
 
 import { HTMLElement, NodeListOfHTMLElement } from '../../Types'
+import { handleKeyPress } from '../handleKeyPress';
 
 let eventListenersAdded: Set<HTMLElement> = new Set();
 
@@ -19,56 +20,7 @@ export function makeMenuAccessible(menuId: string, menuItemClass: string): void
     menuItems.forEach((menuItem: HTMLElement, menuItemIndex: number): void => {
         if (!eventListenersAdded.has(menuItem)) {
             eventListenersAdded.add(menuItem);
-            menuItem.addEventListener('keydown', (event: KeyboardEvent): void => handleKeyPress(event, menuItems, menuItemIndex))
+            menuItem.addEventListener('keydown', (event: KeyboardEvent): void => handleKeyPress(event, menuItems, menuItemIndex, menuDiv, triggerButton))
         }
     })
-
-    function handleKeyPress(event: KeyboardEvent, menuItems: NodeListOfHTMLElement, menuItemIndex: number): void {
-        switch(event.key) {
-            case 'ArrowUp':
-            case 'ArrowLeft':
-                event.preventDefault()
-                if (menuItemIndex === 0) {
-                    menuItems.item(menuItems.length - 1).focus();
-                } else {
-                    menuItems.item(menuItemIndex - 1).focus();
-                }
-                break;
-            case 'ArrowDown':
-            case 'ArrowRight':
-                event.preventDefault()
-                if (menuItemIndex === menuItems.length - 1) {
-                    menuItems.item(0).focus();
-                } else {
-                    menuItems.item(menuItemIndex + 1).focus();
-                }
-                break;
-            case 'Escape':
-                event.preventDefault();
-                (getComputedStyle(menuDiv).display === 'block') ?
-                    triggerButton.click() :
-                    null
-                triggerButton.focus()
-                break;
-            case 'Enter':
-            case ' ':
-                event.preventDefault()
-                if(menuItems.item(menuItemIndex).tagName === 'BUTTON') {
-                    menuItems.item(menuItemIndex).click()
-                    break;
-                } else if (menuItems.item(menuItemIndex).tagName === 'A') {
-                    window.location.href = menuItems.item(menuItemIndex).href; 
-                    break;
-                } else if (menuItems.item(menuItemIndex).type === 'radio') {
-                    menuItems.item(menuItemIndex).checked = true
-                    break;
-                } else if (menuItems.item(menuItemIndex).type === 'checkbox') {
-                    menuItems.item(menuItemIndex).checked = !menuItems.item(menuItemIndex).checked
-                    break;
-                }
-                break;
-            default:
-                break;
-        }
-    }
 }

package/src/tab/makeTabAccessible.js

@@ -1,62 +0,0 @@
-/**
- * Adds keyboard interaction to tab. The tab traps focus and can be interacted with using the keyboard.
- * @param {string} tabId The id of the tab
- * @param {string} tabItemClass The class of the items that are children of the tab
-*/
-var eventListenersAdded = new Set();
-export function makeTabAccessible(tabId, tabItemClass) {
-    var tabDiv = document.querySelector("#".concat(tabId));
-    var tabItems = tabDiv.querySelectorAll(".".concat(tabItemClass));
-    tabItems.forEach(function (tabItem, tabItemIndex) {
-        if (!eventListenersAdded.has(tabItem)) {
-            eventListenersAdded.add(tabItem);
-            tabItem.addEventListener('keydown', function (event) { return handleKeyPress(event, tabItems, tabItemIndex); });
-        }
-    });
-    function handleKeyPress(event, tabItems, tabItemIndex) {
-        switch (event.key) {
-            case 'ArrowUp':
-            case 'ArrowLeft':
-                event.preventDefault();
-                if (tabItemIndex === 0) {
-                    tabItems.item(tabItems.length - 1).focus();
-                }
-                else {
-                    tabItems.item(tabItemIndex - 1).focus();
-                }
-                break;
-            case 'ArrowDown':
-            case 'ArrowRight':
-                event.preventDefault();
-                if (tabItemIndex === tabItems.length - 1) {
-                    tabItems.item(0).focus();
-                }
-                else {
-                    tabItems.item(tabItemIndex + 1).focus();
-                }
-                break;
-            case 'Enter':
-            case ' ':
-                event.preventDefault();
-                if (tabItems.item(tabItemIndex).type === 'radio') {
-                    tabItems.item(tabItemIndex).checked = true;
-                    break;
-                }
-                else if (tabItems.item(tabItemIndex).type === 'checkbox') {
-                    tabItems.item(tabItemIndex).checked = !tabItems.item(tabItemIndex).checked;
-                    break;
-                }
-                else if (tabItems.item(tabItemIndex).tagName === 'BUTTON') {
-                    tabItems.item(tabItemIndex).click();
-                    break;
-                }
-                else if (tabItems.item(tabItemIndex).tagName === 'A') {
-                    window.location.href = tabItems.item(tabItemIndex).href;
-                    break;
-                }
-                break;
-            default:
-                break;
-        }
-    }
-}

package/src/tab/makeTabAccessible.ts

@@ -1,63 +0,0 @@
-/** 
- * Adds keyboard interaction to tab. The tab traps focus and can be interacted with using the keyboard.
- * @param {string} tabId The id of the tab
- * @param {string} tabItemClass The class of the items that are children of the tab
-*/
-
-import { HTMLElement, NodeListOfHTMLElement } from "../../Types"
-
-let eventListenersAdded: Set<HTMLElement> = new Set();
-
-export function makeTabAccessible(tabId: string, tabItemClass: string): void {
-    const tabDiv: HTMLElement = document.querySelector(`#${tabId}`) as HTMLElement
-    const tabItems: NodeListOfHTMLElement = tabDiv.querySelectorAll(`.${tabItemClass}`)
-
-    tabItems.forEach((tabItem: HTMLElement, tabItemIndex: number): void => {
-        if (!eventListenersAdded.has(tabItem)) {
-          eventListenersAdded.add(tabItem);
-          tabItem.addEventListener('keydown', (event: KeyboardEvent) => handleKeyPress(event, tabItems, tabItemIndex));
-        }
-      });
-
-    function handleKeyPress(event: KeyboardEvent, tabItems: NodeListOfHTMLElement, tabItemIndex: number): void {
-        switch(event.key) {
-            case 'ArrowUp':
-            case 'ArrowLeft':
-                event.preventDefault()
-                if (tabItemIndex === 0) {
-                    tabItems.item(tabItems.length - 1).focus();
-                } else {
-                    tabItems.item(tabItemIndex - 1).focus();
-                }
-                break;
-            case 'ArrowDown':
-            case 'ArrowRight':
-                event.preventDefault()
-                if (tabItemIndex === tabItems.length - 1) {
-                    tabItems.item(0).focus();
-                } else {
-                    tabItems.item(tabItemIndex + 1).focus();
-                }
-                break;
-            case 'Enter':
-            case ' ':
-                event.preventDefault()
-                if (tabItems.item(tabItemIndex).type === 'radio') {
-                    tabItems.item(tabItemIndex).checked = true
-                    break;
-                } else if (tabItems.item(tabItemIndex).type === 'checkbox') {
-                    tabItems.item(tabItemIndex).checked = !tabItems.item(tabItemIndex).checked
-                    break;
-                } else if (tabItems.item(tabItemIndex).tagName === 'BUTTON') {
-                    tabItems.item(tabItemIndex).click()
-                    break;
-                } else if (tabItems.item(tabItemIndex).tagName === 'A') {
-                    window.location.href = tabItems.item(tabItemIndex).href
-                    break;
-                }
-                break;
-            default:
-                break;
-        }
-    }
-}