desy-html 13.0.1 → 13.0.2

package/docs/ds/_ds.example.checkboxes.njk

@@ -67,7 +67,7 @@
         "text": "Hint texto descriptivo"
       },
       "errorMessage": {
-        "text": "Error: Mensaje de error"
+        "text": "Mensaje de error"
       },
       "items": [
         {

package/docs/ds/_ds.example.date-input.njk

@@ -119,7 +119,7 @@
         }
       },
       "errorMessage": {
-        "text": "Error: Aqui va un mensaje de error"
+        "text": "Aqui va un mensaje de error"
       },
       "items": [
         {
@@ -159,7 +159,7 @@
         "text": "Por ejemplo, 31 3 1980"
       },
       "errorMessage": {
-        "text": "Error: Aqui va un mensaje de error"
+        "text": "Aqui va un mensaje de error"
       },
       "items": [
         {
@@ -199,7 +199,7 @@
         "text": "Por ejemplo, 31 3 1980"
       },
       "errorMessage": {
-        "text": "Error: Aqui va un mensaje de error"
+        "text": "Aqui va un mensaje de error"
       },
       "items": [
         {

package/docs/ds/_ds.example.file-upload.njk

@@ -46,7 +46,7 @@
         "text": "Tu foto puede estar en tus Imágenes, Fotos, Descargas o el Escritorio. O en una aplicación como Fotos."
       },
       "errorMessage": {
-        "text": "Error: Error message goes here"
+        "text": "Error message goes here"
       },
       "classes": "text-sm lg:text-base"
     })  }}

package/docs/ds/_ds.example.input-group.njk

@@ -151,7 +151,7 @@
         }
       },
       "errorMessage": {
-        "text": "Error: Aqui va un mensaje de error"
+        "text": "Aqui va un mensaje de error"
       },
       "items": [
         {

package/docs/ds/_ds.example.input.njk

@@ -45,7 +45,7 @@
       "id": "input-14",
       "name": "test-name",
       "errorMessage": {
-        "text": "Error: Mensaje de error"
+        "text": "Mensaje de error"
       },
       "classes": "w-full"
     })  }}
@@ -61,7 +61,7 @@
       "id": "input-15",
       "name": "test-name",
       "errorMessage": {
-        "text": "Error: Mensaje de error"
+        "text": "Mensaje de error"
       },
       "classes": "w-full"
     })  }}
@@ -117,7 +117,7 @@
       "id": "input-24",
       "name": "test-name",
       "errorMessage": {
-        "text": "Error: Mensaje de error",
+        "text": "Mensaje de error",
         "classes": "text-sm"
       },
       "classes": "c-input--sm w-full"
@@ -136,7 +136,7 @@
       "id": "input-25",
       "name": "test-name",
       "errorMessage": {
-        "text": "Error: Mensaje de error",
+        "text": "Mensaje de error",
         "classes": "text-sm"
       },
       "classes": "c-input--sm w-full"
@@ -156,7 +156,7 @@
       "id": "classes-applied-b",
       "name": "classes-applied-b",
       "errorMessage": {
-        "text": "Error: Error message goes here",
+        "text": "Error message goes here",
         "classes": "order-1 w-full pt-sm"
       },
       "classes": "lg:flex-1"

package/docs/ds/_ds.example.radios.njk

@@ -67,7 +67,7 @@
         "text": "Hint texto descriptivo"
       },
       "errorMessage": {
-        "text": "Error: Mensaje de error"
+        "text": "Mensaje de error"
       },
       "items": [
         {

package/docs/ds/_ds.example.searchbar.njk

@@ -37,7 +37,7 @@
         "text": "Buscar"
       },
       "errorMessage": {
-        "text": "Error: Error message goes here",
+        "text": "Error message goes here",
         "classes": "mt-xs"
       },
       "value": "Value",

package/docs/ds/_ds.example.select.njk

@@ -84,7 +84,7 @@
         "text": "Label"
       },
       "errorMessage": {
-        "text": "Error: Mensaje de error"
+        "text": "Mensaje de error"
       },
       "items": [
         {
@@ -114,7 +114,7 @@
         "text": "Hint texto descriptivo"
       },
       "errorMessage": {
-        "text": "Error: Mensaje de error"
+        "text": "Mensaje de error"
       },
       "items": [
         {
@@ -224,7 +224,7 @@
         "classes": "text-sm"
       },
       "errorMessage": {
-        "text": "Error: Mensaje de error",
+        "text": "Mensaje de error",
         "classes": "text-sm"
       },
       "items": [
@@ -257,7 +257,7 @@
         "classes": "text-sm"
       },
       "errorMessage": {
-        "text": "Error: Mensaje de error",
+        "text": "Mensaje de error",
         "classes": "text-sm"
       },
       "items": [
@@ -366,7 +366,7 @@
         "classes": "lg:flex lg:flex-wrap lg:items-center lg:gap-x-base"
       },
       "errorMessage": {
-        "text": "Error: Error message goes here",
+        "text": "Error message goes here",
         "classes": "order-1 w-full pt-sm"
       },
       "items": [

package/docs/ds/_ds.example.textarea.njk

@@ -46,7 +46,7 @@
       "id": "input-14",
       "name": "test-name",
       "errorMessage": {
-        "text": "Error: Mensaje de error"
+        "text": "Mensaje de error"
       },
       "classes": "w-full"
     })  }}
@@ -62,7 +62,7 @@
       "id": "input-15",
       "name": "test-name",
       "errorMessage": {
-        "text": "Error: Mensaje de error"
+        "text": "Mensaje de error"
       },
       "classes": "w-full"
     })  }}
@@ -116,7 +116,7 @@
       "id": "input-14",
       "name": "test-name",
       "errorMessage": {
-        "text": "Error: Mensaje de error"
+        "text": "Mensaje de error"
       },
       "maxlength": 10,
       "classes": "w-full"
@@ -133,7 +133,7 @@
       "id": "input-15",
       "name": "test-name",
       "errorMessage": {
-        "text": "Error: Mensaje de error"
+        "text": "Mensaje de error"
       },
       "maxlength": 10,
       "classes": "w-full"
@@ -190,7 +190,7 @@
       "id": "input-24",
       "name": "test-name",
       "errorMessage": {
-        "text": "Error: Mensaje de error",
+        "text": "Mensaje de error",
         "classes": "text-sm"
       },
       "classes": "text-sm w-full"
@@ -209,7 +209,7 @@
       "id": "input-25",
       "name": "test-name",
       "errorMessage": {
-        "text": "Error: Mensaje de error",
+        "text": "Mensaje de error",
         "classes": "text-sm"
       },
       "classes": "text-sm w-full"
@@ -229,7 +229,7 @@
       "id": "classes-applied-b",
       "name": "classes-applied-b",
       "errorMessage": {
-        "text": "Error: Error message goes here",
+        "text": "Error message goes here",
         "classes": "order-1 w-full pt-sm"
       },
       "classes": "lg:flex-1"

package/docs/index.html

@@ -39,6 +39,10 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.13.0.2</h3>
+  <ul class="text-sm">
+    <li>Accesibility fixes in most of the component examples.</li>
+  </ul>
   <h3>v.13.0.1</h3>
   <ul class="text-sm">
     <li>Removed backstop npm script entries as they are not used.</li>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "13.0.1",
+  "version": "13.0.2",
   "description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
   "type": "module",
   "author": {

package/src/js/aria/MenuNavigation.js

@@ -35,7 +35,10 @@ export function MenuNavigation(aria) {
           const getElement = element.parentElement.parentElement.parentElement.parentElement.querySelector('button');
           getElement.classList.add('c-menu-navigation__button--primary', 'c-menu-navigation__button--has-selection');
           getElement.setAttribute('aria-current', 'true');
-          getElement.firstChild.innerHTML = `<strong class="font-bold">${getElement.textContent}</strong>`;
+          const mainSpan = getElement.querySelector('span:not(.sr-only)');
+          if (mainSpan) {
+            mainSpan.innerHTML = `<strong class="font-bold">${mainSpan.textContent}</strong>`;
+          }
           element.innerHTML = `<strong class="font-bold">${element.textContent}</strong>`;
         }
       })
@@ -97,7 +100,10 @@ export function MenuNavigation(aria) {
         const getElementParent = link.parentElement.parentElement.parentElement.parentElement.querySelector('button');
         getElementParent.classList.remove('c-menu-navigation__button--primary', 'c-menu-navigation__button--has-selection');
         getElementParent.removeAttribute('aria-current');
-        getElementParent.firstChild.innerHTML = `${getElementParent.textContent}`;
+        const mainSpanParent2 = getElementParent.querySelector('span:not(.sr-only)');
+        if (mainSpanParent2) {
+          mainSpanParent2.innerHTML = mainSpanParent2.textContent;
+        }
         link.removeAttribute('aria-current');
         link.innerHTML = `${link.textContent}`;
       }
@@ -107,7 +113,10 @@ export function MenuNavigation(aria) {
         const getElementParent = link.parentElement.parentElement.parentElement.parentElement.querySelector('button');
         getElementParent.classList.add('c-menu-navigation__button--primary', 'c-menu-navigation__button--has-selection');
         getElementParent.setAttribute('aria-current', 'true');
-        getElementParent.firstChild.innerHTML = `<strong class="font-bold">${getElementParent.textContent}</strong>`;
+        const mainSpanParent = getElementParent.querySelector('span:not(.sr-only)');
+        if (mainSpanParent) {
+          mainSpanParent.innerHTML = `<strong class="font-bold">${mainSpanParent.textContent}</strong>`;
+        }
       }
     });
   };

package/src/templates/components/character-count/_examples.character-count.njk

@@ -63,6 +63,7 @@
   },
   {
     "name": "con valor por defecto excediendo el límite",
+    "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": "exceeding-characters",
       "name": "exceeding",
@@ -72,7 +73,7 @@
         "text": "Dirección completa"
       },
       "errorMessage": {
-        "text": "Error: Por favor, no exceder el límite máximo"
+        "text": "Por favor, no exceder el límite máximo. Error en el campo."
       }
     }
   },
@@ -88,19 +89,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>. Si no se establece un <code>'headingLevel'</code>, por defecto usará un <code>&lt;h1&gt;</code>.",
-    "data": {
-      "id": "textarea-with-page-heading",
-      "name": "address",
-      "maxlength": 250,
-      "label": {
-        "text": "Esto es un label dentro de un encabezado <h1>",
-        "isPageHeading": true
-      }
-    }
-  },
   {
     "name": "con contador de palabras",
     "data": {
@@ -139,7 +127,7 @@
       "name": "classes-applied-b",
       "maxlength": 250,
       "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/checkboxes/_examples.checkboxes.njk

@@ -1,37 +1,65 @@
 {% from "components/checkboxes/_macro.checkboxes.njk" import componentCheckboxes %}
+{% from "components/fieldset/_macro.fieldset.njk" import componentFieldset %}
 {% from "components/input/_macro.input.njk" import componentInput %}
 
 {% 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') %}
@@ -274,39 +302,6 @@
       ]
     }
   },
-  {
-    "name": "con un legend como encabezado",
-    "description": "Usa el parámetro <code>'heading'</code> para añadir un encabezado asociado al componente. 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": {
-      "idPrefix": "legend-as-page-heading",
-      "name": "legend-as-page-heading",
-      "fieldset": {
-        "legend": {
-          "text": "¿Cómo prefieres que te contactemos?",
-          "classes": "c-h2",
-          "isPageHeading": true
-        },
-        "headingLevel": 2
-      },
-      "hint": {
-        "text": "Si lo deseas puedes seleccionar varios elementos."
-      },
-      "items": [
-        {
-          "value": "correo-electronico",
-          "text": "Correo electrónico"
-        },
-        {
-          "value": "correp-postal",
-          "text": "Correo postal"
-        },
-        {
-          "value": "telefono",
-          "text": "Teléfono"
-        }
-      ]
-    }
-  },
   {
     "name": "con un legend del tamaño de un encabezado h2",
     "data": {
@@ -322,7 +317,7 @@
         "text": "Si lo deseas puedes seleccionar varios elementos."
       },
       "errorMessage": {
-        "text": "Error: Tienes que seleccionar al menos una opción"
+        "text": "Tienes que seleccionar al menos una opción. Soluciona el error."
       },
       "items": [
         {
@@ -342,6 +337,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",
@@ -363,11 +359,12 @@
   },
   {
     "name": "con una sóla opción usando 'aria-describedby' en el input",
+    "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": {
       "idPrefix": "describedby",
       "name": "describedby",
       "errorMessage": {
-        "text": "Error: Por favor, debes aceptar los términos y condiciones"
+        "text": "Por favor, debes aceptar los términos y condiciones. Soluciona el error."
       },
       "items": [
         {
@@ -379,10 +376,11 @@
   },
   {
     "name": "con una sóla opción (y pista) usando 'aria-describedby' en el input",
+    "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": "t-and-c-with-hint",
       "errorMessage": {
-        "text": "Error: Por favor, debes aceptar los términos y condiciones"
+        "text": "Por favor, debes aceptar los términos y condiciones. Soluciona el error."
       },
       "items": [
         {
@@ -397,10 +395,11 @@
   },
   {
     "name": "con fieldset 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": {
       "name": "colours",
       "errorMessage": {
-        "text": "Error: Tienes que seleccionar al menos una opción"
+        "text": "Tienes que seleccionar al menos una opción. Soluciona el error."
       },
       "fieldset": {
         "legend": {
@@ -425,11 +424,12 @@
   },
   {
     "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": {
       "idPrefix": "error-message",
       "name": "error-message",
       "errorMessage": {
-        "text": "Error: Tienes que seleccionar al menos una opción"
+        "text": "Tienes que seleccionar al menos una opción. Soluciona el error."
       },
       "fieldset": {
         "legend": {
@@ -454,11 +454,12 @@
   },
   {
     "name": "con mensaje de error y pistas en los items",
+    "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": {
       "idPrefix": "error-and-hints",
       "name": "error-and-hints",
       "errorMessage": {
-        "text": "Error: Tienes que seleccionar al menos una opción"
+        "text": "Tienes que seleccionar al menos una opción. Soluciona el error."
       },
       "fieldset": {
         "legend": {
@@ -492,6 +493,7 @@
   },
   {
     "name": "con un texto de item muy largo",
+    "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": {
       "idPrefix": "long-option",
       "name": "long-option",
@@ -499,7 +501,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. Soluciona el error."
       },
       "fieldset": {
         "legend": {
@@ -524,6 +526,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": "with-conditional-items",
       "name": "with-conditional-items",
@@ -558,31 +561,9 @@
       ]
     }
   },
-  {
-    "name": "con items condicionales anidados",
-    "data": {
-      "idPrefix": "with-conditional-nested-items",
-      "name": "with-conditional-nested-items",
-      "idPrefix": "how-contacted-nested",
-      "fieldset": {
-        "legend": {
-          "text": "¿Cómo quieres que te contactemos?"
-        }
-      },
-      "items": [
-        {
-          "value": "presencial",
-          "text": "Presencial",
-          "checked": true,
-          "conditional": {
-            "html": nestedContent('1').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": "with-conditional-items-checked",
       "name": "with-conditional-items-checked",