desy-html 13.0.2 → 14.0.0

package/src/js/desy-html.js

@@ -1,27 +1,27 @@
-import { utils, formatDateToDDMMYYYY, convertToISOFormat } from './aria/utils.js';
 import { accordion } from './aria/accordion.js';
+import { alert } from './aria/alert.js';
+import { CheckBox } from './aria/checkBoxes.js';
+import { Collapsible } from './aria/collapsible.js';
 import { dataGrid } from './aria/dataGrid.js';
 import { dialog } from './aria/dialog.js';
-import { tabs } from './aria/tabs.js';
-import { PopupMenuItemAction } from './aria/PopupMenuItemAction.js';
-import { PopupMenuAction } from './aria/PopupMenuAction.js';
-import { MenubarItemAction } from './aria/MenubarItemAction.js';
-import { MenubarAction } from './aria/MenubarAction.js';
-import { listbox } from './aria/listbox.js';
 import { LinksList } from './aria/linksList.js';
-import { alert } from './aria/alert.js';
-import { Treeitem } from './aria/treeitem.js';
-import { Tree } from './aria/tree.js';
-import { Toggle } from './aria/toggle.js';
-import { Collapsible } from './aria/collapsible.js';
-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 { listbox } from './aria/listbox.js';
+import { MenubarAction } from './aria/MenubarAction.js';
+import { MenubarItemAction } from './aria/MenubarItemAction.js';
 import { MenuHorizontal } from './aria/MenuHorizontal.js';
 import { MenuNavigation } from './aria/MenuNavigation.js';
+import { MenuVertical } from './aria/MenuVertical.js';
 import { Nav } from './aria/Nav.js';
-
+import { Notification } from './aria/notification.js';
+import { PopupMenuAction } from './aria/PopupMenuAction.js';
+import { PopupMenuItemAction } from './aria/PopupMenuItemAction.js';
+import { RadioButton } from './aria/radioButton.js';
+import { tabs } from './aria/tabs.js';
+import { Toggle } from './aria/toggle.js';
+import { Tree } from './aria/tree.js';
+import { TreeGrid } from './aria/treegrid.js';
+import { Treeitem } from './aria/treeitem.js';
+import { convertToISOFormat, formatDateToDDMMYYYY, utils } from './aria/utils.js';
 export function accordionComponent(aria) {
   accordion(aria);
 }
@@ -54,14 +54,14 @@ export function dropdownComponent(aria) {
     const moduleValue = modules[item].getAttribute('data-module');
 
 
-    if (moduleValue == 'c-dropdown'){
+    if (moduleValue == 'c-dropdown') {
       const buttonDropdown = modules[item].querySelector('[data-module = "c-dropdown-button"]');
       const tooltip = modules[item].querySelector('[data-module = "c-dropdown-tooltip"]');
       const roleCustom = buttonDropdown.getAttribute('data-role');
       const ariaLabel = buttonDropdown.getAttribute('data-aria-label');
       const ariaModal = buttonDropdown.getAttribute('data-aria-modal');
       const ariaHasPopup = buttonDropdown.getAttribute('data-aria-haspopup');
-      if(buttonDropdown && tooltip) {
+      if (buttonDropdown && tooltip) {
         const hideOnPopperBlur = {
           /* https://atomiks.github.io/tippyjs/v6/plugins/#hideonpopperblur */
           name: 'hideOnPopperBlur',
@@ -73,7 +73,7 @@ export function dropdownComponent(aria) {
                   if (
                     instance.props.hideOnPopperBlur &&
                     event.relatedTarget &&
-                    !instance.popper.contains(event.relatedTarget)  &&
+                    !instance.popper.contains(event.relatedTarget) &&
                     event.relatedTarget !== instance.reference
                   ) {
                     instance.hide();
@@ -87,7 +87,7 @@ export function dropdownComponent(aria) {
           /* https://atomiks.github.io/tippyjs/v6/plugins/#hideonesc */
           name: 'hideOnEsc',
           defaultValue: true,
-          fn({hide}) {
+          fn({ hide }) {
             function onKeyDown(event) {
               if (event.keyCode === 27) {
                 hide();
@@ -117,22 +117,22 @@ export function dropdownComponent(aria) {
           arrow: false,
           offset: [0, -10],
           theme: '',
-          plugins: [hideOnEsc,hideOnPopperBlur],
+          plugins: [hideOnEsc, hideOnPopperBlur],
           role: roleCustom ? roleCustom : false,
           aria: {
             content: 'auto'
           },
           onCreate(instance) {
-            if(ariaHasPopup){
+            if (ariaHasPopup) {
               instance.reference.setAttribute('aria-haspopup', ariaHasPopup);
             }
           },
           onShown(instance) {
             aria.Utils.focusFirstDescendant(tooltip);
-            if(ariaLabel){
+            if (ariaLabel) {
               instance.popper.firstElementChild.setAttribute('aria-label', ariaLabel);
             }
-            if(ariaModal){
+            if (ariaModal) {
               instance.popper.firstElementChild.setAttribute('aria-modal', ariaModal);
             }
           }
@@ -244,7 +244,7 @@ export function listboxComponent(aria) {
             }
           });
 
-          listbox.setHandleFocusChange(function(evt) {
+          listbox.setHandleFocusChange(function (evt) {
             if ((!list.hasAttribute('aria-multiselectable')) && (buttonListbox.getAttribute('data-change') == 'change')) {
               buttonListbox.firstElementChild.innerHTML = evt.innerHTML;
             }
@@ -390,7 +390,7 @@ export function treeComponent(aria) {
       }
 
       if (moduleValue == 'c-tree__item') {
-        modules[item].addEventListener('click', function(event) {
+        modules[item].addEventListener('click', function (event) {
           event.stopPropagation();
         });
       }
@@ -485,7 +485,7 @@ export function DatepickerComponent(aria) {
           }
 
           if (datepickerSelect != undefined) {
-            datepickerSelect.addEventListener('change', function() {
+            datepickerSelect.addEventListener('change', function () {
               const selectedValue = this.value;
               datepickerCalendar.min = selectedValue + "-01-01";
               datepickerCalendar.max = selectedValue + "-12-31";
@@ -498,7 +498,7 @@ export function DatepickerComponent(aria) {
           const datepickerSubmit = module.querySelector('#' + dropdownId + '-submit');
 
           if (datepickerCancel != undefined) {
-            datepickerCancel.onclick = function() {
+            datepickerCancel.onclick = function () {
               // Restore values according to original format
               if (storedInitialFormat === 'iso') {
                 datepickerCalendar.value = storedInitialValue;
@@ -514,7 +514,7 @@ export function DatepickerComponent(aria) {
           }
 
           if (datepickerSubmit != undefined) {
-            datepickerSubmit.onclick = function() {
+            datepickerSubmit.onclick = function () {
               // On submit, clear stored value for next opening
               storedInitialValue = '';
               storedInitialFormat = '';
@@ -552,7 +552,7 @@ export function DatepickerComponent(aria) {
       const datepickerSelect = module.querySelector(':is(select)');
       const datepickerCalendar = module.querySelector(':is(calendar-date, calendar-multi, calendar-range)');
       if (datepickerSelect != undefined) {
-        datepickerSelect.addEventListener('change', function() {
+        datepickerSelect.addEventListener('change', function () {
           const selectedValue = this.value;
           datepickerCalendar.min = selectedValue + "-01-01";
           datepickerCalendar.max = selectedValue + "-12-31";
@@ -561,4 +561,10 @@ export function DatepickerComponent(aria) {
       }
     }
   });
+}
+
+export function TreegridComponent(aria) {
+  const doAllowRowFocus = true;
+  const doStartRowFocus = true;
+  document.querySelectorAll('[data-module="c-treegrid"]').forEach((treegridEl) => TreeGrid(treegridEl, doAllowRowFocus, doStartRowFocus));
 }

package/src/js/index.js

@@ -6,25 +6,26 @@
 import {
   accordionComponent,
   alertComponent,
+  checkBoxComponent,
   collapsibleComponent,
+  DatepickerComponent,
   dialogComponent,
   dropdownComponent,
-  listboxComponent,
   linksListComponent,
+  listboxComponent,
   menubarComponent,
+  MenuHorizontalComponent,
+  MenuNavigationComponent,
+  MenuVerticalComponent,
+  NavComponent,
+  notificationComponent,
+  radioButtonComponent,
   tableAdvancedComponent,
   tabsComponent,
-  tooltipComponent,
   toggleComponent,
+  tooltipComponent,
   treeComponent,
-  notificationComponent,
-  radioButtonComponent,
-  checkBoxComponent,
-  MenuVerticalComponent,
-  MenuHorizontalComponent,
-  MenuNavigationComponent,
-  NavComponent,
-  DatepickerComponent
+  TreegridComponent
 } from './desy-html.js';
 
 var aria = aria || {};
@@ -50,6 +51,7 @@ MenuHorizontalComponent(aria);
 MenuNavigationComponent(aria);
 NavComponent(aria);
 DatepickerComponent(aria);
+TreegridComponent(aria);
 
 //Using the browser API to copy code to the clipboard
 const copyButtons = document.querySelectorAll('[data-module = "c-button-copy"]');

package/src/templates/components/error-summary/params.error-summary.yaml

@@ -48,6 +48,3 @@ params:
   type: object
   required: false
   description: HTML attributes (for example data attributes) to add to the error-summary container.
-
-accessibilityCriteria: |
-  - Must be focused when the page loads

package/src/templates/components/hint/params.hint.yaml

@@ -19,17 +19,3 @@ params:
   type: object
   required: false
   description: HTML attributes (for example data attributes) to add to the hint span tag.
-
-accessibilityCriteria: |
-  When used with a single input, the hint MUST:
-  - be announced by screen readers when the input is focussed
-
-  When used with a group of multiple inputs (such as within a fieldset), the
-  hint MUST:
-  - be announced by screen readers when focussing the first input within the
-    group (first in this case refers to the focus order, not the DOM - if the
-    user is traversing backwards through the page then this would be the last
-    input within the group in the DOM)
-
-  When used with a group of multiple inputs, the hint SHOULD NOT:
-  - be announced every time for each individual input

package/src/templates/components/menubar/params.menubar.yaml

@@ -128,13 +128,3 @@ params:
   type: object
   required: false
   description: HTML attributes (for example data attributes) to add to the menubar container.
-
-accessibilityCriteria: |
-  ## sub reveals
-  Must:
-  - be visible as static content if JavaScript is unavailable or fails
-  - be hidden if JavaScript is available and is collapsed
-  - indicate if content is expanded or collapsed
-  - indicate that there is collapsed content to interact with
-
-  Note that alphagov have known issues against this criteria: https://github.com/alphagov/govuk_elements/issues/575

package/src/templates/components/table-advanced/params.table-advanced.yaml

@@ -150,7 +150,7 @@ params:
   description: HTML attributes (for example data attributes) to add to the table container.
 
 accessibilityCriteria: |
-  ## Tables must:
+## Las tablas deben:
     1. Debe tener al menos una celda de encabezado (TH) en las filas o columnas exteriores.
     2. Si la tabla tiene más de un nivel de encabezado (si hay elementos th en dos filas o en dos columnas) las celdas de datos y de encabezado deben estar asociadas con los atributos id (en los th) /headers (en los td).
     3. El título de la tabla debe estar marcado como <caption>

package/src/templates/components/tree/_examples.tree.njk

@@ -2675,5 +2675,159 @@
         }
       ]
     }
+  },
+  {
+    "name": "lazy rendering",
+    "description": "No pinta los nodos hijos hasta que el usuario no lo pide desplegando un nodo padre. Usalo sólo si el arbol tiene una cantidad enorme de items.",
+    "data": {
+      "name": "type-lazy-rendering",
+      "classes": "mt-base",
+      "type": "checkbox",
+      "fieldset": {
+        "legend": {
+          "text": "Selecciona organismo"
+        }
+      },
+      "idPrefix": "type-lazy-rendering",
+      "lazyRendering": true,
+      "items": [
+        {
+          "text": "Item A",
+          "id": "item-a",
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem A1",
+                "value": "subitem-a1",
+                "sub": {
+                  "items": [
+                    {
+                      "text": "SubSubitem A1.1",
+                      "value": "subsubitem-a1-1",
+                      "sub": {
+                        "items": [
+                          {
+                            "text": "Level 4 A1.1.1",
+                            "value": "lvl4-a1-1-1",
+                            "sub": {
+                              "items": [
+                                {
+                                  "text": "Level 5 A1.1.1.1",
+                                  "value": "lvl5-a1-1-1-1"
+                                },
+                                {
+                                  "text": "Level 5 A1.1.1.2",
+                                  "value": "lvl5-a1-1-1-2"
+                                }
+                              ]
+                            }
+                          },
+                          {
+                            "text": "Level 4 A1.1.2",
+                            "value": "lvl4-a1-1-2"
+                          }
+                        ]
+                      }
+                    },
+                    {
+                      "text": "SubSubitem A1.2",
+                      "value": "subsubitem-a1-2"
+                    }
+                  ]
+                }
+              },
+              {
+                "text": "Subitem A2",
+                "value": "subitem-a2"
+              },
+              {
+                "text": "Subitem A3",
+                "value": "subitem-a3"
+              }
+            ]
+          }
+        },
+        {
+          "text": "Item B",
+          "id": "item-b",
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem B1",
+                "value": "subitem-b1",
+                "sub": {
+                  "items": [
+                    {
+                      "text": "SubSubitem B1.1",
+                      "value": "subsubitem-b1-1",
+                      "sub": {
+                        "items": [
+                          {
+                            "text": "Level 4 B1.1.1",
+                            "value": "lvl4-b1-1-1"
+                          },
+                          {
+                            "text": "Level 4 B1.1.2",
+                            "value": "lvl4-b1-1-2"
+                          },
+                          {
+                            "text": "Level 4 B1.1.3",
+                            "value": "lvl4-b1-1-3"
+                          }
+                        ]
+                      }
+                    }
+                  ]
+                }
+              },
+              {
+                "text": "Subitem B2",
+                "value": "subitem-b2"
+              },
+              {
+                "text": "Subitem B3",
+                "value": "subitem-b3"
+              }
+            ]
+          }
+        },
+        {
+          "text": "Item C",
+          "id": "item-c",
+          "sub": {
+            "items": [
+              {
+                "text": "Subitem C1",
+                "value": "subitem-c1",
+                "sub": {
+                  "items": [
+                    {
+                      "text": "SubSubitem C1.1",
+                      "value": "subsubitem-c1-1"
+                    },
+                    {
+                      "text": "SubSubitem C1.2",
+                      "value": "subsubitem-c1-2"
+                    },
+                    {
+                      "text": "SubSubitem C1.3",
+                      "value": "subsubitem-c1-3"
+                    }
+                  ]
+                }
+              },
+              {
+                "text": "Subitem C2",
+                "value": "subitem-c2"
+              },
+              {
+                "text": "Subitem C3",
+                "value": "subitem-c3"
+              }
+            ]
+          }
+        }
+      ]
+    }
   }
-] %}
+] %}