aria-ease 1.2.8 → 1.3.0

package/README.md

@@ -17,21 +17,24 @@ The updateMenuTriggerAriaAttributes function take two string arguments; the id o
 #### Usage
 
 ```
-import { makeMenuAccessible, updateMenuTriggerAriaAttributes } from "aria-ease"
-
-const App = () => {
-  const toggleMenuDisplay = (): void => {
-    const menu: HTMLElement = document.querySelector('#custom-menu') as HTMLElement
-    if(getComputedStyle(menu).display === 'none') {
-      menu.style.display = 'block'
-      makeMenuAccessible('custom-menu', 'profile-menu-item');
-      updateMenuTriggerAriaAttributes('display-button', 'Hide profile menu')
-    } else {
-      menu.style.display = 'none'
-      updateMenuTriggerAriaAttributes('display-button', 'Display profile menu')
+import { makeMenuAccessible, updateMenuTriggerAriaAttributes, cleanUpMenuEventListeners } from 'aria-ease'
+
+const HomeExampleMenu = () => {
+  const toggleMenuDisplay = (event) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      const menu = document.querySelector('#custom-menu');
+      if (getComputedStyle(menu).display === 'none') {
+        menu.style.display = 'block';
+        makeMenuAccessible('custom-menu', 'profile-menu-item');
+        updateMenuTriggerAriaAttributes('display-button', 'Hide profile menu');
+      } else {
+        cleanUpMenuEventListeners('custom-menu', 'profile-menu-item');
+        menu.style.display = 'none';
+        updateMenuTriggerAriaAttributes('display-button', 'Display profile menu');
+      }
     }
-  }
-
+  };
   return (
     <div>
       <button
@@ -42,19 +45,21 @@ const App = () => {
         aria-expanded={false}
         aria-controls="custom-menu"
         aria-label="Display profile menu"
+        className='home-menu-example-trigger-button block-interactive'
+        onKeyDown={toggleMenuDisplay}
       >
-        Display
+        Display Example Menu
       </button>
       <div id="custom-menu" role="menu" aria-labelledby="display-button" style={{display: 'none', marginTop: '5px'}}>
-        <button role="menuitem" className="profile-menu-item">One</button>
-        <button role="menuitem" className="profile-menu-item">Two</button>
-        <button role="menuitem" className="profile-menu-item">Three</button>
+        <button role="menuitem" className="profile-menu-item" onClick={() => alert('Button clicked')}>One</button>
+        <button role="menuitem" className="profile-menu-item" onClick={() => alert('Button clicked')}>Two</button>
+        <button role="menuitem" className="profile-menu-item" onClick={() => alert('Button clicked')}>Three</button>
       </div>
     </div>
   )
 }
 
-export default App
+export default HomeExampleMenu
 ```
 
 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.
@@ -69,7 +74,9 @@ import { makeBlockAccessible } from "aria-ease"
 
 const App = () => {
   useEffect(() => {
-    makeBlockAccessible('custom-tab', 'custom-tab-item')
+    const cleanUp = makeBlockAccessible('custom-tab', 'custom-tab-item')
+
+    return cleanUp
   },[])
 
   return (

package/aria-ease.d.ts

@@ -14,7 +14,7 @@ declare module 'aria-ease' {
      * @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): void;
+    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.

package/package.json

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

package/src/block/makeBlockAccessible.js

@@ -14,4 +14,12 @@ export function makeBlockAccessible(blockId, blockItemClass) {
             blockItem.addEventListener('keydown', function (event) { return handleKeyPress(event, blockItems, blockItemIndex); });
         }
     });
+    return function cleanUpBlockEventListeners() {
+        blockItems.forEach(function (blockItem, blockItemIndex) {
+            if (eventListenersAdded.has(blockItem)) {
+                blockItem.removeEventListener('keydown', function (event) { return handleKeyPress(event, blockItems, blockItemIndex); });
+                eventListenersAdded.delete(blockItem);
+            }
+        });
+    };
 }

package/src/block/makeBlockAccessible.ts

@@ -9,15 +9,23 @@ 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}`)
+export function makeBlockAccessible(blockId: string, blockItemClass: string) {
+  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));
+    }
+  });
+
+  return function cleanUpBlockEventListeners(): void {
     blockItems.forEach((blockItem: HTMLElement, blockItemIndex: number): void => {
-        if (!eventListenersAdded.has(blockItem)) {
-          eventListenersAdded.add(blockItem);
-          blockItem.addEventListener('keydown', (event: KeyboardEvent) => handleKeyPress(event, blockItems, blockItemIndex));
-        }
+      if (eventListenersAdded.has(blockItem)) {
+        blockItem.removeEventListener('keydown', (event: KeyboardEvent) => handleKeyPress(event, blockItems, blockItemIndex));
+        eventListenersAdded.delete(blockItem);
+      }
     });
-
+  };
 }

package/src/menu/makeMenuAccessible.js

@@ -10,13 +10,11 @@ export function makeMenuAccessible(menuId, menuItemClass) {
     var menuItems = menuDiv.querySelectorAll(".".concat(menuItemClass));
     var triggerId = menuDiv.getAttribute('aria-labelledby');
     var triggerButton = document.querySelector("#".concat(triggerId));
-    if (window.innerWidth >= 992) {
-        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); });
-            }
-        });
-    }
+    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

@@ -16,13 +16,11 @@ 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
 
-    if(window.innerWidth >= 992) {
-        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))
-            }
-        })
-    }
+    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))
+        }
+    })
 }