aria-ease 1.2.4 → 1.2.6

package/aria-ease.d.ts

@@ -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, makeBlockAccessible, updateMenuTriggerAriaAttributes };
+    export { makeMenuAccessible, makeBlockAccessible, updateMenuTriggerAriaAttributes, cleanUpMenuEventListeners };
   }
   

package/index.js

@@ -1,9 +1,11 @@
 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'
 
 export {
     makeMenuAccessible,
     makeBlockAccessible,
-    updateMenuTriggerAriaAttributes
+    updateMenuTriggerAriaAttributes,
+    cleanUpMenuEventListeners
 }

package/package.json

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

package/src/block/makeBlockAccessible.js

@@ -3,6 +3,7 @@
  * @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));
@@ -13,50 +14,4 @@ export function makeBlockAccessible(blockId, blockItemClass) {
             blockItem.addEventListener('keydown', function (event) { return handleKeyPress(event, blockItems, blockItemIndex); });
         }
     });
-    function handleKeyPress(event, blockItems, blockItemIndex) {
-        switch (event.key) {
-            case 'ArrowUp':
-            case 'ArrowLeft':
-                event.preventDefault();
-                if (blockItemIndex === 0) {
-                    blockItems.item(blockItems.length - 1).focus();
-                }
-                else {
-                    blockItems.item(blockItemIndex - 1).focus();
-                }
-                break;
-            case 'ArrowDown':
-            case 'ArrowRight':
-                event.preventDefault();
-                if (blockItemIndex === blockItems.length - 1) {
-                    blockItems.item(0).focus();
-                }
-                else {
-                    blockItems.item(blockItemIndex + 1).focus();
-                }
-                break;
-            case 'Enter':
-            case ' ':
-                event.preventDefault();
-                if (blockItems.item(blockItemIndex).type === 'radio') {
-                    blockItems.item(blockItemIndex).checked = true;
-                    break;
-                }
-                else if (blockItems.item(blockItemIndex).type === 'checkbox') {
-                    blockItems.item(blockItemIndex).checked = !blockItems.item(blockItemIndex).checked;
-                    break;
-                }
-                else if (blockItems.item(blockItemIndex).tagName === 'BUTTON') {
-                    blockItems.item(blockItemIndex).click();
-                    break;
-                }
-                else if (blockItems.item(blockItemIndex).tagName === 'A') {
-                    window.location.href = blockItems.item(blockItemIndex).href;
-                    break;
-                }
-                break;
-            default:
-                break;
-        }
-    }
 }

package/src/block/makeBlockAccessible.ts

@@ -5,6 +5,7 @@
 */
 
 import { HTMLElement, NodeListOfHTMLElement } from "../../Types"
+import { handleKeyPress } from '../handleKeyPress';
 
 let eventListenersAdded: Set<HTMLElement> = new Set();
 
@@ -17,47 +18,6 @@ export function makeBlockAccessible(blockId: string, blockItemClass: string): vo
           eventListenersAdded.add(blockItem);
           blockItem.addEventListener('keydown', (event: KeyboardEvent) => handleKeyPress(event, blockItems, blockItemIndex));
         }
-      });
+    });
 
-    function handleKeyPress(event: KeyboardEvent, blockItems: NodeListOfHTMLElement, blockItemIndex: number): void {
-        switch(event.key) {
-            case 'ArrowUp':
-            case 'ArrowLeft':
-                event.preventDefault()
-                if (blockItemIndex === 0) {
-                    blockItems.item(blockItems.length - 1).focus();
-                } else {
-                    blockItems.item(blockItemIndex - 1).focus();
-                }
-                break;
-            case 'ArrowDown':
-            case 'ArrowRight':
-                event.preventDefault()
-                if (blockItemIndex === blockItems.length - 1) {
-                    blockItems.item(0).focus();
-                } else {
-                    blockItems.item(blockItemIndex + 1).focus();
-                }
-                break;
-            case 'Enter':
-            case ' ':
-                event.preventDefault()
-                if (blockItems.item(blockItemIndex).type === 'radio') {
-                    blockItems.item(blockItemIndex).checked = true
-                    break;
-                } else if (blockItems.item(blockItemIndex).type === 'checkbox') {
-                    blockItems.item(blockItemIndex).checked = !blockItems.item(blockItemIndex).checked
-                    break;
-                } else if (blockItems.item(blockItemIndex).tagName === 'BUTTON') {
-                    blockItems.item(blockItemIndex).click()
-                    break;
-                } else if (blockItems.item(blockItemIndex).tagName === 'A') {
-                    window.location.href = blockItems.item(blockItemIndex).href
-                    break;
-                }
-                break;
-            default:
-                break;
-        }
-    }
 }

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,70 +3,20 @@
  * @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));
     var menuItems = menuDiv.querySelectorAll(".".concat(menuItemClass));
     var triggerId = menuDiv.getAttribute('aria-labelledby');
     var triggerButton = document.querySelector("#".concat(triggerId));
-    menuItems.item(0).focus();
-    menuItems.forEach(function (menuItem, menuItemIndex) {
-        if (!eventListenersAdded.has(menuItem)) {
-            eventListenersAdded.add(menuItem);
-            menuItem.addEventListener('keydown', function (event) { return handleKeyPress(event, menuItems, menuItemIndex); });
-        }
-    });
-    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;
-        }
+    if (window.innerWidth >= 1025) {
+        menuItems.item(0).focus();
+        menuItems.forEach(function (menuItem, menuItemIndex) {
+            if (!eventListenersAdded.has(menuItem)) {
+                eventListenersAdded.add(menuItem);
+                menuItem.addEventListener('keydown', function (event) { return handleKeyPress(event, menuItems, menuItemIndex, menuDiv, triggerButton); });
+            }
+        });
     }
 }

package/src/menu/makeMenuAccessible.ts

@@ -5,6 +5,7 @@
 */
 
 import { HTMLElement, NodeListOfHTMLElement } from '../../Types'
+import { handleKeyPress } from '../handleKeyPress';
 
 let eventListenersAdded: Set<HTMLElement> = new Set();
 
@@ -15,60 +16,13 @@ export function makeMenuAccessible(menuId: string, menuItemClass: string): void
     const triggerId: string = menuDiv.getAttribute('aria-labelledby') as string
     const triggerButton: HTMLElement = document.querySelector(`#${triggerId}`) as HTMLElement
 
-    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))
-        }
-    })
-
-    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;
-        }
-    }
+    if(window.innerWidth >= 1025) {
+        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))
+            }
+        })
+    }    
 }