aria-ease 1.3.2 → 1.3.4

package/README.md

@@ -10,7 +10,7 @@ Out of the box accessibility utility package to develop production ready applica
 
 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, 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. 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 three string arguments; the id of the menu, the class name of the children item of the menu, and the aria-label for the closed/hidden state 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 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.
 
@@ -26,7 +26,7 @@ const MenuExample = () => {
       const menu = document.querySelector('#custom-menu');
       if (getComputedStyle(menu).display === 'none') {
         menu.style.display = 'block';
-        makeMenuAccessible('custom-menu', 'profile-menu-item');
+        makeMenuAccessible('custom-menu', 'profile-menu-item', 'Display profile menu);
         updateMenuTriggerAriaAttributes('display-button', 'Hide profile menu');
       } else {
         cleanUpMenuEventListeners('custom-menu', 'profile-menu-item');
@@ -42,7 +42,7 @@ const MenuExample = () => {
         id="display-button"
         onMouseDown={toggleMenuDisplay}
         aria-haspopup={true}
-        aria-pressed={false}
+        role="button"
         aria-expanded={false}
         aria-controls="custom-menu"
         aria-label="Display profile menu"

package/aria-ease.d.ts

@@ -9,8 +9,9 @@ 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} menuClosedStateAriaLabel The aria label for when the menu is closed and not displayed
     */
-    function makeMenuAccessible(menuId: string, menuItemClass: string): void;
+    function makeMenuAccessible(menuId: string, menuItemClass: string, menuClosedStateAriaLabel: string): void;
   
     /**
      * Adds keyboard interaction to block. The block traps focus and can be interacted with using the keyboard.
@@ -20,7 +21,7 @@ declare module 'aria-ease' {
     function makeBlockAccessible(blockId: string, blockItemClass: string);
 
     /**
-     * Updates the aria attributes of the menu trigger button. Trigger button element must possess the following aria attributes; aria-expanded, aria-pressed, aria-label.
+     * Updates the aria attributes of the menu trigger button. Trigger button element must possess the following aria attributes; aria-expanded and aria-label.
      * @param {string} triggerId The id of the trigger button that toggles the menu.
      * @param {string} ariaLabel The aria-label to be updated.
     */
@@ -34,7 +35,7 @@ declare module 'aria-ease' {
    function cleanUpMenuEventListeners(menuId: string, menuItemClass: 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, aria-pressed, aria-label.
+     * 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.
      * @param {AccordionStates[]} accordionStates Array of objects containing accordion state information
      * @param {string} accordionsClass The shared class of all the accordion triggers
      * @param {number} currentClickedTriggerIndex Index of the currently clicked accordion trigger

package/package.json

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

package/src/accordion/updateAccordionTriggerAriaAttributes.js

@@ -1,5 +1,5 @@
 /**
- * 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, aria-pressed, aria-label.
+ * 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.
  * @param {AccordionStates[]} accordionStates Array of objects containing accordions state information
  * @param {string} accordionsClass The shared class of all the accordion triggers
  * @param {number} currentClickedTriggerIndex Index of the currently clicked accordion trigger
@@ -12,11 +12,9 @@ export function updateAccordionTriggerAriaAttributes(accordionStates, accordions
     allAccordionTrigger.forEach(function (trigger, index) {
         if (index === currentClickedTriggerIndex) {
             trigger.setAttribute("aria-expanded", accordionStates[index].display ? 'true' : 'false');
-            trigger.setAttribute("aria-pressed", accordionStates[index].display ? 'true' : 'false');
         }
         else {
             trigger.setAttribute("aria-expanded", 'false');
-            trigger.setAttribute("aria-pressed", 'false');
         }
         trigger.setAttribute("aria-label", accordionStates[index].display ? accordionStates[index].openedAriaLabel : accordionStates[index].closedAriaLabel);
     });

package/src/accordion/updateAccordionTriggerAriaAttributes.ts

@@ -1,5 +1,5 @@
 /**
- * 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, aria-pressed, aria-label.
+ * 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.
  * @param {AccordionStates[]} accordionStates Array of objects containing accordions state information
  * @param {string} accordionsClass The shared class of all the accordion triggers
  * @param {number} currentClickedTriggerIndex Index of the currently clicked accordion trigger
@@ -11,16 +11,14 @@ export function updateAccordionTriggerAriaAttributes(accordionStates: AccordionS
     const allAccordionTrigger: HTMLElement[] = Array.from(document.querySelectorAll(`.${accordionsClass}`));
 
     if ( !allAccordionTrigger) {
-        throw new Error('Invalid trigger class provided.');
+      throw new Error('Invalid trigger class provided.');
     }
 
     allAccordionTrigger.forEach((trigger, index) => {
         if (index === currentClickedTriggerIndex) {
           trigger.setAttribute("aria-expanded", accordionStates[index].display ? 'true' : 'false');
-          trigger.setAttribute("aria-pressed", accordionStates[index].display ? 'true' : 'false');
         } else {
           trigger.setAttribute("aria-expanded", 'false');
-          trigger.setAttribute("aria-pressed", 'false');
         }
     
         trigger.setAttribute("aria-label", accordionStates[index].display ? accordionStates[index].openedAriaLabel : accordionStates[index].closedAriaLabel);

package/src/handleKeyPress.js

@@ -1,4 +1,10 @@
-export function handleKeyPress(event, elementItems, elementItemIndex, elementDiv, triggerButton) {
+import { updateMenuTriggerAriaAttributes } from "./menu/updateMenuTriggerAriaAttributes";
+function handleMenuEscapeKeyPress(menuElement, menuTriggerButton, menuClosedStateAriaLabel) {
+    menuElement.style.display = 'none';
+    var menuTriggerButtonId = menuTriggerButton.getAttribute('id');
+    updateMenuTriggerAriaAttributes("".concat(menuTriggerButtonId), "".concat(menuClosedStateAriaLabel));
+}
+export function handleKeyPress(event, elementItems, elementItemIndex, menuElementDiv, triggerButton, menuClosedStateAriaLabel) {
     switch (event.key) {
         case 'ArrowUp':
         case 'ArrowLeft':
@@ -22,9 +28,9 @@ export function handleKeyPress(event, elementItems, elementItemIndex, elementDiv
             break;
         case 'Escape':
             event.preventDefault();
-            if (elementDiv && triggerButton) {
-                (getComputedStyle(elementDiv).display === 'block') ?
-                    triggerButton.click() :
+            if (menuElementDiv && triggerButton && menuClosedStateAriaLabel) {
+                (getComputedStyle(menuElementDiv).display === 'block') ?
+                    handleMenuEscapeKeyPress(menuElementDiv, triggerButton, menuClosedStateAriaLabel) :
                     null;
                 triggerButton.focus();
             }

package/src/handleKeyPress.ts

@@ -1,6 +1,13 @@
 import { NodeListOfHTMLElement, HTMLElement } from "../Types";
+import { updateMenuTriggerAriaAttributes } from "./menu/updateMenuTriggerAriaAttributes";
 
-export function handleKeyPress(event: KeyboardEvent, elementItems: NodeListOfHTMLElement, elementItemIndex: number, elementDiv?: HTMLElement | undefined, triggerButton?: HTMLElement | undefined): void {
+function handleMenuEscapeKeyPress(menuElement: HTMLElement, menuTriggerButton: HTMLElement, menuClosedStateAriaLabel: string) {
+    menuElement.style.display = 'none';
+    const menuTriggerButtonId = menuTriggerButton.getAttribute('id');
+    updateMenuTriggerAriaAttributes(`${menuTriggerButtonId}`, `${menuClosedStateAriaLabel}`)
+}
+
+export function handleKeyPress(event: KeyboardEvent, elementItems: NodeListOfHTMLElement, elementItemIndex: number, menuElementDiv?: HTMLElement | undefined, triggerButton?: HTMLElement | undefined, menuClosedStateAriaLabel?: string | undefined): void {
     switch(event.key) {
         case 'ArrowUp':
         case 'ArrowLeft':
@@ -22,9 +29,9 @@ export function handleKeyPress(event: KeyboardEvent, elementItems: NodeListOfHTM
             break;
         case 'Escape':
             event.preventDefault();
-            if(elementDiv && triggerButton) {
-                (getComputedStyle(elementDiv).display === 'block') ?
-                    triggerButton.click() :
+            if(menuElementDiv && triggerButton && menuClosedStateAriaLabel) {
+                (getComputedStyle(menuElementDiv).display === 'block') ?
+                    handleMenuEscapeKeyPress(menuElementDiv, triggerButton, menuClosedStateAriaLabel) :
                     null
                 triggerButton.focus()
             }

package/src/menu/makeMenuAccessible.js

@@ -2,10 +2,11 @@
  * 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} menuClosedStateAriaLabel The aria label for when the menu is closed and not displayed
 */
 import { handleKeyPress } from '../handleKeyPress';
 var eventListenersAdded = new Set();
-export function makeMenuAccessible(menuId, menuItemClass) {
+export function makeMenuAccessible(menuId, menuItemClass, menuClosedStateAriaLabel) {
     var menuDiv = document.querySelector("#".concat(menuId));
     var menuItems = menuDiv.querySelectorAll(".".concat(menuItemClass));
     var triggerId = menuDiv.getAttribute('aria-labelledby');
@@ -14,7 +15,7 @@ export function makeMenuAccessible(menuId, menuItemClass) {
     menuItems.forEach(function (menuItem, menuItemIndex) {
         if (!eventListenersAdded.has(menuItem)) {
             eventListenersAdded.add(menuItem);
-            menuItem.addEventListener('keydown', function (event) { return handleKeyPress(event, menuItems, menuItemIndex, menuDiv, triggerButton); });
+            menuItem.addEventListener('keydown', function (event) { return handleKeyPress(event, menuItems, menuItemIndex, menuDiv, triggerButton, menuClosedStateAriaLabel); });
         }
     });
 }

package/src/menu/makeMenuAccessible.ts

@@ -2,6 +2,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} menuClosedStateAriaLabel The aria label for when the menu is closed and not displayed
 */
 
 import { HTMLElement, NodeListOfHTMLElement } from '../../Types'
@@ -9,7 +10,7 @@ import { handleKeyPress } from '../handleKeyPress';
 
 let eventListenersAdded: Set<HTMLElement> = new Set();
 
-export function makeMenuAccessible(menuId: string, menuItemClass: string): void {
+export function makeMenuAccessible(menuId: string, menuItemClass: string, menuClosedStateAriaLabel: string): void {
     const menuDiv: HTMLElement = document.querySelector(`#${menuId}`) as HTMLElement
     const menuItems: NodeListOfHTMLElement = menuDiv.querySelectorAll(`.${menuItemClass}`)
 
@@ -20,7 +21,7 @@ export function makeMenuAccessible(menuId: string, menuItemClass: string): void
     menuItems.forEach((menuItem: HTMLElement, menuItemIndex: number): void => {
         if (!eventListenersAdded.has(menuItem)) {
             eventListenersAdded.add(menuItem);
-            menuItem.addEventListener('keydown', (event: KeyboardEvent): void => handleKeyPress(event, menuItems, menuItemIndex, menuDiv, triggerButton))
+            menuItem.addEventListener('keydown', (event: KeyboardEvent): void => handleKeyPress(event, menuItems, menuItemIndex, menuDiv, triggerButton, menuClosedStateAriaLabel))
         }
     })
 }

package/src/menu/updateMenuTriggerAriaAttributes.js

@@ -1,5 +1,5 @@
 /**
- * Adds screen reader accessibility to menus. Updates the aria attributes of the menu trigger button. Trigger button element must possess the following aria attributes; aria-expanded, aria-pressed, aria-label.
+ * Adds screen reader accessibility to menus. Updates the aria attributes of the menu trigger button. Trigger button element must possess the following aria attributes; aria-expanded and aria-label.
  * @param {string} triggerId The id of the trigger button that toggles the menu.
  * @param {string} ariaLabel The aria-label to be updated.
  */
@@ -8,12 +8,10 @@ export function updateMenuTriggerAriaAttributes(triggerId, ariaLabel) {
     var currentAriaExpandedState = triggerButton.getAttribute('aria-expanded');
     function triggerOpen(ariaLabel) {
         triggerButton.setAttribute('aria-expanded', 'true');
-        triggerButton.setAttribute('aria-pressed', 'true');
         triggerButton.setAttribute('aria-label', ariaLabel);
     }
     function triggerClose(ariaLabel) {
         triggerButton.setAttribute('aria-expanded', 'false');
-        triggerButton.setAttribute('aria-pressed', 'false');
         triggerButton.setAttribute('aria-label', ariaLabel);
     }
     (currentAriaExpandedState === 'false') ?

package/src/menu/updateMenuTriggerAriaAttributes.ts

@@ -1,5 +1,5 @@
 /**
- * Adds screen reader accessibility to menus. Updates the aria attributes of the menu trigger button. Trigger button element must possess the following aria attributes; aria-expanded, aria-pressed, aria-label.
+ * Adds screen reader accessibility to menus. Updates the aria attributes of the menu trigger button. Trigger button element must possess the following aria attributes; aria-expanded and aria-label.
  * @param {string} triggerId The id of the trigger button that toggles the menu.
  * @param {string} ariaLabel The aria-label to be updated.
  */
@@ -13,13 +13,11 @@ export function updateMenuTriggerAriaAttributes(triggerId: string, ariaLabel: st
 
     function triggerOpen(ariaLabel: string): void {
         triggerButton.setAttribute('aria-expanded', 'true')
-        triggerButton.setAttribute('aria-pressed', 'true')
         triggerButton.setAttribute('aria-label', ariaLabel)
     }
 
     function triggerClose(ariaLabel: string): void {
         triggerButton.setAttribute('aria-expanded', 'false')
-        triggerButton.setAttribute('aria-pressed', 'false')
         triggerButton.setAttribute('aria-label', ariaLabel)
     }