desy-html 17.0.0 → 17.0.2

package/src/js/aria/accordion.js

@@ -159,7 +159,8 @@ export function accordion(aria) {
       const getAllElementsHide = target.parentElement.parentElement.querySelectorAll('.c-accordion__hide')
       const getAllPanels = target.parentElement.parentElement.querySelectorAll('.c-accordion__panel')
       const getAllTriggers = target.parentElement.parentElement.querySelectorAll('.c-accordion__trigger')
-      if(target.textContent.includes('Mostrar todo') || show === true) {
+      var shouldShow = (show === null) ? target.textContent.includes('Mostrar todo') : (show === true);
+      if(shouldShow) {
         getAllElementsShow.forEach(element => {
           element.classList.add('hidden')
         })
@@ -205,17 +206,33 @@ export function accordion(aria) {
 
     window.activateItemAccordion = function (menuId, activeItemId) {
       const menu = document.getElementById(menuId);
-      if (menu) {
-        const activeItem = document.querySelector(`#${menuId} #${activeItemId}`);
-        if (activeItem) {
+      if (!menu) {
+        console.log('There is no accordion with this id in the document.');
+        return null;
+      }
+
+      if (Array.isArray(activeItemId)) {
+        const activeItems = activeItemId.map(function (id) {
+          return document.getElementById(id);
+        });
+        const allInMenu = activeItems.every(function (item) {
+          return item && menu.contains(item);
+        });
+        if (allInMenu) {
           activateElement(menuId, activeItemId);
-          return [menu, activeItem]
+          return [menu, activeItems];
         } else {
           console.log('There is no item with this id in the menu.');
           return null;
         }
+      }
+
+      const activeItem = document.getElementById(activeItemId);
+      if (activeItem && menu.contains(activeItem)) {
+        activateElement(menuId, activeItemId);
+        return [menu, activeItem]
       } else {
-        console.log('There is no accordion with this id in the document.');
+        console.log('There is no item with this id in the menu.');
         return null;
       }
     };
@@ -232,10 +249,10 @@ export function accordion(aria) {
     };
 
     function activateElement(menu, activeItem) {
-      const getAccordion = document.querySelector(`#${menu}`);
+      const getAccordion = document.getElementById(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`);
+      const allowToggle = (allowMultiple) ? allowMultiple : getAccordion.hasAttribute('data-allow-toggle');
+      const selectAllTriggers = getAccordion.querySelectorAll('.c-accordion__trigger');
       [...selectAllTriggers].forEach((trigger) => {
         const getPanel = trigger.parentElement.parentElement.querySelector('.c-accordion__panel');
         const getShowMessage = trigger.querySelector('.c-accordion__show');
@@ -255,7 +272,7 @@ export function accordion(aria) {
 
       function isActive(element){
         const { id } = element;
-        return typeof activeItem === "object" && allowToggle
+        return Array.isArray(activeItem)
           ? activeItem.includes(id)
           : id === activeItem;
       }

package/src/js/aria/alert.js

@@ -5,8 +5,15 @@ export function alert(aria) {
         throw new Error('No element found with id="' + alertId + '".');
       }
 
+      var templateNode = document.getElementById('template-' + alertId);
+      if (templateNode === null) {
+        throw new Error('No template found with id="template-' + alertId + '".');
+      }
+
+      this.alertNode.innerHTML = templateNode.innerHTML;
 
-      document.getElementById(alertId).innerHTML = document.getElementById('template-' + alertId).innerHTML;
+      // Capture the previously focused element before moving focus below.
+      this.lastFocus = document.activeElement;
 
       if (typeof focusAfterClosed === 'string') {
         this.focusAfterClosed = document.getElementById(focusAfterClosed);
@@ -32,8 +39,6 @@ export function alert(aria) {
       if (this.focusFirst) {
         this.focusFirst.focus();
       }
-
-      this.lastFocus = document.activeElement;
   }; // end Alert constructor
 
   window.openAlert = function (alertId, focusAfterClosed, focusFirst) {

package/src/js/aria/combobox.js

@@ -147,9 +147,17 @@ export function combobox(aria) {
     }
 
     if (text.length === 0 && !this.multiselectable) {
+      var hadSelection = this.selectedValue || this.hiddenInputNode.value;
       for (var i = 0; i < this.allOptions.length; i++) {
         this.allOptions[i].node.setAttribute('aria-selected', 'false');
       }
+      this.selectedValue = '';
+      this.selectedId = '';
+      this.hiddenInputNode.value = '';
+      this.hiddenInputNode.setAttribute('value', '');
+      if (hadSelection) {
+        this.dispatchCustomEvent('combobox:clear', {});
+      }
     }
 
     this._isDeleting = false;
@@ -569,10 +577,15 @@ export function combobox(aria) {
 
     var inputNode = comboboxNode.querySelector('[data-module="c-combobox-input"]');
     if (inputNode && inputNode._comboboxInstance) {
-      if (inputNode._comboboxInstance.multiselectable) {
-        inputNode._comboboxInstance.toggleOption(option);
+      var instance = inputNode._comboboxInstance;
+      if (!instance.listboxNode.contains(option)) {
+        console.log('The option does not belong to the target combobox.');
+        return null;
+      }
+      if (instance.multiselectable) {
+        instance.toggleOption(option);
       } else {
-        inputNode._comboboxInstance.selectOption(option);
+        instance.selectOption(option);
       }
       return [comboboxNode, option];
     }

package/src/js/aria/dataGrid.js

@@ -524,33 +524,34 @@ export function dataGrid(aria) {
       sortType = aria.SortType.ASCENDING;
     }
 
-    var comparator = function (row1, row2) {
-      if(row1.children[columnIndex].classList.contains('align-top') || row2.children[columnIndex].classList.contains('align-top')) {
-        return
-      }
-      var row1Text = row1.children[columnIndex].innerText;
-      var row2Text = row2.children[columnIndex].innerText;
-      var row1Value = parseInt(row1Text) ? parseInt(row1Text.replace(/[^0-9\.]+/g, '')) : row1Text
-      var row2Value = parseInt(row2Text) ? parseInt(row2Text.replace(/[^0-9\.]+/g, '')) : row2Text
-
-      var orderValue = parseInt(row1Text) ? 'numbers' : 'strings'
-
-      if (sortType === aria.SortType.ASCENDING && orderValue === 'numbers') {
-        return row1Value - row2Value;
+    function parseNumeric(text) {
+      var cleaned = text.replace(/[^0-9.\-]+/g, ''); // conserva dígitos, punto y signo
+      if (cleaned === '' || cleaned === '-' || cleaned === '.') {
+        return NaN;
       }
+      return parseFloat(cleaned);
+    }
 
-      if (sortType === aria.SortType.DESCENDING && orderValue === 'numbers') {
-        return row2Value - row1Value;
+    var comparator = function (row1, row2) {
+      var cell1 = row1.children[columnIndex];
+      var cell2 = row2.children[columnIndex];
+      if (cell1.classList.contains('align-top') || cell2.classList.contains('align-top')) {
+        return 0;
       }
+      var row1Text = cell1.innerText;
+      var row2Text = cell2.innerText;
 
-      if (sortType === aria.SortType.ASCENDING && orderValue === 'strings') {
-        return row1Value.toString().localeCompare(row2Value);
-      }
+      var row1Value = parseNumeric(row1Text);
+      var row2Value = parseNumeric(row2Text);
 
-      if (sortType === aria.SortType.DESCENDING && orderValue === 'strings') {
-        return row2Value.toString().localeCompare(row1Value);
+      var result;
+      if (!isNaN(row1Value) && !isNaN(row2Value)) {
+        result = row1Value - row2Value; // signo y cero correctos
+      } else {
+        result = row1Text.toString().localeCompare(row2Text.toString()); // fallback string
       }
 
+      return (sortType === aria.SortType.ASCENDING) ? result : -result;
     };
 
     this.sortRows(comparator);
@@ -574,9 +575,11 @@ export function dataGrid(aria) {
    *  Comparison function to sort the rows
    */
   aria.Grid.prototype.sortRows = function (compareFn) {
-    var rows = this.gridNode.querySelectorAll("tbody tr");
+    var rows = Array.prototype.slice.call(this.gridNode.querySelectorAll("tbody tr"));
     var rowWrapper = this.gridNode.querySelector('tbody');
-    var dataRows = Array.prototype.slice.call(rows, 1);
+    // La fila de filtro contiene controles de búsqueda/selección; las filas de datos no.
+    var hasFilterRow = rows.length > 0 && rows[0].querySelector('input[type="search"], select');
+    var dataRows = hasFilterRow ? rows.slice(1) : rows;
 
     dataRows.sort(compareFn);
 

package/src/js/aria/linksList.js

@@ -31,12 +31,34 @@ export function LinksList(aria) {
 
   function wrapActiveElement(elementActive) {
     const getText = elementActive.querySelector('div[data-element="c-links-list__text"]');
-    getText.innerHTML = `<strong class="font-bold">${elementActive.textContent}</strong>`;
+    wrapStrong(getText);
   };
 
   function deactivateElement(elementDeactivated) {
     const getText = elementDeactivated.querySelector('div[data-element="c-links-list__text"]');
-    const replaceStrong = getText.textContent.replace('<strong class="font-bold">', '').replace('<strong/>', '');
-    getText.textContent = `${replaceStrong}`;
+    unwrapStrong(getText);
+  };
+
+  // Wrap the existing children of `node` in a <strong> in place, preserving
+  // any markup the consumer passed in item.html (icons, spans, etc.).
+  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();
   };
 }

package/src/js/aria/listbox.js

@@ -463,7 +463,7 @@ export function listbox(aria) {
       return;
     }
 
-    currentItem = document.getElementById(this.activeDescendant);
+    var currentItem = document.getElementById(this.activeDescendant);
     previousItem = currentItem.previousElementSibling;
 
     if (previousItem) {
@@ -486,7 +486,7 @@ export function listbox(aria) {
       return;
     }
 
-    currentItem = document.getElementById(this.activeDescendant);
+    var currentItem = document.getElementById(this.activeDescendant);
     nextItem = currentItem.nextElementSibling;
 
     if (nextItem) {
@@ -565,7 +565,7 @@ export function listbox(aria) {
       if (isActive(element, activeItem)) {
         element.setAttribute('aria-selected', 'true');
         if (!allowMultiple && getListBoxButton.dataset.change) {
-          getListBoxButtonText.innerHTML = element.textContent;
+          getListBoxButtonText.textContent = element.textContent;
         }
       } else {
         element.setAttribute('aria-selected', 'false');

package/src/js/aria/tabs.js

@@ -229,7 +229,7 @@ export function tabs(aria) {
 
     // Detect if a tab is deletable
     function determineDeletable (event) {
-      target = event.target;
+      var target = event.target;
 
       if (target.getAttribute('data-deletable') !== null) {
         // Delete target tab
@@ -251,7 +251,8 @@ export function tabs(aria) {
     // Deletes a tab and its panel
     function deleteTab (event) {
       var target = event.target;
-      var panel = elem.getElementById(target.getAttribute('aria-controls'));
+      var controls = target.getAttribute('aria-controls');
+      var panel = elem.querySelector('#' + controls);
 
       target.parentElement.removeChild(target);
       panel.parentElement.removeChild(panel);
@@ -281,17 +282,30 @@ export function tabs(aria) {
       //Add active class to current tab
       element.classList.add("c-tabs__link--is-active");
       element.setAttribute('role', 'tab');
+      // Wrap the existing children in a <strong> in place, preserving any
+      // markup the consumer put in the label (icons, SVG, spans).
       if(element.querySelector('strong') === null) {
-        element.innerHTML = `<strong class="font-bold">${element.innerHTML}</strong>` ;
+        const strong = document.createElement('strong');
+        strong.className = 'font-bold';
+        while (element.firstChild) {
+          strong.appendChild(element.firstChild);
+        }
+        element.appendChild(strong);
       }
     }
 
     function removeActiveClass(element) {
       element.classList.remove("c-tabs__link--is-active");
       element.removeAttribute('role');
-      if(element.querySelector('strong')) {
-        const replaceStrong = element.innerHTML.replace('<strong class="font-bold">', '').replace('<strong/>', '');
-        element.innerHTML = `${replaceStrong}`;
+      // Unwrap only the <strong> we added (direct child with font-bold),
+      // replacing it with its children. A consumer-provided <strong> nested
+      // in the label is left untouched.
+      const strong = element.querySelector(':scope > strong.font-bold');
+      if (strong) {
+        while (strong.firstChild) {
+          element.insertBefore(strong.firstChild, strong);
+        }
+        strong.remove();
       }
     }
 

package/src/js/aria/tree.js

@@ -1,3 +1,5 @@
+import { escapeHtml, safeHref } from './utils.js';
+
 export function Tree(aria) {
   /*
 *   This content is licensed according to the W3C Software License at
@@ -49,7 +51,7 @@ export function Tree(aria) {
       if (paramsRaw) {
         this.params = JSON.parse(paramsRaw);
         this.describedBy = this.params.describedBy ?? "";
-        if (this.params.fieldset.describedBy)
+        if (this.params.fieldset?.describedBy)
           this.describedBy = this.params.fieldset.describedBy;
         this.hasFieldset = this.params.fieldset ?? false;
       }
@@ -95,6 +97,32 @@ export function Tree(aria) {
     }
   };
 
+  // Serializes dynamic attributes with a strict allow-list: only well-formed data-*/aria-*
+  // names or exactly {title, role, id, class}. The [a-z0-9-] pattern rejects keys with spaces,
+  // '=', quotes, '<', '>' or '/', closing the "data-x onmouseover=..." bypass. Both the name
+  // and the value are escaped.
+  function safeAttrs(obj) {
+    var out = '';
+    var dataAria = /^(data|aria)-[a-z0-9-]+$/;
+    var exact = { title: true, role: true, id: true, class: true };
+    for (var a in obj || {}) {
+      var key = String(a).toLowerCase();
+      if (!dataAria.test(key) && exact[key] !== true) continue;
+      out += ' ' + escapeHtml(a) + '="' + escapeHtml(obj[a]) + '"';
+    }
+    return out;
+  }
+
+  // Returns the consumer's intentional HTML (node.html) or, otherwise, the escaped text.
+  function htmlOrText(node) {
+    return node.html ? node.html : escapeHtml(node.text || '');
+  }
+
+  // Suffix ' escaped-class' to concatenate after fixed classes, or '' if none.
+  function optClasses(cls) {
+    return cls ? ' ' + escapeHtml(cls) : '';
+  }
+
   function checkboxItem(item, id, name, type, params, describedBy, hasFieldset) {
     name = name || item.name || '';
     var hasHint = item.hint && (item.hint.text || item.hint.html);
@@ -105,7 +133,7 @@ export function Tree(aria) {
     // Wrapper
     var html = '<div' +
       ((params.hasDividers ? ' class="border-t border-b border-neutral-base -mb-px' : '') +
-        (item.classes ? ' ' + item.classes : '') + '"').replace('""', '') +
+        optClasses(item.classes) + '"').replace('""', '') +
       '>' +
       '<div class="relative flex items-start py-xs">';
 
@@ -120,13 +148,13 @@ export function Tree(aria) {
         ((item.isIndeterminate && item.indeterminateChecked)
           ? ' c-checkboxes__indeterminate-active'
           : '') + '"' +
-        ' id="' + id + '-input"' +
-        ' name="' + name + '"' +
+        ' id="' + escapeHtml(id) + '-input"' +
+        ' name="' + escapeHtml(name) + '"' +
         (type === 'checkbox' ? ' type="checkbox" role="checkbox"' : ' type="radio"') +
-        ' value="' + (item.value || '') + '"' +
+        ' value="' + escapeHtml(item.value || '') + '"' +
         (item.checked ? ' checked' : '') +
         (item.disabled ? ' disabled' : '') +
-        (itemDescribed ? ' aria-describedby="' + itemDescribed + '"' : '') +
+        (itemDescribed ? ' aria-describedby="' + escapeHtml(itemDescribed) + '"' : '') +
         (params.errorMessage ? ' aria-invalid="true"' : '');
 
       if (item.isIndeterminate || item.indeterminateChecked) {
@@ -136,62 +164,58 @@ export function Tree(aria) {
           '"';
       }
       html += '>' +
-        '</div>' +            // cierre flex items-center
+        '</div>' +            // closes flex items-center
         '<div class="flex-1 pt-0.5 leading-5">';
 
       // Label
       var lblCls = (item.label && item.label.classes)
         ? item.label.classes
         : 'block relative -top-xs -left-8 pl-8 py-xs';
-      html += '<label for="' + id + '-input" class="' + lblCls + '">';
-      html += item.html ? item.html : (item.text || '');
+      html += '<label for="' + escapeHtml(id) + '-input" class="' + escapeHtml(lblCls) + '">';
+      html += htmlOrText(item);
       html += '</label>';
 
       // Hint
       if (hasHint) {
-        html += '<div id="' + itemHintId + '"' +
-          (item.hint.classes ? ' class="' + item.hint.classes + '"' : '') +
+        html += '<div id="' + escapeHtml(itemHintId) + '"' +
+          (item.hint.classes ? ' class="' + escapeHtml(item.hint.classes) + '"' : '') +
           '>';
-        html += item.hint.html || item.hint.text;
+        html += htmlOrText(item.hint);
         html += '</div>';
       }
-      html += '</div>';  // cierre flex-1
+      html += '</div>';  // closes flex-1
     }
 
     // Navigation branch
     if (type === 'navigation') {
       if (item.href) {
         html += '<a' +
-          (id ? ' id="' + id + '-link"' : '') +
-          ' href="' + item.href + '"' +
+          (id ? ' id="' + escapeHtml(id) + '-link"' : '') +
+          ' href="' + escapeHtml(safeHref(item.href)) + '"' +
           ' class="block px-xs focus:bg-warning-base focus:outline-hidden ' +
           'focus:shadow-outline-focus focus:text-black' +
-          (item.classes ? ' ' + item.classes : '') +
+          optClasses(item.classes) +
           (!item.disabled ? ' hover:text-primary-base hover:underline'
             : ' no-underline pointer-events-none') + '"' +
-          (item.title ? ' title="' + item.title + '"' : '') +
+          (item.title ? ' title="' + escapeHtml(item.title) + '"' : '') +
           (item.active ? ' aria-current="page"' : '') +
           (item.disabled ? ' aria-disabled="true" tabindex="-1"' : '') +
-          (item.target ? ' target="' + item.target + '"' : '') +
+          (item.target ? ' target="' + escapeHtml(item.target) + '"' : '') +
           '>';
         html += item.active
-          ? '<strong class="font-bold">' +
-          (item.html || item.text) +
-          '</strong>'
-          : (item.html || item.text);
+          ? '<strong class="font-bold">' + htmlOrText(item) + '</strong>'
+          : htmlOrText(item);
         html += '</a>';
       } else {
         html += '<span' +
-          (id ? ' id="' + id + '-link"' : '') +
+          (id ? ' id="' + escapeHtml(id) + '-link"' : '') +
           ' class="block px-xs' +
-          (item.classes ? ' ' + item.classes : '') + '"' +
-          (item.title ? ' title="' + item.title + '"' : '') +
+          optClasses(item.classes) + '"' +
+          (item.title ? ' title="' + escapeHtml(item.title) + '"' : '') +
           '>';
         html += item.active
-          ? '<strong class="font-bold">' +
-          (item.html || item.text) +
-          '</strong>'
-          : (item.html || item.text);
+          ? '<strong class="font-bold">' + htmlOrText(item) + '</strong>'
+          : htmlOrText(item);
         html += '</span>';
       }
     }
@@ -209,10 +233,8 @@ export function Tree(aria) {
           '<div class="flex items-center relative ' +
           'focus:bg-warning-base focus:outline-hidden ' +
           'focus:shadow-outline-focus focus:text-black text-left' +
-          (itemNode.classes ? ' ' + itemNode.classes : '') + '"';
-        for (var a in itemNode.attributes || {}) {
-          html += ' ' + a + '="' + itemNode.attributes[a] + '"';
-        }
+          optClasses(itemNode.classes) + '"';
+        html += safeAttrs(itemNode.attributes);
         html += '>' +
           '<span class="c-tree__icon absolute top-3 -left-4 flex items-center ' +
           'w-4 h-2.5 text-primary-base font-bold ' +
@@ -238,10 +260,8 @@ export function Tree(aria) {
 
     if (itemNode.sub && itemNode.sub.items) {
       html += '<ul role="group" class="c-tree__itemgroup' +
-        (itemNode.sub.classes ? ' ' + itemNode.sub.classes : '') + '"';
-      for (var b in itemNode.sub.attributes || {}) {
-        html += ' ' + b + '="' + itemNode.sub.attributes[b] + '"';
-      }
+        optClasses(itemNode.sub.classes) + '"';
+      html += safeAttrs(itemNode.sub.attributes);
       html += '>';
 
       if (!lazyRendering || onlySub) {
@@ -259,7 +279,7 @@ export function Tree(aria) {
             : '';
 
           html += '<li class="' + clsBase + '" ' +
-            'id="' + subId + '" ' +
+            'id="' + escapeHtml(subId) + '" ' +
             'role="treeitem" ' +
             'data-module="c-tree__item"' +
             expanded +
@@ -279,10 +299,10 @@ export function Tree(aria) {
             );
           } else {
             html += '<div class="block' +
-              (subitem.classes ? ' ' + subitem.classes : '') +
+              optClasses(subitem.classes) +
               (subitem.active ? ' font-bold' : '') +
               '"' +
-              (subitem.title ? ' title="' + subitem.title + '"' : '') +
+              (subitem.title ? ' title="' + escapeHtml(subitem.title) + '"' : '') +
               (subitem.active ? ' aria-current="page"' : '') +
               '>';
             if (subitem.active) {

package/src/js/aria/treeitem.js

@@ -149,7 +149,7 @@ export function Treeitem(aria) {
       return;
     }
 
-    if (event.shift) {
+    if (event.shiftKey) {
       if (isPrintableCharacter(char)) {
         printableCharacter(this);
       }
@@ -158,14 +158,18 @@ export function Treeitem(aria) {
       switch (event.keyCode) {
         case this.keyCode.SPACE:
         case this.keyCode.RETURN:
-          const typeOfInput = getCurrentCheckbox.type
-          if (typeOfInput === 'radio') {
-            for (let item of getAllChildrenOfTree) {
-              item.checked = false
+          // Navigation trees have no checkbox/radio: skip the toggle but still
+          // swallow the key so it doesn't propagate.
+          if (getCurrentCheckbox) {
+            const typeOfInput = getCurrentCheckbox.type
+            if (typeOfInput === 'radio') {
+              for (let item of getAllChildrenOfTree) {
+                item.checked = false
+              }
             }
+            getCurrentCheckbox.checked = getCurrentCheckbox.checked === true ? false : true
+            targetElement.setAttribute('aria-checked', getCurrentCheckbox.checked ? 'true' : 'false');
           }
-          getCurrentCheckbox.checked = getCurrentCheckbox.checked === true ? false : true
-          targetElement.setAttribute('aria-checked', getCurrentCheckbox.checked ? 'true' : 'false');
           flag = true;
           break;
 
@@ -279,11 +283,16 @@ export function Treeitem(aria) {
   };
 
   function arrayOrSingleElement(elementId, itemsIds, open) {
+    // Resolve the navigation flag once so every branch (array and single) treats
+    // tree-navigation items consistently.
+    const getElement = document.getElementById(elementId);
+    const isTreeNavigation = getElement ? getElement.hasAttribute('data-tree-navigation') : false;
+
     if (typeof itemsIds === 'object' && open !== null) {
       itemsIds.forEach((item) => {
         const selectItem = document.querySelector(`#${elementId} #${item}`)
         if (selectItem) {
-          activateElement(selectItem, open)
+          activateElement(selectItem, open, isTreeNavigation)
         } else {
           returnMessage()
         }
@@ -291,8 +300,6 @@ export function Treeitem(aria) {
     }
 
     if (typeof itemsIds !== 'object' && open !== null) {
-      const getElement = document.querySelector(`#${elementId}`);
-      const isTreeNavigation = getElement.hasAttribute('data-tree-navigation');
       const selectItem = document.querySelector(`#${elementId} #${itemsIds}`)
       if (selectItem) {
         activateElement(selectItem, open, isTreeNavigation)
@@ -305,7 +312,7 @@ export function Treeitem(aria) {
       itemsIds.forEach((item) => {
         const selectItem = document.querySelector(`#${elementId} #${item[0]}`)
         if (selectItem) {
-          activateElement(selectItem, item[1])
+          activateElement(selectItem, item[1], isTreeNavigation)
         } else {
           console.log('There is no item with this id in the document.');
           return null;
@@ -319,8 +326,10 @@ export function Treeitem(aria) {
       item.setAttribute('aria-expanded', 'true');
       if (treeNav) {
         const getLink = item.querySelector('a')
-        getLink.setAttribute("aria-current", "page");
-        getLink.innerHTML = `<strong class="font-bold">${getLink.textContent}</strong>`;
+        if (getLink) {
+          getLink.setAttribute("aria-current", "page");
+          getLink.innerHTML = `<strong class="font-bold">${getLink.textContent}</strong>`;
+        }
       }
       recursiveParent(item)
     } else {

package/src/js/aria/utils.js

@@ -125,6 +125,27 @@ export function utils(aria) {
   };
 }
 
+var HTML_ESCAPES = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
+
+// Escapes & " ' < > for safe use in HTML content and attributes. null/undefined -> ''.
+export function escapeHtml(value) {
+  if (value === null || value === undefined) return '';
+  return String(value).replace(/[&<>"']/g, function (c) { return HTML_ESCAPES[c]; });
+}
+
+// Neutralizes dangerous schemes in href via an allow-list: relative URLs or http/https/mailto/tel.
+// Strips C0 control chars (tab/LF/CR included) before probing, since the browser's URL parser would
+// remove them and reconstruct schemes like "java\tscript:". Any other scheme returns '#'.
+export function safeHref(value) {
+  if (value === null || value === undefined) return '';
+  var v = String(value);
+  var probe = v.replace(/[\u0000-\u001F]/g, '').trim().toLowerCase();
+  var scheme = probe.match(/^([a-z][a-z0-9+.-]*):/);
+  if (!scheme) return v;
+  var allowed = { http: true, https: true, mailto: true, tel: true };
+  return allowed[scheme[1]] === true ? v : '#';
+}
+
 // Function to convert ISO date(s) to DD-MM-YYYY format
 export function formatDateToDDMMYYYY(isoDate) {
   if (!isoDate) return '';