desy-html 8.6.0 → 8.7.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/tabs.js

@@ -281,13 +281,13 @@ 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>`;
+      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;
+      element.innerHTML = element.innerHTML;
     }
 
     window.activateItemTabs = function (menuId, tabItemId) {
@@ -298,12 +298,12 @@ export function tabs(aria) {
         if (activeItemTab) {
           document.querySelectorAll('.c-tabs__link').forEach((tab) => {
             tab.classList.remove("c-tabs__link--is-active");
-            tab.innerHTML = tab.textContent;
+            tab.innerHTML = tab.innerHTML;
           })
 
           activeItemTab.classList.add("c-tabs__link--is-active");
           activeItemTab.setAttribute('role', 'tab');
-          activeItemTab.innerHTML = `<strong class="font-bold">${activeItemTab.textContent}</strong>`;
+          activeItemTab.innerHTML = `<strong class="font-bold">${activeItemTab.innerHTML}</strong>`;
 
           document.querySelectorAll('.c-tabs__panel').forEach((panel) => {
             panel.setAttribute('hidden', 'hidden')

package/src/js/desy-html.js

@@ -18,8 +18,9 @@ import { notification } from './aria/notification.js';
 import { RadioButton } from './aria/radioButton.js';
 import { CheckBox } from './aria/checkBoxes.js';
 import { MenuVertical } from './aria/MenuVertical.js';
-import { MenuNavigation } from './aria/MenuNavigation.js';
 import { HeaderNavigation } from './aria/HeaderNavigation.js';
+import { MenuHorizontal } from './aria/MenuHorizontal.js';
+import { MenuNavigation } from './aria/MenuNavigation.js';
 import { Nav } from './aria/Nav.js';
 
 
@@ -375,12 +376,21 @@ export function MenuVerticalComponent(aria) {
   });
 }
 
+export function MenuHorizontalComponent(aria) {
+  MenuHorizontal(aria);
+  const modules = document.querySelectorAll('[data-module="c-menu-horizontal"]');
+  [...modules].forEach((module) => {
+    const MenuHorizontal = new aria.MenuHorizontal(module);
+    MenuHorizontal.init(null);
+  });
+}
+
 export function MenuNavigationComponent(aria) {
   MenuNavigation(aria);
   const modules = document.querySelectorAll('[data-module="c-menu-navigation"]');
   [...modules].forEach((module) => {
     const menuNavigation = new aria.MenuNavigation(module);
-    menuNavigation.init();
+    menuNavigation.init(null);
   });
 }
 

package/src/js/index.js

@@ -21,6 +21,7 @@ import {
   radioButtonComponent,
   checkBoxComponent,
   MenuVerticalComponent,
+  MenuHorizontalComponent,
   MenuNavigationComponent,
   HeaderNavigationComponent,
   NavComponent
@@ -45,6 +46,7 @@ notificationComponent(aria);
 radioButtonComponent(aria);
 checkBoxComponent(aria);
 MenuVerticalComponent(aria);
+MenuHorizontalComponent(aria);
 MenuNavigationComponent(aria);
 HeaderNavigationComponent(aria);
 NavComponent(aria);

package/src/templates/components/accordion/_template.accordion.njk

@@ -38,7 +38,7 @@
       {% endif %}
     {% endif %}
     {% if params.showControl %}
-    <button class="c-accordion__toggle-all ml-auto py-base text-sm text-neutral-dark underline focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus text-right">
+    <button class="c-accordion__toggle-all ml-auto py-base text-sm text-neutral-dark underline focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus text-right" type="button">
       Mostrar todo
     </button>
     {% endif %}
@@ -57,6 +57,7 @@
 
         <button
         id="{{ id }}-title"
+        type="button"
         class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if item.disabled %} cursor-not-allowed{% endif %}"
         aria-controls="{{ id }}"
         {% if item.open %}

package/src/templates/components/accordion-history/_template.accordion-history.njk

@@ -39,7 +39,7 @@
       {% endif %}
     {% endif %}
     {% if params.showControl %}
-    <button class="c-accordion__toggle-all ml-auto py-base text-sm text-neutral-dark underline focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus text-right">
+    <button class="c-accordion__toggle-all ml-auto py-base text-sm text-neutral-dark underline focus:text-black focus:bg-warning-base focus:outline-none focus:shadow-outline-focus text-right" type="button">
       Mostrar todo
     </button>
     {% endif %}
@@ -58,6 +58,7 @@
 
         <button
         id="{{ id }}-title"
+        type="button"
         class="c-accordion__trigger group relative w-full py-sm font-semibold text-left cursor-pointer focus:bg-warning-base focus:outline-none focus:shadow-outline-focus focus:text-black {%- if item.disabled %} cursor-not-allowed{% endif %}"
         aria-controls="{{ id }}"
         {% if item.open %}

package/src/templates/components/header/_template.header.header__offcanvas.njk

@@ -6,6 +6,7 @@
         <button
           onclick="closeDialog(this)"
           id="header-offcanvas-button-close"
+          type="button"
           class="c-button c-button--sm c-button--transparent m-sm">{{ params.text }} <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" width="14" height="14" class="self-center ml-2" aria-hidden="true"><path fill="currentColor" d="M8.591 7.177a.25.25 0 010-.354l4.616-4.616A1 1 0 1011.793.793L7.177 5.409a.25.25 0 01-.354 0L2.207.793A1 1 0 00.793 2.207l4.616 4.616a.25.25 0 010 .354L.793 11.793a1 1 0 001.414 1.414l4.616-4.616a.25.25 0 01.354 0l4.616 4.616a1 1 0 001.414-1.414z"/></svg></button>
       </div>
       {% if caller %}

package/src/templates/components/header/_template.header.header__offcanvasButton.njk

@@ -1,6 +1,7 @@
 <!-- header__offcanvasButton -->
 <div class="{{ params.classes if params.classes else '-mr-2 flex lg:hidden' }}">
 	<button id="header-offcanvas-button"
+				type="button"
 				onclick="openDialog('header-offcanvas', this)"
         tabindex="0"
         class="inline-flex items-center px-3 py-4 text-sm text-black focus:outline-none focus:shadow-outline-black focus:bg-warning-base" aria-haspopup="true">

package/src/templates/components/menu-horizontal/_examples.menu-horizontal.njk

@@ -63,6 +63,7 @@
   },
   {
     "name": "con item activo",
+    "description": 'Añade active: true a un item para mostrarlo activo inicialmente. También puedes usar con javascript la función global <code>activateItemMenuHorizontal(elementMenu, idItemSeleccionado)</code> para seleccionar un item de un menú, usando sus ids. Ej: Abre la consola del navegador y escribe <code>activateItemMenuHorizontal("mi-menu-horizontal", "menu-item-2")</code> para desactivar el item actual y activar el segundo item de este ejemplo.',
     "data": {
       "items": [
         {
@@ -79,7 +80,7 @@
         },
         {
           "href": "http://www.google.com",
-          "text": "Opción 4 activa",
+          "text": "Opción 4",
           "active": true
         },
         {
@@ -88,7 +89,8 @@
         }
       ],
       "attributes": {
-        "aria-label": "Menu horizontal"
+        "aria-label": "Menu horizontal",
+        "id":"mi-menu-horizontal"
       }
     }
   },
@@ -311,4 +313,4 @@
       ]
     }
   }
-] %}
+] %}

package/src/templates/components/menu-horizontal/_template.menu-horizontal.njk

@@ -3,7 +3,7 @@
 {% set idPrefix = params.idPrefix if params.idPrefix else "menu-item" %}
 
 <!-- menu-horizontal -->
-<nav class="c-menu-horizontal {%- if params.classes %} {{ params.classes }}{% endif -%}"
+<nav data-module="c-menu-horizontal" class="c-menu-horizontal {%- if params.classes %} {{ params.classes }}{% endif -%}"
 {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
   <ul class="c-menu-horizontal__list lg:flex lg:flex-wrap">
     {% for item in params.items %}
@@ -33,4 +33,4 @@
     {% endfor %}
   </ul>
 </nav>
-<!-- /menu-horizontal -->
+<!-- /menu-horizontal -->