aria-ease 1.0.8 → 1.0.9

package/README.md

@@ -6,10 +6,18 @@ Out of the box accessibility utility package to develop production ready applica
 
 `npm i aria-ease`
 
-## Usage
+## Features
+
+Add accessibility to menu: menu can be dropdown, side menu, slide navigation. Basically any component that toggles display and has a list of children items. The function creates a focus trap within the menu and the focus can be navigated using the arrow keys. The escape key also closes the menu and returns the focus back to the trigger.
+
+The makeMenuAccessible function takes two string arguments; the id of the menu, and the class name of the children item of the menu. And should only be invoked after the menu has become visible or added to the DOM.
+
+The updateMenuTriggerAriaAttributes function take two string arguments; the id of the menu trigger, and the aria-label that will replace the current one in the DOM. Behind the scene the aria-expanded and aria-attributes are also updated based on the visibility of the menu.
+
+#### Usage
 
 ```
-import { makeMenuAccessible, makeTabAccessible, updateMenuTriggerAriaAttributes } from "aria-ease"
+import { makeMenuAccessible, updateMenuTriggerAriaAttributes } from "aria-ease"
 
 const App = () => {
   const toggleMenuDisplay = (): void => {
@@ -24,10 +32,6 @@ const App = () => {
     }
   }
 
-  const handleTabButtonClick = (): void => {
-    makeTabAccessible('custom-tab', 'custom-tab-item')
-  }
-
   return (
     <div>
       <button
@@ -46,7 +50,29 @@ const App = () => {
         <button role="menuitem" className="profile-menu-item">Two</button>
         <button role="menuitem" className="profile-menu-item">Three</button>
       </div>
-      TS
+    </div>
+  )
+}
+
+export default App
+```
+
+Add accessibility to tab: tab can be tabs, interactive sliders and carousels. Basically any component that is permanently displayed and has a list of interractive children items. The function creates a focus trap within the tab 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 when any of the interractive children item (e.g button) of the tab is clicked. The clicked button gets focused and the focus can be navigated using the arrow keys.
+
+#### Usage
+
+```
+import { makeTabAccessible } from "aria-ease"
+
+const App = () => {
+  const handleTabButtonClick = (): void => {
+    makeTabAccessible('custom-tab', 'custom-tab-item')
+  }
+
+  return (
+    <div>
       <div id="custom-tab">
         <button className="custom-tab-item" onClick={handleTabButtonClick}>One</button>
         <button className="custom-tab-item" onClick={handleTabButtonClick}>Two</button>

package/aria-ease.d.ts

@@ -21,7 +21,8 @@ declare module 'aria-ease' {
      * @param {string} triggerId The id of the trigger button that toggles the menu.
      * @param {string} ariaLabel The aria-label to be updated.
      */
-    declare function updateMenuTriggerAriaAttributes(triggerId: string, ariaLabel: string): void;
+    export declare function updateMenuTriggerAriaAttributes(triggerId: string, ariaLabel: string): void;
+
 
 
   

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aria-ease",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "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/updateMenuTriggerAriaAttributes.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Updates the aria attributes of the menu trigger button. Trigger button element must possess the following aria attributes; aria-expanded, aria-pressed, aria-label.
+ * @param {string} triggerId The id of the trigger button that toggles the menu.
+ * @param {string} ariaLabel The aria-label to be updated.
+ */
+export declare function updateMenuTriggerAriaAttributes(triggerId: string, ariaLabel: string): 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/tsconfig.json

@@ -10,7 +10,7 @@
       "forceConsistentCasingInFileNames": true,
       "module": "es2015",
       "moduleResolution": "node",
-      "declaration": false
+      "declaration": true
     },
     "include": ["src"]
   }