aria-ease 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Isaac
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,38 @@
+# Aria-Ease
+
+Out of the box utility accessibility package to develop production ready applications.
+
+## Install
+
+`npm i aria-ease`
+
+## Usage
+
+```
+import { makeMenuAccessible } from "aria-ease"
+
+const App = () => {
+  const toggleMenuDisplay = () => {
+    const menu: HTMLElement = document.querySelector('#custom-menu') as HTMLElement
+    if(getComputedStyle(menu).display === 'none') {
+      menu.style.display = 'block'
+      makeMenuAccessible('custom-menu', 'profile-menu-item');
+    } else {
+      menu.style.display = 'none'
+    }
+  }
+
+  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>
+      </div>
+    </div>
+  )
+}
+
+export default App
+```

package/Types.d.ts

@@ -0,0 +1,9 @@
+declare global {
+    type HTMLElement = Element;
+    type NodeListOf<HTMLElement> = Iterable<HTMLElement>;
+}
+  
+export {
+    HTMLElement,
+    NodeListOfHTMLElement,
+};

package/aria-ease.d.ts

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

package/index.js

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

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "aria-ease",
+  "version": "1.0.0",
+  "description": "Out of the box utility accessibility package to develop production ready applications.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Scriptkidd98/aria-ease.git"
+  },
+  "keywords": [
+    "ARIA",
+    "Accessibility"
+  ],
+  "author": "Isaac Akinduyile",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Scriptkidd98/aria-ease/issues"
+  },
+  "homepage": "https://github.com/Scriptkidd98/aria-ease#readme",
+  "types": "./aria-ease.d.ts"
+}

package/src/menu/makeMenuAccessible.js

@@ -0,0 +1,42 @@
+"use strict";
+/**
+ * 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
+ **/
+
+function makeMenuAccessible(menu, menuItem) {
+    var menuDiv = document.querySelector("#".concat(menu));
+    var menuItems = menuDiv.querySelectorAll(".".concat(menuItem));
+    menuItems.item(0).focus();
+    menuItems.forEach(function (menuItem, menuItemIndex) {
+        menuItem.addEventListener('keydown', function (event) { return handleKeyPress(event, menuItems, menuItemIndex); });
+    });
+    function handleKeyPress(event, menuItems, menuItemIndex) {
+        event.preventDefault();
+        switch (event.key) {
+            case 'ArrowUp':
+            case 'ArrowLeft':
+                if (menuItemIndex === 0) {
+                    menuItems.item(menuItems.length - 1).focus();
+                }
+                else {
+                    menuItems.item(menuItemIndex - 1).focus();
+                }
+                break;
+            case 'ArrowDown':
+            case 'ArrowRight':
+                if (menuItemIndex === menuItems.length - 1) {
+                    menuItems.item(0).focus();
+                }
+                else {
+                    menuItems.item(menuItemIndex + 1).focus();
+                }
+                break;
+            default:
+                break;
+        }
+    }
+}
+
+export { makeMenuAccessible }

package/src/menu/makeMenuAccessible.ts

@@ -0,0 +1,41 @@
+/**
+ * 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
+ **/
+
+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}`)
+    
+    menuItems.item(0).focus();
+    menuItems.forEach((menuItem: HTMLElement, menuItemIndex: number) => {
+        menuItem.addEventListener('keydown', (event: KeyboardEvent) => handleKeyPress(event, menuItems, menuItemIndex))
+    })
+
+    function handleKeyPress(event: KeyboardEvent, menuItems: NodeListOfHTMLElement, menuItemIndex: number): void {
+        event.preventDefault()
+        switch(event.key) {
+            case 'ArrowUp':
+            case 'ArrowLeft':
+                if (menuItemIndex === 0) {
+                    menuItems.item(menuItems.length - 1).focus();
+                } else {
+                    menuItems.item(menuItemIndex - 1).focus();
+                }
+                break;
+            case 'ArrowDown':
+            case 'ArrowRight':
+                if (menuItemIndex === menuItems.length - 1) {
+                    menuItems.item(0).focus();
+                } else {
+                    menuItems.item(menuItemIndex + 1).focus();
+                }
+                break;
+            default:
+                break;
+        }
+    }
+}

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+      "target": "es5",
+      "lib": ["dom", "dom.iterable", "esnext"],
+      "allowJs": true,
+      "skipLibCheck": true,
+      "esModuleInterop": false,
+      "allowSyntheticDefaultImports": true,
+      "strict": true,
+      "forceConsistentCasingInFileNames": true
+    },
+    "include": ["src"]
+  }
+