desy-html 13.0.1 → 13.0.2

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

@@ -11,7 +11,7 @@
 
 {#- Capture the HTML so we can optionally nest it in a fieldset -#}
 {% set innerHtml %}
-  <ul data-module="c-menubar" id="{{ params.id }}-menubar" class="lg:flex lg:flex-wrap" role="menubar" aria-label="{{ params.ariaLabel }}" {%- if params.label %} aria-describedby="{{ params.id }}-label"{% endif %}>
+  <ul data-module="c-menubar" id="{{ params.id }}-menubar" class="lg:flex lg:flex-wrap" role="menubar" {%- if params.ariaLabel %} aria-label="{{ params.ariaLabel }}"{% endif %} {%- if params.label %} aria-describedby="{{ params.id }}-label"{% endif %}>
     {% for item in params.items %}
     {% if item %}
       {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
@@ -38,7 +38,7 @@
       </a>
       {% endif %}
       {% if item.sub.items %}
-      <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm {%- if item.sub.classes %} {{ item.sub.classes }}{% endif %}" aria-label="{{ item.ariaLabel }}" {%- for attribute, value in item.sub.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+      <ul role="menu" class="c-menubar__tooltip w-max max-w-64 hidden border border-neutral-base shadow-md bg-white text-sm {%- if item.sub.classes %} {{ item.sub.classes }}{% endif %}" {%- if item.ariaLabel %} aria-label="{{ item.ariaLabel }}"{% endif %} {%- for attribute, value in item.sub.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
         {% for subitem in item.sub.items %}
           {% if subitem %}
             {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}

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

@@ -332,7 +332,7 @@
         "classes": "c-h2 mt-base focus:outline-none focus:underline"
       },
       "description": {
-        "html": "<p>Si el contenido de la modal es muy extenso, hay que alinear los textos a la izquierda para mejorar la accesibilidad.</p><p>Acabas de seleccionar una gran cantidad de archivos. Si ejecutas la acción, el proceso puede tardar varios minutos. Durante el proceso <strong>no cierres la ventana del navegador ni naveges a otra página</strong> en esta pestaña.</p><p>¿Estás seguro de iniciar el proceso ahora?</p>",
+        "html": "<p class='c-paragraph-base'>Si el contenido de la modal es muy extenso, hay que alinear los textos a la izquierda para mejorar la accesibilidad.</p><p class='c-paragraph-base'>Acabas de seleccionar una gran cantidad de archivos. Si ejecutas la acción, el proceso puede tardar varios minutos. Durante el proceso <strong>no cierres la ventana del navegador ni naveges a otra página</strong> en esta pestaña.</p><p>¿Estás seguro de iniciar el proceso ahora?</p>",
         "classes": "mb-lg text-left"
       },
       "itemsPrimary": [

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

@@ -2,6 +2,7 @@
 {% set examples =  [
   {
     "name": "por defecto",
+    "description": "Este componente se suele mostrar con un componente Alert, que incluye un contenedor con los atributos <code>role=\"alert\"</code> y <code>aria-live=\"assertive\"</code>.",
     "data": {
       "title": {
         "text": "El documento se ha cargado correctamente"
@@ -141,7 +142,7 @@
         "text": "Acaba de publicarse la lista de admitidos y excluidos de la convocatoria publicado en el BOA"
       },
       "description":{
-        "html": "<a class=' c-link break-all ' href=' # '>http://www.boa.aragon.es/cgi-bin/EBOA/BRSCGI?CMD=VEROBJ&MLKOB=1119520063030&type=pdf</a> "
+        "html": "<a class=' c-link break-all ' href=' # '>Lista de admitidos (PDF, 20Kb)</a> "
       },
       "icon": {
         "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-8 h-8' aria-label='Atención' focusable='false'><path d='M138.42 118.29l-55-110a15 15 0 00-26.84 0l-55 110A15 15 0 0015 140h110a15 15 0 0013.42-21.71zM62.5 50a7.5 7.5 0 0115 0v30a7.5 7.5 0 01-15 0zm7.5 70a10 10 0 1110-10 10 10 0 01-10 10z' fill='currentColor'/></svg>"
@@ -152,18 +153,23 @@
   },
    {
     "name": "Con encabezado",
-    "description": "Usa el parámetro <code>'headingLevel'</code> para establecer el nivel del encabezado. En este ejemplo: <code>'headingLevel': 3</code> creará un encabezado <code>&lt;h3&gt;</code>.",
+    "description": "Usa el parámetro <code>'headingLevel'</code> para establecer el nivel del encabezado. En este ejemplo: <code>'headingLevel': 3</code> creará un encabezado <code>&lt;h3&gt;</code>. Recuerda que tras el encabezado debe ir una descripción ya que, por accesibilidad, un encabezado no puede estar solo sin que tras él haya algún texto.",
     "data": {
       "headingLevel": 3,
       "title": {
         "text": "Esto es un título con h3"
       },
+
+      "description":{
+        "text": "Y esto es una descripción necesaria tras el encabezado"
+      },
       "id": "headinglevel"
     }
   },
   {
     "name": "con parámetros mixtos",
     "data": {
+      "headingLevel": 3,
       "title":{
         "text": "No olvide adjuntar el registro de alta de la asociación",
         "classes": "font-bold"

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

@@ -2,6 +2,7 @@
 {% set examples =  [
   {
     "name": "por defecto",
+    "description": "Recuerda que los pills, por accesibilidad, deben estar rodeados de una etiqueta semántica, normalmente un <code>&lt;li&gt;</code>.",
     "data": {
       "text": "Pill por defecto"
     }
@@ -49,7 +50,7 @@
   },
   {
     "name": "Peque",
-    "description": "Usa las clases de tamaño de texto para establecer el tamaño.",
+    "description": "Usa las clases de tamaño de texto para establecer el tamaño. Recuerda que los pills, por accesibilidad, deben estar rodeados de una etiqueta semántica, normalmente un <code>&lt;li&gt;</code>",
     "data": {
       "text": "Peque pill",
       "classes": "text-sm"

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

@@ -1,37 +1,65 @@
+{% from "components/fieldset/_macro.fieldset.njk" import componentFieldset %}
 {% from "components/input/_macro.input.njk" import componentInput %}
 {% from "components/radios/_macro.radios.njk" import componentRadios %}
 
 {% macro telefonoContent(id='id') %}
-  {{ componentInput({
-    "label": {
-      "text": "Número de teléfono"
-    },
-    "id": "telefono-" + id,
-    "name": "telefono-name-" + id
-  })  }}
+  {% call componentFieldset({
+    "legend": {
+      "text": "¿Cuál es tu número de teléfono fijo?",
+      "classes": "mb-sm sr-only"
+    }
+  }) %}
+    <div class="c-form-group">
+    {{ componentInput({
+        "label": {
+          "text": "Número de teléfono fijo"
+        },
+        "id": "telefono-" + id,
+        "name": "telefono-name-" + id
+      })  }}
+    </div>
+  {% endcall  %}
 {% endmacro %}
 
 {% macro mobileContent(id='id') %}
-  {{ componentInput({
-    "label": {
-      "text": "Número de teléfono móvil"
-    },
-    "id": "mobile-" + id,
-    "name": "mobile-name-" + id
-  })  }}
+  {% call componentFieldset({
+    "legend": {
+      "text": "¿Cuál es tu número de teléfono móvil?",
+      "classes": "mb-sm sr-only"
+    }
+    }) %}
+    <div class="c-form-group">
+    {{ componentInput({
+        "label": {
+          "text": "Número de teléfono móvil"
+        },
+        "id": "mobile-" + id,
+        "name": "mobile-name-" + id
+      })  }}
+    </div>
+  {% endcall  %}
 {% endmacro %}
 
 {% macro mobileErrorContent(id='id') %}
-  {{ componentInput({
-    "label": {
-      "text": "Número de teléfono móvil"
-    },
-    "id": "input-with-error-message-" + id,
-    "name": "test-name-" + id,
-    "errorMessage": {
-      "text": "Error: Este campo no puede estar vacío"
+  {% call componentFieldset({
+    "legend": {
+      "text": "¿Cuál es tu número de teléfono móvil?",
+      "classes": "mb-sm sr-only"
     }
-  })  }}
+    }) %}
+    <div class="c-form-group">
+      {{ componentInput({
+        "label": {
+          "text": "Número de teléfono móvil"
+        },
+        "id": "input-with-error-message-" + id,
+        "name": "test-name-" + id,
+        "errorMessage": {
+          "text": "Este campo no puede estar vacío"
+        }
+        })  }}
+    </div>
+  {% endcall  %}
 {% endmacro %}
 
 {% macro grandchildContent(id='id') %}
@@ -357,6 +385,7 @@
   },
   {
     "name": "sin fieldset",
+    "description": "Usa este ejemplo si vas a escribir tú mismo un fieldset, rodeándolo. Recuerda que el uso de fieldset es necesario por accesibilidad.",
     "data": {
       "idPrefix": "without-fieldset",
       "name": "without-fieldset",
@@ -382,7 +411,7 @@
       "idPrefix": "fieldset-and-error",
       "name": "fieldset-and-error",
       "errorMessage": {
-        "text": "Error: Tienes que seleccionar al menos una opción"
+        "text": "Tienes que seleccionar al menos una opción"
       },
       "fieldset": {
         "legend": {
@@ -411,7 +440,7 @@
         "text": "Nullam id dolor id nibh ultricies vehicula ut id elit."
       },
       "errorMessage": {
-        "text": "Error: Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
       },
       "fieldset": {
         "legend": {
@@ -436,6 +465,7 @@
   },
   {
     "name": "con items condicionales",
+    "description": "El contenido de cada condicional es una agrupación, y como tal, se deben agrupar con una etiqueta <code>&lt;fieldset&gt;</code> o bien de una etiqueta <code>&lt;div&gt;</code> con <code>role=\"group\"</code> que tenga un <code>aria-label</code> o <code>aria-labelledby</code>.",
     "data": {
       "idPrefix": "conditional-items",
       "name": "conditional-items",
@@ -467,74 +497,9 @@
       ]
     }
   },
-  {
-    "name": "con items condicionales anidados",
-    "data": {
-      "idPrefix": "with-conditional-nested-items",
-      "name": "with-conditional-nested-items",
-      "fieldset": {
-        "legend": {
-          "text": "¿Cómo quieres que te contactemos?"
-        }
-      },
-      "items": [
-        {
-          "value": "presencial",
-          "text": "Presencial",
-          "checked": true,
-          "conditional": {
-            "html": nestedContent('1').val
-          }
-        },
-        {
-          "value": "telefono",
-          "text": "Por teléfono"
-        }
-      ]
-    }
-  },
-  {
-    "name": "en línea con items condicionales",
-    "data": {
-      "classes": "flex",
-      "idPrefix": "inline-with-conditional",
-      "name": "inline-with-conditional",
-      "fieldset": {
-        "legend": {
-          "text": "¿Cómo quieres que te contactemos?"
-        }
-      },
-      "items": [
-        {
-          "value": "correo-electronico",
-          "text": "Correo electrónico",
-          "classes": "mr-sm",
-          "conditional": {
-            "html": telefonoContent('3').val
-          }
-        },
-        {
-          "value": "telefono",
-          "text": "Teléfono",
-          "classes": "mr-sm",
-          "checked": true,
-          "conditional": {
-            "html": mobileContent('3').val
-          }
-        },
-        {
-          "value": "mensaje-SMS",
-          "text": "Mensaje SMS",
-          "classes": "mr-sm",
-          "conditional": {
-            "html": mobileContent('4').val
-          }
-        }
-      ]
-    }
-  },
   {
     "name": "con item condicional seleccionado",
+    "description": "Usa el parámetro <code>'checked': true</code> para mostrar un item condicional seleccionado. El contenido de cada condicional es una agrupación, y como tal, se deben agrupar con una etiqueta <code>&lt;fieldset&gt;</code> o bien de una etiqueta <code>&lt;div&gt;</code> con <code>role=\"group\"</code> que tenga un <code>aria-label</code> o <code>aria-labelledby</code>.",
     "data": {
       "idPrefix": "conditional-item-checked",
       "name": "conditional-item-checked",

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

@@ -32,13 +32,14 @@
   },
   {
     "name": "Con mensaje de error",
+    "description": "Por accesibilidad, los mensajes de error deben incluir la palabra \"error\", para que no recaiga tan sólo en el color el hecho de que es un mensaje de error.",
     "data": {
       "id": "searchbar-4",
       "label": {
         "text": "Buscar"
       },
       "errorMessage": {
-        "text": "Error: Esto es un mensaje de error",
+        "text": "Esto es un mensaje de error",
         "classes": "mt-xs"
       }
     }

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

@@ -162,6 +162,7 @@
   },
   {
     "name": "con pista y mensaje de error",
+    "description": "Por accesibilidad, los mensajes de error deben incluir la palabra \"error\", para que no recaiga tan sólo en el color el hecho de que es un mensaje de error.",
     "data": {
       "id": "select-3",
       "name": "select-3",
@@ -172,7 +173,7 @@
         "text": "Esto es una pista."
       },
       "errorMessage": {
-        "text": "Error: esto es un mensaje de error"
+        "text": "Esto es un mensaje de error"
       },
       "items": [
         {
@@ -190,33 +191,6 @@
       ]
     }
   },
-  {
-    "name": "con label como encabezado",
-    "data": {
-      "id": "select-4",
-      "name": "select-4",
-      "label": {
-        "text": "Esto es un label",
-        "isPageHeading": true
-      },
-      "items": [
-        {
-          "value": 1,
-          "text": "Opción 1"
-        },
-        {
-          "value": 2,
-          "text": "Opción 2",
-          "selected": true
-        },
-        {
-          "value": 3,
-          "text": "Opción 3",
-          "disabled": true
-        }
-      ]
-    }
-  },
   {
     "name": "con anchura completa",
     "data": {
@@ -259,7 +233,7 @@
         "classes": "lg:flex lg:flex-wrap lg:items-center lg:gap-x-base"
       },
       "errorMessage": {
-        "text": "Error: Esto es un mensaje de error",
+        "text": "Esto es un mensaje de error",
         "classes": "order-1 w-full pt-sm"
       },
       "items": [

package/src/templates/components/status-item/_examples.status-item.njk

@@ -2,6 +2,7 @@
 {% set examples =  [
   {
     "name": "por defecto",
+    "description": "Recuerda que los items, por accesibilidad, deben estar rodeados de una etiqueta semántica, normalmente un <code>&lt;li&gt;</code>.",
     "data": {
       "id": "default",
       "title": {

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

@@ -29,6 +29,7 @@
   },
   {
     "name": "con mensaje de error",
+    "description": "Por accesibilidad, los mensajes de error deben incluir la palabra \"error\", para que no recaiga tan sólo en el color el hecho de que es un mensaje de error.",
     "data": {
       "name": "no-ni-reason",
       "id": "no-ni-reason",
@@ -36,7 +37,7 @@
         "text": "Esto es un label"
       },
       "errorMessage": {
-        "text": "Error: esto es un mensaje de error"
+        "text": "Esto es un mensaje de error"
       }
     }
   },
@@ -62,18 +63,6 @@
       "rows": 8
     }
   },
-  {
-    "name": "con label como encabezado",
-    "description": "Utiliza el parámetro <code>'isPageheading': true</code> para que el label esté dentro de un encabezado. Usa el parámetro <code>'headingLevel'</code> para establecer el nivel del encabezado. Por ejemplo: <code>'headingLevel': 3</code> creará un encabezado <code>&lt;h3&gt;</code>.",
-    "data": {
-      "id": "textarea-with-page-heading-a",
-      "name": "address",
-      "label": {
-        "text": "Esto es un label dentro de un encabezado <h1>",
-        "isPageHeading": true
-      }
-    }
-  },
   {
     "name": "con clases de form-group opcionales",
     "data": {
@@ -123,7 +112,7 @@
       "id": "classes-applied-b",
       "name": "classes-applied-b",
       "errorMessage": {
-        "text": "Error: Esto es un mensaje de error",
+        "text": "Esto es un mensaje de error",
         "classes": "order-1 w-full pt-sm"
       },
       "classes": "lg:flex-1"

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

@@ -607,7 +607,7 @@
         "text": "Selecciona el organismo al que perteneces."
       },
       "errorMessage": {
-        "text": "Error: No tienes permiso para seleccionar ese organismo."
+        "text": "No tienes permiso para seleccionar ese organismo."
       },
       "idPrefix": "with-hint-and-error",
       "items": [
@@ -1797,7 +1797,7 @@
         },
         "placeholder": "Buscar organismo",
         "errorMessage": {
-          "text": "Error: Introduce al menos un carácter",
+          "text": "Introduce al menos un carácter",
           "classes": "mt-xs"
         }
       },