aria-ease 1.0.4 → 1.0.6

package/README.md

@@ -9,10 +9,10 @@ Out of the box accessibility utility package to develop production ready applica
 ## Usage
 
 ```
-import { makeMenuAccessible } from "aria-ease"
+import { makeMenuAccessible, makeTabAccessible } from "aria-ease"
 
 const App = () => {
-  const toggleMenuDisplay = () => {
+  const toggleMenuDisplay = (): void => {
     const menu: HTMLElement = document.querySelector('#custom-menu') as HTMLElement
     if(getComputedStyle(menu).display === 'none') {
       menu.style.display = 'block'
@@ -22,13 +22,25 @@ const App = () => {
     }
   }
 
+  const handleTabButtonClick = (): void => {
+    makeTabAccessible('custom-tab', 'custom-tab-item')
+  }
+
   return (
     <div>
-      <button onClick={toggleMenuDisplay}>Display</button>
-      <div id="custom-menu" role="menu">
-        <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 id="display-button" onClick={toggleMenuDisplay}>Display</button>
+        <div id="custom-menu" role="menu" aria-labelledby="display-button">
+          <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>
+        </div>
+      </>
+
+      <div id="custom-tab">
+        <button className="custom-tab-item" onClick={handleTabButtonClick}>One</button>
+        <button className="custom-tab-item" onClick={handleTabButtonClick}>Two</button>
+        <button className="custom-tab-item" onClick={handleTabButtonClick}>Three</button>
       </div>
     </div>
   )

package/aria-ease.d.ts

@@ -1,5 +1,21 @@
-declare module 'aria-ease';
-
-declare function makeMenuAccessible(menuId: string, menuItemClass: string): void;
-
-export { makeMenuAccessible }
+/**
+ * Declares the module 'aria-ease' and includes type information and JSDoc comments.
+ */
+declare module 'aria-ease' {
+    /**
+     * Adds keyboard navigation to toggle menu. The menu traps focus and can be interacted with using the keyboard. The first item of the menu has focus when menu appears.
+     * @param {string} menuId - The id of the menu.
+     * @param {string} menuItemClass - The class of the items that are children of the menu.
+     */
+    declare function makeMenuAccessible(menuId: string, menuItemClass: string): void;
+  
+    /**
+     * Adds keyboard navigation 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.
+     */
+    declare function makeTabAccessible(tabId: string, tabItemClass: string): void;
+  
+    export { makeMenuAccessible, makeTabAccessible };
+  }
+  

package/index.js

@@ -1,5 +1,7 @@
 import { makeMenuAccessible } from './src/menu/makeMenuAccessible.js'
+import { makeTabAccessible } from './src/tab/makeTabAccessible.js'
 
 export {
-    makeMenuAccessible
+    makeMenuAccessible,
+    makeTabAccessible
 }

package/package.json

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

package/src/menu/makeMenuAccessible.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Adds keyboard navigation to toggle menu. The menu traps focus and can be interacted with using the keyboard. The first item of the menu has focus when menu appears.
+ * @param {string} menuId The id of the menu
+ * @param {string} menuItemClass The class of the items that are children of the menu
+*/
+export declare function makeMenuAccessible(menuId: string, menuItemClass: string): void;

package/src/menu/makeMenuAccessible.js

@@ -1,11 +1,11 @@
 /**
- * Adds keyboard navigation to menu.
- * @param {string} menu The id of the menu
- * @param {string} menuItem The class of the items that are children of the menu
- **/
-export function makeMenuAccessible(menu, menuItem) {
-    var menuDiv = document.querySelector("#".concat(menu));
-    var menuItems = menuDiv.querySelectorAll(".".concat(menuItem));
+ * Adds keyboard navigation to toggle menu. The menu traps focus and can be interacted with using the keyboard. The first item of the menu has focus when menu appears.
+ * @param {string} menuId The id of the menu
+ * @param {string} menuItemClass The class of the items that are children of the menu
+*/
+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();

package/src/menu/makeMenuAccessible.ts

@@ -1,21 +1,21 @@
 /**
- * Adds keyboard navigation to menu.
- * @param {string} menu The id of the menu
- * @param {string} menuItem The class of the items that are children of the menu
- **/
+ * Adds keyboard navigation to toggle menu. The menu traps focus and can be interacted with using the keyboard. The first item of the menu has focus when menu appears.
+ * @param {string} menuId The id of the menu
+ * @param {string} menuItemClass The class of the items that are children of the menu
+*/
 
 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}`)
+export function makeMenuAccessible(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.item(0).focus();
-    menuItems.forEach((menuItem: HTMLElement, menuItemIndex: number) => {
-        menuItem.addEventListener('keydown', (event: KeyboardEvent) => handleKeyPress(event, menuItems, menuItemIndex))
+    menuItems.forEach((menuItem: HTMLElement, menuItemIndex: number): void => {
+        menuItem.addEventListener('keydown', (event: KeyboardEvent): void => handleKeyPress(event, menuItems, menuItemIndex))
     })
 
     function handleKeyPress(event: KeyboardEvent, menuItems: NodeListOfHTMLElement, menuItemIndex: number): void {

package/src/tab/makeTabAccessible.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Adds keyboard navigation 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
+*/
+export declare function makeTabAccessible(tabId: string, tabItemClass: string): void;

package/src/tab/makeTabAccessible.js

@@ -0,0 +1,37 @@
+/**
+ * Adds keyboard navigation 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
+*/
+export function makeTabAccessible(tabId, tabItemClass) {
+    var tabDiv = document.querySelector("#".concat(tabId));
+    var tabItems = tabDiv.querySelectorAll(".".concat(tabItemClass));
+    tabItems.forEach(function (tabItem, tabItemIndex) {
+        tabItem.addEventListener('keydown', function (event) { return handleKeyPress(event, tabItems, tabItemIndex); });
+    });
+    function handleKeyPress(event, tabItems, tabItemIndex) {
+        event.preventDefault();
+        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;
+            default:
+                break;
+        }
+    }
+}

package/src/tab/makeTabAccessible.ts

@@ -0,0 +1,40 @@
+/** 
+ * Adds keyboard navigation 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"
+
+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 => {
+        tabItem.addEventListener('keydown', (event: KeyboardEvent) => handleKeyPress(event, tabItems, tabItemIndex))
+    })
+
+    function handleKeyPress(event: KeyboardEvent, tabItems: NodeListOfHTMLElement, tabItemIndex: number): void {
+        event.preventDefault()
+        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;
+            default:
+                break;
+        }
+    }
+}

package/tsconfig.json

@@ -9,7 +9,8 @@
       "strict": true,
       "forceConsistentCasingInFileNames": true,
       "module": "es2015",
-      "moduleResolution": "node"
+      "moduleResolution": "node",
+      "declaration": true
     },
     "include": ["src"]
   }