desy-html 8.6.0 → 8.8.0

package/src/js/aria/MenubarAction.js

@@ -19,192 +19,238 @@ export function MenubarAction(aria) {
   *       Each child element of domNode that represents a menubaritem
   *       must be an A element.
   */
-  aria.MenubarAction = function (domNode) {
-    var msgPrefix = 'Menubar constructor argument domNode ';
+  (function () {
+    aria.MenubarAction = function (domNode) {
+      var msgPrefix = 'Menubar constructor argument domNode ';
 
-    // Check whether domNode is a DOM element
-    if (!domNode instanceof Element) {
-      throw new TypeError(msgPrefix + 'is not a DOM Element.');
-    }
+      // Check whether domNode is a DOM element
+      if (!domNode instanceof Element) {
+        throw new TypeError(msgPrefix + 'is not a DOM Element.');
+      }
 
-    // Check whether domNode has descendant elements
-    if (domNode.childElementCount === 0) {
-      throw new Error(msgPrefix + 'has no element children.');
-    }
+      // Check whether domNode has descendant elements
+      if (domNode.childElementCount === 0) {
+        throw new Error(msgPrefix + 'has no element children.');
+      }
 
-    // Check whether domNode's descendant elements contain A elements
-    var e = domNode.firstElementChild;
-    while (e) {
-      var menubarItem = e.firstElementChild;
-      if (menubarItem && menubarItem.tagName !== 'A') {
-        throw new Error(msgPrefix + 'has child elements that are not A elements.');
+      // Check whether domNode's descendant elements contain A elements
+      var e = domNode.firstElementChild;
+      while (e) {
+        e = e.nextElementSibling;
       }
-      e = e.nextElementSibling;
-    }
 
-    this.domNode = domNode;
+      this.domNode = domNode;
 
-    this.menubarItems = []; // see Menubar init method
-    this.firstChars = []; // see Menubar init method
+      this.menubarItems = []; // see Menubar init method
+      this.firstChars = []; // see Menubar init method
 
-    this.firstItem = null; // see Menubar init method
-    this.lastItem = null; // see Menubar init method
-  };
+      this.firstItem = null; // see Menubar init method
+      this.lastItem = null; // see Menubar init method
+    };
 
-  /*
-  *   @method MenubarAction.prototype.init
-  *
-  *   @desc
-  *       Adds ARIA role to the menubar node
-  *       Traverse menubar children for A elements to configure each A element as an ARIA menuitem
-  *       and populate menuitems array. Initialize firstItem and lastItem properties.
-  */
-  aria.MenubarAction.prototype.init = function (actionManager) {
-    var menubarItem, menuElement, textContent, numItems;
+    /*
+    *   @method MenubarAction.prototype.init
+    *
+    *   @desc
+    *       Adds ARIA role to the menubar node
+    *       Traverse menubar children for A elements to configure each A element as an ARIA menuitem
+    *       and populate menuitems array. Initialize firstItem and lastItem properties.
+    */
+    aria.MenubarAction.prototype.init = function (actionManager) {
+      var menubarItem, menuElement, textContent, numItems;
 
-    this.actionManager = actionManager;
+      this.actionManager = actionManager;
 
-    this.domNode.setAttribute('role', 'menubar');
+      this.domNode.setAttribute('role', 'menubar');
 
-    this.domNode.addEventListener('focusin', this.handleFocusin.bind(this));
-    this.domNode.addEventListener('focusout', this.handleFocusout.bind(this));
+      this.domNode.addEventListener('focusin', this.handleFocusin.bind(this));
+      this.domNode.addEventListener('focusout', this.handleFocusout.bind(this));
 
-    // Traverse the element children of the menubar domNode: configure each with
-    // menuitem role behavior and store reference in menuitems array.
-    var e = this.domNode.firstElementChild;
+      // Traverse the element children of the menubar domNode: configure each with
+      // menuitem role behavior and store reference in menuitems array.
+      var e = this.domNode.firstElementChild;
 
-    while (e) {
-      menuElement = e.firstElementChild;
+      while (e) {
+        menuElement = e.firstElementChild;
 
-      if (menuElement && menuElement.tagName === 'A') {
-        menubarItem = new aria.MenubarItemAction(menuElement, this);
-        menubarItem.init();
-        this.menubarItems.push(menubarItem);
-        textContent = menuElement.textContent.trim();
-        this.firstChars.push(textContent.substring(0, 1).toLowerCase());
-      }
+        if (menuElement && menuElement.tagName === 'A') {
+          menubarItem = new aria.MenubarItemAction(menuElement, this);
+          menubarItem.init();
+          this.menubarItems.push(menubarItem);
+          textContent = menuElement.textContent.trim();
+          this.firstChars.push(textContent.substring(0, 1).toLowerCase());
+        }
 
-      e = e.nextElementSibling;
-    }
+        e = e.nextElementSibling;
+      }
 
-    // Use populated menuitems array to initialize firstItem and lastItem.
-    numItems = this.menubarItems.length;
-    if (numItems > 0) {
-      this.firstItem = this.menubarItems[0];
-      this.lastItem = this.menubarItems[numItems - 1];
-    }
-    this.firstItem.domNode.tabIndex = 0;
-  };
+      // Use populated menuitems array to initialize firstItem and lastItem.
+      numItems = this.menubarItems.length;
+      if (numItems > 0) {
+        this.firstItem = this.menubarItems[0];
+        this.lastItem = this.menubarItems[numItems - 1];
+      }
+      this.firstItem.domNode.tabIndex = 0;
+    };
 
-  /* FOCUS MANAGEMENT METHODS */
+    /* FOCUS MANAGEMENT METHODS */
 
-  aria.MenubarAction.prototype.setFocusToItem = function (newItem, hover) {
-    var isOpen = false;
-    var hasFocus = this.domNode.contains(document.activeElement);
-    for (var i = 0; i < this.menubarItems.length; i++) {
-      var mbi = this.menubarItems[i];
-      isOpen = isOpen || (mbi.popupMenu && mbi.popupMenu.isOpen());
-      if (!hover || hasFocus) {
-        mbi.domNode.tabIndex = -1;
-      }
-      if (mbi.popupMenu) {
-        mbi.popupMenu.close();
-      }
-    }
-    if (!hover || hasFocus) {
-      newItem.domNode.focus();
-      newItem.domNode.tabIndex = 0;
-    }
-    if (isOpen && newItem.popupMenu) {
-      newItem.popupMenu.open();
-    }
-  };
-
-  aria.MenubarAction.prototype.setFocusToFirstItem = function () {
-    this.setFocusToItem(this.firstItem);
-  };
-  aria.MenubarAction.prototype.setFocusToLastItem = function () {
-    this.setFocusToItem(this.lastItem);
-  };
-
-  aria.MenubarAction.prototype.setFocusToPreviousItem = function (currentItem) {
-    var newItem, index;
-
-    if (currentItem === this.firstItem) {
-      newItem = this.lastItem;
-    }
-    else {
-      index = this.menubarItems.indexOf(currentItem);
-      newItem = this.menubarItems[ index - 1 ];
-    }
-
-    this.setFocusToItem(newItem);
-  };
-
-  aria.MenubarAction.prototype.setFocusToNextItem = function (currentItem) {
-    var newItem, index;
-
-    if (currentItem === this.lastItem) {
-      newItem = this.firstItem;
-    }
-    else {
-      index = this.menubarItems.indexOf(currentItem);
-      newItem = this.menubarItems[ index + 1 ];
-    }
-    this.setFocusToItem(newItem);
-  };
-
-  aria.MenubarAction.prototype.setFocusByFirstCharacter = function (currentItem, char) {
-    var start, index, char = char.toLowerCase();
-
-    // Get start index for search based on position of currentItem
-    start = this.menubarItems.indexOf(currentItem) + 1;
-    if (start === this.menubarItems.length) {
-      start = 0;
-    }
-
-    // Check remaining slots in the menu
-    index = this.getIndexFirstChars(start, char);
-
-    // If not found in remaining slots, check from beginning
-    if (index === -1) {
-      index = this.getIndexFirstChars(0, char);
-    }
-
-    // If match was found...
-    if (index > -1) {
-      this.menubarItems[index].domNode.focus();
-      this.menubarItems[index].domNode.tabIndex = 0;
-      currentItem.tabIndex = -1;
-    }
-  };
-
-  aria.MenubarAction.prototype.getIndexFirstChars = function (startIndex, char) {
-    for (var i = startIndex; i < this.firstChars.length; i++) {
-      if (char === this.firstChars[i]) {
-        return i;
-      }
-    }
-    return -1;
-  };
-
-  aria.MenubarAction.prototype.handleFocusin = function (event) {
-    // if the menubar or any of its menus has focus, add styling hook for hover
-    this.domNode.classList.add('focus');
-  };
-
-  aria.MenubarAction.prototype.handleFocusout = function (event) {
-    // if the next element to get focus is not in the menubar or its menus, then close menu
-    if (!this.domNode.contains(event.relatedTarget)) {
+    aria.MenubarAction.prototype.setFocusToItem = function (newItem, hover) {
+      var isOpen = false;
+      var hasFocus = this.domNode.contains(document.activeElement);
       for (var i = 0; i < this.menubarItems.length; i++) {
         var mbi = this.menubarItems[i];
-        if (mbi.popupMenu && mbi.popupMenu.isOpen()) {
+        isOpen = isOpen || (mbi.popupMenu && mbi.popupMenu.isOpen());
+        if (!hover || hasFocus) {
+          mbi.domNode.tabIndex = -1;
+        }
+        if (mbi.popupMenu) {
           mbi.popupMenu.close();
         }
       }
-    }
-    // remove styling hook for hover on menubar item
-    this.domNode.classList.remove('focus');
-  };
+      if (!hover || hasFocus) {
+        newItem.domNode.focus();
+        newItem.domNode.tabIndex = 0;
+      }
+      if (isOpen && newItem.popupMenu) {
+        newItem.popupMenu.open();
+      }
+    };
+
+    aria.MenubarAction.prototype.setFocusToFirstItem = function () {
+      this.setFocusToItem(this.firstItem);
+    };
+    aria.MenubarAction.prototype.setFocusToLastItem = function () {
+      this.setFocusToItem(this.lastItem);
+    };
+
+    aria.MenubarAction.prototype.setFocusToPreviousItem = function (currentItem) {
+      var newItem, index;
+
+      if (currentItem === this.firstItem) {
+        newItem = this.lastItem;
+      }
+      else {
+        index = this.menubarItems.indexOf(currentItem);
+        newItem = this.menubarItems[ index - 1 ];
+      }
+
+      this.setFocusToItem(newItem);
+    };
+
+    aria.MenubarAction.prototype.setFocusToNextItem = function (currentItem) {
+      var newItem, index;
+
+      if (currentItem === this.lastItem) {
+        newItem = this.firstItem;
+      }
+      else {
+        index = this.menubarItems.indexOf(currentItem);
+        newItem = this.menubarItems[ index + 1 ];
+      }
+      this.setFocusToItem(newItem);
+    };
+
+    aria.MenubarAction.prototype.setFocusByFirstCharacter = function (currentItem, char) {
+      var start, index, char = char.toLowerCase();
+
+      // Get start index for search based on position of currentItem
+      start = this.menubarItems.indexOf(currentItem) + 1;
+      if (start === this.menubarItems.length) {
+        start = 0;
+      }
+
+      // Check remaining slots in the menu
+      index = this.getIndexFirstChars(start, char);
+
+      // If not found in remaining slots, check from beginning
+      if (index === -1) {
+        index = this.getIndexFirstChars(0, char);
+      }
+
+      // If match was found...
+      if (index > -1) {
+        this.menubarItems[index].domNode.focus();
+        this.menubarItems[index].domNode.tabIndex = 0;
+        currentItem.tabIndex = -1;
+      }
+    };
+
+    aria.MenubarAction.prototype.getIndexFirstChars = function (startIndex, char) {
+      for (var i = startIndex; i < this.firstChars.length; i++) {
+        if (char === this.firstChars[i]) {
+          return i;
+        }
+      }
+      return -1;
+    };
+
+    aria.MenubarAction.prototype.handleFocusin = function (event) {
+      // if the menubar or any of its menus has focus, add styling hook for hover
+      this.domNode.classList.add('focus');
+    };
+
+    aria.MenubarAction.prototype.handleFocusout = function (event) {
+      // if the next element to get focus is not in the menubar or its menus, then close menu
+      if (!this.domNode.contains(event.relatedTarget)) {
+        for (var i = 0; i < this.menubarItems.length; i++) {
+          var mbi = this.menubarItems[i];
+          if (mbi.popupMenu && mbi.popupMenu.isOpen()) {
+            mbi.popupMenu.close();
+          }
+        }
+      }
+      // remove styling hook for hover on menubar item
+      this.domNode.classList.remove('focus');
+    };
+
+    window.activateItemMenuBarAction = function (menuId, itemsIds) {
+      const menu = document.getElementById(menuId);
+      if (menu) {
+        const menuInstance = new aria.MenubarAction(menu);
+        menuInstance.activateElements(menuId, itemsIds);
+        return [menu, itemsIds];
+      } else {
+        console.log('There is no menu with this id in the document.');
+        return null;
+      }
+    };
+
+    aria.MenubarAction.prototype.activateElements = function (menuId, activateElements) {
+      const getAllElements = this.domNode.querySelectorAll(`#${menuId} ul > li `);
+      const filterElements = [...getAllElements].filter((element) => element.id !== '' && element.getAttribute('role') !== 'separator');
+      [...filterElements].forEach((element) => {
+        if(isActive(element)) {
+          element.setAttribute('aria-checked', 'true');
+          element.innerHTML = `<strong class="font-bold">${element.textContent}</strong>`;
+        } else {
+          const getElementParent = element.parentElement.getAttribute('role') === 'group'
+            ? element.parentElement.parentElement.parentElement.parentElement.querySelector('a')
+            : element.parentElement.parentElement.querySelector('a');
+
+          getElementParent.classList.remove('c-menubar__button--has-selection');
+          getElementParent.firstChild.innerHTML = `${getElementParent.textContent}`;
+          element.setAttribute('aria-checked', 'false');
+          element.innerHTML = `${element.textContent}`;
+        }
+      });
+      [...filterElements].forEach((element) => {
+        if(element.getAttribute("aria-checked") === "true"){
+          const getElementParent = element.parentElement.getAttribute('role') === 'group'
+            ? element.parentElement.parentElement.parentElement.parentElement.querySelector('a')
+            : element.parentElement.parentElement.querySelector('a');
+          getElementParent.classList.add('c-menubar__button--has-selection');
+          getElementParent.firstChild.innerHTML = `<strong class="font-bold">${getElementParent.textContent}</strong>`;
+        }
+      });
+
+      function isActive(element){
+        const { id } = element;
+        return typeof activateElements === "string"
+          ? id === activateElements
+          : activateElements.includes(id);
+      }
+    };
+  }());
 }
 

package/src/js/aria/accordion.js

@@ -92,7 +92,6 @@ export function accordion(aria) {
           // If toggling is not allowed, set disabled state on trigger
           if (!allowToggle) {
             target.setAttribute('aria-disabled', 'true');
-            //target.querySelector('span').innerText = '';
             target.querySelector('.c-accordion__show').classList.add('hidden');
             target.querySelector('.c-accordion__hide').classList.add('hidden');
           }
@@ -178,11 +177,56 @@ export function accordion(aria) {
       // If an expanded/ active accordion is found, disable
       if (expanded) {
         expanded.setAttribute('aria-disabled', 'true');
-        //expanded.querySelector('span').innerText = '';
         expanded.querySelector('.c-accordion__show').classList.add('hidden');
         expanded.querySelector('.c-accordion__hide').classList.add('hidden');
       }
     }
 
+    window.activateItemAccordion = function (menuId, activeItemId) {
+      const menu = document.getElementById(menuId);
+      if (menu) {
+        const activeItem = document.querySelector(`#${menuId} #${activeItemId}`);
+        if (activeItem) {
+          activateElement(menuId, activeItemId);
+          return [menu, activeItem]
+        } else {
+          console.log('There is no element with this id in the menu.');
+          return null;
+        }
+      } else {
+        console.log('There is no menu with this id in the document.');
+        return null;
+      }
+    };
+
+    function activateElement(menu, activeItem) {
+      const getAccordion = document.querySelector(`#${menu}`);
+      const allowMultiple = getAccordion.hasAttribute('data-allow-multiple');
+      const allowToggle = (allowMultiple) ? allowMultiple : accordion.hasAttribute('data-allow-toggle');
+      const selectAllTriggers = document.querySelectorAll(`#${menu} .c-accordion__trigger`);
+      [...selectAllTriggers].forEach((trigger) => {
+        const getPanel = trigger.parentElement.parentElement.querySelector('.c-accordion__panel');
+        const getShowMessage = trigger.querySelector('.c-accordion__show');
+        const getHideMessage = trigger.querySelector('.c-accordion__hide');
+        if (isActive(trigger)) {
+          trigger.setAttribute('aria-expanded', 'true');
+          getPanel.removeAttribute('hidden');
+          getShowMessage.classList.add('hidden');
+          getHideMessage.classList.remove('hidden');
+        } else {
+          trigger.setAttribute('aria-expanded', 'false');
+          getPanel.setAttribute('hidden', 'true');
+          getShowMessage.classList.remove('hidden');
+          getHideMessage.classList.add('hidden');
+        }
+      });
+
+      function isActive(element){
+        const { id } = element;
+        return typeof activeItem === "object" && allowToggle
+          ? activeItem.includes(id)
+          : id === activeItem;
+      }
+    }
   });
 }

package/src/js/aria/listbox.js

@@ -279,10 +279,6 @@ export function listbox(aria) {
         'aria-selected',
         element.getAttribute('aria-selected') === 'true' ? 'false' : 'true'
       );
-      element.setAttribute(
-        'aria-checked',
-        element.getAttribute('aria-checked') === 'true' ? 'false' : 'true'
-      );
 
       if (this.moveButton) {
         if (this.listboxNode.querySelector('[aria-selected="true"]')) {
@@ -308,7 +304,6 @@ export function listbox(aria) {
     }
     if (!this.multiselectable) {
       element.removeAttribute('aria-selected');
-      element.removeAttribute('aria-checked');
     }
     aria.Utils.removeClass(element, 'focused');
   };
@@ -324,7 +319,6 @@ export function listbox(aria) {
     this.defocusItem(document.getElementById(this.activeDescendant));
     if (!this.multiselectable) {
       element.setAttribute('aria-selected', 'true');
-      element.setAttribute('aria-checked', 'true');
     }
     aria.Utils.addClass(element, 'focused');
     this.listboxNode.setAttribute('aria-activedescendant', element.id);
@@ -559,5 +553,72 @@ export function listbox(aria) {
     this.handleFocusChange = focusChangeHandler;
   };
 
+  function activateElement(menuId, activeItem) {
+    const getListBox = document.querySelector(`#${menuId}`);
+    const getTippy = document.querySelector(`#${menuId} [data-tippy-root]`);
+    const getTippyBox = document.querySelector(`#${menuId} .tippy-box`);
+    const getListBoxUl = document.querySelector(`#${menuId} [data-module="c-listbox-list"]`);
+    const getListBoxButton = document.querySelector(`#${menuId} .c-listbox`);
+    const getListBoxButtonText = document.querySelector(`#${menuId} .c-listbox span`);
+    const getMultiSelectable = getListBoxButton.getAttribute('aria-labelledby');
+    const allowMultiple = getMultiSelectable.includes('is-multiselectable-label');
+    const selectAllElements = document.querySelectorAll(`#${menuId} li`);
+
+    getListBoxButton.click();
+    getTippy.style.visibility = 'visible';
+    getTippyBox.setAttribute('data-state','visible');
+    getListBoxButton._tippy.popper._tippy.show();
+    getListBoxUl.focus();
+
+    [...selectAllElements].forEach((element) => {
+      if (isActive(element, activeItem)) {
+        element.setAttribute('aria-selected', 'true');
+        if(!allowMultiple && getListBoxButton.dataset.change){
+          getListBoxButtonText.innerHTML = element.textContent;
+        }
+      } else {
+        element.setAttribute('aria-selected', 'false');
+      }
+    });
+
+    getTippy.style.visibility = 'hidden';
+    getTippyBox.setAttribute('data-state','hidden');
+
+    getListBoxUl.dispatchEvent(new KeyboardEvent("keydown", {
+      key: "Escape",
+      keyCode: 27,
+      code: "Escape",
+      which: 27
+    }));
+
+    getListBoxButton._tippy.popper._tippy.hide();
+    getListBoxButton.classList.remove('open');
+
+    function isActive(element, activeItem) {
+      const { id } = element;
+      return typeof activeItem === "object" && allowMultiple
+        ? activeItem.includes(id)
+        : id === activeItem;
+    }
+  };
+
+  window.activateItemListBox = function (menuId, activeItemId) {
+    const menu = document.getElementById(menuId);
+    if (menu) {
+      const getListBoxButton = document.querySelector(`#${menuId} .c-listbox`);
+      getListBoxButton.click();
+      const activeItem = document.querySelector(`#${menuId} #${activeItemId}`);
+      if (activeItem) {
+        activateElement(menuId, activeItemId);
+        return [menu, activeItem]
+      } else {
+        console.log('There is no element with this id in the menu.');
+        return null;
+      }
+    } else {
+      console.log('There is no menu with this id in the document.');
+      return null;
+    }
+  };
   return aria;
-}
+}

package/src/js/aria/tabs.js

@@ -281,13 +281,18 @@ export function tabs(aria) {
       //Add active class to current tab
       element.classList.add("c-tabs__link--is-active");
       element.setAttribute('role', 'tab');
-      element.innerHTML = `<strong class="font-bold">${element.textContent}</strong>`;
+      if(element.querySelector('strong') === null) {
+        element.innerHTML = `<strong class="font-bold">${element.innerHTML}</strong>` ;
+      }
     }
 
     function removeActiveClass(element) {
       element.classList.remove("c-tabs__link--is-active");
       element.removeAttribute('role');
-      element.innerHTML = element.textContent;
+      if(element.querySelector('strong')) {
+        const replaceStrong = element.innerHTML.replace('<strong class="font-bold">', '').replace('<strong/>', '');
+        element.innerHTML = `${replaceStrong}`;
+      }
     }
 
     window.activateItemTabs = function (menuId, tabItemId) {
@@ -296,16 +301,13 @@ export function tabs(aria) {
         const activeItemTab = document.querySelector(`#${menuId} #${tabItemId}`);
         const activeItemPanel = document.querySelector(`[aria-labelledby="${tabItemId}"]`);
         if (activeItemTab) {
-          document.querySelectorAll('.c-tabs__link').forEach((tab) => {
-            tab.classList.remove("c-tabs__link--is-active");
-            tab.innerHTML = tab.textContent;
+          document.querySelectorAll(`#${menuId} .c-tabs__link`).forEach((tab) => {
+            removeActiveClass(tab)
           })
 
-          activeItemTab.classList.add("c-tabs__link--is-active");
-          activeItemTab.setAttribute('role', 'tab');
-          activeItemTab.innerHTML = `<strong class="font-bold">${activeItemTab.textContent}</strong>`;
+          addActiveClass(activeItemTab)
 
-          document.querySelectorAll('.c-tabs__panel').forEach((panel) => {
+          document.querySelectorAll(`#${menuId} .c-tabs__panel`).forEach((panel) => {
             panel.setAttribute('hidden', 'hidden')
           })