desy-html 4.1.3 → 5.0.1

package/docs/ds/_ds.example.menubar-variaciones.njk

@@ -6,13 +6,14 @@
   </div>
   <div class="col-span-4">
     {{ componentMenubar({
-      "id": "with-all-parent-items",
+      "id": "with-all-parent-items-1",
       "idPrefix": "parent-example",
+      "ariaLabel":"Menubar description",
       "items": [
         {
           "text": "Menuitem",
           "ariaLabel": "Menuitem",
-          "id": "menuitems-example-item-1",
+          "id": "menuitems-example-item-1-1",
           "sub": {
             "items": [
               {
@@ -27,17 +28,14 @@
                 "role": "menuitem",
                 "text": "Subitem 3"
               }
-            ],
-            "attributes": {
-              "aria-labelledby": "menuitems-example-item-1"
-            }
+            ]
           },
           "classes": "mb-base mr-base"
         },
         {
           "text": "Menuitemcheckbox",
           "ariaLabel": "Menuitemcheckbox",
-          "id": "menuitems-example-item-2",
+          "id": "menuitems-example-item-2-1",
           "classes": "mb-base mr-base",
           "sub": {
             "items": [
@@ -53,21 +51,18 @@
                 "role": "menuitemcheckbox",
                 "text": "Subitem 3"
               }
-            ],
-            "attributes": {
-              "aria-labelledby": "menuitems-example-item-2"
-            }
+            ]
           }
         },
         {
           "text": "Menuitemradio",
           "ariaLabel": "Menuitemradio",
-          "id": "menuitems-example-item-3",
+          "id": "menuitems-example-item-3-1",
           "sub": {
             "items": [
               {
                 "role": "group",
-                "text": "Group",
+                "ariaLabel": "group label",
                 "items": [
                   {
                     "role": "menuitemradio",
@@ -83,17 +78,14 @@
                   }
                 ]
               }
-            ],
-            "attributes": {
-              "aria-labelledby": "menuitems-example-item-3"
-            }
+            ]
           },
           "classes": "mb-base mr-base"
         },
         {
           "text": "Mixed items",
           "ariaLabel": "Mixeditems",
-          "id": "menuitems-example-item-4",
+          "id": "menuitems-example-item-4-1",
           "sub": {
             "items": [
               {
@@ -148,24 +140,18 @@
                   }
                 ]
               }
-            ],
-            "attributes": {
-              "aria-labelledby": "menuitems-example-item-4"
-            }
+            ]
           },
           "classes": "mb-base mr-base"
         },
         {
           "text": "Menuitem solo",
           "ariaLabel": "Menuitem solo",
-          "id": "menuitems-example-item-6",
+          "id": "menuitems-example-item-6-1",
           "classes": "c-menubar__button--transparent mb-base mr-base",
           "href": "#"
         }
-      ],
-      "attributes": {
-        "aria-label": "Menubar description of use"
-      }
+      ]
     })  }}
   </div>
 </div>
@@ -177,6 +163,7 @@
     {{ componentMenubar({
       "id": "transparent-items",
       "idPrefix": "transparent-example",
+      "ariaLabel":"Menubar description",
       "items": [
         {
           "text": "Menuitem",
@@ -196,10 +183,7 @@
                 "role": "menuitem",
                 "text": "Subitem 3"
               }
-            ],
-            "attributes": {
-              "aria-labelledby": "transparent-example-item-1"
-            }
+            ]
           },
           "classes": "c-menubar__button--transparent mb-sm mr-sm"
         },
@@ -223,10 +207,7 @@
                 "role": "menuitemcheckbox",
                 "text": "Subitem 3"
               }
-            ],
-            "attributes": {
-              "aria-labelledby": "transparent-example-item-2"
-            }
+            ]
           }
         },
         {
@@ -237,7 +218,7 @@
             "items": [
               {
                 "role": "group",
-                "text": "Group",
+                "ariaLabel": "group label",
                 "items": [
                   {
                     "role": "menuitemradio",
@@ -254,10 +235,7 @@
                   }
                 ]
               }
-            ],
-            "attributes": {
-              "aria-labelledby": "transparent-example-item-3"
-            }
+            ]
           },
           "classes": "c-menubar__button--transparent mb-sm mr-sm"
         },
@@ -319,10 +297,7 @@
                   }
                 ]
               }
-            ],
-            "attributes": {
-              "aria-labelledby": "transparent-example-item-4"
-            }
+            ]
           },
           "classes": "c-menubar__button--transparent mb-sm mr-sm"
         },
@@ -333,10 +308,7 @@
           "classes": "c-menubar__button--transparent mb-sm mr-sm",
           "href": "#"
         }
-      ],
-      "attributes": {
-        "aria-label": "Menubar description of use"
-      }
+      ]
     })  }}
   </div>
 </div>
@@ -348,6 +320,7 @@
     {{ componentMenubar({
       "id": "header-items",
       "idPrefix": "header-example",
+      "ariaLabel":"Menubar description",
       "items": [
         {
           "text": "Menuitem",
@@ -367,10 +340,7 @@
                 "role": "menuitem",
                 "text": "Subitem 3"
               }
-            ],
-            "attributes": {
-              "aria-labelledby": "header-example-item-1"
-            }
+            ]
           },
           "classes": "c-menubar__button--header mr-base"
         },
@@ -394,10 +364,7 @@
                 "role": "menuitemcheckbox",
                 "text": "Subitem 3"
               }
-            ],
-            "attributes": {
-              "aria-labelledby": "header-example-item-2"
-            }
+            ]
           }
         },
         {
@@ -408,7 +375,7 @@
             "items": [
               {
                 "role": "group",
-                "text": "Group",
+                "ariaLabel": "group label",
                 "items": [
                   {
                     "role": "menuitemradio",
@@ -425,10 +392,7 @@
                   }
                 ]
               }
-            ],
-            "attributes": {
-              "aria-labelledby": "header-example-item-3"
-            }
+            ]
           },
           "classes": "c-menubar__button--header mr-base"
         },
@@ -490,10 +454,7 @@
                   }
                 ]
               }
-            ],
-            "attributes": {
-              "aria-labelledby": "header-example-item-4"
-            }
+            ]
           },
           "classes": "c-menubar__button--header mr-base"
         },
@@ -505,10 +466,7 @@
           "href": "#"
         }
       ],
-      "classes": "bg-black",
-      "attributes": {
-        "aria-label": "Menubar description of use"
-      }
+      "classes": "bg-black"
     })  }}
   </div>
 </div>
@@ -520,6 +478,7 @@
     {{ componentMenubar({
       "id": "small-items",
       "idPrefix": "small-example",
+      "ariaLabel":"Menubar description",
       "items": [
         {
           "text": "Menuitem",
@@ -539,10 +498,7 @@
                 "role": "menuitem",
                 "text": "Subitem 3"
               }
-            ],
-            "attributes": {
-              "aria-labelledby": "small-example-item-1"
-            }
+            ]
           },
           "classes": "c-menubar__button--sm mb-sm mr-sm"
         },
@@ -566,10 +522,7 @@
                 "role": "menuitemcheckbox",
                 "text": "Subitem 3"
               }
-            ],
-            "attributes": {
-              "aria-labelledby": "small-example-item-2"
-            }
+            ]
           }
         },
         {
@@ -580,7 +533,7 @@
             "items": [
               {
                 "role": "group",
-                "text": "Group",
+                "ariaLabel": "group label",
                 "items": [
                   {
                     "role": "menuitemradio",
@@ -597,10 +550,7 @@
                   }
                 ]
               }
-            ],
-            "attributes": {
-              "aria-labelledby": "small-example-item-3"
-            }
+            ]
           },
           "classes": "c-menubar__button--sm mb-sm mr-sm"
         },
@@ -662,10 +612,7 @@
                   }
                 ]
               }
-            ],
-            "attributes": {
-              "aria-labelledby": "small-example-item-4"
-            }
+            ]
           },
           "classes": "c-menubar__button--sm mb-sm mr-sm"
         },
@@ -676,10 +623,7 @@
           "classes": "c-menubar__button--transparent c-menubar__button--sm mb-sm mr-sm",
           "href": "#"
         }
-      ],
-      "attributes": {
-        "aria-label": "Menubar description of use"
-      }
+      ]
     })  }}
   </div>
 </div>
@@ -689,13 +633,14 @@
   </div>
   <div class="col-span-4">
     {{ componentMenubar({
-      "id": "with-all-parent-items",
-      "idPrefix": "parent-example",
+      "id": "small-items-selection",
+      "idPrefix": "small-example-selection",
+      "ariaLabel":"Menubar description",
       "items": [
         {
           "text": "Menuitem",
           "ariaLabel": "Menuitem",
-          "id": "menuitems-example-item-1",
+          "id": "small-example-selection-item-1",
           "sub": {
             "items": [
               {
@@ -710,18 +655,15 @@
                 "role": "menuitem",
                 "text": "Subitem 3"
               }
-            ],
-            "attributes": {
-              "aria-labelledby": "menuitems-example-item-1"
-            }
+            ]
           },
-          "classes": "c-menubar__button--sm mb-sm mr-sm"
+          "classes": "c-menubar__button--has-selection c-menubar__button--sm mb-sm mr-sm"
         },
         {
           "text": "Menuitemcheckbox",
           "ariaLabel": "Menuitemcheckbox",
-          "id": "menuitems-example-item-2",
-          "classes": "c-menubar__button--has-selection c-menubar__button--sm mb-sm mr-sm",
+          "id": "small-example-selection-item-2",
+          "classes": "c-menubar__button--sm mb-sm mr-sm",
           "sub": {
             "items": [
               {
@@ -737,21 +679,18 @@
                 "role": "menuitemcheckbox",
                 "text": "Subitem 3"
               }
-            ],
-            "attributes": {
-              "aria-labelledby": "menuitems-example-item-2"
-            }
+            ]
           }
         },
         {
           "text": "Menuitemradio",
           "ariaLabel": "Menuitemradio",
-          "id": "menuitems-example-item-3",
+          "id": "small-example-selection-item-3",
           "sub": {
             "items": [
               {
                 "role": "group",
-                "text": "Group",
+                "ariaLabel": "group label",
                 "items": [
                   {
                     "role": "menuitemradio",
@@ -768,17 +707,14 @@
                   }
                 ]
               }
-            ],
-            "attributes": {
-              "aria-labelledby": "menuitems-example-item-3"
-            }
+            ]
           },
           "classes": "c-menubar__button--has-selection c-menubar__button--sm mb-sm mr-sm"
         },
         {
           "text": "Mixed items",
           "ariaLabel": "Mixeditems",
-          "id": "menuitems-example-item-4",
+          "id": "small-example-selection-item-4",
           "sub": {
             "items": [
               {
@@ -833,24 +769,18 @@
                   }
                 ]
               }
-            ],
-            "attributes": {
-              "aria-labelledby": "menuitems-example-item-4"
-            }
+            ]
           },
-          "classes": "c-menubar__button--has-selection c-menubar__button--sm mb-sm mr-sm"
+          "classes": "c-menubar__button--sm mb-sm mr-sm"
         },
         {
           "text": "Menuitem solo",
           "ariaLabel": "Menuitem solo",
-          "id": "menuitems-example-item-6",
+          "id": "small-example-selection-item-6",
           "classes": "c-menubar__button--transparent c-menubar__button--sm mb-sm mr-sm",
           "href": "#"
         }
-      ],
-      "attributes": {
-        "aria-label": "Menubar description of use"
-      }
+      ]
     })  }}
   </div>
 </div>

package/docs/index.html

@@ -38,6 +38,31 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <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>
+  </ul>
+  <h3>v.4.3.0</h3>
+  <ul class="text-sm">
+    <li>Added disabled and active param in menubar and fixed accesibility issues.</li>
+    <li>Accesibility fixes in menu horizontal.</li>
+    <li>Minor improvements in documentation.</li>
+  </ul>
+  <h3>v.4.2.1</h3>
+  <ul class="text-sm">
+    <li>Minor fixes.</li>
+  </ul>
+  <h3>v.4.2.0</h3>
+  <ul class="text-sm">
+    <li>Checkboxes can be indeterminate at init.</li>
+    <li>Fixes in alert. Now it's read by screen readers.</li>
+    <li>Header now uses dropdowns.</li>
+    <li>Dropdowns, listboxes and tooltips now closes when loosing focus.</li>
+    <li>Minor improvements in documentation.</li>
+  </ul>
   <h3>v.4.1.3</h3>
   <ul class="text-sm">
     <li>Minor improvements.</li>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "4.1.3",
+  "version": "5.0.1",
   "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/js/desy-html.js

@@ -34,6 +34,26 @@ export function dropdownComponent(aria) {
       const buttonDropdown = modules[item].querySelector('[data-module = "c-dropdown-button"]');
       const tooltip = modules[item].querySelector('[data-module = "c-dropdown-tooltip"]');
       if(buttonDropdown && tooltip) {
+        const hideOnPopperBlur = {
+          /* https://atomiks.github.io/tippyjs/v6/plugins/#hideonpopperblur */
+          name: 'hideOnPopperBlur',
+          defaultValue: true,
+          fn(instance) {
+            return {
+              onCreate() {
+                instance.popper.addEventListener('focusout', (event) => {
+                  if (
+                    instance.props.hideOnPopperBlur &&
+                    event.relatedTarget &&
+                    !instance.popper.contains(event.relatedTarget)
+                  ) {
+                    instance.hide();
+                  }
+                });
+              },
+            };
+          },
+        };
         const hideOnEsc = {
           /* https://atomiks.github.io/tippyjs/v6/plugins/#hideonesc */
           name: 'hideOnEsc',
@@ -68,7 +88,7 @@ export function dropdownComponent(aria) {
           arrow: false,
           offset: [0, -10],
           theme: '',
-          plugins: [hideOnEsc],
+          plugins: [hideOnEsc,hideOnPopperBlur],
           role: false,
           aria: {
             content: 'auto'
@@ -96,7 +116,26 @@ export function listboxComponent(aria) {
 
       if(buttonListbox && tooltip) {
         const listbox = new aria.Listbox(list);
-
+        const hideOnPopperBlur = {
+          /* https://atomiks.github.io/tippyjs/v6/plugins/#hideonpopperblur */
+          name: 'hideOnPopperBlur',
+          defaultValue: true,
+          fn(instance) {
+            return {
+              onCreate() {
+                instance.popper.addEventListener('focusout', (event) => {
+                  if (
+                    instance.props.hideOnPopperBlur &&
+                    event.relatedTarget &&
+                    !instance.popper.contains(event.relatedTarget)
+                  ) {
+                    instance.hide();
+                  }
+                });
+              },
+            };
+          },
+        };
         const hideOnEscOrEnter = {
           /* https://atomiks.github.io/tippyjs/v6/plugins/#hideonesc */
           name: 'hideOnEsc',
@@ -131,7 +170,7 @@ export function listboxComponent(aria) {
           arrow: false,
           offset: [0, -10],
           theme: '',
-          plugins: [hideOnEscOrEnter],
+          plugins: [hideOnEscOrEnter,hideOnPopperBlur],
           role: false,
           aria: {
             content: 'auto'
@@ -210,6 +249,26 @@ export function tooltipComponent(aria) {
       const ariaContent = tooltipButton.matches('[data-type = "c-tooltip-button-complex"]') ? 'describedby' : 'labelledby';
       const tooltipTooltip = modules[item].querySelector('[data-module = "c-tooltip-tooltip"]');
       if(tooltipButton && tooltipTooltip) {
+        const hideOnPopperBlur = {
+          /* https://atomiks.github.io/tippyjs/v6/plugins/#hideonpopperblur */
+          name: 'hideOnPopperBlur',
+          defaultValue: true,
+          fn(instance) {
+            return {
+              onCreate() {
+                instance.popper.addEventListener('focusout', (event) => {
+                  if (
+                    instance.props.hideOnPopperBlur &&
+                    event.relatedTarget &&
+                    !instance.popper.contains(event.relatedTarget)
+                  ) {
+                    instance.hide();
+                  }
+                });
+              },
+            };
+          },
+        };
         const hideOnEsc = {
           /* https://atomiks.github.io/tippyjs/v6/plugins/#hideonesc */
           name: 'hideOnEsc',
@@ -241,7 +300,7 @@ export function tooltipComponent(aria) {
           trigger: 'mouseenter focus',
           hideOnClick: false,
           theme: '',
-          plugins: [hideOnEsc],
+          plugins: [hideOnEsc,hideOnPopperBlur],
           role: 'tooltip',
           aria: {
             content: ariaContent

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

@@ -5,12 +5,12 @@
   {{ componentButton(params.button)  }}
   <div id="{{ params.id }}" {%- if params.classes %} class="{{ params.classes }}"{% endif %} {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   </div>
-  <script type="text/template" id="{{ 'template-' + params.id }}">
+  <div class="hidden" id="{{ 'template-' + params.id }}">
     {% if caller %}
     {{ caller() }} {#- if statement allows usage of `call` to be optional -#}
     {% elseif params.caller %}
     {{ params.caller | safe }}
     {% endif %}
-  </script>
+  </div>
 </div>
 <!-- /alert -->

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

@@ -609,5 +609,27 @@
         }
       ]
     }
+  },
+  {
+    "name": "indeterminate cheched",
+    "description": "isIndeterminate: true, indeterminateChecked: true",
+    "data": {
+      "idPrefix": "indeterminate-checked",
+      "name": "indeterminate-checked",
+      "classes": "c-checkboxes--sm",
+      "items": [
+        {
+          "value": "indeterminate-checked-item",
+          "text": "1 elemento seleccionado",
+          "isIndeterminate": true,
+          "indeterminateChecked": true,
+          "checked": false,
+          "classes": "-mt-base",
+          "label": {
+            "classes": "text-sm -mt-1"
+          }
+        }
+      ]
+    }
   }
 ] %}

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

@@ -70,17 +70,18 @@
         {% set itemHintId = id + "-item-hint" if hasHint else "" %}
         {% set itemDescribedBy = describedBy if not hasFieldset else "" %}
         {% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) | trim %}
-    <div x-data="{ isChecked: {% if not item.checked %}false{% else %}true{% endif %} }" class="{%- if params.hasDividers %} border-t border-b border-neutral-base -mb-px{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}">
+    <div x-data="{ isChecked: {% if not item.checked %}false{% else %}true{% endif %} }" {%- if item.indeterminateChecked %} x-init="$refs.inputCheck.indeterminate=$refs.inputCheck.readOnly=true"{% endif %} class="{%- if params.hasDividers %} border-t border-b border-neutral-base -mb-px{% endif %} {%- if item.classes %} {{ item.classes }}{% endif %}">
       <div class="relative flex items-start py-base">
         <div class="flex items-center mx-sm">
-          <input x-model="isChecked" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ item.value }}"
+          <input x-model="isChecked" x-ref="inputCheck" class="w-6 h-6 transition duration-150 ease-in-out border-black focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-offset-0 focus:ring-warning-base disabled:bg-neutral-base disabled:border-neutral-base text-primary-base" id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ item.value }}"
           {{-" checked" if item.checked }}
           {{-" disabled" if item.disabled }}
           {%- if item.conditional.html %} aria-controls="{{ conditionalId }}"{% endif -%}
           {%- if itemDescribedBy %} aria-describedby="{{ itemDescribedBy }}"{% endif -%}
           {%- if params.errorMessage %} aria-invalid="true"{% endif -%}
           {%- for attribute, value in item.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}
-          {%- if item.isIndeterminate %} onclick="if (this.readOnly) this.checked=this.readOnly=false; else if (!this.checked) this.readOnly=this.indeterminate=true;"{% endif %}>
+          {%- if item.isIndeterminate %} onclick="if (this.readOnly) this.checked=this.readOnly=false; else if (!this.checked) this.readOnly=this.indeterminate=true;"{% endif %}
+          {%- if item.indeterminateChecked %} onclick="if (this.readOnly) this.checked=this.readOnly=false; else if (!this.checked) this.readOnly=this.indeterminate=true;"{% endif %}>
         </div>
         <div class="pt-0.5 leading-5">
           {{ componentLabel({

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

@@ -74,6 +74,14 @@ params:
     type: boolean
     required: false
     description: If true, checkbox will be checked.
+  - name: isIndeterminate
+    type: boolean
+    required: false
+    description: If true, the checkbox will have an additional indeterminate state to show a partial true.
+  - name: indeterminateChecked
+    type: boolean
+    required: false
+    description: If true, the checkbox will have an indeterminate checked initial state. This will override isChecked value.
   - name: conditional
     type: boolean
     required: false