desy-html 5.0.0 → 5.2.0

package/docs/_include.template-header.njk

@@ -250,9 +250,17 @@
         href: "examples-textarea.html",
         text: "Textarea"
       },
+      {
+        href: "examples-toggle.html",
+        text: "Toggle"
+      },
       {
         href: "examples-tooltip.html",
         text: "Tooltip"
+      },
+      {
+        href: "examples-tree.html",
+        text: "Tree"
       }],
       attributes: {
         "aria-label": "Navegación ejemplos"

package/docs/_macro.example-render.njk

@@ -89,8 +89,12 @@ import componentTableAdvanced %}
 import componentTabs %}
 {% from "components/textarea/_macro.textarea.njk"
 import componentTextarea %}
+{% from "components/toggle/_macro.toggle.njk"
+import componentToggle %}
 {% from "components/tooltip/_macro.tooltip.njk"
 import componentTooltip %}
+{% from "components/tree/_macro.tree.njk"
+import componentTree %}
 
 {% macro exampleRender(data) %}
   {% set exampleComponent = data.data.exampleComponent %}
@@ -204,8 +208,12 @@ import componentTooltip %}
       {{ componentTabs(example.data) }}
       {% elseif exampleComponent == "textarea" %}
       {{ componentTextarea(example.data) }}
+      {% elseif exampleComponent == "toggle" %}
+      {{ componentToggle(example.data) }}
       {% elseif exampleComponent == "tooltip" %}
       {{ componentTooltip(example.data) }}
+      {% elseif exampleComponent == "tree" %}
+      {{ componentTree(example.data) }}
       {% endif %}
       <div class="mt-xl py-base">
         <span x-text="textShow" @click="isOpenCode = !isOpenCode; isOpenCode ? textShow = 'Hide code' : textShow = 'Show code'" class="text-primary-base hover:text-primary-dark underline cursor-pointer">Show code</span>

package/docs/componentes.html

@@ -145,9 +145,15 @@
     <div>
       <p class="c-paragraph-base"><a href="examples-textarea.html" class="c-link">Textarea</a></p>
     </div>
+    <div>
+      <p class="c-paragraph-base"><a href="examples-toggle.html" class="c-link">Toggle</a></p>
+    </div>
     <div>
       <p class="c-paragraph-base"><a href="examples-tooltip.html" class="c-link">Tooltip</a></p>
     </div>
+    <div>
+      <p class="c-paragraph-base"><a href="examples-tree.html" class="c-link">Tree</a></p>
+    </div>
   </div>
   <div class="pb-2xl"></div>
 {% endblock %}

package/docs/ds/_ds.example.menu-vertical.njk

@@ -28,7 +28,7 @@
         }
       ],
       "attributes": {
-        "aria-label": "Menu vertical"
+        "aria-label": "Árbol"
       }
     })  }}
   </div>
@@ -58,7 +58,7 @@
         }
       ],
       "attributes": {
-        "aria-label": "Menu vertical"
+        "aria-label": "Árbol"
       }
     })  }}
   </div>
@@ -123,7 +123,7 @@
         }
       ],
       "attributes": {
-        "aria-label": "Menu vertical"
+        "aria-label": "Árbol"
       }
     })  }}
   </div>

package/docs/examples-toggle.html

@@ -0,0 +1,5 @@
+{% set title = "Toggle. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% extends "_template.examples.njk" %}
+{% block contentBlock %}
+  {% import "components/toggle/_examples.toggle.njk" as exampleData %}
+{% endblock %}

package/docs/examples-tree.html

@@ -0,0 +1,5 @@
+{% set title = "Tree. Componente, parámetros y ejemplos. Documentación de desy-html. Gobierno de Aragón" %}
+{% extends "_template.examples.njk" %}
+{% block contentBlock %}
+  {% import "components/tree/_examples.tree.njk" as exampleData %}
+{% endblock %}

package/docs/index.html

@@ -38,6 +38,24 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.5.2.0</h3>
+  <ul class="text-sm">
+    <li>Added toggle component.</li>
+    <li>Added searchbar to tree component.</li>
+    <li>Minor validation fixes.</li>
+  </ul>
+  <h3>v.5.1.1</h3>
+  <ul class="text-sm">
+    <li>Fixed pagination from having too much listbox height.</li>
+  </ul>
+  <h3>v.5.1.0</h3>
+  <ul class="text-sm">
+    <li>Added tree component.</li>
+  </ul>
+  <h3>v.5.0.1</h3>
+  <ul class="text-sm">
+    <li>Fixed accesibility bad semantics in subnav. Added dropdown contentHtml rendering and example.</li>
+  </ul>
   <h3>v.5.0.0</h3>
   <ul class="text-sm">
     <li>Header now uses correct dropdown params.</li>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "5.0.0",
+  "version": "5.2.0",
   "description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
   "author": {
     "name": "Desy (SDA Servicios Digitales de Aragón)",

package/src/css/styles.css

@@ -35,6 +35,7 @@
 @import "../templates/components/skip-link/_styles.skip-link.css";
 @import "../templates/components/table-advanced/_styles.table-advanced.css";
 @import "../templates/components/tabs/_styles.tabs.css";
+@import "../templates/components/tree/_styles.tree.css";
 @import "./component.form-group.css";
 @import "./component.tippy-box.css";
 

package/src/js/aria/tree.js

@@ -0,0 +1,245 @@
+export function Tree(aria) {
+  /*
+*   This content is licensed according to the W3C Software License at
+*   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+*
+*   File:   Tree.js
+*
+*   Desc:   Tree widget that implements ARIA Authoring Practices
+*           for a tree being used as a file viewer
+*/
+
+  /*
+  *   @constructor
+*
+*   @desc
+*       Tree item object for representing the state and user interactions for a
+*       tree widget
+*
+*   @param node
+*       An element with the role=tree attribute
+  */
+  aria.Tree = function (node) {
+  // Check whether node is a DOM element
+  if (typeof node !== 'object') {
+    return;
+  }
+
+  this.domNode = node;
+
+  this.treeitems = [];
+  this.firstChars = [];
+
+  this.firstTreeitem = null;
+  this.lastTreeitem = null;
+
+};
+
+  aria.Tree.prototype.init = function () {
+
+    function findTreeitems (node, tree, group) {
+
+      var elem = node.firstElementChild;
+      var ti = group;
+
+      while (elem) {
+
+        if (elem.tagName.toLowerCase() === 'li') {
+          ti = new aria.Treeitem(elem, tree, group);
+          ti.init();
+          tree.treeitems.push(ti);
+          tree.firstChars.push(ti.label.substring(0, 1).toLowerCase());
+        }
+
+        if (elem.firstElementChild) {
+          findTreeitems(elem, tree, ti);
+        }
+
+        elem = elem.nextElementSibling;
+      }
+    }
+
+    // initialize pop up menus
+    if (!this.domNode.getAttribute('role')) {
+      this.domNode.setAttribute('role', 'tree');
+    }
+
+    findTreeitems(this.domNode, this, false);
+
+    this.updateVisibleTreeitems();
+
+    this.firstTreeitem.domNode.tabIndex = 0;
+
+  };
+
+  aria.Tree.prototype.setFocusToItem = function (treeitem) {
+
+    for (var i = 0; i < this.treeitems.length; i++) {
+      var ti = this.treeitems[i];
+
+      if (ti === treeitem) {
+        ti.domNode.tabIndex = 0;
+        ti.domNode.focus();
+      }
+      else {
+        ti.domNode.tabIndex = -1;
+      }
+    }
+
+  };
+
+  aria.Tree.prototype.setFocusToNextItem = function (currentItem) {
+
+    var nextItem = false;
+
+    for (var i = (this.treeitems.length - 1); i >= 0; i--) {
+      var ti = this.treeitems[i];
+      if (ti === currentItem) {
+        break;
+      }
+      if (ti.isVisible) {
+        nextItem = ti;
+      }
+    }
+
+    if (nextItem) {
+      this.setFocusToItem(nextItem);
+    }
+
+  };
+
+  aria.Tree.prototype.setFocusToPreviousItem = function (currentItem) {
+
+    var prevItem = false;
+
+    for (var i = 0; i < this.treeitems.length; i++) {
+      var ti = this.treeitems[i];
+      if (ti === currentItem) {
+        break;
+      }
+      if (ti.isVisible) {
+        prevItem = ti;
+      }
+    }
+
+    if (prevItem) {
+      this.setFocusToItem(prevItem);
+    }
+  };
+
+  aria.Tree.prototype.setFocusToParentItem = function (currentItem) {
+
+    if (currentItem.groupTreeitem) {
+      this.setFocusToItem(currentItem.groupTreeitem);
+    }
+  };
+
+  aria.Tree.prototype.setFocusToFirstItem = function () {
+    this.setFocusToItem(this.firstTreeitem);
+  };
+
+  aria.Tree.prototype.setFocusToLastItem = function () {
+    this.setFocusToItem(this.lastTreeitem);
+  };
+
+  aria.Tree.prototype.expandTreeitem = function (currentItem) {
+
+    if (currentItem.isExpandable) {
+      currentItem.domNode.setAttribute('aria-expanded', true);
+      this.updateVisibleTreeitems();
+    }
+
+  };
+
+  aria.Tree.prototype.expandAllSiblingItems = function (currentItem) {
+    for (var i = 0; i < this.treeitems.length; i++) {
+      var ti = this.treeitems[i];
+
+      if ((ti.groupTreeitem === currentItem.groupTreeitem) && ti.isExpandable) {
+        this.expandTreeitem(ti);
+      }
+    }
+
+  };
+
+  aria.Tree.prototype.collapseTreeitem = function (currentItem) {
+
+    var groupTreeitem = false;
+
+    if (currentItem.isExpanded()) {
+      groupTreeitem = currentItem;
+    }
+    else {
+      groupTreeitem = currentItem.groupTreeitem;
+    }
+
+    if (groupTreeitem) {
+      groupTreeitem.domNode.setAttribute('aria-expanded', false);
+      this.updateVisibleTreeitems();
+      this.setFocusToItem(groupTreeitem);
+    }
+
+  };
+
+  aria.Tree.prototype.updateVisibleTreeitems = function () {
+
+    this.firstTreeitem = this.treeitems[0];
+
+    for (var i = 0; i < this.treeitems.length; i++) {
+      var ti = this.treeitems[i];
+
+      var parent = ti.domNode.parentNode;
+
+      ti.isVisible = true;
+
+      while (parent && (parent !== this.domNode)) {
+
+        if (parent.getAttribute('aria-expanded') == 'false') {
+          ti.isVisible = false;
+        }
+        parent = parent.parentNode;
+      }
+
+      if (ti.isVisible) {
+        this.lastTreeitem = ti;
+      }
+    }
+
+  };
+
+  aria.Tree.prototype.setFocusByFirstCharacter = function (currentItem, char) {
+    var start, index, char = char.toLowerCase();
+
+    // Get start index for search based on position of currentItem
+    start = this.treeitems.indexOf(currentItem) + 1;
+    if (start === this.treeitems.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.setFocusToItem(this.treeitems[index]);
+    }
+  };
+
+  aria.Tree.prototype.getIndexFirstChars = function (startIndex, char) {
+    for (var i = startIndex; i < this.firstChars.length; i++) {
+      if (this.treeitems[i].isVisible) {
+        if (char === this.firstChars[i]) {
+          return i;
+        }
+      }
+    }
+    return -1;
+  };
+
+  return aria;
+}

package/src/js/aria/treeitem.js

@@ -0,0 +1,260 @@
+export function Treeitem(aria) {
+  /*
+  *   This content is licensed according to the W3C Software License at
+  *   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+  *
+  *   File:   Treeitem.js
+  *
+  *   Desc:   Treeitem widget that implements ARIA Authoring Practices
+  *           for a tree being used as a file viewer
+  */
+
+  /*
+  *   @constructor
+  *
+  *   @desc
+  *       Treeitem object for representing the state and user interactions for a
+  *       treeItem widget
+  *
+  *   @param node
+  *       An element with the role=tree attribute
+  */
+
+  aria.Treeitem = function (node, treeObj, group) {
+
+    // Check whether node is a DOM element
+    if (typeof node !== 'object') {
+      return;
+    }
+
+    node.tabIndex = -1;
+    this.tree = treeObj;
+    this.groupTreeitem = group;
+    this.domNode = node;
+    this.label = node.textContent.trim();
+
+    if (node.getAttribute('aria-label')) {
+      this.label = node.getAttribute('aria-label').trim();
+    }
+
+    this.isExpandable = false;
+    this.isVisible = false;
+    this.inGroup = false;
+
+    if (group) {
+      this.inGroup = true;
+    }
+
+    var elem = node.firstElementChild;
+
+    while (elem) {
+
+      if (elem.tagName.toLowerCase() == 'ul') {
+        elem.setAttribute('role', 'group');
+        this.isExpandable = true;
+        break;
+      }
+
+      elem = elem.nextElementSibling;
+    }
+
+    this.keyCode = Object.freeze({
+      RETURN: 13,
+      SPACE: 32,
+      PAGEUP: 33,
+      PAGEDOWN: 34,
+      END: 35,
+      HOME: 36,
+      LEFT: 37,
+      UP: 38,
+      RIGHT: 39,
+      DOWN: 40
+    });
+  };
+
+  aria.Treeitem.prototype.init = function () {
+    this.domNode.tabIndex = -1;
+
+    if (!this.domNode.getAttribute('role')) {
+      this.domNode.setAttribute('role', 'treeitem');
+    }
+
+    this.domNode.addEventListener('keydown', this.handleKeydown.bind(this));
+    this.domNode.addEventListener('click', this.handleClick.bind(this));
+    this.domNode.addEventListener('focus', this.handleFocus.bind(this));
+    this.domNode.addEventListener('blur', this.handleBlur.bind(this));
+
+    if (!this.isExpandable) {
+      this.domNode.addEventListener('mouseover', this.handleMouseOver.bind(this));
+      this.domNode.addEventListener('mouseout', this.handleMouseOut.bind(this));
+    }
+  };
+
+  aria.Treeitem.prototype.isExpanded = function () {
+
+    if (this.isExpandable) {
+      return this.domNode.getAttribute('aria-expanded') === 'true';
+    }
+
+    return false;
+
+  };
+
+  /* EVENT HANDLERS */
+
+  aria.Treeitem.prototype.handleKeydown = function (event) {
+
+    var tgt = event.currentTarget,
+      flag = false,
+      char = event.key,
+      clickEvent;
+
+    function isPrintableCharacter (str) {
+      return str.length === 1 && str.match(/\S/);
+    }
+
+    function printableCharacter (item) {
+      if (char == '*') {
+        item.tree.expandAllSiblingItems(item);
+        flag = true;
+      }
+      else {
+        if (isPrintableCharacter(char)) {
+          item.tree.setFocusByFirstCharacter(item, char);
+          flag = true;
+        }
+      }
+    }
+
+    if (event.altKey || event.ctrlKey || event.metaKey) {
+      return;
+    }
+
+    if (event.shift) {
+      if (isPrintableCharacter(char)) {
+        printableCharacter(this);
+      }
+    }
+    else {
+      switch (event.keyCode) {
+        case this.keyCode.SPACE:
+        case this.keyCode.RETURN:
+          // Create simulated mouse event to mimic the behavior of ATs
+          // and let the event handler handleClick do the housekeeping.
+          try {
+            clickEvent = new MouseEvent('click', {
+              'view': window,
+              'bubbles': true,
+              'cancelable': true
+            });
+          }
+          catch (err) {
+            if (document.createEvent) {
+              // DOM Level 3 for IE 9+
+              clickEvent = document.createEvent('MouseEvents');
+              clickEvent.initEvent('click', true, true);
+            }
+          }
+          tgt.dispatchEvent(clickEvent);
+          flag = true;
+          break;
+
+        case this.keyCode.UP:
+          this.tree.setFocusToPreviousItem(this);
+          flag = true;
+          break;
+
+        case this.keyCode.DOWN:
+          this.tree.setFocusToNextItem(this);
+          flag = true;
+          break;
+
+        case this.keyCode.RIGHT:
+          if (this.isExpandable) {
+            if (this.isExpanded()) {
+              this.tree.setFocusToNextItem(this);
+            }
+            else {
+              this.tree.expandTreeitem(this);
+            }
+          }
+          flag = true;
+          break;
+
+        case this.keyCode.LEFT:
+          if (this.isExpandable && this.isExpanded()) {
+            this.tree.collapseTreeitem(this);
+            flag = true;
+          }
+          else {
+            if (this.inGroup) {
+              this.tree.setFocusToParentItem(this);
+              flag = true;
+            }
+          }
+          break;
+
+        case this.keyCode.HOME:
+          this.tree.setFocusToFirstItem();
+          flag = true;
+          break;
+
+        case this.keyCode.END:
+          this.tree.setFocusToLastItem();
+          flag = true;
+          break;
+
+        default:
+          if (isPrintableCharacter(char)) {
+            printableCharacter(this);
+          }
+          break;
+      }
+
+    }
+
+    if (flag) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  };
+
+  aria.Treeitem.prototype.handleClick = function (event) {
+    if (this.isExpandable) {
+      if (this.isExpanded()) {
+        this.tree.collapseTreeitem(this);
+      }
+      else {
+        this.tree.expandTreeitem(this);
+      }
+      event.stopPropagation();
+    }
+    else {
+      this.tree.setFocusToItem(this);
+    }
+  };
+
+  aria.Treeitem.prototype.handleFocus = function (event) {
+    var node = this.domNode;
+    if (this.isExpandable) {
+      node = node.firstElementChild;
+    }
+    node.classList.add('c-tree__item--focus');
+  };
+
+  aria.Treeitem.prototype.handleBlur = function (event) {
+    var node = this.domNode;
+    if (this.isExpandable) {
+      node = node.firstElementChild;
+    }
+    node.classList.remove('c-tree__item--focus');
+  };
+
+  aria.Treeitem.prototype.handleMouseOver = function (event) {
+    event.currentTarget.classList.add('c-tree__item--hover');
+  };
+
+  aria.Treeitem.prototype.handleMouseOut = function (event) {
+    event.currentTarget.classList.remove('c-tree__item--hover');
+  };
+}

package/src/js/desy-html.js

@@ -9,6 +9,8 @@ import { MenubarItemAction } from './aria/MenubarItemAction.js';
 import { MenubarAction } from './aria/MenubarAction.js';
 import { listbox } from './aria/listbox.js';
 import { alert } from './aria/alert.js';
+import { Treeitem } from './aria/treeitem.js';
+import { Tree } from './aria/tree.js';
 
 
 export function accordionComponent(aria) {
@@ -311,3 +313,29 @@ export function tooltipComponent(aria) {
   }
 }
 
+export function treeComponent(aria) {
+  Treeitem(aria);
+  Tree(aria);
+  const modules = document.querySelectorAll('[data-module]');
+  for (const item in modules) if (modules.hasOwnProperty(item)) {
+    const moduleValue = modules[item].getAttribute('data-module');
+
+    if (moduleValue == 'c-tree'){
+      const tree = new aria.Tree(modules[item]);
+      tree.init();
+    }
+
+    if (moduleValue == 'c-tree__item'){
+      modules[item].addEventListener('click', function (event) {
+        const current = event.target;
+        if ((current.tagName == 'INPUT')||(current.tagName == 'LABEL')) {
+          event.stopPropagation();
+        } else {
+          event.stopPropagation();
+          event.preventDefault();
+        }
+      });
+    }
+  }
+}
+

package/src/js/index.js

@@ -12,7 +12,8 @@ import {
   menubarComponent,
   tableAdvancedComponent,
   tabsComponent,
-  tooltipComponent
+  tooltipComponent,
+  treeComponent
 } from './desy-html.js';
 
 var aria = aria || {};
@@ -26,3 +27,4 @@ menubarComponent(aria);
 tableAdvancedComponent(aria);
 tabsComponent(aria);
 tooltipComponent(aria);
+treeComponent(aria);