aria-ease 1.2.2 → 1.2.4

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.
@@ -23,6 +23,6 @@ declare module 'aria-ease' {
      */
     function updateMenuTriggerAriaAttributes(triggerId: string, ariaLabel: string): void;
   
-    export { makeMenuAccessible, makeTabAccessible, updateMenuTriggerAriaAttributes };
+    export { makeMenuAccessible, makeBlockAccessible, updateMenuTriggerAriaAttributes };
   }
   

package/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aria-ease",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "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,62 @@
+/**
+ * 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
+*/
+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); });
+        }
+    });
+    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

@@ -0,0 +1,63 @@
+/** 
+ * 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"
+
+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));
+        }
+      });
+
+    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/menu/makeMenuAccessible.js

@@ -20,6 +20,7 @@ export function makeMenuAccessible(menuId, menuItemClass) {
         switch (event.key) {
             case 'ArrowUp':
             case 'ArrowLeft':
+                event.preventDefault();
                 if (menuItemIndex === 0) {
                     menuItems.item(menuItems.length - 1).focus();
                 }
@@ -29,6 +30,7 @@ export function makeMenuAccessible(menuId, menuItemClass) {
                 break;
             case 'ArrowDown':
             case 'ArrowRight':
+                event.preventDefault();
                 if (menuItemIndex === menuItems.length - 1) {
                     menuItems.item(0).focus();
                 }
@@ -37,6 +39,7 @@ export function makeMenuAccessible(menuId, menuItemClass) {
                 }
                 break;
             case 'Escape':
+                event.preventDefault();
                 (getComputedStyle(menuDiv).display === 'block') ?
                     triggerButton.click() :
                     null;
@@ -44,12 +47,12 @@ export function makeMenuAccessible(menuId, menuItemClass) {
                 break;
             case 'Enter':
             case ' ':
+                event.preventDefault();
                 if (menuItems.item(menuItemIndex).tagName === 'BUTTON') {
                     menuItems.item(menuItemIndex).click();
                     break;
                 }
                 else if (menuItems.item(menuItemIndex).tagName === 'A') {
-                    event.preventDefault();
                     window.location.href = menuItems.item(menuItemIndex).href;
                     break;
                 }

package/src/menu/makeMenuAccessible.ts

@@ -57,7 +57,6 @@ export function makeMenuAccessible(menuId: string, menuItemClass: string): void
                     menuItems.item(menuItemIndex).click()
                     break;
                 } else if (menuItems.item(menuItemIndex).tagName === 'A') {
-                    event.preventDefault();
                     window.location.href = menuItems.item(menuItemIndex).href; 
                     break;
                 } else if (menuItems.item(menuItemIndex).type === 'radio') {

package/src/tab/makeTabAccessible.js

@@ -1,60 +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':
-                if (tabItemIndex === 0) {
-                    tabItems.item(tabItems.length - 1).focus();
-                }
-                else {
-                    tabItems.item(tabItemIndex - 1).focus();
-                }
-                break;
-            case 'ArrowDown':
-            case 'ArrowRight':
-                if (tabItemIndex === tabItems.length - 1) {
-                    tabItems.item(0).focus();
-                }
-                else {
-                    tabItems.item(tabItemIndex + 1).focus();
-                }
-                break;
-            case 'Enter':
-            case ' ':
-                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') {
-                    event.preventDefault();
-                    window.location.href = tabItems.item(tabItemIndex).href;
-                    break;
-                }
-                break;
-            default:
-                break;
-        }
-    }
-}

package/src/tab/makeTabAccessible.ts

@@ -1,64 +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') {
-                    event.preventDefault()
-                    window.location.href = tabItems.item(tabItemIndex).href
-                    break;
-                }
-                break;
-            default:
-                break;
-        }
-    }
-}