desy-html 16.0.4 → 17.0.1

package/src/js/aria/MenuNavigation.js

@@ -1,3 +1,5 @@
+import * as computePosition from '@floating-ui/dom';
+
 export function MenuNavigation(aria) {
   /*
   *   This content is licensed according to the W3C Software License at
@@ -82,6 +84,9 @@ export function MenuNavigation(aria) {
     const getAllLiElements = this.rootNode.querySelectorAll('li');
     [...getAllLiElements].forEach((element) => {
       const getElement = element.querySelector('a');
+      if (!getElement) {
+        return;
+      }
       if (getElement.id === elementActive) {
         this.wrapActiveElement(getElement);
       } else {
@@ -91,7 +96,7 @@ export function MenuNavigation(aria) {
   };
 
   aria.MenuNavigation.prototype.activateSubElement = function (menuId, elementActive) {
-    const getAllLinks = this.rootNode.querySelectorAll(`#${menuId} ul li li a`);
+    const getAllLinks = this.rootNode.querySelectorAll(`#${CSS.escape(menuId)} ul li li a`);
     [...getAllLinks].forEach((link) => {
       if(link.id === elementActive) {
         link.setAttribute('aria-current', 'page');
@@ -102,10 +107,10 @@ export function MenuNavigation(aria) {
         getElementParent.removeAttribute('aria-current');
         const mainSpanParent2 = getElementParent.querySelector('span:not(.sr-only)');
         if (mainSpanParent2) {
-          mainSpanParent2.innerHTML = mainSpanParent2.textContent;
+          unwrapStrong(mainSpanParent2);
         }
         link.removeAttribute('aria-current');
-        link.innerHTML = `${link.textContent}`;
+        unwrapStrong(link);
       }
     });
     [...getAllLinks].forEach((link) => {
@@ -127,16 +132,29 @@ export function MenuNavigation(aria) {
     elementActive.innerHTML = `<strong class="font-bold">${elementActive.textContent}</strong>`;
   };
 
+  // Unwrap the <strong> of `node` in place, preserving the rest of its markup.
+  // If there is no <strong> (e.g. a never-activated sibling with its own
+  // icon/span), the node is left untouched instead of flattened to text.
+  function unwrapStrong(node) {
+    if (!node) return;
+    const strong = node.querySelector('strong');
+    if (!strong) return;
+    while (strong.firstChild) {
+      strong.parentNode.insertBefore(strong.firstChild, strong);
+    }
+    strong.remove();
+  }
+
   aria.MenuNavigation.prototype.deactivateElement = function (elementDeactivated) {
     elementDeactivated.removeAttribute('aria-current');
     elementDeactivated.classList.remove('c-menu-navigation__button--primary', 'c-menu-navigation__button--has-selection');
-    elementDeactivated.innerHTML = elementDeactivated.textContent;
+    unwrapStrong(elementDeactivated);
   };
 
   window.activateItemMenuNavigation = function (menuId, activeItemId) {
     const menu = document.getElementById(menuId);
     if (menu) {
-      const activeItem = document.querySelector(`#${menuId} #${activeItemId}`);
+      const activeItem = menu.querySelector('#' + CSS.escape(activeItemId));
       if (activeItem) {
         const menuInstance = new aria.MenuNavigation(menu);
         menuInstance.activateElement(activeItemId);
@@ -154,7 +172,7 @@ export function MenuNavigation(aria) {
   window.activateSubItemMenuNavigation = function (menuId, activeSubItemId) {
     const menu = document.getElementById(menuId);
     if (menu) {
-      const activeSubItem = document.querySelector(`#${menuId} #${activeSubItemId}`);
+      const activeSubItem = menu.querySelector('#' + CSS.escape(activeSubItemId));
       if (activeSubItem) {
         const menuInstance = new aria.MenuNavigation(menu);
         menuInstance.activateSubElement(menuId, activeSubItemId);
@@ -287,59 +305,42 @@ export function MenuNavigation(aria) {
   };
 
   aria.MenuNavigation.prototype.toggleMenu = function (domNode, show) {
-    if (domNode) {
-      domNode.style.display = show ? 'block' : 'none';
-    }
-  };
+    if (!domNode) return;
 
-  aria.MenuNavigation.prototype.updateKeyControls = function (useArrowKeys) {
-    this.useArrowKeys = useArrowKeys;
-  };
+    if (!show) {
+      domNode.style.display = 'none';
+      if (domNode._floatingCleanup) {
+        domNode._floatingCleanup();
+        domNode._floatingCleanup = null;
+      }
+      return;
+    }
 
-  window.addEventListener(
-    'load',
-    function () {
-      var menus = document.querySelectorAll('.disclosure-nav');
-      var disclosureMenus = [];
+    var li = domNode.closest('li');
+    var reference = li ? li.querySelector('[aria-controls]') : null;
 
-      for (var i = 0; i < menus.length; i++) {
-        disclosureMenus[i] = new DisclosureNav(menus[i]);
-      }
+    domNode.style.display = 'block';
 
-      // listen to arrow key checkbox
-      var arrowKeySwitch = document.getElementById('arrow-behavior-switch');
-      if (arrowKeySwitch) {
-        arrowKeySwitch.addEventListener('change', function () {
-          var checked = arrowKeySwitch.checked;
-          for (var i = 0; i < disclosureMenus.length; i++) {
-            disclosureMenus[i].updateKeyControls(checked);
-          }
-        });
-      }
+    if (!reference) return;
 
-      // fake link behavior
-      disclosureMenus.forEach((disclosureNav, i) => {
-        var links = menus[i].querySelectorAll('[href="#mythical-page-content"]');
-        var examplePageHeading = document.getElementById('mythical-page-heading');
-        for (var k = 0; k < links.length; k++) {
-          // The codepen export script updates the internal link href with a full URL
-          // we're just manually fixing that behavior here
-          links[k].href = '#mythical-page-content';
-
-          links[k].addEventListener('click', (event) => {
-            // change the heading text to fake a page change
-            var pageTitle = event.target.innerText;
-            examplePageHeading.innerText = pageTitle;
-
-            // handle aria-current
-            for (var n = 0; n < links.length; n++) {
-              links[n].removeAttribute('aria-current');
-            }
-            event.target.setAttribute('aria-current', 'page');
-          });
-        }
+    var update = function () {
+      computePosition.computePosition(reference, domNode, {
+        placement: 'bottom-start',
+        middleware: [
+          computePosition.offset({ mainAxis: -1 }),
+          computePosition.flip(),
+          computePosition.shift({ padding: 5 })
+        ]
+      }).then(function (pos) {
+        domNode.style.left = pos.x + 'px';
+        domNode.style.top = pos.y + 'px';
       });
-    },
-    false
-  );
+    };
+
+    domNode._floatingCleanup = computePosition.autoUpdate(reference, domNode, update);
+  };
+
+  aria.MenuNavigation.prototype.updateKeyControls = function (useArrowKeys) {
+    this.useArrowKeys = useArrowKeys;
+  };
 }

package/src/js/aria/MenuVertical.js

@@ -1,60 +1,60 @@
-export function MenuVertical(aria) {
-  (function () {
-    aria.MenuVertical = function (domNode) {
-      this.domNode = domNode;
-    };
-
-    aria.MenuVertical.prototype.init = function () {
-      this.valueActive = this.domNode.dataset.menuActive;
-      if (this.valueActive) {
-        this.activateElement(this.valueActive);
-      }
-    };
-
-    aria.MenuVertical.prototype.activateElement = function (elementActive) {
-      this.domNode.querySelectorAll('li').forEach((element) => {
-        const getLink = element.querySelector('a') || element.querySelector('span');
-        if (getLink) {
-          if (getLink.id === elementActive) {
-            this.wrapActiveElement(getLink);
-          } else {
-            this.deactivateElement(getLink);
-          }
-        }
-      });
-    };
-
-    aria.MenuVertical.prototype.wrapActiveElement = function (elementActive) {
-      if (!elementActive.getAttribute('aria-current')) {
-        elementActive.setAttribute('aria-current', 'page');
-        elementActive.innerHTML = `<strong class="font-bold">${elementActive.innerHTML}</strong>`;
-      }
-    };
-
-    aria.MenuVertical.prototype.deactivateElement = function (elementDeactivated) {
-      elementDeactivated.removeAttribute('aria-current');
-      if(elementDeactivated.querySelector('strong')) {
-        const replaceStrong = elementDeactivated.innerHTML.replace('<strong class="font-bold">', '').replace('<strong/>', '');
-        elementDeactivated.innerHTML = `${replaceStrong}`;
-      }
-    };
-
-    window.activateItemMenuVertical = function (menuId, activeItemId) {
-      const menu = document.getElementById(menuId);
-      if (menu) {
-        const activeItem = document.querySelector(`#${menuId} #${activeItemId}`);
-        if (activeItem) {
-          const menuInstance = new aria.MenuVertical(menu);
-          menuInstance.activateElement(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;
-      }
-    };
-  }());
-}
+export function MenuVertical(aria) {
+  (function () {
+    aria.MenuVertical = function (domNode) {
+      this.domNode = domNode;
+    };
+
+    aria.MenuVertical.prototype.init = function () {
+      this.valueActive = this.domNode.dataset.menuActive;
+      if (this.valueActive) {
+        this.activateElement(this.valueActive);
+      }
+    };
+
+    aria.MenuVertical.prototype.activateElement = function (elementActive) {
+      this.domNode.querySelectorAll('li').forEach((element) => {
+        const getLink = element.querySelector('a') || element.querySelector('span');
+        if (getLink) {
+          if (getLink.id === elementActive) {
+            this.wrapActiveElement(getLink);
+          } else {
+            this.deactivateElement(getLink);
+          }
+        }
+      });
+    };
+
+    aria.MenuVertical.prototype.wrapActiveElement = function (elementActive) {
+      if (!elementActive.getAttribute('aria-current')) {
+        elementActive.setAttribute('aria-current', 'page');
+        elementActive.innerHTML = `<strong class="font-bold">${elementActive.innerHTML}</strong>`;
+      }
+    };
+
+    aria.MenuVertical.prototype.deactivateElement = function (elementDeactivated) {
+      elementDeactivated.removeAttribute('aria-current');
+      const getStrong = elementDeactivated.querySelector('strong');
+      if (getStrong) {
+        getStrong.replaceWith(...getStrong.childNodes);
+      }
+    };
+
+    window.activateItemMenuVertical = function (menuId, activeItemId) {
+      const menu = document.getElementById(menuId);
+      if (menu) {
+        const activeItem = menu.querySelector('#' + CSS.escape(activeItemId));
+        if (activeItem) {
+          const menuInstance = new aria.MenuVertical(menu);
+          menuInstance.activateElement(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;
+      }
+    };
+  }());
+}

package/src/js/aria/MenubarAction.js

@@ -24,7 +24,7 @@ export function MenubarAction(aria) {
       var msgPrefix = 'Menubar constructor argument domNode ';
 
       // Check whether domNode is a DOM element
-      if (!domNode instanceof Element) {
+      if (!(domNode instanceof Element)) {
         throw new TypeError(msgPrefix + 'is not a DOM Element.');
       }
 
@@ -218,14 +218,14 @@ export function MenubarAction(aria) {
         if (!this.isItemDisabled(this.menubarItems[index])) {
           this.menubarItems[index].domNode.focus();
           this.menubarItems[index].domNode.tabIndex = 0;
-          currentItem.tabIndex = -1;
+          currentItem.domNode.tabIndex = -1;
         } else {
           // Find the next enabled item that starts with the same character
           var nextEnabledIndex = this.findNextEnabledItemWithChar(index, char);
           if (nextEnabledIndex !== -1) {
             this.menubarItems[nextEnabledIndex].domNode.focus();
             this.menubarItems[nextEnabledIndex].domNode.tabIndex = 0;
-            currentItem.tabIndex = -1;
+            currentItem.domNode.tabIndex = -1;
           }
         }
       }
@@ -293,7 +293,7 @@ export function MenubarAction(aria) {
     };
 
     aria.MenubarAction.prototype.activateElements = function (menuId, activateElements) {
-      const getAllElements = this.domNode.querySelectorAll(`#${menuId} ul > li `);
+      const getAllElements = this.domNode.querySelectorAll(`#${CSS.escape(menuId)} ul > li `);
       const filterElements = [...getAllElements].filter((element) => element.id !== '' && element.getAttribute('role') !== 'separator');
       [...filterElements].forEach((element) => {
         if(isActive(element)) {
@@ -305,7 +305,7 @@ export function MenubarAction(aria) {
             : element.parentElement.parentElement.querySelector('a');
 
           getElementParent.classList.remove('c-menubar__button--has-selection');
-          getElementParent.firstChild.innerHTML = `${getElementParent.textContent}`;
+          unwrapStrong(getElementParent.firstElementChild);
           element.setAttribute('aria-checked', 'false');
           element.innerHTML = `${element.textContent}`;
         }
@@ -316,10 +316,33 @@ export function MenubarAction(aria) {
             ? 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>`;
+          wrapStrong(getElementParent.firstElementChild);
         }
       });
 
+      // Wrap the existing children of `node` in a <strong> in place, preserving
+      // any markup the consumer put in the label (icons, SVG, spans).
+      function wrapStrong(node) {
+        if (!node || node.querySelector('strong')) return;
+        const strong = document.createElement('strong');
+        strong.className = 'font-bold';
+        while (node.firstChild) {
+          strong.appendChild(node.firstChild);
+        }
+        node.appendChild(strong);
+      }
+
+      // Unwrap the <strong> of `node` in place, preserving the rest of its markup.
+      function unwrapStrong(node) {
+        if (!node) return;
+        const strong = node.querySelector('strong');
+        if (!strong) return;
+        while (strong.firstChild) {
+          strong.parentNode.insertBefore(strong.firstChild, strong);
+        }
+        strong.remove();
+      }
+
       function isActive(element){
         const { id } = element;
         return typeof activateElements === "string"

package/src/js/aria/MenubarItemAction.js

@@ -65,8 +65,7 @@ export function MenubarItemAction(aria) {
   };
 
   aria.MenubarItemAction.prototype.handleKeydown = function (event) {
-    var tgt = event.currentTarget,
-      char = event.key,
+    var char = event.key,
       flag = false;
 
     function isPrintableCharacter (str) {
@@ -127,13 +126,6 @@ export function MenubarItemAction(aria) {
         flag = true;
         break;
 
-      case this.keyCode.ESC:
-        if (this.popupMenu) {
-          this.popupMenu.close();
-        }
-        flag = true;
-        break;
-
       default:
         if (isPrintableCharacter(char)) {
           this.menubar.setFocusByFirstCharacter(this, char);

package/src/js/aria/Nav.js

@@ -1,60 +1,60 @@
-export function Nav(aria) {
-  (function () {
-    aria.Nav = function (domNode) {
-      this.domNode = domNode;
-    };
-
-    aria.Nav.prototype.init = function () {
-      this.valueActive = this.domNode.dataset.menuActive;
-      if (this.valueActive) {
-        this.activateElement(this.valueActive);
-      }
-    };
-
-    aria.Nav.prototype.activateElement = function (elementActive) {
-      this.domNode.querySelectorAll('li').forEach((element) => {
-        const getLink = element.querySelector('a') || element.querySelector('span');
-        if (getLink) {
-          if (getLink.id === elementActive) {
-            this.wrapActiveElement(getLink);
-          } else {
-            this.deactivateElement(getLink);
-          }
-        }
-      });
-    };
-
-    aria.Nav.prototype.wrapActiveElement = function (elementActive) {
-      if (!elementActive.getAttribute('aria-current')) {
-        elementActive.setAttribute('aria-current', 'page');
-        elementActive.innerHTML = `<strong class="font-bold">${elementActive.innerHTML}</strong>`;
-      }
-    };
-
-    aria.Nav.prototype.deactivateElement = function (elementDeactivated) {
-      elementDeactivated.removeAttribute('aria-current');
-      if(elementDeactivated.querySelector('strong')) {
-        const replaceStrong = elementDeactivated.innerHTML.replace('<strong class="font-bold">', '').replace('<strong/>', '');
-        elementDeactivated.innerHTML = `${replaceStrong}`;
-      }
-    };
-
-    window.activateItemNav = function (menuId, activeItemId) {
-      const menu = document.getElementById(menuId);
-      if (menu) {
-        const activeItem = document.querySelector(`#${menuId} #${activeItemId}`);
-        if (activeItem) {
-          const menuInstance = new aria.Nav(menu);
-          menuInstance.activateElement(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 nav with this id in the document.');
-        return null;
-      }
-    };
-  }());
-}
+export function Nav(aria) {
+  (function () {
+    aria.Nav = function (domNode) {
+      this.domNode = domNode;
+    };
+
+    aria.Nav.prototype.init = function () {
+      this.valueActive = this.domNode.dataset.menuActive;
+      if (this.valueActive) {
+        this.activateElement(this.valueActive);
+      }
+    };
+
+    aria.Nav.prototype.activateElement = function (elementActive) {
+      this.domNode.querySelectorAll('li').forEach((element) => {
+        const getLink = element.querySelector('a') || element.querySelector('span');
+        if (getLink) {
+          if (getLink.id === elementActive) {
+            this.wrapActiveElement(getLink);
+          } else {
+            this.deactivateElement(getLink);
+          }
+        }
+      });
+    };
+
+    aria.Nav.prototype.wrapActiveElement = function (elementActive) {
+      if (!elementActive.getAttribute('aria-current')) {
+        elementActive.setAttribute('aria-current', 'page');
+        elementActive.innerHTML = `<strong class="font-bold">${elementActive.innerHTML}</strong>`;
+      }
+    };
+
+    aria.Nav.prototype.deactivateElement = function (elementDeactivated) {
+      elementDeactivated.removeAttribute('aria-current');
+      const getStrong = elementDeactivated.querySelector('strong');
+      if (getStrong) {
+        getStrong.replaceWith(...getStrong.childNodes);
+      }
+    };
+
+    window.activateItemNav = function (menuId, activeItemId) {
+      const menu = document.getElementById(menuId);
+      if (menu) {
+        const activeItem = menu.querySelector('#' + CSS.escape(activeItemId));
+        if (activeItem) {
+          const menuInstance = new aria.Nav(menu);
+          menuInstance.activateElement(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 nav with this id in the document.');
+        return null;
+      }
+    };
+  }());
+}

package/src/js/aria/PopupMenuAction.js

@@ -1,3 +1,5 @@
+import * as computePosition from '@floating-ui/dom';
+
 export function PopupMenuAction(aria) {
   /*
   *   This content is licensed according to the W3C Software License at
@@ -33,7 +35,7 @@ export function PopupMenuAction(aria) {
       msgPrefix = 'PopupMenu constructor argument domNode ';
 
     // Check whether domNode is a DOM element
-    if (!domNode instanceof Element) {
+    if (!(domNode instanceof Element)) {
       throw new TypeError(msgPrefix + 'is not a DOM Element.');
     }
 
@@ -69,7 +71,7 @@ export function PopupMenuAction(aria) {
     this.domNode.setAttribute('role', 'menu');
 
     if (!this.domNode.getAttribute('aria-labelledby') && !this.domNode.getAttribute('aria-label') && !this.domNode.getAttribute('title')) {
-      label = this.controller.domNode.innerHTML;
+      label = this.controller.domNode.textContent.trim();
       this.domNode.setAttribute('aria-label', label);
     }
 
@@ -191,18 +193,30 @@ export function PopupMenuAction(aria) {
   /* MENU DISPLAY METHODS */
 
   aria.PopupMenuAction.prototype.open = function () {
-    // get position and bounding rectangle of controller object's DOM node
-    var rect = this.controller.domNode.getBoundingClientRect();
-
-    // set CSS properties
-    this.domNode.style.position = 'absolute';
-    this.domNode.style.top = (rect.height - 1) + 'px';
-    this.domNode.style.left = '0px';
-    this.domNode.style.zIndex = 100;
-    this.domNode.style.display = 'block';
-
-    // set aria-expanded attribute
-    this.controller.domNode.setAttribute('aria-expanded', 'true');
+    var reference = this.controller.domNode;
+    var floating = this.domNode;
+
+    floating.style.position = 'absolute';
+    floating.style.zIndex = 100;
+    floating.style.display = 'block';
+
+    var update = function () {
+      computePosition.computePosition(reference, floating, {
+        placement: 'bottom-start',
+        middleware: [
+          computePosition.offset({ mainAxis: -1 }),
+          computePosition.flip(),
+          computePosition.shift({ padding: 5 })
+        ]
+      }).then(function (pos) {
+        floating.style.left = pos.x + 'px';
+        floating.style.top = pos.y + 'px';
+      });
+    };
+
+    this._floatingCleanup = computePosition.autoUpdate(reference, floating, update);
+
+    reference.setAttribute('aria-expanded', 'true');
   };
 
   aria.PopupMenuAction.prototype.isOpen = function () {
@@ -210,6 +224,10 @@ export function PopupMenuAction(aria) {
   };
 
   aria.PopupMenuAction.prototype.close = function () {
+    if (this._floatingCleanup) {
+      this._floatingCleanup();
+      this._floatingCleanup = null;
+    }
     this.domNode.style.display = 'none';
     this.domNode.style.zIndex = 0;
     this.controller.domNode.setAttribute('aria-expanded', 'false');