desy-html 13.0.1 → 14.0.0

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

@@ -194,7 +194,7 @@
         "text": "Elige tus días disponibles"
       },
       "hint": {
-        "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span> Separa tus fechas con un espacio."
+        "html": "Para incluir las fechas en el campo de texto usa el formato de fecha <span aria-hidden='true'>DD-MM-AAAA (día-mes-año).</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span> Separa las fechas mediante un espacio. Para seleccionar varios días en el calendario, pulsa los días que quieres seleccionar."
       },
       "value": "10-01-2024 20-01-2024",
       "caller": calendarMultiExample | safe
@@ -206,10 +206,10 @@
       "id": "datepicker-range3",
       "name": "test-name",
       "label": {
-        "text": "Elige tus días disponibles"
+        "text": "Elige tu rango de días disponibles"
       },
       "hint": {
-        "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span> Separa la fecha inicial de la final con una barra /."
+        "html": "Para incluir el rango de fechas en el campo de texto usa el formato de fecha <span aria-hidden='true'>DD-MM-AAAA (día-mes-año).</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span> Separa la fecha inicial de la final con una barra /. Para seleccionar un rango de fechas en el calendario, pulsa el primer día del rango, desplázate hasta el último día del rango y púlsalo."
       },
       "value": "10-01-2024/20-01-2024",
       "caller": calendarRangeExample | safe
@@ -221,10 +221,10 @@
       "id": "datepicker-with-hint-text-and-year",
       "name": "test-name",
       "label": {
-        "text": "Elige tus días disponibles"
+        "text": "Elige tu rango de días disponibles"
       },
       "hint": {
-        "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span> Separa la fecha inicial de la final con una /."
+        "html": "Para incluir el rango de fechas en el campo de texto usa el formato de fecha <span aria-hidden='true'>DD-MM-AAAA (día-mes-año).</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span> Separa la fecha inicial de la final con una barra /. Para seleccionar un rango de fechas en el calendario, pulsa el primer día del rango, desplázate hasta el último día del rango y púlsalo."
       },
       "value": "16-01-2024/04-02-2024",
       "caller": calendarRangeExample2('datepicker-with-hint-text-and-year') | safe
@@ -248,6 +248,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": {
       "id": "datepicker-with-error-message",
       "name": "test-name",
@@ -258,7 +259,7 @@
         "html": "Usa el formato: <span aria-hidden='true'>DD-MM-AAAA (día-mes-año)</span><span class='sr-only'>día con dos dígitos, guión simple, mes con dos dígitos, guión simple y año con 4 dígitos.</span>"
       },
       "errorMessage": {
-        "text": "Error: Esto es un mensaje de error",
+        "text": "Esto es un mensaje de error",
         "classes": "mt-xs"
       },
       "pattern": "(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))",

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

@@ -52,7 +52,6 @@
     {% if params.errorMessage %}
       {% if not params.errorId %}
       {% set errorId = params.id + '-error' %}
-      {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %}
       {% endif %}
       {{ componentErrorMessage({
         id: errorId,

package/src/templates/components/description-list/_examples.description-list.njk

@@ -395,11 +395,11 @@
       "items": [
         {
           "term": {
-            "html": "Expedientes abiertos ↓",
+            "html": "Expedientes abiertos <span aria-hidden='true'>&darr;</span>",
             "classes": "mb-sm"
           },
           "definition": {
-            "html": "<span class='font-bold text-4xl'>45</span> <svg class='inline-block align-baseline ml-sm' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1.6rem' height='1.6rem'><path d='M140 20a20 20 0 00-20-20H20A20 20 0 000 20v100a20 20 0 0020 20h70a10 10 0 007.07-2.93l40-40A10 10 0 00140 90zM20 22.5a2.5 2.5 0 012.5-2.5h95a2.5 2.5 0 012.5 2.5v55a2.5 2.5 0 01-2.5 2.5H95a15 15 0 00-15 15v22.5a2.5 2.5 0 01-2.5 2.5h-55a2.5 2.5 0 01-2.5-2.5z'/></svg><a href='/' class='c-link block mt-sm font-normal text-sm'>Ver todos</a>"
+            "html": "<span class='font-bold text-4xl'>45</span> <svg role='img' aria-label='expedientes'  class='inline-block align-baseline ml-sm' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1.6rem' height='1.6rem'><path d='M140 20a20 20 0 00-20-20H20A20 20 0 000 20v100a20 20 0 0020 20h70a10 10 0 007.07-2.93l40-40A10 10 0 00140 90zM20 22.5a2.5 2.5 0 012.5-2.5h95a2.5 2.5 0 012.5 2.5v55a2.5 2.5 0 01-2.5 2.5H95a15 15 0 00-15 15v22.5a2.5 2.5 0 01-2.5 2.5h-55a2.5 2.5 0 01-2.5-2.5z'/></svg><a href='/' class='c-link block mt-sm font-normal text-sm'>Ver todos</a>"
           }
         }
       ],

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

@@ -29,7 +29,7 @@
       "text": "Editar servicio publicado"
     },
     "description": {
-      "html": "Actualmente este servicio está publicado. <br>Los cambios realizados no serán visibles hasta que sean validados"
+      "text": "Actualmente este servicio está publicado. Los cambios realizados no serán visibles hasta que sean validados"
     },
     "itemsPrimary": [
       {
@@ -56,7 +56,7 @@
       "text": "Servicio publicado"
     },
     "description": {
-      "html": "Actualmente este servicio está publicado. <br>Los cambios realizados no serán visibles hasta que sean validados"
+      "text": "Actualmente este servicio está publicado. Los cambios realizados no serán visibles hasta que sean validados"
     },
     "itemsSecondary": [
       {

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

@@ -116,8 +116,8 @@
     "data": {
       "text": "Dropdown anchura completa",
       "classes": "w-full justify-between",
-      "classesTooltip": "w-max max-h-64 overflow-y-auto",
-      "caller": "<div class=' p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-64 '><div style=' width:900px '></div></div></div>"
+      "classesTooltip": "w-max max-h-40 overflow-y-auto",
+      "caller": "<div class=' p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-64 '><div style=' width:120px '></div></div></div>"
     }
   },
   {
@@ -125,7 +125,7 @@
     "description": 'Usa los atributos <code>data-aria-haspopup="dialog" data-role="dialog" data-aria-modal="false" data-aria-label="Información adicional"</code> para abrir un desplegable que no contenga un menú, por ejemplo un panel informativo.',
     "data": {
       "text": "Marta Pérez",
-      "caller": "<div class=\" w-48 p-2 \"><div class=\" border-4 border-dashed border-gray-200 rounded-lg h-40 \"></div></div>",
+      "caller": "<div class=' w-48 p-2 '><div class=' border-4 border-dashed border-gray-200 rounded-lg h-40 '></div></div>",
       "attributes": {
         "data-aria-haspopup": "dialog",
         "data-role": "dialog",

package/src/templates/components/error-message/_examples.error-message.njk

@@ -2,14 +2,16 @@
 {% set examples =  [
   {
     "name": "por defecto",
+    "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": {
-      "text": "Error: esto es un mensaje de error"
+      "text": "Esto es un mensaje de error"
     }
   },
   {
     "name": "con HTML",
+    "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": {
-      "html": "Error: esto es un <em>mensaje de error con HTML</em>"
+      "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' width='1em' height='1em' class='w-4 h-4 mr-xs align-baseline text-alert-base inline-block' role='img' aria-label='Alerta'><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>Esto es un mensaje de error con HTML"
     }
   }
 ] %}

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/fieldset/_examples.fieldset.njk

@@ -18,7 +18,7 @@
   "id": "tel-error-id-" + id,
   "name": "tel-error-name-" + id,
   "errorMessage": {
-    "text": "Error: Mensaje de error aqui"
+    "text": "Mensaje de error aqui"
   }
 })  }}
 {% endmacro %}
@@ -38,7 +38,7 @@
   },
   {
     "name": "con error",
-    "description": "Mostrar código para visualizar el <code>aria-describedby</code>, el <code>aria-errormessage</code> y <code>aria-invalid='true'</code> aplicado en el HTML.",
+    "description": "Mostrar código para visualizar el <code>aria-describedby</code>, el <code>aria-errormessage</code> y <code>aria-invalid='true'</code> aplicado en el HTML. El <code>aria-errormessage</code> se asocia al fieldset, en vez de a un campo concreto, cuando el error hace referencia a los elementos en su conjunto. Debería apuntar al id de un mensaje de error que describa el problema general del fieldset.",
     "data": {
       "legend": {
         "text": "¿Cuál es tu número de teléfono?",
@@ -48,33 +48,6 @@
       "caller": callerErrorExample('1').val
     }
   },
-  {
-    "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>. Si no se establece un <code>'headingLevel'</code>, por defecto usará un <code>&lt;h1&gt;</code>.",
-    "data": {
-      "legend": {
-        "text": "¿Cuál es tu número de teléfono?",
-        "classes": "c-h1 mb-sm",
-        "isPageHeading": true
-      },
-      "caller": callerExample('2').val
-
-    }
-  },
-  {
-    "name": "con label como encabezado con h3",
-    "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": {
-      "legend": {
-        "text": "¿Cuál es tu número de teléfono?",
-        "classes": "c-h3 mb-sm",
-        "isPageHeading": true
-      },
-      "headingLevel": 3,
-      "caller": callerExample('3').val
-
-    }
-  },
   {
     "name": "con clases de css aplicadas",
     "data": {

package/src/templates/components/file-upload/_examples.file-upload.njk

@@ -20,13 +20,14 @@
         "text": "Sube una foto"
       },
       "hint": {
-        "text": "Tu foto puede estar en tus Imágenes, Fotos, Descargas o el Escritorio. O en una aplicación como Fotos."
+        "text": "Formato de imágenes admitidas: jpg, jpeg, png, gif. Tamaño de archivo máximo admitido: 10 Mb."
       },
       "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none"
     }
   },
   {
     "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": "file-upload-3",
       "name": "file-upload-3",
@@ -34,10 +35,10 @@
         "text": "Sube un archivo"
       },
       "hint": {
-        "text": "Tu foto puede estar en tus Imágenes, Fotos, Descargas o el Escritorio. O en una aplicación como Fotos."
+        "text": "Formato de imágenes admitidas: jpg, jpeg, png, gif. Tamaño de archivo máximo admitido: 10 Mb."
       },
       "errorMessage": {
-        "text": "Error: esto es un mensaje de error"
+        "text": "Esto es un mensaje de error"
       },
       "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none"
     }
@@ -56,18 +57,6 @@
       "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none"
     }
   },
-  {
-    "name": "con label como encabezado",
-    "data": {
-      "id": "file-upload-5",
-      "name": "file-upload-5",
-      "label": {
-        "text": "Sube un archivo",
-        "isPageHeading": true
-      },
-      "classes": "overflow-x-auto max-w-64 lg:w-full lg:max-w-none"
-    }
-  },
   {
     "name": "con clases de form-group opcionales",
     "data": {

package/src/templates/components/header-advanced/_template.header-advanced.njk

@@ -89,6 +89,7 @@
                 idPrefix: "header-nav-item",
                 items: params.navigation.items,
                 attributes: {
+                  "id": "header-nav-item",
                   "aria-label": "Menú principal"
                 }
               }) | trim | indent(14) }}

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/input/_examples.input.njk

@@ -36,6 +36,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": {
       "label": {
         "text": "Esto es un label"
@@ -46,12 +47,13 @@
       "id": "input-with-error-message-a",
       "name": "test-name",
       "errorMessage": {
-        "text": "Error: esto es un mensaje de error"
+        "text": "Esto es un mensaje de error"
       }
     }
   },
   {
     "name": "con mensaje de error con id personalizado",
+    "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": {
       "label": {
         "text": "Esto es un label"
@@ -63,7 +65,7 @@
       "name": "test-name",
       "errorId": "custom-error-id",
       "errorMessage": {
-        "text": "Error: esto es un mensaje de error"
+        "text": "Esto es un mensaje de error"
       }
     }
   },
@@ -112,17 +114,6 @@
       "classes": "w-32"
     }
   },
-  {
-    "name": "con label como encabezado",
-    "data": {
-      "label": {
-        "text": "Esto es un label",
-        "isPageHeading": true
-      },
-      "id": "input-with-page-heading",
-      "name": "test-name"
-    }
-  },
   {
     "name": "con clases de form-group opcionales",
     "data": {
@@ -199,7 +190,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"
@@ -230,10 +221,14 @@
   },
   {
     "name": "placeholder",
+    "description": "El atributo <code>placeholder</code> proporciona un texto de ejemplo que se muestra en el campo de entrada cuando está vacío. Intenta usar la pista con el atributo <code>hint</code> en su lugar ya que es más accesible. El placeholder debe ser un apoyo a la pista, no un sustituto.",
     "data": {
       "label": {
         "text": "Esto es un label"
       },
+      "hint": {
+        "text": "Esto es una pista."
+      },
       "id": "con-placeholder",
       "name": "placeholder",
       "placeholder": "Esto es un placeholder"
@@ -264,37 +259,6 @@
       "describedBy": "input-example-a"
     }
   },
-  {
-    "name": "error con describedBy",
-    "data": {
-      "label": {
-        "text": "Error con describedBy"
-      },
-      "id": "with-describedby-c",
-      "name": "with-describedby-c",
-      "describedBy": "input-example-a",
-      "errorMessage": {
-        "text": "Error: esto es un mensaje de error"
-      }
-    }
-  },
-  {
-    "name": "con error, pista y describedBy",
-    "data": {
-      "label": {
-        "text": "Esto es un label"
-      },
-      "hint": {
-        "text": "Esto es una pista."
-      },
-      "id": "input-with-both",
-      "name": "test-name",
-      "describedBy": "input-example-a",
-      "errorMessage": {
-        "text": "Error: esto es un mensaje de error"
-      }
-    }
-  },
   {
     "name": "inputmode",
     "description": "Este atributo proporciona información al navegador para que se pueda mostrar el teclado virtual apropiado, especialmente en dispositivos móviles. Este input tiene un <code>inputmode='email'</code>",

package/src/templates/components/input-group/_examples.input-group.njk

@@ -102,37 +102,38 @@
         }
       },
       "items": [
-        {
-          "divider": {
-            "text": "Desde:",
-            "classes": "self-end mb-xl mr-base"
-          }
-        },
         {
           "name": "num-doc-A",
-          "classes": "w-full lg:w-64",
+          "classes": "w-full lg:w-64 lg:flex-1",
+          "formGroup": {
+            "classes": "lg:flex lg:flex-wrap lg:items-center lg:gap-x-base lg:mb-0"
+          },
           "label": {
             "text": "Desde:",
-            "classes": "sr-only"
+            "classes": "lg:py-sm lg:mt-sm"
           },
           "placeholder": "Ej: 0"
         },
         {
           "divider": {
-            "text": "hasta:",
-            "classes": "self-end mb-xl mx-base"
+            "html": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 140' class='self-center ml-2' aria-hidden='true' focusable='false' width='1em' height='1em'><path d='M102.07 27.93l35 35a10 10 0 010 14.14l-35 35a10 10 0 01-14.14-14.14l13.66-13.66A2.5 2.5 0 0099.82 80H10a10 10 0 010-20h89.82a2.5 2.5 0 001.77-4.27L87.93 42.07a10 10 0 0114.14-14.14z' fill='currentColor'></path></svg>",
+            "classes": "hidden lg:block mt-sm"
           }
         },
         {
           "name": "num-doc-B",
-          "classes": "w-full lg:w-64",
+          "classes": "w-full lg:w-64 lg:flex-1",
+          "formGroup": {
+            "classes": "lg:flex lg:flex-wrap lg:items-center lg:gap-x-base"
+          },
           "label": {
-            "text": "hasta:",
-            "classes": "sr-only"
+            "text": "Hasta:",
+            "classes": "lg:py-sm lg:mt-sm"
           },
           "placeholder": "Ej: 600"
         }
-      ]
+      ],
+      "classes": "lg:flex lg:flex-wrap lg:items-center lg:gap-x-base"
     }
   },
   {
@@ -148,7 +149,7 @@
         "text": "Necesitamos tus datos para identificarte posteriormente."
       },
       "errorMessage": {
-        "text": "Error: Estos campos no pueden estar vacíos"
+        "text": "El campo Nombre y el campo Apellidos no pueden estar vacíos."
       },
       "items": [
         {
@@ -217,7 +218,7 @@
         "text": "Necesitamos tus datos para identificarte posteriormente."
       },
       "errorMessage": {
-        "text": "Error: Estos campos no pueden estar vacíos"
+        "text": "El campo Nombre no puede estar vacío."
       },
       "items": [
         {
@@ -281,7 +282,7 @@
         "text": "Necesitamos tus datos para identificarte posteriormente."
       },
       "errorMessage": {
-        "text": "Error: Estos campos no pueden estar vacíos"
+        "text": "El campo Apellidos no puede esta vacío."
       },
       "items": [
         {
@@ -385,7 +386,7 @@
   },
   {
     "name": "con autocompletado",
-    "description": "Usa el parámetro <code>autocomplete</code>",
+    "description": "Usa el parámetro <code>autocomplete</code> en los campos que piden datos del usuario para cumplir con las especificaciones de accesibilidad.",
     "data": {
       "id": "datos-autocomplete",
       "fieldset": {

package/src/templates/components/item/_examples.item.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": {
       "title": {
         "text": "Entidades locales de la Comunidad Autónoma de Aragón"

package/src/templates/components/media-object/_examples.media-object.njk

@@ -2,9 +2,10 @@
 {% set examples =  [
   {
     "name": "por defecto",
+    "description": "Recuerda que este componente, por accesibilidad, debería esta rodeado de una etiqueta semántica, normalmente un <code>&lt;li&gt;</code> en caso de que haya varios seguidos. O bien, que el contenido contenga algún encabezado.",
     "data": {
       "figureHtml": "<div class=' w-20 h-20 '><div class=' h-full border-4 border-dashed border-gray-200 rounded-lg '></div></div>",
-      "caller": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet."
+      "caller": "<p class='c-paragraph-base'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.</p>"
     }
   },
   {
@@ -12,7 +13,7 @@
     "data": {
       "reverse": true,
       "figureHtml": "<div class=' w-20 h-20 '><div class=' h-full border-4 border-dashed border-gray-200 rounded-lg '></div></div>",
-      "caller": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet."
+      "caller": "<p class='c-paragraph-base'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.</p>"
     }
   },
   {
@@ -20,7 +21,7 @@
     "data": {
       "center": true,
       "figureHtml": "<div class=' w-20 h-20 '><div class=' h-full border-4 border-dashed border-gray-200 rounded-lg '></div></div>",
-      "caller": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet."
+      "caller": "<p class='c-paragraph-base'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.</p>"
     }
   },
   {
@@ -30,7 +31,7 @@
       "figureHtml": "<div class=' w-20 h-20 '><div class=' h-full border-4 border-dashed border-gray-200 rounded-lg '></div></div>",
       "figureClasses": "mr-base",
       "contentClasses": "text-sm",
-      "caller": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.",
+      "caller": "<p class='c-paragraph-base'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.</p>",
       "classes": "mb-base"
     }
   },
@@ -42,7 +43,7 @@
       "figureHtml": "<div class=' w-20 h-20 '><div class=' h-full border-4 border-dashed border-gray-200 rounded-lg '></div></div>",
       "figureClasses": "ml-base",
       "contentClasses": "text-sm",
-      "caller": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.",
+      "caller": "<p class='c-paragraph-base'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer maximus, elit et faucibus finibus, massa enim egestas leo, et lobortis lorem elit non enim. Nullam molestie nunc eget eleifend porttitor. Suspendisse ornare ligula erat, non dapibus nunc rhoncus at. Maecenas vitae urna viverra, semper mauris vitae, euismod ante. Sed finibus quam ut orci pellentesque, in tincidunt risus tristique. Vivamus efficitur purus urna, sed blandit lorem convallis vel. Mauris tincidunt tincidunt ipsum finibus euismod. Sed eget tincidunt mauris. Duis viverra commodo consectetur. Nullam viverra tincidunt nisl, sit amet dignissim lacus mattis imperdiet.</p>",
       "classes": "mb-base"
     }
   }

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/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/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"