aria-ease 1.4.4 → 1.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aria-ease",
-  "version": "1.4.4",
+  "version": "1.4.6",
   "description": "Out-of-the-box accessibility utility package to develop production ready applications.",
   "main": "index.js",
   "scripts": {
@@ -11,14 +11,20 @@
     "url": "git+https://github.com/aria-ease/aria-ease.git"
   },
   "keywords": [
+    "a11y",
     "ARIA",
-    "Accessibility"
+    "Accessibility",
+    "Assistive Technology",
+    "Keyboard Navigation",
+    "Focus Management",
+    "WCAG Guidelines",
+    "Inclusive Design"
   ],
   "author": "Isaac Akinduyile",
   "license": "ISC",
   "bugs": {
     "url": "https://github.com/aria-ease/aria-ease/issues"
   },
-  "homepage": "https://aria-ease.vercel.app/",
+  "homepage": "https://aria-ease.vercel.app/docs",
   "types": "./aria-ease.d.ts"
 }

package/src/block/makeBlockAccessible.js

@@ -7,7 +7,13 @@ import { handleKeyPress } from '../handleKeyPress';
 var eventListenersAdded = new Set();
 export function makeBlockAccessible(blockId, blockItemsClass) {
     var blockDiv = document.querySelector("#".concat(blockId));
+    if (!blockDiv) {
+        throw new Error('Invalid block main div id provided.');
+    }
     var blockItems = blockDiv.querySelectorAll(".".concat(blockItemsClass));
+    if (!blockItems) {
+        throw new Error('Invalid block items class provided.');
+    }
     blockItems.forEach(function (blockItem, blockItemIndex) {
         if (!eventListenersAdded.has(blockItem)) {
             eventListenersAdded.add(blockItem);

package/src/block/makeBlockAccessible.ts

@@ -11,7 +11,14 @@ let eventListenersAdded: Set<HTMLElement> = new Set();
 
 export function makeBlockAccessible(blockId: string, blockItemsClass: string) {
   const blockDiv: HTMLElement = document.querySelector(`#${blockId}`) as HTMLElement
-  const blockItems: NodeListOfHTMLElement = blockDiv.querySelectorAll(`.${blockItemsClass}`)
+  if(!blockDiv) {
+    throw new Error('Invalid block main div id provided.');
+  }
+
+  const blockItems: NodeListOfHTMLElement = blockDiv.querySelectorAll(`.${blockItemsClass}`);
+  if(!blockItems) {
+    throw new Error('Invalid block items class provided.');
+  }
 
   blockItems.forEach((blockItem: HTMLElement, blockItemIndex: number): void => {
     if (!eventListenersAdded.has(blockItem)) {

package/src/handleKeyPress.js

@@ -2,6 +2,9 @@ import { updateMenuTriggerAriaAttributes } from "./menu/updateMenuTriggerAriaAtt
 function handleMenuEscapeKeyPress(menuElement, menuTriggerButton, menuClosedStateAriaLabel) {
     menuElement.style.display = 'none';
     var menuTriggerButtonId = menuTriggerButton.getAttribute('id');
+    if (!menuTriggerButtonId) {
+        throw new Error("Menu trigger button does not have id attribute");
+    }
     updateMenuTriggerAriaAttributes("".concat(menuTriggerButtonId), "".concat(menuClosedStateAriaLabel));
 }
 export function handleKeyPress(event, elementItems, elementItemIndex, menuElementDiv, triggerButton, menuClosedStateAriaLabel) {
@@ -37,12 +40,13 @@ export function handleKeyPress(event, elementItems, elementItemIndex, menuElemen
             break;
         case 'Enter':
         case ' ':
-            event.preventDefault();
             if (elementItems.item(elementItemIndex).tagName === 'BUTTON') {
+                event.preventDefault();
                 elementItems.item(elementItemIndex).click();
                 break;
             }
             else if (elementItems.item(elementItemIndex).tagName === 'A') {
+                event.preventDefault();
                 window.location.href = elementItems.item(elementItemIndex).href;
                 break;
             }

package/src/handleKeyPress.ts

@@ -4,6 +4,10 @@ import { updateMenuTriggerAriaAttributes } from "./menu/updateMenuTriggerAriaAtt
 function handleMenuEscapeKeyPress(menuElement: HTMLElement, menuTriggerButton: HTMLElement, menuClosedStateAriaLabel: string) {
     menuElement.style.display = 'none';
     const menuTriggerButtonId = menuTriggerButton.getAttribute('id');
+    if(!menuTriggerButtonId) {
+        throw new Error("Menu trigger button does not have id attribute")
+    }
+    
     updateMenuTriggerAriaAttributes(`${menuTriggerButtonId}`, `${menuClosedStateAriaLabel}`)
 }
 
@@ -38,11 +42,12 @@ export function handleKeyPress(event: KeyboardEvent, elementItems: NodeListOfHTM
             break;
         case 'Enter':
         case ' ':
-            event.preventDefault()
             if(elementItems.item(elementItemIndex).tagName === 'BUTTON') {
+                event.preventDefault()
                 elementItems.item(elementItemIndex).click();
                 break;
             } else if (elementItems.item(elementItemIndex).tagName === 'A') {
+                event.preventDefault()
                 window.location.href = elementItems.item(elementItemIndex).href; 
                 break;
             }

package/src/menu/cleanUpMenuEventListeners.js

@@ -1,9 +1,21 @@
 import { handleKeyPress } from "../handleKeyPress";
 export function cleanUpMenuEventListeners(menuId, menuItemsClass) {
     var menuDiv = document.querySelector("#".concat(menuId));
+    if (!menuDiv) {
+        throw new Error("Invalid menu div id provided");
+    }
     var menuItems = menuDiv.querySelectorAll(".".concat(menuItemsClass));
+    if (!menuItems) {
+        throw new Error("Invalid menu items class provided");
+    }
     var triggerId = menuDiv.getAttribute('aria-labelledby');
+    if (!triggerId) {
+        throw new Error("Menu div doesn't contain aria-labelledby attribute");
+    }
     var triggerButton = document.querySelector("#".concat(triggerId));
+    if (!triggerButton) {
+        throw new Error("Menu trigger button id does not match menu div aria-labelledby attribute");
+    }
     menuItems.forEach(function (menuItem, menuItemIndex) {
         menuItem.removeEventListener('keydown', function (event) { return handleKeyPress(event, menuItems, menuItemIndex, menuDiv, triggerButton); });
     });

package/src/menu/cleanUpMenuEventListeners.ts

@@ -4,10 +4,24 @@ import { handleKeyPress } from "../handleKeyPress"
 
 export function cleanUpMenuEventListeners(menuId: string, menuItemsClass: string): void {
     const menuDiv: HTMLElement = document.querySelector(`#${menuId}`) as HTMLElement
+    if(!menuDiv) {
+        throw new Error("Invalid menu div id provided")
+    }
+
     const menuItems: NodeListOfHTMLElement = menuDiv.querySelectorAll(`.${menuItemsClass}`)
+    if(!menuItems) {
+        throw new Error("Invalid menu items class provided")
+    }
 
     const triggerId: string = menuDiv.getAttribute('aria-labelledby') as string
+    if(!triggerId) {
+        throw new Error("Menu div doesn't contain aria-labelledby attribute")
+    }
+
     const triggerButton: HTMLElement = document.querySelector(`#${triggerId}`) as HTMLElement
+    if(!triggerButton) {
+        throw new Error("Menu trigger button id does not match menu div aria-labelledby attribute")
+    }
 
     menuItems.forEach((menuItem: HTMLElement, menuItemIndex: number): void => {
         menuItem.removeEventListener('keydown', (event: KeyboardEvent): void => handleKeyPress(event, menuItems, menuItemIndex, menuDiv, triggerButton));

package/src/menu/makeMenuAccessible.js

@@ -7,15 +7,32 @@ import { handleKeyPress } from '../handleKeyPress';
 var eventListenersAdded = new Set();
 export function makeMenuAccessible(menuId, menuItemsClass) {
     var menuDiv = document.querySelector("#".concat(menuId));
+    if (!menuDiv) {
+        throw new Error("Invalid menu div id provided");
+    }
     var menuItems = menuDiv.querySelectorAll(".".concat(menuItemsClass));
     var triggerId = menuDiv.getAttribute('aria-labelledby');
+    if (!triggerId) {
+        throw new Error("Menu div doesn't contain aria-labelledby attribute");
+    }
     var triggerButton = document.querySelector("#".concat(triggerId));
+    if (!triggerButton) {
+        throw new Error("Menu trigger button id does not match menu div aria-labelledby attribute");
+    }
     var menuClosedStateAriaLabel = triggerButton.getAttribute('aria-label');
-    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, menuClosedStateAriaLabel); });
-        }
-    });
+    if (!menuClosedStateAriaLabel) {
+        throw new Error("Menu trigger button does not have initial aria-label");
+    }
+    if (menuItems && menuItems.length > 0) {
+        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, menuClosedStateAriaLabel); });
+            }
+        });
+    }
+    else {
+        throw new Error("Invalid menu items class provided");
+    }
 }

package/src/menu/makeMenuAccessible.ts

@@ -11,18 +11,36 @@ let eventListenersAdded: Set<HTMLElement> = new Set();
 
 export function makeMenuAccessible(menuId: string, menuItemsClass: string): void {
     const menuDiv: HTMLElement = document.querySelector(`#${menuId}`) as HTMLElement;
-    const menuItems: NodeListOfHTMLElement = menuDiv.querySelectorAll(`.${menuItemsClass}`);
+    if(!menuDiv) {
+        throw new Error("Invalid menu div id provided")
+    }
 
+    const menuItems: NodeListOfHTMLElement = menuDiv.querySelectorAll(`.${menuItemsClass}`);
+    
     const triggerId: string = menuDiv.getAttribute('aria-labelledby') as string;
+    if(!triggerId) {
+        throw new Error("Menu div doesn't contain aria-labelledby attribute")
+    }
+
     const triggerButton: HTMLElement = document.querySelector(`#${triggerId}`) as HTMLElement;
+    if(!triggerButton) {
+        throw new Error("Menu trigger button id does not match menu div aria-labelledby attribute")
+    }
 
     const menuClosedStateAriaLabel: string = triggerButton.getAttribute('aria-label')  as string;
+    if(!menuClosedStateAriaLabel) {
+        throw new Error("Menu trigger button does not have initial aria-label")
+    }
 
-    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));
-        }
-    })
+    if(menuItems && menuItems.length > 0) {
+        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));
+            }
+        })
+    } else {
+        throw new Error("Invalid menu items class provided")
+    }
 }

package/src/menu/updateMenuTriggerAriaAttributes.js

@@ -5,7 +5,13 @@
  */
 export function updateMenuTriggerAriaAttributes(triggerId, ariaLabel) {
     var triggerButton = document.querySelector("#".concat(triggerId));
+    if (!triggerButton) {
+        throw new Error("Invalid menu trigger button id provided");
+    }
     var currentAriaExpandedState = triggerButton.getAttribute('aria-expanded');
+    if (!currentAriaExpandedState) {
+        throw new Error("Menu trigger button does not have aria-expanded attribute");
+    }
     function triggerOpen(ariaLabel) {
         triggerButton.setAttribute('aria-expanded', 'true');
         triggerButton.setAttribute('aria-label', ariaLabel);

package/src/menu/updateMenuTriggerAriaAttributes.ts

@@ -8,8 +8,14 @@ import { HTMLElement } from "../../Types";
 
 export function updateMenuTriggerAriaAttributes(triggerId: string, ariaLabel: string): void {
     const triggerButton: HTMLElement = document.querySelector(`#${triggerId}`) as HTMLElement
+    if(!triggerButton) {
+        throw new Error("Invalid menu trigger button id provided")
+    }
 
     const currentAriaExpandedState: string = triggerButton.getAttribute('aria-expanded') as string
+    if(!currentAriaExpandedState) {
+        throw new Error("Menu trigger button does not have aria-expanded attribute")
+    }
 
     function triggerOpen(ariaLabel: string): void {
         triggerButton.setAttribute('aria-expanded', 'true')