aria-ease 1.0.2 → 1.0.4

package/aria-ease.d.ts

@@ -1,3 +1,5 @@
 declare module 'aria-ease';
 
-declare function makeMenuAccessible(menuId: string, menuItemClass: string): void;
+declare function makeMenuAccessible(menuId: string, menuItemClass: string): void;
+
+export { makeMenuAccessible }

package/package.json

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

package/src/menu/makeMenuAccessible.js

@@ -6,6 +6,8 @@
 export function makeMenuAccessible(menu, menuItem) {
     var menuDiv = document.querySelector("#".concat(menu));
     var menuItems = menuDiv.querySelectorAll(".".concat(menuItem));
+    var triggerId = menuDiv.getAttribute('aria-labelledby');
+    var triggerButton = document.querySelector("#".concat(triggerId));
     menuItems.item(0).focus();
     menuItems.forEach(function (menuItem, menuItemIndex) {
         menuItem.addEventListener('keydown', function (event) { return handleKeyPress(event, menuItems, menuItemIndex); });
@@ -31,6 +33,12 @@ export function makeMenuAccessible(menu, menuItem) {
                     menuItems.item(menuItemIndex + 1).focus();
                 }
                 break;
+            case 'Escape':
+                (getComputedStyle(menuDiv).display === 'block') ?
+                    triggerButton.click() :
+                    null;
+                triggerButton.focus();
+                break;
             default:
                 break;
         }

package/src/menu/makeMenuAccessible.ts

@@ -9,7 +9,10 @@ import { HTMLElement, NodeListOfHTMLElement } from '../../Types'
 export function makeMenuAccessible(menu: string, menuItem: string): void {
     const menuDiv: HTMLElement = document.querySelector(`#${menu}`) as HTMLElement
     const menuItems: NodeListOfHTMLElement = menuDiv.querySelectorAll(`.${menuItem}`)
-    
+
+    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) => {
         menuItem.addEventListener('keydown', (event: KeyboardEvent) => handleKeyPress(event, menuItems, menuItemIndex))
@@ -34,6 +37,12 @@ export function makeMenuAccessible(menu: string, menuItem: string): void {
                     menuItems.item(menuItemIndex + 1).focus();
                 }
                 break;
+            case 'Escape':
+                (getComputedStyle(menuDiv).display === 'block') ?
+                    triggerButton.click() :
+                    null
+                triggerButton.focus()
+                break;
             default:
                 break;
         }