aria-ease 1.4.0 → 1.4.2

package/README.md

@@ -14,7 +14,7 @@ The package currently has support for 5 components: accordions, blocks, checkbox
 
 Add accessibility to menu: menu can be a dropdown, side menu, slide navigation e.t.c. Basically any component that toggles display and has a list of interactive children items. The function creates a focus trap within the menu and 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, 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. When the menu is visible the first item of the menu is in focus and focus can be navigated using the arrow keys
+The makeMenuAccessible function takes two string arguments; the id of the menu, the class name of the children items of the menu. And should only be invoked after the menu has become visible or added to the DOM. When the menu is visible the first item of the menu is in focus and focus can be navigated using the Arrow keys. The Space and Enter keys clicks the menu item if they are buttons or links element. The Escape key closes the menu, and returns the focus back to the button that toggles the menu. The Tab key exits the trap.
 
 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.
 
@@ -27,13 +27,13 @@ const MenuExample = () => {
   const toggleMenuDisplay = (event) => {
     if (event.type === 'mousedown' || (event.type === 'keydown' && (event.key === 'Enter' || event.key === ' '))) {
       event.preventDefault();
-      const menu = document.querySelector('#custom-menu');
+      const menu = document.querySelector('#menu-div');
       if (getComputedStyle(menu).display === 'none') {
         menu.style.display = 'block';
-        makeMenuAccessible('custom-menu', 'profile-menu-item');
+        makeMenuAccessible('menu-div', 'menu-interactive-items');
         updateMenuTriggerAriaAttributes('display-button', 'Close profile menu');
       } else {
-        cleanUpMenuEventListeners('custom-menu', 'profile-menu-item');
+        cleanUpMenuEventListeners('menu-div', 'menu-interactive-items');
         menu.style.display = 'none';
         updateMenuTriggerAriaAttributes('display-button', 'Close profile menu');
       }
@@ -48,17 +48,17 @@ const MenuExample = () => {
         aria-haspopup={true}
         role="button"
         aria-expanded={false}
-        aria-controls="custom-menu"
+        aria-controls="menu-div"
         aria-label="Display profile menu"
-        className='menu-example-trigger-button block-interactive'
+        className='menu-example-trigger-button'
         onKeyDown={toggleMenuDisplay}
       >
         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" 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 id="menu-div" role="menu" aria-labelledby="display-button" style={{display: 'none', marginTop: '5px'}}>
+        <button role="menuitem" className="menu-interactive-items" onClick={() => alert('Button clicked')}>One</button>
+        <button role="menuitem" className="menu-interactive-items" onClick={() => alert('Button clicked')}>Two</button>
+        <button role="menuitem" className="menu-interactive-items" onClick={() => alert('Button clicked')}>Three</button>
       </div>
     </div>
   )
@@ -69,7 +69,7 @@ export default MenuExample
 
 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 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.
+The makeBlockAccessible function takes two string arguments; the id of the block main div, and the class name of the children items 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
 
@@ -79,16 +79,16 @@ import { makeBlockAccessible } from "aria-ease"
 
 const BlockExample = () => {
   useEffect(() => {
-    const accessibleBlock = makeBlockAccessible('custom-tab', 'custom-tab-item');
+    const accessibleBlock = makeBlockAccessible('block-div', 'block-div-interactive-items');
     return accessibleBlock;
   },[])
 
   return (
     <div>
-      <div id="custom-tab">
-        <button className="custom-tab-item">One</button>
-        <button className="custom-tab-item">Two</button>
-        <button className="custom-tab-item">Three</button>
+      <div id="block-div">
+        <button className="block-div-interactive-items">One</button>
+        <button className="block-div-interactive-items">Two</button>
+        <button className="block-div-interactive-items">Three</button>
       </div>
     </div>
   )

package/aria-ease.d.ts

@@ -8,16 +8,16 @@ declare module 'aria-ease' {
     /**
      * Adds keyboard interaction 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.
+     * @param {string} menuItemsClass - The class of the items that are children of the menu.
     */
-    function makeMenuAccessible(menuId: string, menuItemClass: string): void;
+    function makeMenuAccessible(menuId: string, menuItemsClass: string): void;
   
     /**
      * 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.
+     * @param {string} blockItemsClass - The class of the individual block items.
     */
-    function makeBlockAccessible(blockId: string, blockItemClass: string);
+    function makeBlockAccessible(blockId: string, blockItemsClass: string);
 
     /**
      * Updates the aria attributes of the menu trigger button. Trigger button element must possess the following aria attributes; aria-expanded and aria-label.
@@ -29,9 +29,9 @@ declare module 'aria-ease' {
     /**
      * Cleans up the event listeners that were added to childen items of the menu, to prevent memory leak.
      * @param {string} menuId The id of the menu
-     * @param {string} menuItemClass The class of the items that are children of the menu
+     * @param {string} menuItemsClass The class of the items that are children of the menu
     */
-   function cleanUpMenuEventListeners(menuId: string, menuItemClass: string): void;
+   function cleanUpMenuEventListeners(menuId: string, menuItemsClass: string): void;
 
    /**
      * Adds screen reader accessibility to accordions. Updates the aria attributes of the accordion trigger button. Trigger button element must possess the following aria attributes; aria-expanded and aria-label.

package/package.json

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

package/src/block/makeBlockAccessible.js

@@ -1,13 +1,13 @@
 /**
  * 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 shared class of the items that are children of the block
+ * @param {string} blockItemsClass The shared class of the items that are children of thes block
 */
 import { handleKeyPress } from '../handleKeyPress';
 var eventListenersAdded = new Set();
-export function makeBlockAccessible(blockId, blockItemClass) {
+export function makeBlockAccessible(blockId, blockItemsClass) {
     var blockDiv = document.querySelector("#".concat(blockId));
-    var blockItems = blockDiv.querySelectorAll(".".concat(blockItemClass));
+    var blockItems = blockDiv.querySelectorAll(".".concat(blockItemsClass));
     blockItems.forEach(function (blockItem, blockItemIndex) {
         if (!eventListenersAdded.has(blockItem)) {
             eventListenersAdded.add(blockItem);

package/src/block/makeBlockAccessible.ts

@@ -1,7 +1,7 @@
 /** 
  * 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 shared class of the items that are children of the block
+ * @param {string} blockItemsClass The shared class of the items that are children of thes block
 */
 
 import { HTMLElement, NodeListOfHTMLElement } from "../../Types"
@@ -9,9 +9,9 @@ import { handleKeyPress } from '../handleKeyPress';
 
 let eventListenersAdded: Set<HTMLElement> = new Set();
 
-export function makeBlockAccessible(blockId: string, blockItemClass: string) {
+export function makeBlockAccessible(blockId: string, blockItemsClass: string) {
   const blockDiv: HTMLElement = document.querySelector(`#${blockId}`) as HTMLElement
-  const blockItems: NodeListOfHTMLElement = blockDiv.querySelectorAll(`.${blockItemClass}`)
+  const blockItems: NodeListOfHTMLElement = blockDiv.querySelectorAll(`.${blockItemsClass}`)
 
   blockItems.forEach((blockItem: HTMLElement, blockItemIndex: number): void => {
     if (!eventListenersAdded.has(blockItem)) {

package/src/menu/cleanUpMenuEventListeners.js

@@ -1,7 +1,7 @@
 import { handleKeyPress } from "../handleKeyPress";
-export function cleanUpMenuEventListeners(menuId, menuItemClass) {
+export function cleanUpMenuEventListeners(menuId, menuItemsClass) {
     var menuDiv = document.querySelector("#".concat(menuId));
-    var menuItems = menuDiv.querySelectorAll(".".concat(menuItemClass));
+    var menuItems = menuDiv.querySelectorAll(".".concat(menuItemsClass));
     var triggerId = menuDiv.getAttribute('aria-labelledby');
     var triggerButton = document.querySelector("#".concat(triggerId));
     menuItems.forEach(function (menuItem, menuItemIndex) {

package/src/menu/cleanUpMenuEventListeners.ts

@@ -2,9 +2,9 @@ import { NodeListOfHTMLElement } from "../../Types"
 import { handleKeyPress } from "../handleKeyPress"
 
 
-export function cleanUpMenuEventListeners(menuId: string, menuItemClass: string): void {
+export function cleanUpMenuEventListeners(menuId: string, menuItemsClass: string): void {
     const menuDiv: HTMLElement = document.querySelector(`#${menuId}`) as HTMLElement
-    const menuItems: NodeListOfHTMLElement = menuDiv.querySelectorAll(`.${menuItemClass}`)
+    const menuItems: NodeListOfHTMLElement = menuDiv.querySelectorAll(`.${menuItemsClass}`)
 
     const triggerId: string = menuDiv.getAttribute('aria-labelledby') as string
     const triggerButton: HTMLElement = document.querySelector(`#${triggerId}`) as HTMLElement

package/src/menu/makeMenuAccessible.js

@@ -1,13 +1,13 @@
 /**
  * Adds keyboard interaction 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 shared class of the items that are children of the menu
+ * @param {string} menuItemsClass The shared class of the items that are children of the menu
 */
 import { handleKeyPress } from '../handleKeyPress';
 var eventListenersAdded = new Set();
-export function makeMenuAccessible(menuId, menuItemClass) {
+export function makeMenuAccessible(menuId, menuItemsClass) {
     var menuDiv = document.querySelector("#".concat(menuId));
-    var menuItems = menuDiv.querySelectorAll(".".concat(menuItemClass));
+    var menuItems = menuDiv.querySelectorAll(".".concat(menuItemsClass));
     var triggerId = menuDiv.getAttribute('aria-labelledby');
     var triggerButton = document.querySelector("#".concat(triggerId));
     var menuClosedStateAriaLabel = triggerButton.getAttribute('aria-label');

package/src/menu/makeMenuAccessible.ts

@@ -1,7 +1,7 @@
 /**
  * Adds keyboard interaction 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 shared class of the items that are children of the menu
+ * @param {string} menuItemsClass The shared class of the items that are children of the menu
 */
 
 import { HTMLElement, NodeListOfHTMLElement } from '../../Types'
@@ -9,9 +9,9 @@ import { handleKeyPress } from '../handleKeyPress';
 
 let eventListenersAdded: Set<HTMLElement> = new Set();
 
-export function makeMenuAccessible(menuId: string, menuItemClass: string): void {
+export function makeMenuAccessible(menuId: string, menuItemsClass: string): void {
     const menuDiv: HTMLElement = document.querySelector(`#${menuId}`) as HTMLElement;
-    const menuItems: NodeListOfHTMLElement = menuDiv.querySelectorAll(`.${menuItemClass}`);
+    const menuItems: NodeListOfHTMLElement = menuDiv.querySelectorAll(`.${menuItemsClass}`);
 
     const triggerId: string = menuDiv.getAttribute('aria-labelledby') as string;
     const triggerButton: HTMLElement = document.querySelector(`#${triggerId}`) as HTMLElement;