desy-html 6.6.0 → 7.0.1

package/docs/_include.template-header.njk

@@ -2,6 +2,9 @@
 
 {% call componentHeader({
   homepageUrl: "index.html",
+  mobileTitle: {
+    "text": "desy-html"
+  },
   classes: "relative z-40",
   expandedLogo: true,
   navigation: {

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

@@ -1,4 +1,4 @@
-<div class="prose-sm lg:prose xl:prose-lg max-w-none mx-auto">
+<div class="prose prose-base max-w-none mx-auto">
   <p class="lead">Until now, trying to style an article, document, or blog post with Tailwind has been a tedious task that required a keen eye for typography and a lot of complex custom CSS.</p>
   <p>
     By default, Tailwind removes all of the default browser styling from paragraphs, headings, lists and more. This ends up being really useful for building application UIs because you spend less time undoing user-agent styles, but when you

package/docs/ds/_ds.section.typography.njk

@@ -18,7 +18,7 @@
     title: "Ejemplo:"
   }) }}
   <div class="pb-xl"></div>
-  <div class="prose prose-sm lg:prose-base max-w-none lg:max-w-none mx-auto">
+  <div class="prose prose-base max-w-none mx-auto">
     <p class="lead">Until now, trying to style an article, document, or blog post with Tailwind has been a tedious task that required a keen eye for typography and a lot of complex custom CSS.</p>
     <p>
       By default, Tailwind removes all of the default browser styling from paragraphs, headings, lists and more. This ends up being really useful for building application UIs because you spend less time undoing user-agent styles, but when you

package/docs/index.html

@@ -16,7 +16,7 @@
     <li>Ejecuta primero <code>npm install</code></li>
     <li>Ejecuta <code>npm run dev</code> para escuchar cambios en los archivos njk, css y html, para renderizarlos y recargar el servidor local con browser-sync.</li>
     <li>Usa <code>npm run prod</code> para generar el CSS y minificarlo.</li>
-    <li>Dependencias: Node.js v12.18.3, Tailwind CSS y AutoPrefixer configurado en PostCSS. Versión y lista de dependencias completa en: <a href="package.json">Ver package.json</a></li>
+    <li>Dependencias: Node.js v16.17.1, Tailwind CSS y AutoPrefixer configurado en PostCSS. Versión y lista de dependencias completa en: <a href="package.json">Ver package.json</a></li>
   </ul>
 
   <h2>¿Cómo comienzo un proyecto que usa los componentes de desy-html?</h2>
@@ -38,6 +38,16 @@
 
   <h2>Changelog (English)</h2>
   <p>What's new in the latest version of desy-html</p>
+  <h3>v.7.0.1</h3>
+  <ul class="text-sm">
+    <li>Accesibility and docs improvements.</li>
+  </ul>
+  <h3>v.7.0.0</h3>
+  <ul class="text-sm">
+    <li>Updated to node 16.17.1 and npm 8.15.0. Updated to latest packages.</li>
+    <li>Docs improvements.</li>
+    <li>Bug fixes in Tree and Toggle.</li>
+  </ul>
   <h3>v.6.6.0</h3>
   <ul class="text-sm">
     <li>Removed Backstop.js visual regression testing library to make the library lighter. We will use it only in test branch.</li>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "desy-html",
-  "version": "6.6.0",
+  "version": "7.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)",
@@ -20,8 +20,8 @@
   },
   "homepage": "https://desy.aragon.es/",
   "engines": {
-    "npm": ">=6.14.0",
-    "node": ">=12.18.0"
+    "npm": ">=8.15.0",
+    "node": ">=16.17.1"
   },
   "main": "src/js/index.js",
   "scripts": {
@@ -32,16 +32,16 @@
     "backstop-test:test": "backstop test --config=test/backstop_config/backstop.config.js"
   },
   "dependencies": {
-    "@tailwindcss/aspect-ratio": "^0.4.0",
-    "@tailwindcss/forms": "^0.5.0",
-    "@tailwindcss/typography": "^0.5.2",
+    "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@tailwindcss/forms": "^0.5.3",
+    "@tailwindcss/typography": "^0.5.7",
     "autoprefixer": "^10.0.2",
-    "hex-rgb": "^4.2.0",
+    "hex-rgb": "^5.0.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.2.15",
-    "postcss-cli": "^8.3.1",
-    "postcss-import": "^14.0.2",
-    "tailwindcss": "^3.0.24"
+    "postcss-cli": "^10.0.0",
+    "postcss-import": "^15.0.0",
+    "tailwindcss": "^3.2.1"
   },
   "devDependencies": {
     "browser-sync": "^2.26.13",
@@ -50,10 +50,10 @@
     "gulp-clean-css": "^4.3.0",
     "gulp-footer": "^2.0.2",
     "gulp-nunjucks-render": "^2.2.3",
-    "gulp-postcss": "^9.0.0",
+    "gulp-postcss": "^9.0.1",
     "gulp-strip-css-comments": "^2.0.0"
   },
   "optionalDependencies": {
-    "win-node-env": "^0.4.0"
+    "win-node-env": "^0.6.1"
   }
 }

package/src/js/aria/toggle.js

@@ -5,6 +5,9 @@ export function Toggle(aria) {
       this.rootEl = domNode;
       this.buttonEl = this.rootEl.querySelector('.c-toggle__button');
       this.buttonEl.addEventListener('click', this.toggle.bind(this));
+      if(this.buttonEl.getAttribute('aria-pressed') === 'true' || this.buttonEl.getAttribute('aria-checked') === 'true') {
+        this.buttonEl.click()
+      }
     }
 
     toggle(event) {

package/src/js/aria/treeitem.js

@@ -33,6 +33,11 @@ export function Treeitem(aria) {
     this.domNode = node;
     this.label = node.textContent.trim();
 
+    if(this.domNode.getAttribute("aria-current")) {
+      var getLabel = this.domNode.querySelector('label')
+      getLabel.setAttribute("aria-current", "page")
+    }
+
     if (node.getAttribute('aria-label')) {
       this.label = node.getAttribute('aria-label').trim();
     }
@@ -79,10 +84,12 @@ export function Treeitem(aria) {
       this.domNode.setAttribute('role', 'treeitem');
     }
 
-    this.domNode.addEventListener('keydown', this.handleKeydown.bind(this));
-    this.domNode.addEventListener('click', this.handleClick.bind(this));
-    this.domNode.addEventListener('focus', this.handleFocus.bind(this));
-    this.domNode.addEventListener('blur', this.handleBlur.bind(this));
+    if(!this.domNode.getAttribute('disabled')){
+      this.domNode.addEventListener('keydown', this.handleKeydown.bind(this));
+      this.domNode.addEventListener('click', this.handleClick.bind(this));
+      this.domNode.addEventListener('focus', this.handleFocus.bind(this));
+      this.domNode.addEventListener('blur', this.handleBlur.bind(this));
+    }
 
     if (!this.isExpandable) {
       this.domNode.addEventListener('mouseover', this.handleMouseOver.bind(this));

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

@@ -226,6 +226,15 @@
       "href": "/"
     }
   },
+  {
+    "name": "forwardbutton",
+    "description": "Transparent with right icon",
+    "data": {
+      "html": 'Ver más<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": "c-button--transparent",
+      "href": "/"
+    }
+  },
   {
     "name": "button with only icon",
     "data": {

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

@@ -99,7 +99,7 @@
     "data": {
       "classes": "lg:w-1/3",
       "containerClasses": "p-base border border-neutral-base rounded",
-      "caller": defaultContent | safe
+      "caller": defaultContent
     }
   },
   {
@@ -107,7 +107,7 @@
     "data": {
       "classes": "lg:w-1/3",
       "containerClasses": "p-base border border-neutral-base rounded",
-      "caller": withIconContent | safe
+      "caller": withIconContent
     }
   },
   {
@@ -115,7 +115,7 @@
     "data": {
       "classes": "lg:w-1/3",
       "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
-      "caller": withButton | safe
+      "caller": withButton
     }
   },
   {
@@ -123,7 +123,7 @@
     "data": {
       "classes": "lg:w-1/3",
       "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
-      "caller": withButton | safe,
+      "caller": withButton,
       "super": {
         "backgroundFullColor": "transparent",
         "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
@@ -140,7 +140,7 @@
     "data": {
       "classes": "lg:w-1/3",
       "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
-      "caller": withButton | safe,
+      "caller": withButton,
       "sub": {
         "backgroundFullColor": "transparent",
         "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
@@ -158,7 +158,7 @@
     "data": {
       "classes": "lg:w-2/3",
       "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
-      "caller": withButton | safe,
+      "caller": withButton,
       "super": {
         "backgroundFullColor": "transparent",
         "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
@@ -185,7 +185,7 @@
     "data": {
       "classes": "lg:w-2/3",
       "containerClasses": "p-base bg-neutral-lighter border-t-8 border-neutral-dark",
-      "caller": withButton | safe,
+      "caller": withButton,
       "super": {
         "backgroundFullColor": "transparent",
         "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
@@ -211,14 +211,14 @@
     "data": {
       "classes": "lg:w-1/2",
       "containerClasses": "py-lg border-t-8 border-neutral-dark",
-      "caller": linksContent | safe
+      "caller": linksContent
     }
   },
   {
     "name": "home block with buttons",
     "data": {
       "containerClasses": "p-lg bg-neutral-lighter border-t-8 border-neutral-dark",
-      "caller": areaPersonalContent | safe,
+      "caller": areaPersonalContent,
       "super": {
         "backgroundFullColor": "transparent",
         "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.png&text=Imagen",
@@ -245,7 +245,7 @@
     "data": {
       "classes": "lg:w-3/4",
       "containerClasses": "p-lg bg-neutral-lighter",
-      "caller": postContent | safe,
+      "caller": postContent,
       "super": {
         "backgroundFullColor": "transparent",
         "backgroundFullUrl": "https://dummyimage.com/320x240/92949b/fff.jpg&text=Imagen",
@@ -271,7 +271,7 @@
     "data": {
       "classes": "lg:w-1/4",
       "containerClasses": "p-base bg-neutral-lighter",
-      "caller": withIconContent | safe
+      "caller": withIconContent
     }
   }
 ] %}

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

@@ -114,13 +114,3 @@ params:
   type: object
   required: false
   description: HTML attributes (for example data attributes) to add to the anchor tag.
-
-accessibilityCriteria: |
-  ## Conditional 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/collapsible/_examples.collapsible.njk

@@ -21,8 +21,8 @@
     "name": "with html",
     "data": {
       "id": "collapsible-html-example",
-      "headerText": "Where to find your ID",
-      "html": "<label class=\" block font-semibold \" for=\"contact-phone\">Phone number</label>\n<span id=\"contact-phone-error\" class=\" block font-semibold text-alert-base \">Problem with input</span>\n<input class=\" mt-sm px-base py-sm border-black rounded font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base  border-alert-base ring-2 ring-alert-base \" name=\"contact-phone\" type=\"text\" id=\"contact-phone\" aria-describedby=\"contact-phone-error\">\n"
+      "headerText": "Help with nationality",
+      "html": '<p>We need to know <strong>your nationality</strong> so we can work out which elections you’re entitled to vote in. If you can’t provide your nationality, you’ll have to send copies of identity documents through the post.</p>'
     }
   }
 ] %}

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

@@ -21,18 +21,4 @@ params:
   description: HTML attributes (for example data attributes) to add to the error message span tag
 - name: visuallyHiddenText
   type: string
-  description: A visually hidden prefix used before the error message. Defaults to "Error".
-
-accessibilityCriteria: |
-  When used with a single input, the error message 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
-  error message 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 error message SHOULD NOT:
-  - be announced every time for each individual input
+  description: A visually hidden prefix used before the error message. Defaults to "Error".

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

@@ -114,7 +114,7 @@
 
 {% set exampleOffcanvas %}
   <nav class="w-full p-2" aria-label="Menú móvil">
-    <h3 class="p-base text-base font-bold">Carpeta del gestor</h3>
+    <h3 class="p-base text-base font-bold">Gestor de expedientes</h3>
     {{ componentNav({
       "idPrefix": "nav-mobile-pages",
       "hasNav": false,
@@ -170,7 +170,7 @@
           "items": [
             {
               "href": "#",
-              "text": "Carpeta del gestor",
+              "text": "Gestor de expedientes",
               "active": true
             },
             {
@@ -201,8 +201,11 @@
     "description": "El menú por defecto de las aplicaciones de la administración digital tiene un logo que enlaza a la página de inicio y un menu principal de navegación. El menu de navegación se oculta en mobile si no se añaden clases a navigation. El logotipo es simple, sin letras, si la app está diseñada para funcionarios. Junto al logo hay un texto que da nombre a la app en la que estamos.",
     "data": {
       "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
       "subnav": {
-        "text": "Carpeta del gestor"
+        "text": "Gestor de expedientes"
       },
       "navigation": {
         "items": [
@@ -232,8 +235,11 @@
     "description": "Tras nuestro menú de navegación tenemos customNavigationHtml: una zona anidable para poder añadir una navegación personalizada",
     "data": {
       "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
       "subnav": {
-        "text": "Carpeta del gestor"
+        "text": "Gestor de expedientes"
       },
       "customNavigationHtml": '<div class="flex flex-wrap flex-1 gap-base">'+ navigationCustom | safe + '</div>'
     }
@@ -243,8 +249,11 @@
     "description": "En el customNavigationHtml podemos añadir elementos posicionados a la derecha",
     "data": {
       "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
       "subnav": {
-        "text": "Carpeta del gestor"
+        "text": "Gestor de expedientes"
       },
       "customNavigationHtml": '<div class="relative flex justify-end items-center flex-1 gap-base"><div class="absolute -top-3 right-0 text-black"><a href="#"><svg class="w-5 h-5" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" aria-label="Notificaciones"><path d="M7.25 12.5h-1.5a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5Z" fill="currentColor" transform="scale(3.42857)"/><g transform="scale(3.42857)"><circle cx="10.5" cy="2.5" r="2.5" fill="currentColor"/><path d="M11.5 10a1 1 0 0 1-1-1V6.74a.25.25 0 0 0-.24-.25 4 4 0 0 1-3.76-4 3.43 3.43 0 0 1 .11-.86.12.12 0 0 0 0-.1.15.15 0 0 0-.09 0 4 4 0 0 0-4 4V9a1 1 0 0 1-1 1 .5.5 0 0 0 0 1h10a.5.5 0 0 0 0-1Z" fill="currentColor"/></g></svg></a></div></div>'
     }
@@ -262,8 +271,11 @@
         }
       },
       "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
       "subnav": {
-        "text": "Carpeta del gestor"
+        "text": "Gestor de expedientes"
       },
       "navigation": {
         "items": [
@@ -301,8 +313,11 @@
     "description": "Menu mobile que sólo se muestra en anchuras pequeñas y que permite insertar dentro cualquier contenido con Nunjuks caller",
     "data": {
       "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
       "subnav": {
-        "text": "Carpeta del gestor"
+        "text": "Gestor de expedientes"
       },
       "offcanvas": {
         "text": "Menú",
@@ -318,10 +333,13 @@
     "data": {
       "homepageUrl": "/",
       "mobileTitle": {
-        "text": "Carpeta del gestor"
+        "text": "Gestor de expedientes"
+      },
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
       },
       "subnav": {
-        "text": "Carpeta del gestor"
+        "text": "Gestor de expedientes"
       },
       "offcanvas": {
         "text": "Menú",
@@ -336,8 +354,11 @@
     "description": "Utilizar para mostrar el nombre de la app actual. Si no se proporcionan items en subnav, el texto será simple sin un dropdown.",
     "data": {
       "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
       "subnav": {
-        "text": "Carpeta del gestor"
+        "text": "Gestor de expedientes"
       }
     }
   },
@@ -346,12 +367,15 @@
     "description": "Un dropdown junto al logo que ha de usarse para mostrar el nombre de la app en la que estamos y para navegar a otra app diferente. Usamos los items proporcionados para la navegación.",
     "data": {
       "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
       "subnav": {
-        "text": "Carpeta del gestor",
+        "text": "Gestor de expedientes",
         "items": [
           {
             "href": "#",
-            "text": "Carpeta del gestor",
+            "text": "Gestor de expedientes",
             "active": true
           },
           {
@@ -375,6 +399,9 @@
     "description": "Un dropdown a la derecha que puede usarse para mostrar información adicional: login, acerca de... Se oculta por defecto en anchuras pequeñas si no se le añaden clases a dropdown.",
     "data": {
       "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
       "dropdown": {
         "text": "Marta Pérez",
         "items": [
@@ -395,6 +422,9 @@
     "description": "Se pueden usar los parámetros del dropdown para personalizarlo. En este ejemplo con html en el dropdown.",
     "data": {
       "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
       "dropdown": {
         "html": '<span class="block text-right">Marta Pérez <br>(Administración)</span>',
         "items": [
@@ -415,6 +445,9 @@
     "description": "El dropdown puede contener cualquier tipo de información.",
     "data": {
       "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
       "dropdown": {
         "text": "Marta Pérez",
         "contentHtml": '<div class="p-base"><dl><dt class="text-base">Marta Pérez</dt><dd class="text-sm text-neutral-dark">Departamento de Ciencia, Universidad y Sociedad del Conocimiento</dd></dl></div>',
@@ -427,12 +460,15 @@
     "description": "Logo, menu de navegación, dropdown en anchuras grandes y menu mobile en pequeñas.",
     "data": {
       "homepageUrl": "/",
+      "mobileTitle": {
+        "text": "Gestor de expedientes"
+      },
       "subnav": {
-        "text": "Carpeta del gestor",
+        "text": "Gestor de expedientes",
         "items": [
           {
             "href": "#",
-            "text": "Carpeta del gestor",
+            "text": "Gestor de expedientes",
             "active": true
           },
           {

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

@@ -20,7 +20,7 @@
               <a href="{{ params.homepageUrl | default('/') }}" class="flex flex-wrap mr-4 text-black focus:outline-none focus:shadow-outline-black">
                 {% if not params.noLogo %}
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 32" width="144" height="32" class="fill-current {% if params.expandedLogo %} hidden sm:block{% else %} hidden{% endif %}" aria-label="Gobierno de Aragón. Ir a la página de inicio" role="img"><defs><clipPath id="b-logo-expanded"><path fill="rgb(252, 228, 0)" d="M0 0h31.509v31.495H0z"/></clipPath><clipPath id="a-logo-expanded"><path d="M0 0h144v32H0z"/></clipPath></defs><g clip-path="url(#a-logo-expanded)"><path fill="rgb(252, 228, 0)" d="M0 .205h31.509V31.7H0z"/><g clip-path="url(#b-logo-expanded)" transform="translate(0 .205)"><g fill="#dd171b" fill-rule="evenodd"><path d="m31.509 6.048-7.568 1.515a14.545 14.545 0 0 1-7.905-1.025 15.04 15.04 0 0 0-5-1.817 12.536 12.536 0 0 0-3.535-.011l-5.051.9c-.8.156-1.639.3-2.453.434V.315A7.1 7.1 0 0 1 3.888.226a9.926 9.926 0 0 1 2.085.936 17.6 17.6 0 0 0 4.293 1.962 13.92 13.92 0 0 0 6.6-.034l4.728-.858 4.939-.892 4.97-1.024ZM6.602 24.229a14.592 14.592 0 0 1 9.555 1.014 12.178 12.178 0 0 0 8.307 1.5l7.044-1.271v5.706a8.247 8.247 0 0 1-3.008.256 6.4 6.4 0 0 1-1.594-.457l-3.657-1.917a12.217 12.217 0 0 0-7.092-.825L1.026 31.011 0 31.177v-5.706l1.26-.256 3.312-.613c.669-.123 1.371-.245 2.029-.379ZM-.003 15.077v-4.391l13.027-2.377a15.5 15.5 0 0 1 9.11 1.638 12.535 12.535 0 0 0 8.474.925l.9-.189v4.391l-2.874-1.639a12.286 12.286 0 0 0-6.835-1.014l-8.006 1.46c-.959.179-2.877.524-2.877.524l-7.292 1.349a5.152 5.152 0 0 1-3.627-.677ZM31.509 16.583v4.324L18.6 23.282a15.5 15.5 0 0 1-9.11-1.638 12.532 12.532 0 0 0-8.474-.925l-1.015.19v-4.324l2.988 1.572a12.291 12.291 0 0 0 6.835 1.014l8.006-1.46c.959-.178 2.877-.524 2.877-.524l7.292-1.349a5.142 5.142 0 0 1 3.51.745Z"/></g></g><path d="M38.2 28.807v-8.551h1.393c2.893 0 4.478 1.522 4.478 4.286 0 2.829-1.521 4.265-4.5 4.265Zm10.4-11.4v14.294h9.47v-2.893h-6.277v-3.257h6.214v-2.893h-6.214v-2.379h6.277v-2.871Zm21.751 0-5.206 14.294h3.385l1.542-4.35h4.371l1.521 4.35h3.45L74.1 17.407Zm1.885 2.956-1.328 4.223h2.679Zm42.341 4.03h-3.192v4.5a4.206 4.206 0 0 1-1.371.193 4.251 4.251 0 0 1-4.242-4.5 4.443 4.443 0 0 1 4.735-4.65 7.481 7.481 0 0 1 4.071 1.243v-3.257a11.674 11.674 0 0 0-4.349-.857c-4.628 0-7.841 3.107-7.841 7.564 0 4.393 3.149 7.372 7.841 7.372a12.977 12.977 0 0 0 4.349-.75Zm16.132.129a7.424 7.424 0 1 0-7.391 7.436 7.122 7.122 0 0 0 7.393-7.436Zm-7.456-4.458c-2.4 0-4.006 1.822-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.627-4.501-4.048-4.501Zm8.689-2.657v14.294h3.257v-9.108l5.762 9.108h3.021V17.407h-3.256v8.889l-5.532-8.889ZM46.922 7.33h-3.193v4.5a4.335 4.335 0 0 1-5.613-4.307 4.443 4.443 0 0 1 4.735-4.65 7.487 7.487 0 0 1 4.071 1.243V.859a11.674 11.674 0 0 0-4.35-.858c-4.628 0-7.841 3.107-7.841 7.565 0 4.393 3.15 7.371 7.841 7.371a12.99 12.99 0 0 0 4.35-.75Zm16.116.128a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.396-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM64.107.344v14.293h5.914c3.15 0 4.992-1.565 4.992-4.243a3.717 3.717 0 0 0-2.978-3.728 3.133 3.133 0 0 0 1.95-2.936c.021-2.272-1.521-3.386-4.606-3.386Zm4.757 5.336c1.393 0 1.95-.386 1.95-1.35 0-.921-.536-1.264-2.057-1.264h-1.393V5.68Zm.429 6.043c1.585 0 2.271-.493 2.271-1.651 0-1.2-.707-1.671-2.4-1.671h-1.8v3.322ZM78.879.344h-3.192v14.293h3.192Zm1.39 0v14.293h9.47v-2.893h-6.278V8.487h6.214V5.594h-6.214V3.216h6.278V.345Zm50.463 7.114a7.424 7.424 0 1 0-7.392 7.436 7.122 7.122 0 0 0 7.395-7.436Zm-7.456-4.457c-2.4 0-4.006 1.821-4.006 4.5s1.65 4.5 4.071 4.5c2.4 0 3.985-1.8 3.985-4.5s-1.626-4.5-4.047-4.5ZM97.917 24.585l-1.35-4.223-1.328 4.223ZM83.249 31.7v-5.872h.407c2.057 0 2.271.214 3.642 3.75a7.159 7.159 0 0 0 .3.729l.278.664a6.4 6.4 0 0 0 .343.729h4.641l1.543-4.35h4.371l1.521 4.35h3.45l-5.314-14.294h-3.749L90.46 28.997c-.3-.622-.642-1.371-1.04-2.291a3.042 3.042 0 0 0-1.907-2.014 3.416 3.416 0 0 0 2.614-3.429c0-2.571-1.693-3.857-5.1-3.857H79.97V31.7Zm0-8.572h1.414c1.371 0 2.057-.493 2.057-1.521s-.622-1.478-2.014-1.478h-1.457Zm11.156-8.492V8.764h.407c2.057 0 2.271.214 3.642 3.75a6.982 6.982 0 0 0 .3.729l.278.665a6.37 6.37 0 0 0 .342.729h6.432l.018-9.169 5.745 9.169h3.021V.344h-3.256l.014 8.769-5.542-8.769h-3.257v13.3a29.76 29.76 0 0 1-1.975-4 3.043 3.043 0 0 0-1.907-2.014 3.415 3.415 0 0 0 2.614-3.428c0-2.572-1.693-3.857-5.1-3.857h-5.054v14.293Zm0-8.572h1.412c1.371 0 2.056-.493 2.056-1.521s-.621-1.478-2.013-1.478h-1.457Zm-59.44 11.342V31.7h4.778c4.842 0 7.692-2.657 7.692-7.158 0-4.479-2.914-7.136-7.863-7.136Z" fill="#161615" fill-rule="evenodd"/></g></svg>
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" class="w-8 h-8 fill-current {%- if params.expandedLogo %} sm:hidden{% endif %}" ><title>Ir a la página de inicio</title><defs><clipPath id="b-logo-mini"><path fill="rgb(252, 228, 0)" d="M0 0h32v32.001H0z"/></clipPath><clipPath id="a-logo-mini"><path d="M0 0h32v32H0z"/></clipPath></defs><g clip-path="url(#a-logo-mini)"><path fill="rgb(252, 228, 0)" d="M0 .305h32v32.001H0z"/><g clip-path="url(#b-logo-mini)" transform="translate(0 .305)"><g fill="#dd171b" fill-rule="evenodd"><path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z"/></g></g></g></svg>
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" class="w-8 h-8 fill-current {%- if params.expandedLogo %} sm:hidden{% endif %}" aria-label="Gobierno de Aragón. Ir a la página de inicio" role="img"><defs><clipPath id="b-logo-mini"><path fill="rgb(252, 228, 0)" d="M0 0h32v32.001H0z"/></clipPath><clipPath id="a-logo-mini"><path d="M0 0h32v32H0z"/></clipPath></defs><g clip-path="url(#a-logo-mini)"><path fill="rgb(252, 228, 0)" d="M0 .305h32v32.001H0z"/><g clip-path="url(#b-logo-mini)" transform="translate(0 .305)"><g fill="#dd171b" fill-rule="evenodd"><path d="m31.997 6.145-7.686 1.539a14.764 14.764 0 0 1-8.028-1.042 15.267 15.267 0 0 0-5.073-1.846 12.725 12.725 0 0 0-3.59-.011l-5.13.918a94.41 94.41 0 0 1-2.491.442V.324a7.213 7.213 0 0 1 3.952-.09 10.087 10.087 0 0 1 2.118.951 17.859 17.859 0 0 0 4.36 1.993 14.13 14.13 0 0 0 6.7-.034l4.8-.872 5.016-.906 5.048-1.04ZM6.705 24.619a14.812 14.812 0 0 1 9.7 1.03 12.363 12.363 0 0 0 8.437 1.529l7.154-1.291v5.8a8.37 8.37 0 0 1-3.055.26 6.509 6.509 0 0 1-1.619-.464l-3.714-1.948a12.4 12.4 0 0 0-7.2-.838l-15.366 2.82L0 31.686v-5.8l1.28-.26 3.363-.623c.679-.125 1.393-.249 2.061-.385ZM-.003 15.32v-4.462l13.23-2.417a15.734 15.734 0 0 1 9.252 1.665 12.723 12.723 0 0 0 8.606.94l.914-.192v4.462L29.08 13.65a12.472 12.472 0 0 0-6.941-1.031l-8.131 1.483c-.974.182-2.921.532-2.921.532l-7.406 1.371a5.23 5.23 0 0 1-3.684-.685ZM31.997 16.851v4.393l-13.11 2.413a15.735 15.735 0 0 1-9.252-1.665 12.721 12.721 0 0 0-8.606-.94l-1.03.193v-4.394l3.035 1.6a12.476 12.476 0 0 0 6.941 1.03l8.13-1.483c.974-.182 2.922-.532 2.922-.532l7.406-1.371a5.219 5.219 0 0 1 3.564.756Z"/></g></g></g></svg>
                 {% endif %}
                 {{ params.customLogoHtml | safe if params.customLogoHtml }}
               </a>

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

@@ -278,23 +278,3 @@ params:
   type: nunjucks-block
   required: false
   description: Content inside the offcanvas. Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire header component in a `call` block.
-
-previewLayout: full-width
-accessibilityCriteria: |
-  Text and links in the Header must:
-  - have a text contrast ratio higher than 4.5:1 against the background colour to meet [WCAG AA](https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast)
-
-  Links in the Header must:
-  - accept focus
-  - be focusable with a keyboard
-  - be usable with a keyboard
-  - indicate when they have focus
-  - change in appearance when touched (in the touch-down state)
-  - change in appearance when hovered
-  - have visible text
-
-  Images in the Header must:
-  - be presentational when linked to from accompanying text (crown icon).
-
-  Landmarks and Roles in the Header should:
-  - have a role of `banner` at the root of the component (<header>) (https://www.w3.org/TR/wai-aria-1.1/#banner)

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

@@ -271,7 +271,7 @@
 
 {% set exampleOffcanvas %}
   <nav class="w-full p-2" aria-label="Menú móvil">
-    <h3 class="p-base text-base font-bold">Carpeta del gestor</h3>
+    <h3 class="p-base text-base font-bold">Gestor de expedientes</h3>
     {{ componentNav({
       "idPrefix": "nav-mobile-pages",
       "hasNav": false,
@@ -327,7 +327,7 @@
           "items": [
             {
               "href": "#",
-              "text": "Carpeta del gestor",
+              "text": "Gestor de expedientes",
               "active": true
             },
             {
@@ -549,8 +549,8 @@
 {% set customNavigationHtmlItainnovaHero %}
   <div class="py-xl lg:py-3xl text-white lg:text-center">
     <div class="lg:w-2/3 lg:mx-auto">
-      <h1 class="c-h3 lg:c-h1 lg:text-4xl lg:mb-sm">Centro tecnológico referencia en investigación e innovación tecnológica</h1>
-      <div class="c-paragraph-sm lg:c-paragraph-lg lg:mb-0">Damos soporte a las empresas a través de servicios, formación y aumentando su competitividad a través de la innovación.</div>
+      <h1 class="font-bold text-lg leading-tight lg:text-4xl mb-sm">Centro tecnológico referencia en investigación e innovación tecnológica</h1>
+      <div class="text-base lg:text-lg mb-0">Damos soporte a las empresas a través de servicios, formación y aumentando su competitividad a través de la innovación.</div>
     </div>
   </div>
 {% endset %}
@@ -598,13 +598,15 @@
 {% endset %}
 
 {% set buscador %}
-  {{ componentSearchbar({
-    "id": "searchbar-2",
-    "label": {
-      "text": "Buscar"
-    },
-    "placeholder": "Buscar en este sitio"
-  })  }}
+  <form role="search">
+    {{ componentSearchbar({
+      "id": "searchbar-2",
+      "label": {
+        "text": "Buscar"
+      },
+      "placeholder": "Buscar en este sitio"
+    })  }}
+  </form>
 {% endset %}
 
 {% set exampleComponent = "header-advanced" %}
@@ -919,9 +921,9 @@
       "headerMini": {
         "customNavigationHtml": '<div class="flex-1 text-right">' + logoUE | safe +'</div>'
       },
-      "super": {
+      "sub": {
         "customNavigationHtml": '<div class="hidden lg:grid grid-cols-2 lg:grid-cols-4 gap-xl h-full"><div class="col-span-2 lg:col-span-3"></div><div class="col-span-2 lg:col-span-1 flex items-center justify-end">'+ buscador | safe +'</div></div>',
-        "classes": "hidden lg:block relative -bottom-6 h-0"
+        "classes": "hidden lg:block relative -top-32 h-0"
       },
       "title": {
         "homepageUrl": "/",

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

@@ -336,23 +336,3 @@ params:
   type: nunjucks-block
   required: false
   description: Content inside the offcanvas. Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire header component in a `call` block.
-
-previewLayout: full-width
-accessibilityCriteria: |
-  Text and links in the Header must:
-  - have a text contrast ratio higher than 4.5:1 against the background colour to meet [WCAG AA](https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast)
-
-  Links in the Header must:
-  - accept focus
-  - be focusable with a keyboard
-  - be usable with a keyboard
-  - indicate when they have focus
-  - change in appearance when touched (in the touch-down state)
-  - change in appearance when hovered
-  - have visible text
-
-  Images in the Header must:
-  - be presentational when linked to from accompanying text (crown icon).
-
-  Landmarks and Roles in the Header should:
-  - have a role of `banner` at the root of the component (<header>) (https://www.w3.org/TR/wai-aria-1.1/#banner)