desy-html 8.8.0 → 8.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/docs/ds/_ds.example.layout-escritorio.njk +38 -34
  2. package/docs/ds/_ds.example.layout-movil.njk +13 -9
  3. package/docs/ds/_ds.example.layout-sidebar.njk +10 -6
  4. package/docs/ds/_ds.example.textos.njk +1 -1
  5. package/docs/ds/_ds.section.color.njk +33 -33
  6. package/docs/ds/_ds.section.textos.njk +1 -1
  7. package/docs/index.html +11 -0
  8. package/package.json +1 -1
  9. package/src/js/aria/MenuHorizontal.js +9 -4
  10. package/src/js/aria/MenuNavigation.js +333 -115
  11. package/src/js/aria/MenuVertical.js +8 -3
  12. package/src/js/aria/Nav.js +8 -3
  13. package/src/js/desy-html.js +0 -10
  14. package/src/js/index.js +0 -2
  15. package/src/templates/components/button/_examples.button.njk +5 -2
  16. package/src/templates/components/button-loader/_examples.button-loader.njk +5 -2
  17. package/src/templates/components/header/_template.header.header__offcanvas.njk +1 -1
  18. package/src/templates/components/menu-horizontal/_examples.menu-horizontal.njk +23 -0
  19. package/src/templates/components/menu-vertical/_examples.menu-vertical.njk +24 -0
  20. package/src/templates/components/nav/_examples.nav.njk +24 -0
  21. package/src/js/aria/disclosureMenu.js +0 -152
package/docs/ds/_ds.example.layout-escritorio.njk CHANGED
@@ -1,35 +1,39 @@
1
- <div class="grid grid-cols-2 lg:grid-cols-4 gap-lg" role="img" aria-label="Imagen de retícula de página con una barras que ocupan diferentes porcentajes de la anchura total disponible en escritorio: hay una de 100%, dos de 50% una al lado de la otra y dos ejemplos de zona de contenido con zona de sidebar en el lateral y, por último, un ejemplo de 4 columnas contigual con misma anchura de un cuarto del espacio disponible.">
2
- <div class="col-span-2 lg:col-span-4">
3
- <span class="bg-primary-base text-white h-12 flex items-center justify-center">100%</span>
4
- </div>
5
- <div class="col-span-2 lg:col-span-2">
6
- <span class="bg-primary-base text-white h-12 flex items-center justify-center">50%</span>
7
- </div>
8
- <div class="col-span-2 lg:col-span-2">
9
- <span class="bg-primary-base text-white h-12 flex items-center justify-center">50%</span>
10
- </div>
11
- <div class="col-span-2 lg:col-span-3">
12
- <span class="bg-primary-base text-white h-12 flex items-center justify-center">75%</span>
13
- </div>
14
- <div class="col-span-2 lg:col-span-1">
15
- <span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
16
- </div>
17
- <div class="col-span-2 lg:col-span-1">
18
- <span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
19
- </div>
20
- <div class="col-span-2 lg:col-span-3">
21
- <span class="bg-primary-base text-white h-12 flex items-center justify-center">75%</span>
22
- </div>
23
- <div class="col-span-2 lg:col-span-1">
24
- <span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
25
- </div>
26
- <div class="col-span-2 lg:col-span-1">
27
- <span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
28
- </div>
29
- <div class="col-span-2 lg:col-span-1">
30
- <span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
31
- </div>
32
- <div class="col-span-2 lg:col-span-1">
33
- <span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
34
- </div>
1
+ <div role="img" aria-label="Imagen de retícula de página con una barras que ocupan diferentes porcentajes de la anchura total disponible en escritorio: hay una de 100%, dos de 50% una al lado de la otra y dos ejemplos de zona de contenido con zona de sidebar en el lateral y, por último, un ejemplo de 4 columnas contigual con misma anchura de un cuarto del espacio disponible.">
2
+ <!-- copiar a a partir de aqui -->
3
+ <div class="grid grid-cols-2 lg:grid-cols-4 gap-lg">
4
+ <div class="col-span-2 lg:col-span-4">
5
+ <span class="bg-primary-base text-white h-12 flex items-center justify-center">100%</span>
6
+ </div>
7
+ <div class="col-span-2 lg:col-span-2">
8
+ <span class="bg-primary-base text-white h-12 flex items-center justify-center">50%</span>
9
+ </div>
10
+ <div class="col-span-2 lg:col-span-2">
11
+ <span class="bg-primary-base text-white h-12 flex items-center justify-center">50%</span>
12
+ </div>
13
+ <div class="col-span-2 lg:col-span-3">
14
+ <span class="bg-primary-base text-white h-12 flex items-center justify-center">75%</span>
15
+ </div>
16
+ <div class="col-span-2 lg:col-span-1">
17
+ <span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
18
+ </div>
19
+ <div class="col-span-2 lg:col-span-1">
20
+ <span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
21
+ </div>
22
+ <div class="col-span-2 lg:col-span-3">
23
+ <span class="bg-primary-base text-white h-12 flex items-center justify-center">75%</span>
24
+ </div>
25
+ <div class="col-span-2 lg:col-span-1">
26
+ <span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
27
+ </div>
28
+ <div class="col-span-2 lg:col-span-1">
29
+ <span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
30
+ </div>
31
+ <div class="col-span-2 lg:col-span-1">
32
+ <span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
33
+ </div>
34
+ <div class="col-span-2 lg:col-span-1">
35
+ <span class="bg-primary-base text-white h-12 flex items-center justify-center">25%</span>
36
+ </div>
37
+ </div>
38
+ <!-- copiar hasta aqui -->
35
39
  </div>
package/docs/ds/_ds.example.layout-movil.njk CHANGED
@@ -1,11 +1,15 @@
1
- <div class="grid grid-cols-2 gap-lg col-span-1" role="img" aria-label="Imagen de retícula y 3 columnas, una que ocupa 100% de la anchura disponible, y otras dos que ocupan la mitad una al lado de la otra">
2
- <div class="col-span-2">
3
- <span class="bg-primary-base text-white h-12 flex items-center justify-center">100%</span>
4
- </div>
5
- <div class="col-span-1">
6
- <span class="bg-primary-base text-white h-12 flex items-center justify-center">50%</span>
7
- </div>
8
- <div class="col-span-1">
9
- <span class="bg-primary-base text-white h-12 flex items-center justify-center">50%</span>
1
+ <div role="img" aria-label="Imagen de retícula y 3 columnas, una que ocupa 100% de la anchura disponible, y otras dos que ocupan la mitad una al lado de la otra">
2
+ <!-- copiar a a partir de aqui -->
3
+ <div class="grid grid-cols-2 gap-lg col-span-1">
4
+ <div class="col-span-2">
5
+ <span class="bg-primary-base text-white h-12 flex items-center justify-center">100%</span>
6
+ </div>
7
+ <div class="col-span-1">
8
+ <span class="bg-primary-base text-white h-12 flex items-center justify-center">50%</span>
9
+ </div>
10
+ <div class="col-span-1">
11
+ <span class="bg-primary-base text-white h-12 flex items-center justify-center">50%</span>
12
+ </div>
10
13
  </div>
14
+ <!-- copiar hasta aqui -->
11
15
  </div>
package/docs/ds/_ds.example.layout-sidebar.njk CHANGED
@@ -1,8 +1,12 @@
1
- <div class="grid grid-cols-2 lg:grid-cols-4 gap-lg" role="img" aria-label="Imagen de retícula de página con una barras que ocupan diferentes porcentajes de la anchura total disponible">
2
- <div class="col-span-2 lg:col-span-3">
3
- Zona de contenido (75% en escritorio, 100% en móvil)
4
- </div>
5
- <div class="col-span-2 lg:col-span-1">
6
- Barra lateral (25% en escritorio, 100% en móvil)
1
+ <div role="img" aria-label="Imagen de retícula de página con una barras que ocupan diferentes porcentajes de la anchura total disponible">
2
+ <!-- copiar a a partir de aqui -->
3
+ <div class="grid grid-cols-2 lg:grid-cols-4 gap-lg">
4
+ <div class="col-span-2 lg:col-span-3">
5
+ Zona de contenido (75% en escritorio, 100% en móvil)
6
+ </div>
7
+ <div class="col-span-2 lg:col-span-1">
8
+ Barra lateral (25% en escritorio, 100% en móvil)
9
+ </div>
7
10
  </div>
11
+ <!-- copiar hasta aqui -->
8
12
  </div>
package/docs/ds/_ds.example.textos.njk CHANGED
@@ -4,7 +4,7 @@
4
4
  <h3 class="c-h3">Título 3</h3>
5
5
  <h4 class="c-h4">Título 4</h4>
6
6
  <p>Esto es un <a href="#" class="c-link">link</a> en un texto</p>
7
- <p>Esto es un <a href="#" class="c-link" title="Se abre en ventana nueva" target="_blank">enlace en ventana nueva<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path d="M23.25,0h-8a.74.74,0,0,0-.69.47.74.74,0,0,0,.16.81L18,4.51l-9.45,9.3a1,1,0,0,0,0,1.41,1,1,0,0,0,.71.3,1,1,0,0,0,.7-.28l9.48-9.33,3.29,3.24a.74.74,0,0,0,.53.22.72.72,0,0,0,.29-.06A.74.74,0,0,0,24,8.62V.75A.76.76,0,0,0,23.25,0Z" fill="currentColor"></path><path d="M18.5,10.62a1,1,0,0,0-1,1V22H2V6.5H12.37a1,1,0,0,0,0-2H1.87A1.87,1.87,0,0,0,0,6.37V22.12A1.88,1.88,0,0,0,1.87,24H17.62a1.88,1.88,0,0,0,1.88-1.88V11.62A1,1,0,0,0,18.5,10.62Z" fill="currentColor"></path></g></svg></a> en un texto.</p>
7
+ <p>Esto es un <a href="#" class="c-link" title="Se abre en ventana nueva" target="_blank">enlace en ventana nueva<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="0.8em" width="0.8em" class="inline-block ml-sm no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path d="M23.25,0h-8a.74.74,0,0,0-.69.47.74.74,0,0,0,.16.81L18,4.51l-9.45,9.3a1,1,0,0,0,0,1.41,1,1,0,0,0,.71.3,1,1,0,0,0,.7-.28l9.48-9.33,3.29,3.24a.74.74,0,0,0,.53.22.72.72,0,0,0,.29-.06A.74.74,0,0,0,24,8.62V.75A.76.76,0,0,0,23.25,0Z" fill="currentColor"></path><path d="M22.286057142857143 0H23.142857142857142c0.4733142857142857 0 0.8571428571428571 0.3837565714285714 0.8571428571428571 0.8571428571428571v0.8559548571428571l0 0.0023708571428571424V9.428571428571429c0 0.34668 -0.20879999999999999 0.6592285714285714 -0.5291999999999999 0.7918971428571429 -0.3202285714285714 0.1326685714285714 -0.6889714285714285 0.05933142857142857 -0.9341142857142858 -0.18581142857142857l-3.0733714285714284 -3.073525714285714 -16.536839999999998 16.536754285714284c-0.66948 0.6694285714285714 -1.7549022857142855 0.6694285714285714 -2.424372 0 -0.6694698857142857 -0.6694285714285714 -0.6694698857142857 -1.7549142857142856 0 -2.424342857142857L17.03886857142857 4.536771428571429 13.965342857142856 1.4632337142857141c-0.2451428571428571 -0.24514114285714284 -0.31848 -0.6138137142857142 -0.18581142857142857 -0.9341057142857143C13.912199999999999 0.208836 14.22474857142857 0 14.571428571428571 0h7.713942857142856l0.0006857142857142857 0Z" fill="currentColor"></path></g></svg></a> en un texto.</p>
8
8
  <p>Esto es un <a href="#" class="c-link c-link--alert">link</a> en una notificación de error</p>
9
9
  <p class="c-paragraph-lg">Párrafo destacados</p>
10
10
  <p class="c-paragraph-base">Párrafo por defecto</p>
package/docs/ds/_ds.section.color.njk CHANGED
@@ -14,9 +14,9 @@
14
14
  <p class="font-semibold text-center self-center">Interacción</p>
15
15
  </div>
16
16
  </div>
17
- <div class="flex inset-0 bg-primary-light text-black lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">primary-light</p><p>#d6eaf0</p></div></div>
18
- <div class="flex inset-0 bg-primary-base text-white"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">primary-base</p><p>#00607a</p></div></div>
19
- <div class="flex inset-0 bg-primary-dark font-semibold text-white"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">primary-dark</p><p>#00475C</p></div></div>
17
+ <div class="flex inset-0 bg-primary-light text-black lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">primary-light</dt><dd>#d6eaf0</dd></dl></div>
18
+ <div class="flex inset-0 bg-primary-base text-white"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">primary-base</dt><dd>#00607a</dd></dl></div>
19
+ <div class="flex inset-0 bg-primary-dark font-semibold text-white"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">primary-dark</dt><dd>#00475C</dd></dl></div>
20
20
 
21
21
  {# 2 #}
22
22
  <div class="self-center flex items-center p-base border border-neutral-base rounded lg:row-span-4 h-full">
@@ -25,21 +25,21 @@
25
25
  </div>
26
26
  </div>
27
27
 
28
- <div class="flex inset-0 bg-warning-light text-black lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">warning-light</p><p>#fef6b2</p></div></div>
29
- <div class="flex inset-0 bg-warning-base text-black"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">warning-base</p><p>#fdcb33</p></div></div>
30
- <div class="flex inset-0 bg-warning-dark font-semibold text-black"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">warning-dark</p><p>#b88e12</p></div></div>
28
+ <div class="flex inset-0 bg-warning-light text-black lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">warning-light</dt><dd>#fef6b2</dd></dl></div>
29
+ <div class="flex inset-0 bg-warning-base text-black"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">warning-base</dt><dd>#fdcb33</dd></dl></div>
30
+ <div class="flex inset-0 bg-warning-dark font-semibold text-black"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">warning-dark</dt><dd>#b88e12</dd></dl></div>
31
31
 
32
- <div class="flex inset-0 bg-success-light text-black lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">success-light</p><p>#dcf8e2</p></div></div>
33
- <div class="flex inset-0 bg-success-base text-black"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">success-base</p><p>#24d14c</p></div></div>
34
- <div class="flex inset-0 bg-success-dark font-semibold text-black"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">success-dark</p><p>#1aa23a</p></div></div>
32
+ <div class="flex inset-0 bg-success-light text-black lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">success-light</dt><dd>#dcf8e2</dd></dl></div>
33
+ <div class="flex inset-0 bg-success-base text-black"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">success-base</dt><dd>#24d14c</dd></dl></div>
34
+ <div class="flex inset-0 bg-success-dark font-semibold text-black"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">success-dark</dt><dd>#1aa23a</dd></dl></div>
35
35
 
36
- <div class="flex inset-0 bg-info-light text-black lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">info-light</p><p>#feebcc</p></div></div>
37
- <div class="flex inset-0 bg-info-base text-black"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">info-base</p><p>#fa9902</p></div></div>
38
- <div class="flex inset-0 bg-info-dark font-semibold text-black"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">info-dark</p><p>#c97a00</p></div></div>
36
+ <div class="flex inset-0 bg-info-light text-black lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">info-light</dt><dd>#feebcc</dd></dl></div>
37
+ <div class="flex inset-0 bg-info-base text-black"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">info-base</dt><dd>#fa9902</dd></dl></div>
38
+ <div class="flex inset-0 bg-info-dark font-semibold text-black"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">info-dark</dt><dd>#c97a00</dd></dl></div>
39
39
 
40
- <div class="flex inset-0 bg-alert-light text-black lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">alert-light</p><p>#fbd3ce</p></div></div>
41
- <div class="flex inset-0 bg-alert-base text-white"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">alert-base</p><p>#d22333</p></div></div>
42
- <div class="flex inset-0 bg-alert-dark font-semibold text-white"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">alert-dark</p><p>#a40014</p></div></div>
40
+ <div class="flex inset-0 bg-alert-light text-black lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">alert-light</dt><dd>#fbd3ce</dd></dl></div>
41
+ <div class="flex inset-0 bg-alert-base text-white"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">alert-base</dt><dd>#d22333</dd></dl></div>
42
+ <div class="flex inset-0 bg-alert-dark font-semibold text-white"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">alert-dark</dt><dd>#a40014</dd></dl></div>
43
43
 
44
44
  {# 3 #}
45
45
  <div class="self-center flex items-center p-base border border-neutral-base rounded h-full">
@@ -47,9 +47,9 @@
47
47
  <p class="font-semibold text-center self-center">Fondo</p>
48
48
  </div>
49
49
  </div>
50
- <div class="flex inset-0 bg-white stroke-black text-black lg:p-lg border border-neutral-base"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">white</p><p>#ffffff</p></div></div>
51
- <div class="flex inset-0 bg-neutral-lighter text-black lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">neutral-lighter</p><p>#f6f6f5</p></div></div>
52
- <div class="flex inset-0 bg-neutral-light text-black"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">neutral-light</p><p>#ededec</p></div></div>
50
+ <div class="flex inset-0 bg-white stroke-black text-black lg:p-lg border border-neutral-base"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">white</dt><dd>#ffffff</dd></dl></div>
51
+ <div class="flex inset-0 bg-neutral-lighter text-black lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">neutral-lighter</dt><dd>#f6f6f5</dd></dl></div>
52
+ <div class="flex inset-0 bg-neutral-light text-black"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">neutral-light</dt><dd>#ededec</dd></dl></div>
53
53
 
54
54
  {# 4 #}
55
55
  <div class="self-center flex items-center p-base border border-neutral-base rounded h-full">
@@ -57,9 +57,9 @@
57
57
  <p class="font-semibold text-center self-center">Contenido</p>
58
58
  </div>
59
59
  </div>
60
- <div class="flex inset-0 bg-neutral-base text-black lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">neutral-base</p><p>#92949b</p></div></div>
61
- <div class="flex inset-0 bg-neutral-dark font-semibold text-white lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">neutral-dark</p><p>#5e616b</p></div></div>
62
- <div class="flex inset-0 bg-black font-semibold text-white"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">black</p><p>#1f2331</p></div></div>
60
+ <div class="flex inset-0 bg-neutral-base text-black lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">neutral-base</dt><dd>#92949b</dd></dl></div>
61
+ <div class="flex inset-0 bg-neutral-dark font-semibold text-white lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">neutral-dark</dt><dd>#5e616b</dd></dl></div>
62
+ <div class="flex inset-0 bg-black font-semibold text-white"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">black</dt><dd>#1f2331</dd></dl></div>
63
63
 
64
64
  {# 5 #}
65
65
  <div class="self-center flex items-center p-base border border-neutral-base rounded h-full">
@@ -67,8 +67,8 @@
67
67
  <p class="font-semibold text-center self-center">Cabecera</p>
68
68
  </div>
69
69
  </div>
70
- <div class="flex inset-0 bg-heading-base font-semibold text-white lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">heading-base</p><p>#2d495f</p></div></div>
71
- <div class="flex inset-0 bg-heading-dark font-semibold text-white"><div class="self-center text-center w-full text-sm lg:text-base"><p class="mb-sm">heading-dark</p><p>#21384b</p></div></div>
70
+ <div class="flex inset-0 bg-heading-base font-semibold text-white lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">heading-base</dt><dd>#2d495f</dd></dl></div>
71
+ <div class="flex inset-0 bg-heading-dark font-semibold text-white"><dl class="self-center text-center w-full text-sm lg:text-base"><dt class="mb-sm">heading-dark</dt><dd>#21384b</dd></dl></div>
72
72
  <div></div>
73
73
 
74
74
  {# 6 #}
@@ -77,11 +77,11 @@
77
77
  <p class="font-semibold text-center self-center ">Para gráficas</p>
78
78
  </div>
79
79
  </div>
80
- <div class="flex inset-0 bg-[#4d1f2e] font-semibold text-white p-sm lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p>#819eae</p></div></div>
81
- <div class="flex inset-0 bg-[#aa3c2b] font-semibold text-white p-sm lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p>#aa3c2b</p></div></div>
82
- <div class="flex inset-0 bg-[#819eae] font-semibold text-black p-sm lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p>#819eae</p></div></div>
83
- <div class="flex inset-0 bg-[#00607a] font-semibold text-white p-sm lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p>#00607a</p></div></div>
84
- <div class="flex inset-0 bg-[#013c53] font-semibold text-white p-sm lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p>#013c53</p></div></div>
80
+ <div class="flex inset-0 bg-[#4d1f2e] font-semibold text-white p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>A</dt><dd>#819eae</dd></dl></div>
81
+ <div class="flex inset-0 bg-[#aa3c2b] font-semibold text-white p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>B</dt><dd>#aa3c2b</dd></dl></div>
82
+ <div class="flex inset-0 bg-[#819eae] font-semibold text-black p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>C</dt><dd>#819eae</dd></dl></div>
83
+ <div class="flex inset-0 bg-[#00607a] font-semibold text-white p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>D</dt><dd>#00607a</dd></dl></div>
84
+ <div class="flex inset-0 bg-[#013c53] font-semibold text-white p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>E</dt><dd>#013c53</dd></dl></div>
85
85
  <div></div>
86
86
 
87
87
  {# 6 #}
@@ -90,11 +90,11 @@
90
90
  <p class="font-semibold text-center self-center ">Para gráficas (ampliación)</p>
91
91
  </div>
92
92
  </div>
93
- <div class="flex inset-0 bg-[#ffdc00] font-semibold text-black p-sm lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p>#ffdc00</p></div></div>
94
- <div class="flex inset-0 bg-[#ffaa00] font-semibold text-black p-sm lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p>#ffaa00</p></div></div>
95
- <div class="flex inset-0 bg-[#ed020d] font-semibold text-white p-sm lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p>#ed020d</p></div></div>
96
- <div class="flex inset-0 bg-[#646464] font-semibold text-white p-sm lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p>#646464</p></div></div>
97
- <div class="flex inset-0 bg-[#e1e1e1] text-black p-sm lg:p-lg"><div class="self-center text-center w-full text-sm lg:text-base"><p>#e1e1e1</p></div></div>
93
+ <div class="flex inset-0 bg-[#ffdc00] font-semibold text-black p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>F</dt><dd>#ffdc00</dd></dl></div>
94
+ <div class="flex inset-0 bg-[#ffaa00] font-semibold text-black p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>G</dt><dd>#ffaa00</dd></dl></div>
95
+ <div class="flex inset-0 bg-[#ed020d] font-semibold text-white p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>H</dt><dd>#ed020d</dd></dl></div>
96
+ <div class="flex inset-0 bg-[#646464] font-semibold text-white p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>I</dt><dd>#646464</dd></dl></div>
97
+ <div class="flex inset-0 bg-[#e1e1e1] text-black p-sm lg:p-lg"><dl class="self-center text-center w-full text-sm lg:text-base"><dt>color <span class="sr-only">para gráficas </span>J</dt><dd>#e1e1e1</dd></dl></div>
98
98
  <div></div>
99
99
  </div>
100
100
 
package/docs/ds/_ds.section.textos.njk CHANGED
@@ -123,7 +123,7 @@
123
123
  <li>
124
124
  <dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base mb-lg">
125
125
  <dt class="col-span-2 lg:col-span-2">
126
- <p>Esto es un <a href="#" class="c-link" title="Se abre en ventana nueva" target="_blank">enlace en ventana nueva<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path d="M23.25,0h-8a.74.74,0,0,0-.69.47.74.74,0,0,0,.16.81L18,4.51l-9.45,9.3a1,1,0,0,0,0,1.41,1,1,0,0,0,.71.3,1,1,0,0,0,.7-.28l9.48-9.33,3.29,3.24a.74.74,0,0,0,.53.22.72.72,0,0,0,.29-.06A.74.74,0,0,0,24,8.62V.75A.76.76,0,0,0,23.25,0Z" fill="currentColor"></path><path d="M18.5,10.62a1,1,0,0,0-1,1V22H2V6.5H12.37a1,1,0,0,0,0-2H1.87A1.87,1.87,0,0,0,0,6.37V22.12A1.88,1.88,0,0,0,1.87,24H17.62a1.88,1.88,0,0,0,1.88-1.88V11.62A1,1,0,0,0,18.5,10.62Z" fill="currentColor"></path></g></svg></a> en un texto.</p>
126
+ <p>Esto es un <a href="#" class="c-link" title="Se abre en ventana nueva" target="_blank">enlace en ventana nueva<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="0.8em" width="0.8em" class="inline-block ml-1 no-underline align-baseline" aria-hidden="true" focusable="false" role="img"><g><path d="M23.25,0h-8a.74.74,0,0,0-.69.47.74.74,0,0,0,.16.81L18,4.51l-9.45,9.3a1,1,0,0,0,0,1.41,1,1,0,0,0,.71.3,1,1,0,0,0,.7-.28l9.48-9.33,3.29,3.24a.74.74,0,0,0,.53.22.72.72,0,0,0,.29-.06A.74.74,0,0,0,24,8.62V.75A.76.76,0,0,0,23.25,0Z" fill="currentColor"></path><path d="M22.286057142857143 0H23.142857142857142c0.4733142857142857 0 0.8571428571428571 0.3837565714285714 0.8571428571428571 0.8571428571428571v0.8559548571428571l0 0.0023708571428571424V9.428571428571429c0 0.34668 -0.20879999999999999 0.6592285714285714 -0.5291999999999999 0.7918971428571429 -0.3202285714285714 0.1326685714285714 -0.6889714285714285 0.05933142857142857 -0.9341142857142858 -0.18581142857142857l-3.0733714285714284 -3.073525714285714 -16.536839999999998 16.536754285714284c-0.66948 0.6694285714285714 -1.7549022857142855 0.6694285714285714 -2.424372 0 -0.6694698857142857 -0.6694285714285714 -0.6694698857142857 -1.7549142857142856 0 -2.424342857142857L17.03886857142857 4.536771428571429 13.965342857142856 1.4632337142857141c-0.2451428571428571 -0.24514114285714284 -0.31848 -0.6138137142857142 -0.18581142857142857 -0.9341057142857143C13.912199999999999 0.208836 14.22474857142857 0 14.571428571428571 0h7.713942857142856l0.0006857142857142857 0Z" fill="currentColor"></path></g></svg></a> en un texto.</p>
127
127
  </dt>
128
128
  <dd class="col-span-2 lg:col-span-2 mb-lg">
129
129
  <p class="text-neutral-dark text-sm"><code>.c-link</code> - <code>normal</code> - <code>underline</code> - <code>primary-base</code> - hover: <code>primary-dark</code>. Con un <code>title</code>, <code>svg</code> y <code>target</code></p>
package/docs/index.html CHANGED
@@ -38,6 +38,17 @@
38
38
 
39
39
  <h2>Changelog (English)</h2>
40
40
  <p>What's new in the latest version of desy-html</p>
41
+ <h3>v.8.9.0</h3>
42
+ <ul class="text-sm">
43
+ <li>Added global function to select items and refactor Menu navigation to fix keyboard navigation.</li>
44
+ <li>More improvements of height in offcanvas in Header and Header advanced.</li>
45
+ <li>Improvements in Docs.</li>
46
+ </ul>
47
+ <h3>v.8.8.1</h3>
48
+ <ul class="text-sm">
49
+ <li>Fixed a bug in active items in Nav, Menu horizontal and Menu vertical.</li>
50
+ <li>Improved height in offcanvas in Header and Header advanced.</li>
51
+ </ul>
41
52
  <h3>v.8.8.0</h3>
42
53
  <ul class="text-sm">
43
54
  <li>Added global function to select items in Listbox.</li>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "desy-html",
3
- "version": "8.8.0",
3
+ "version": "8.9.0",
4
4
  "description": "desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.",
5
5
  "author": {
6
6
  "name": "Desy (SDA Servicios Digitales de Aragón)",
package/src/js/aria/MenuHorizontal.js CHANGED
@@ -26,15 +26,20 @@ export function MenuHorizontal(aria) {
26
26
  };
27
27
 
28
28
  aria.MenuHorizontal.prototype.wrapActiveElement = function (elementActive) {
29
- elementActive.setAttribute('aria-current', 'page');
30
- elementActive.classList.add('c-menu-horizontal__active');
31
- elementActive.innerHTML = `<strong class="font-bold">${elementActive.textContent}</strong>`;
29
+ if (!elementActive.getAttribute('aria-current')) {
30
+ elementActive.setAttribute('aria-current', 'page');
31
+ elementActive.classList.add('c-menu-horizontal__active');
32
+ elementActive.innerHTML = `<strong class="font-bold">${elementActive.innerHTML}</strong>`;
33
+ }
32
34
  };
33
35
 
34
36
  aria.MenuHorizontal.prototype.deactivateElement = function (elementDeactivated) {
35
37
  elementDeactivated.removeAttribute('aria-current');
36
38
  elementDeactivated.classList.remove('c-menu-horizontal__active');
37
- elementDeactivated.innerHTML = elementDeactivated.textContent;
39
+ if(elementDeactivated.querySelector('strong')) {
40
+ const replaceStrong = elementDeactivated.innerHTML.replace('<strong class="font-bold">', '').replace('<strong/>', '');
41
+ elementDeactivated.innerHTML = `${replaceStrong}`;
42
+ }
38
43
  };
39
44
 
40
45
  window.activateItemMenuHorizontal = function (menuId, activeItemId) {
package/src/js/aria/MenuNavigation.js CHANGED
@@ -1,115 +1,333 @@
1
- export function MenuNavigation(aria) {
2
- (function () {
3
- aria.MenuNavigation = function (domNode) {
4
- this.domNode = domNode;
5
- };
6
-
7
- aria.MenuNavigation.prototype.init = function () {
8
- const menuItems = this.domNode.querySelectorAll('a');
9
- const getItemsFromMenu = Array.from(menuItems);
10
-
11
- if(getItemsFromMenu.some(item => item.classList.contains('c-menu-navigation__button--has-selection'))) {
12
- getItemsFromMenu.forEach((button) => {
13
- if(button.classList.contains('c-menu-navigation__button--has-selection')) {
14
- this.activateElement(button.id);
15
- }
16
- })
17
- }
18
-
19
- if(this.domNode.querySelectorAll('.c-menu-navigation__sub--list')) {
20
- const subItems = this.domNode.querySelectorAll('.c-menu-navigation__sub--list li a');
21
- [...subItems].forEach((element) => {
22
- if(element.getAttribute("aria-current") === "true"){
23
- const getElement = element.parentElement.parentElement.parentElement.parentElement.querySelector('button');
24
- getElement.classList.add('c-menu-navigation__button--primary', 'c-menu-navigation__button--has-selection');
25
- getElement.firstChild.innerHTML = `<strong class="font-bold">${getElement.textContent}</strong>`;
26
- element.innerHTML = `<strong class="font-bold">${element.textContent}</strong>`;
27
- }
28
- })
29
- }
30
- };
31
-
32
- aria.MenuNavigation.prototype.activateElement = function (elementActive) {
33
- const getAllLiElements = this.domNode.querySelectorAll('li');
34
- [...getAllLiElements].forEach((element) => {
35
- const getElement = element.querySelector('a');
36
- if (getElement.id === elementActive) {
37
- this.wrapActiveElement(getElement);
38
- } else {
39
- this.deactivateElement(getElement);
40
- }
41
- });
42
- };
43
-
44
- aria.MenuNavigation.prototype.activateSubElement = function (menuId, elementActive) {
45
- const getAllLinks = this.domNode.querySelectorAll(`#${menuId} ul li li a`);
46
- [...getAllLinks].forEach((link) => {
47
- if(link.id === elementActive) {
48
- link.setAttribute('aria-current', 'true');
49
- link.innerHTML = `<strong class="font-bold">${link.textContent}</strong>`;
50
- } else {
51
- const getElementParent = link.parentElement.parentElement.parentElement.parentElement.querySelector('button');
52
- getElementParent.classList.remove('c-menu-navigation__button--primary', 'c-menu-navigation__button--has-selection');
53
- getElementParent.firstChild.innerHTML = `${getElementParent.textContent}`;
54
- link.setAttribute('aria-current', 'false');
55
- link.innerHTML = `${link.textContent}`;
56
- }
57
- });
58
- [...getAllLinks].forEach((link) => {
59
- if(link.getAttribute("aria-current") === "true"){
60
- const getElementParent = link.parentElement.parentElement.parentElement.parentElement.querySelector('button');
61
- getElementParent.classList.add('c-menu-navigation__button--primary', 'c-menu-navigation__button--has-selection');
62
- getElementParent.firstChild.innerHTML = `<strong class="font-bold">${getElementParent.textContent}</strong>`;
63
- }
64
- });
65
- };
66
-
67
- aria.MenuNavigation.prototype.wrapActiveElement = function (elementActive) {
68
- elementActive.setAttribute('aria-current', 'true');
69
- elementActive.classList.add('c-menu-navigation__button--primary', 'c-menu-navigation__button--has-selection');
70
- elementActive.innerHTML = `<strong class="font-bold">${elementActive.textContent}</strong>`;
71
- };
72
-
73
- aria.MenuNavigation.prototype.deactivateElement = function (elementDeactivated) {
74
- elementDeactivated.setAttribute('aria-current', 'false');
75
- elementDeactivated.classList.remove('c-menu-navigation__button--primary', 'c-menu-navigation__button--has-selection');
76
- elementDeactivated.innerHTML = elementDeactivated.textContent;
77
- };
78
-
79
- window.activateItemMenuNavigation = function (menuId, activeItemId) {
80
- const menu = document.getElementById(menuId);
81
- if (menu) {
82
- const activeItem = document.querySelector(`#${menuId} #${activeItemId}`);
83
- if (activeItem) {
84
- const menuInstance = new aria.MenuNavigation(menu);
85
- menuInstance.activateElement(activeItemId);
86
- return [menu, activeItem];
87
- } else {
88
- console.log('There is no element with this id in the menu.');
89
- return null;
90
- }
91
- } else {
92
- console.log('There is no menu with this id in the document.');
93
- return null;
94
- }
95
- };
96
-
97
- window.activateSubItemMenuNavigation = function (menuId, activeSubItemId) {
98
- const menu = document.getElementById(menuId);
99
- if (menu) {
100
- const activeSubItem = document.querySelector(`#${menuId} #${activeSubItemId}`);
101
- if (activeSubItem) {
102
- const menuInstance = new aria.MenuNavigation(menu);
103
- menuInstance.activateSubElement(menuId, activeSubItemId);
104
- return [menu, activeSubItem];
105
- } else {
106
- console.log('There is no element with this id in the menu.');
107
- return null;
108
- }
109
- } else {
110
- console.log('There is no menu with this id in the document.');
111
- return null;
112
- }
113
- };
114
- }());
115
- }
1
+ export function MenuNavigation(aria) {
2
+ /*
3
+ * This content is licensed according to the W3C Software License at
4
+ * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
5
+ *
6
+ * Supplemental JS for the disclosure menu keyboard behavior
7
+ */
8
+
9
+ aria.MenuNavigation = function (domNode) {
10
+ this.rootNode = domNode;
11
+ this.controlledNodes = [];
12
+ this.openIndex = null;
13
+ this.useArrowKeys = true;
14
+ this.topLevelNodes = [...this.rootNode.querySelectorAll('a.c-menu-navigation__button, button[aria-expanded][aria-controls]')];
15
+
16
+ this.anchorChildren = [...this.rootNode.querySelectorAll('nav ul[aria-labelledby] li a')];
17
+ };
18
+
19
+ aria.MenuNavigation.prototype.init = function () {
20
+ const menuItems = this.rootNode.querySelectorAll('a');
21
+ const getItemsFromMenu = Array.from(menuItems);
22
+
23
+ if(getItemsFromMenu.some(item => item.classList.contains('c-menu-navigation__button--has-selection'))) {
24
+ getItemsFromMenu.forEach((button) => {
25
+ if(button.classList.contains('c-menu-navigation__button--has-selection')) {
26
+ this.activateElement(button.id);
27
+ }
28
+ })
29
+ }
30
+
31
+ if(this.rootNode.querySelectorAll('.c-menu-navigation__sub--list')) {
32
+ const subItems = this.rootNode.querySelectorAll('.c-menu-navigation__sub--list li a');
33
+ [...subItems].forEach((element) => {
34
+ if(element.getAttribute("aria-current") === "true"){
35
+ const getElement = element.parentElement.parentElement.parentElement.parentElement.querySelector('button');
36
+ getElement.classList.add('c-menu-navigation__button--primary', 'c-menu-navigation__button--has-selection');
37
+ getElement.firstChild.innerHTML = `<strong class="font-bold">${getElement.textContent}</strong>`;
38
+ element.innerHTML = `<strong class="font-bold">${element.textContent}</strong>`;
39
+ }
40
+ })
41
+ }
42
+
43
+ this.topLevelNodes.forEach((node) => {
44
+ // handle button + menu
45
+ if (
46
+ node.tagName.toLowerCase() === 'button' &&
47
+ node.hasAttribute('aria-controls')
48
+ ) {
49
+ const menu = node.parentNode.querySelector('ul');
50
+ if (menu) {
51
+ // save ref controlled menu
52
+ this.controlledNodes.push(menu);
53
+
54
+ // collapse menus
55
+ node.setAttribute('aria-expanded', 'false');
56
+ this.toggleMenu(menu, false);
57
+
58
+ // attach event listeners
59
+ menu.addEventListener('keydown', this.onMenuKeyDown.bind(this));
60
+ node.addEventListener('click', this.onButtonClick.bind(this));
61
+ node.addEventListener('keydown', this.onButtonKeyDown.bind(this));
62
+ }
63
+ }
64
+ // handle links
65
+ else {
66
+ this.controlledNodes.push(null);
67
+ node.addEventListener('keydown', this.onLinkKeyDown.bind(this));
68
+ }
69
+ });
70
+
71
+ this.rootNode.addEventListener('focusout', this.onBlur.bind(this));
72
+ this.anchorChildren.forEach((element) => {
73
+ element.addEventListener('click', this.onBlur.bind(this));
74
+ })
75
+ };
76
+
77
+ aria.MenuNavigation.prototype.activateElement = function (elementActive) {
78
+ const getAllLiElements = this.rootNode.querySelectorAll('li');
79
+ [...getAllLiElements].forEach((element) => {
80
+ const getElement = element.querySelector('a');
81
+ if (getElement.id === elementActive) {
82
+ this.wrapActiveElement(getElement);
83
+ } else {
84
+ this.deactivateElement(getElement);
85
+ }
86
+ });
87
+ };
88
+
89
+ aria.MenuNavigation.prototype.activateSubElement = function (menuId, elementActive) {
90
+ const getAllLinks = this.rootNode.querySelectorAll(`#${menuId} ul li li a`);
91
+ [...getAllLinks].forEach((link) => {
92
+ if(link.id === elementActive) {
93
+ link.setAttribute('aria-current', 'true');
94
+ link.innerHTML = `<strong class="font-bold">${link.textContent}</strong>`;
95
+ } else {
96
+ const getElementParent = link.parentElement.parentElement.parentElement.parentElement.querySelector('button');
97
+ getElementParent.classList.remove('c-menu-navigation__button--primary', 'c-menu-navigation__button--has-selection');
98
+ getElementParent.firstChild.innerHTML = `${getElementParent.textContent}`;
99
+ link.setAttribute('aria-current', 'false');
100
+ link.innerHTML = `${link.textContent}`;
101
+ }
102
+ });
103
+ [...getAllLinks].forEach((link) => {
104
+ if(link.getAttribute("aria-current") === "true"){
105
+ const getElementParent = link.parentElement.parentElement.parentElement.parentElement.querySelector('button');
106
+ getElementParent.classList.add('c-menu-navigation__button--primary', 'c-menu-navigation__button--has-selection');
107
+ getElementParent.firstChild.innerHTML = `<strong class="font-bold">${getElementParent.textContent}</strong>`;
108
+ }
109
+ });
110
+ };
111
+
112
+ aria.MenuNavigation.prototype.wrapActiveElement = function (elementActive) {
113
+ elementActive.setAttribute('aria-current', 'true');
114
+ elementActive.classList.add('c-menu-navigation__button--primary', 'c-menu-navigation__button--has-selection');
115
+ elementActive.innerHTML = `<strong class="font-bold">${elementActive.textContent}</strong>`;
116
+ };
117
+
118
+ aria.MenuNavigation.prototype.deactivateElement = function (elementDeactivated) {
119
+ elementDeactivated.setAttribute('aria-current', 'false');
120
+ elementDeactivated.classList.remove('c-menu-navigation__button--primary', 'c-menu-navigation__button--has-selection');
121
+ elementDeactivated.innerHTML = elementDeactivated.textContent;
122
+ };
123
+
124
+ window.activateItemMenuNavigation = function (menuId, activeItemId) {
125
+ const menu = document.getElementById(menuId);
126
+ if (menu) {
127
+ const activeItem = document.querySelector(`#${menuId} #${activeItemId}`);
128
+ if (activeItem) {
129
+ const menuInstance = new aria.MenuNavigation(menu);
130
+ menuInstance.activateElement(activeItemId);
131
+ return [menu, activeItem];
132
+ } else {
133
+ console.log('There is no element with this id in the menu.');
134
+ return null;
135
+ }
136
+ } else {
137
+ console.log('There is no menu with this id in the document.');
138
+ return null;
139
+ }
140
+ };
141
+
142
+ window.activateSubItemMenuNavigation = function (menuId, activeSubItemId) {
143
+ const menu = document.getElementById(menuId);
144
+ if (menu) {
145
+ const activeSubItem = document.querySelector(`#${menuId} #${activeSubItemId}`);
146
+ if (activeSubItem) {
147
+ const menuInstance = new aria.MenuNavigation(menu);
148
+ menuInstance.activateSubElement(menuId, activeSubItemId);
149
+ return [menu, activeSubItem];
150
+ } else {
151
+ console.log('There is no element with this id in the menu.');
152
+ return null;
153
+ }
154
+ } else {
155
+ console.log('There is no menu with this id in the document.');
156
+ return null;
157
+ }
158
+ };
159
+
160
+ aria.MenuNavigation.prototype.controlFocusByKey = function (keyboardEvent, nodeList, currentIndex) {
161
+ switch (keyboardEvent.key) {
162
+ case 'ArrowUp':
163
+ case 'ArrowLeft':
164
+ keyboardEvent.preventDefault();
165
+ if (currentIndex > -1) {
166
+ var prevIndex = Math.max(0, currentIndex - 1);
167
+ if(!nodeList[prevIndex].classList.contains('c-menu-navigation__button--disabled')) {
168
+ nodeList[prevIndex].focus();
169
+ }
170
+ }
171
+ break;
172
+ case 'ArrowDown':
173
+ case 'ArrowRight':
174
+ keyboardEvent.preventDefault();
175
+ if (currentIndex > -1) {
176
+ var nextIndex = Math.min(nodeList.length - 1, currentIndex + 1);
177
+ if(!nodeList[nextIndex].classList.contains('c-menu-navigation__button--disabled')) {
178
+ nodeList[nextIndex].focus();
179
+ }
180
+ }
181
+ break;
182
+ case 'Home':
183
+ keyboardEvent.preventDefault();
184
+ nodeList[0].focus();
185
+ break;
186
+ case 'End':
187
+ keyboardEvent.preventDefault();
188
+ nodeList[nodeList.length - 1].focus();
189
+ break;
190
+ }
191
+ };
192
+
193
+ // public function to close open menu
194
+ aria.MenuNavigation.prototype.onBlur = function (event) {
195
+ var menuContainsFocus = this.rootNode.contains(event.relatedTarget);
196
+ if (!menuContainsFocus && this.openIndex !== null) {
197
+ this.toggleExpand(this.openIndex, false);
198
+ }
199
+ };
200
+
201
+ aria.MenuNavigation.prototype.onButtonClick = function (event) {
202
+ var button = event.target;
203
+ var buttonIndex = this.topLevelNodes.indexOf(button);
204
+ var buttonExpanded = button.getAttribute('aria-expanded') === 'true';
205
+ this.toggleExpand(buttonIndex, !buttonExpanded);
206
+ };
207
+
208
+ aria.MenuNavigation.prototype.onButtonKeyDown = function (event) {
209
+ var targetButtonIndex = this.topLevelNodes.indexOf(document.activeElement);
210
+
211
+ // close on escape
212
+ if (event.key === 'Escape') {
213
+ this.toggleExpand(this.openIndex, false);
214
+ }
215
+
216
+ // move focus into the open menu if the current menu is open
217
+ else if (
218
+ this.useArrowKeys &&
219
+ this.openIndex === targetButtonIndex &&
220
+ event.key === 'ArrowDown'
221
+ ) {
222
+ event.preventDefault();
223
+ this.controlledNodes[this.openIndex].querySelector('a').focus();
224
+ }
225
+
226
+ // handle arrow key navigation between top-level buttons, if set
227
+ else if (this.useArrowKeys) {
228
+ this.controlFocusByKey(event, this.topLevelNodes, targetButtonIndex);
229
+ }
230
+ };
231
+
232
+ aria.MenuNavigation.prototype.onLinkKeyDown = function (event) {
233
+ var targetLinkIndex = this.topLevelNodes.indexOf(document.activeElement);
234
+
235
+ // handle arrow key navigation between top-level buttons, if set
236
+ if (this.useArrowKeys) {
237
+ this.controlFocusByKey(event, this.topLevelNodes, targetLinkIndex);
238
+ }
239
+ };
240
+
241
+ aria.MenuNavigation.prototype.onMenuKeyDown = function (event) {
242
+ if (this.openIndex === null) {
243
+ return;
244
+ }
245
+
246
+ var menuLinks = Array.prototype.slice.call(
247
+ this.controlledNodes[this.openIndex].querySelectorAll('a')
248
+ );
249
+ var currentIndex = menuLinks.indexOf(document.activeElement);
250
+
251
+ // close on escape
252
+ if (event.key === 'Escape') {
253
+ this.topLevelNodes[this.openIndex].focus();
254
+ this.toggleExpand(this.openIndex, false);
255
+ }
256
+
257
+ // handle arrow key navigation within menu links, if set
258
+ else if (this.useArrowKeys) {
259
+ this.controlFocusByKey(event, menuLinks, currentIndex);
260
+ }
261
+ };
262
+
263
+ aria.MenuNavigation.prototype.toggleExpand = function (index, expanded) {
264
+ // close open menu, if applicable
265
+ if (this.openIndex !== index) {
266
+ this.toggleExpand(this.openIndex, false);
267
+ }
268
+
269
+ // handle menu at called index
270
+ if (this.topLevelNodes[index]) {
271
+ this.openIndex = expanded ? index : null;
272
+ this.topLevelNodes[index].setAttribute('aria-expanded', expanded);
273
+ this.toggleMenu(this.controlledNodes[index], expanded);
274
+ }
275
+ };
276
+
277
+ aria.MenuNavigation.prototype.toggleMenu = function (domNode, show) {
278
+ if (domNode) {
279
+ domNode.style.display = show ? 'block' : 'none';
280
+ }
281
+ };
282
+
283
+ aria.MenuNavigation.prototype.updateKeyControls = function (useArrowKeys) {
284
+ this.useArrowKeys = useArrowKeys;
285
+ };
286
+
287
+ window.addEventListener(
288
+ 'load',
289
+ function () {
290
+ var menus = document.querySelectorAll('.disclosure-nav');
291
+ var disclosureMenus = [];
292
+
293
+ for (var i = 0; i < menus.length; i++) {
294
+ disclosureMenus[i] = new DisclosureNav(menus[i]);
295
+ }
296
+
297
+ // listen to arrow key checkbox
298
+ var arrowKeySwitch = document.getElementById('arrow-behavior-switch');
299
+ if (arrowKeySwitch) {
300
+ arrowKeySwitch.addEventListener('change', function () {
301
+ var checked = arrowKeySwitch.checked;
302
+ for (var i = 0; i < disclosureMenus.length; i++) {
303
+ disclosureMenus[i].updateKeyControls(checked);
304
+ }
305
+ });
306
+ }
307
+
308
+ // fake link behavior
309
+ disclosureMenus.forEach((disclosureNav, i) => {
310
+ var links = menus[i].querySelectorAll('[href="#mythical-page-content"]');
311
+ var examplePageHeading = document.getElementById('mythical-page-heading');
312
+ for (var k = 0; k < links.length; k++) {
313
+ // The codepen export script updates the internal link href with a full URL
314
+ // we're just manually fixing that behavior here
315
+ links[k].href = '#mythical-page-content';
316
+
317
+ links[k].addEventListener('click', (event) => {
318
+ // change the heading text to fake a page change
319
+ var pageTitle = event.target.innerText;
320
+ examplePageHeading.innerText = pageTitle;
321
+
322
+ // handle aria-current
323
+ for (var n = 0; n < links.length; n++) {
324
+ links[n].removeAttribute('aria-current');
325
+ }
326
+ event.target.setAttribute('aria-current', 'page');
327
+ });
328
+ }
329
+ });
330
+ },
331
+ false
332
+ );
333
+ }
package/src/js/aria/MenuVertical.js CHANGED
@@ -25,13 +25,18 @@ export function MenuVertical(aria) {
25
25
  };
26
26
 
27
27
  aria.MenuVertical.prototype.wrapActiveElement = function (elementActive) {
28
- elementActive.setAttribute('aria-current', 'page');
29
- elementActive.innerHTML = `<strong class="font-bold">${elementActive.textContent}</strong>`;
28
+ if (!elementActive.getAttribute('aria-current')) {
29
+ elementActive.setAttribute('aria-current', 'page');
30
+ elementActive.innerHTML = `<strong class="font-bold">${elementActive.innerHTML}</strong>`;
31
+ }
30
32
  };
31
33
 
32
34
  aria.MenuVertical.prototype.deactivateElement = function (elementDeactivated) {
33
35
  elementDeactivated.removeAttribute('aria-current');
34
- elementDeactivated.innerHTML = elementDeactivated.textContent;
36
+ if(elementDeactivated.querySelector('strong')) {
37
+ const replaceStrong = elementDeactivated.innerHTML.replace('<strong class="font-bold">', '').replace('<strong/>', '');
38
+ elementDeactivated.innerHTML = `${replaceStrong}`;
39
+ }
35
40
  };
36
41
 
37
42
  window.activateItemMenuVertical = function (menuId, activeItemId) {
package/src/js/aria/Nav.js CHANGED
@@ -25,13 +25,18 @@ export function Nav(aria) {
25
25
  };
26
26
 
27
27
  aria.Nav.prototype.wrapActiveElement = function (elementActive) {
28
- elementActive.setAttribute('aria-current', 'page');
29
- elementActive.innerHTML = `<strong class="font-bold">${elementActive.textContent}</strong>`;
28
+ if (!elementActive.getAttribute('aria-current')) {
29
+ elementActive.setAttribute('aria-current', 'page');
30
+ elementActive.innerHTML = `<strong class="font-bold">${elementActive.innerHTML}</strong>`;
31
+ }
30
32
  };
31
33
 
32
34
  aria.Nav.prototype.deactivateElement = function (elementDeactivated) {
33
35
  elementDeactivated.removeAttribute('aria-current');
34
- elementDeactivated.innerHTML = elementDeactivated.textContent;
36
+ if(elementDeactivated.querySelector('strong')) {
37
+ const replaceStrong = elementDeactivated.innerHTML.replace('<strong class="font-bold">', '').replace('<strong/>', '');
38
+ elementDeactivated.innerHTML = `${replaceStrong}`;
39
+ }
35
40
  };
36
41
 
37
42
  window.activateItemNav = function (menuId, activeItemId) {
package/src/js/desy-html.js CHANGED
@@ -7,7 +7,6 @@ import { PopupMenuItemAction } from './aria/PopupMenuItemAction.js';
7
7
  import { PopupMenuAction } from './aria/PopupMenuAction.js';
8
8
  import { MenubarItemAction } from './aria/MenubarItemAction.js';
9
9
  import { MenubarAction } from './aria/MenubarAction.js';
10
- import { DisclosureNav } from './aria/disclosureMenu.js';
11
10
  import { listbox } from './aria/listbox.js';
12
11
  import { alert } from './aria/alert.js';
13
12
  import { Treeitem } from './aria/treeitem.js';
@@ -255,15 +254,6 @@ export function menubarComponent(aria) {
255
254
  });
256
255
  }
257
256
 
258
- export function menuNavigationComponent(aria) {
259
- DisclosureNav(aria);
260
- const modules = document.querySelectorAll('[data-module="c-menu-navigation"]');
261
- [...modules].forEach((module) => {
262
- const menuNavigation = new aria.DisclosureNav(module);
263
- menuNavigation.init();
264
- });
265
- }
266
-
267
257
  export function tableAdvancedComponent(aria) {
268
258
  utils(aria);
269
259
  dataGrid(aria);
package/src/js/index.js CHANGED
@@ -11,7 +11,6 @@ import {
11
11
  dropdownComponent,
12
12
  listboxComponent,
13
13
  menubarComponent,
14
- menuNavigationComponent,
15
14
  tableAdvancedComponent,
16
15
  tabsComponent,
17
16
  tooltipComponent,
@@ -36,7 +35,6 @@ dialogComponent(aria);
36
35
  dropdownComponent(aria);
37
36
  listboxComponent(aria);
38
37
  menubarComponent(aria);
39
- menuNavigationComponent(aria);
40
38
  tableAdvancedComponent(aria);
41
39
  tabsComponent(aria);
42
40
  tooltipComponent(aria);
package/src/templates/components/button/_examples.button.njk CHANGED
@@ -197,9 +197,12 @@
197
197
  {
198
198
  "name": "botón enlace con target blank",
199
199
  "data": {
200
- "text": "Botón enlace con target",
200
+ "html": 'Botón enlace con target <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="0.8em" width="0.8em" class="self-center ml-sm" aria-hidden="true" focusable="false" role="img"><g><path d="M23.25,0h-8a.74.74,0,0,0-.69.47.74.74,0,0,0,.16.81L18,4.51l-9.45,9.3a1,1,0,0,0,0,1.41,1,1,0,0,0,.71.3,1,1,0,0,0,.7-.28l9.48-9.33,3.29,3.24a.74.74,0,0,0,.53.22.72.72,0,0,0,.29-.06A.74.74,0,0,0,24,8.62V.75A.76.76,0,0,0,23.25,0Z" fill="currentColor"></path><path d="M22.286057142857143 0H23.142857142857142c0.4733142857142857 0 0.8571428571428571 0.3837565714285714 0.8571428571428571 0.8571428571428571v0.8559548571428571l0 0.0023708571428571424V9.428571428571429c0 0.34668 -0.20879999999999999 0.6592285714285714 -0.5291999999999999 0.7918971428571429 -0.3202285714285714 0.1326685714285714 -0.6889714285714285 0.05933142857142857 -0.9341142857142858 -0.18581142857142857l-3.0733714285714284 -3.073525714285714 -16.536839999999998 16.536754285714284c-0.66948 0.6694285714285714 -1.7549022857142855 0.6694285714285714 -2.424372 0 -0.6694698857142857 -0.6694285714285714 -0.6694698857142857 -1.7549142857142856 0 -2.424342857142857L17.03886857142857 4.536771428571429 13.965342857142856 1.4632337142857141c-0.2451428571428571 -0.24514114285714284 -0.31848 -0.6138137142857142 -0.18581142857142857 -0.9341057142857143C13.912199999999999 0.208836 14.22474857142857 0 14.571428571428571 0h7.713942857142856l0.0006857142857142857 0Z" fill="currentColor"></path></g></svg>',
201
201
  "href": "http://www.google.com",
202
- "target": "_blank"
202
+ "target": "_blank",
203
+ "attributes": {
204
+ "title": "Se abre en ventana nueva"
205
+ }
203
206
  }
204
207
  },
205
208
  {
package/src/templates/components/button-loader/_examples.button-loader.njk CHANGED
@@ -209,9 +209,12 @@
209
209
  {
210
210
  "name": "botón enlace con target blank",
211
211
  "data": {
212
- "text": "Botón enlace con target",
212
+ "html": 'Botón enlace con target <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="0.8em" width="0.8em" class="self-center ml-sm" aria-hidden="true" focusable="false" role="img"><g><path d="M23.25,0h-8a.74.74,0,0,0-.69.47.74.74,0,0,0,.16.81L18,4.51l-9.45,9.3a1,1,0,0,0,0,1.41,1,1,0,0,0,.71.3,1,1,0,0,0,.7-.28l9.48-9.33,3.29,3.24a.74.74,0,0,0,.53.22.72.72,0,0,0,.29-.06A.74.74,0,0,0,24,8.62V.75A.76.76,0,0,0,23.25,0Z" fill="currentColor"></path><path d="M22.286057142857143 0H23.142857142857142c0.4733142857142857 0 0.8571428571428571 0.3837565714285714 0.8571428571428571 0.8571428571428571v0.8559548571428571l0 0.0023708571428571424V9.428571428571429c0 0.34668 -0.20879999999999999 0.6592285714285714 -0.5291999999999999 0.7918971428571429 -0.3202285714285714 0.1326685714285714 -0.6889714285714285 0.05933142857142857 -0.9341142857142858 -0.18581142857142857l-3.0733714285714284 -3.073525714285714 -16.536839999999998 16.536754285714284c-0.66948 0.6694285714285714 -1.7549022857142855 0.6694285714285714 -2.424372 0 -0.6694698857142857 -0.6694285714285714 -0.6694698857142857 -1.7549142857142856 0 -2.424342857142857L17.03886857142857 4.536771428571429 13.965342857142856 1.4632337142857141c-0.2451428571428571 -0.24514114285714284 -0.31848 -0.6138137142857142 -0.18581142857142857 -0.9341057142857143C13.912199999999999 0.208836 14.22474857142857 0 14.571428571428571 0h7.713942857142856l0.0006857142857142857 0Z" fill="currentColor"></path></g></svg>',
213
213
  "href": "http://www.google.com",
214
- "target": "_blank"
214
+ "target": "_blank",
215
+ "attributes": {
216
+ "title": "Se abre en ventana nueva"
217
+ }
215
218
  }
216
219
  },
217
220
  {
package/src/templates/components/header/_template.header.header__offcanvas.njk CHANGED
@@ -1,6 +1,6 @@
1
1
  <!-- header__offcanvas -->
2
2
  <div id="header-offcanvas" class="hidden" role="dialog" aria-labelledby="header-offcanvas-button-text" aria-modal="true">
3
- <div class="left-0 fixed top-0 h-screen w-offcanvas ml-offcanvas-negative">
3
+ <div class="left-0 fixed top-0 h-[100dvh] w-offcanvas ml-offcanvas-negative">
4
4
  <div class="h-full overflow-auto relative h-screen bg-white z-10">
5
5
  <div class="text-right p-sm">
6
6
  <button
package/src/templates/components/menu-horizontal/_examples.menu-horizontal.njk CHANGED
@@ -163,6 +163,29 @@
163
163
  }
164
164
  }
165
165
  },
166
+ {
167
+ "name": "con iconos en items",
168
+ "data": {
169
+ "items": [
170
+ {
171
+ "href": "#",
172
+ "html": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Archivo" focusable="false" role="img"><g id="new-file--empty-common-file-content"><path id="Subtract" fill="currentColor" fill-rule="evenodd" d="M7.875 0H2.5C2.10218 0 1.72064 0.158035 1.43934 0.43934C1.15804 0.720644 1 1.10218 1 1.5V12.5C1 12.8978 1.15804 13.2794 1.43934 13.5607C1.72064 13.842 2.10217 14 2.5 14H11.5C11.8978 14 12.2794 13.842 12.5607 13.5607C12.842 13.2794 13 12.8978 13 12.5V5.125H8.5C8.15482 5.125 7.875 4.84518 7.875 4.5V0ZM12.5821 3.875L9.125 0.417893V3.875H12.5821Z" clip-rule="evenodd"></path></g></svg> Opción 1'
173
+ },
174
+ {
175
+ "href": "#",
176
+ "html": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Link" focusable="false" role="img"><g id="link-chain--create-hyperlink-link-make-unlink-connection-chain"><path id="Union-1" fill="currentColor" fill-rule="evenodd" d="M7.6715 2.7426L7.67146 2.74264L6.70715 3.70707C6.31665 4.09761 5.68348 4.09765 5.29293 3.70715C4.90239 3.31665 4.90235 2.68348 5.29285 2.29293L6.25721 1.32847L6.25725 1.32843C8.02849 -0.442809 10.9002 -0.442809 12.6715 1.32843C14.4427 3.09965 14.4427 5.97136 12.6715 7.7426L12.6715 7.74264L11.7071 8.70707C11.3166 9.09761 10.6835 9.09765 10.2929 8.70715C9.90239 8.31664 9.90235 7.68348 10.2929 7.29293L11.2572 6.32847L11.2572 6.32843C12.2474 5.33824 12.2474 3.73283 11.2572 2.74264C10.2671 1.75247 8.66169 1.75245 7.6715 2.7426ZM3.70696 5.29285C4.0975 5.68335 4.09754 6.31652 3.70704 6.70707L2.74268 7.67153L2.74264 7.67157C1.75245 8.66176 1.75245 10.2672 2.74264 11.2574C3.73282 12.2475 5.33819 12.2475 6.32839 11.2574L6.32843 11.2574L7.29274 10.2929C7.68324 9.90239 8.31641 9.90235 8.70696 10.2929C9.0975 10.6834 9.09754 11.3165 8.70704 11.7071L7.74268 12.6715L7.74264 12.6716C5.9714 14.4428 3.09966 14.4428 1.32843 12.6716C-0.442796 10.9003 -0.442809 8.02864 1.32839 6.2574L1.32843 6.25736L2.29274 5.29293C2.68324 4.90239 3.31641 4.90235 3.70696 5.29285ZM9.20711 6.20711C9.59763 5.81658 9.59763 5.18342 9.20711 4.79289C8.81658 4.40237 8.18342 4.40237 7.79289 4.79289L4.79289 7.79289C4.40237 8.18342 4.40237 8.81658 4.79289 9.20711C5.18342 9.59763 5.81658 9.59763 6.20711 9.20711L9.20711 6.20711Z" clip-rule="evenodd"></path></g></svg> Opción 2'
177
+ },
178
+ {
179
+ "href": "#",
180
+ "html": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Solicitud" focusable="false" role="img"><g id="clipboard-text--edition-form-task-checklist-edit-clipboard"><path id="Union-2" fill="currentColor" fill-rule="evenodd" d="M5.5 0C4.94772 0 4.5 0.447716 4.5 1V1.5C4.5 2.05229 4.94772 2.5 5.5 2.5H8.5C9.05229 2.5 9.5 2.05229 9.5 1.5V1C9.5 0.447715 9.05229 0 8.5 0H5.5ZM2.75 1H3.25V1.5C3.25 2.74264 4.25736 3.75 5.5 3.75H8.5C9.74264 3.75 10.75 2.74264 10.75 1.5V1H11.25C12.0784 1 12.75 1.67157 12.75 2.5V12.5C12.75 13.3284 12.0784 14 11.25 14H2.75C1.92157 14 1.25 13.3284 1.25 12.5V2.5C1.25 1.67157 1.92157 1 2.75 1ZM3.875 8.50049C3.875 8.15531 4.15482 7.87549 4.5 7.87549H9.5C9.84518 7.87549 10.125 8.15531 10.125 8.50049C10.125 8.84567 9.84518 9.12549 9.5 9.12549H4.5C4.15482 9.12549 3.875 8.84567 3.875 8.50049ZM4.5 10.3755C4.15482 10.3755 3.875 10.6553 3.875 11.0005C3.875 11.3457 4.15482 11.6255 4.5 11.6255H9.5C9.84518 11.6255 10.125 11.3457 10.125 11.0005C10.125 10.6553 9.84518 10.3755 9.5 10.3755H4.5Z" clip-rule="evenodd"></path></g></svg> Opción 3'
181
+ }
182
+ ],
183
+ "attributes": {
184
+ "id": "mi-menu-icons",
185
+ "aria-label": "Menu horizontal"
186
+ }
187
+ }
188
+ },
166
189
  {
167
190
  "name": "con clases aplicadas: tabs en móvil",
168
191
  "description": 'Clases modificadoras aplicadas: <code>.c-menu-horizontal--tabs-mobile</code> y <code>.c-menu-horizontal--scroll</code>',
package/src/templates/components/menu-vertical/_examples.menu-vertical.njk CHANGED
@@ -446,6 +446,30 @@
446
446
  }
447
447
  }
448
448
  },
449
+ {
450
+ "name": "con iconos en items",
451
+ "data": {
452
+ "idPrefix": "with-icons",
453
+ "items": [
454
+ {
455
+ "href": "#",
456
+ "html": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Archivo" focusable="false" role="img"><g id="new-file--empty-common-file-content"><path id="Subtract" fill="currentColor" fill-rule="evenodd" d="M7.875 0H2.5C2.10218 0 1.72064 0.158035 1.43934 0.43934C1.15804 0.720644 1 1.10218 1 1.5V12.5C1 12.8978 1.15804 13.2794 1.43934 13.5607C1.72064 13.842 2.10217 14 2.5 14H11.5C11.8978 14 12.2794 13.842 12.5607 13.5607C12.842 13.2794 13 12.8978 13 12.5V5.125H8.5C8.15482 5.125 7.875 4.84518 7.875 4.5V0ZM12.5821 3.875L9.125 0.417893V3.875H12.5821Z" clip-rule="evenodd"></path></g></svg> Opción 1'
457
+ },
458
+ {
459
+ "href": "#",
460
+ "html": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Link" focusable="false" role="img"><g id="link-chain--create-hyperlink-link-make-unlink-connection-chain"><path id="Union-1" fill="currentColor" fill-rule="evenodd" d="M7.6715 2.7426L7.67146 2.74264L6.70715 3.70707C6.31665 4.09761 5.68348 4.09765 5.29293 3.70715C4.90239 3.31665 4.90235 2.68348 5.29285 2.29293L6.25721 1.32847L6.25725 1.32843C8.02849 -0.442809 10.9002 -0.442809 12.6715 1.32843C14.4427 3.09965 14.4427 5.97136 12.6715 7.7426L12.6715 7.74264L11.7071 8.70707C11.3166 9.09761 10.6835 9.09765 10.2929 8.70715C9.90239 8.31664 9.90235 7.68348 10.2929 7.29293L11.2572 6.32847L11.2572 6.32843C12.2474 5.33824 12.2474 3.73283 11.2572 2.74264C10.2671 1.75247 8.66169 1.75245 7.6715 2.7426ZM3.70696 5.29285C4.0975 5.68335 4.09754 6.31652 3.70704 6.70707L2.74268 7.67153L2.74264 7.67157C1.75245 8.66176 1.75245 10.2672 2.74264 11.2574C3.73282 12.2475 5.33819 12.2475 6.32839 11.2574L6.32843 11.2574L7.29274 10.2929C7.68324 9.90239 8.31641 9.90235 8.70696 10.2929C9.0975 10.6834 9.09754 11.3165 8.70704 11.7071L7.74268 12.6715L7.74264 12.6716C5.9714 14.4428 3.09966 14.4428 1.32843 12.6716C-0.442796 10.9003 -0.442809 8.02864 1.32839 6.2574L1.32843 6.25736L2.29274 5.29293C2.68324 4.90239 3.31641 4.90235 3.70696 5.29285ZM9.20711 6.20711C9.59763 5.81658 9.59763 5.18342 9.20711 4.79289C8.81658 4.40237 8.18342 4.40237 7.79289 4.79289L4.79289 7.79289C4.40237 8.18342 4.40237 8.81658 4.79289 9.20711C5.18342 9.59763 5.81658 9.59763 6.20711 9.20711L9.20711 6.20711Z" clip-rule="evenodd"></path></g></svg> Opción 2'
461
+ },
462
+ {
463
+ "href": "#",
464
+ "html": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Solicitud" focusable="false" role="img"><g id="clipboard-text--edition-form-task-checklist-edit-clipboard"><path id="Union-2" fill="currentColor" fill-rule="evenodd" d="M5.5 0C4.94772 0 4.5 0.447716 4.5 1V1.5C4.5 2.05229 4.94772 2.5 5.5 2.5H8.5C9.05229 2.5 9.5 2.05229 9.5 1.5V1C9.5 0.447715 9.05229 0 8.5 0H5.5ZM2.75 1H3.25V1.5C3.25 2.74264 4.25736 3.75 5.5 3.75H8.5C9.74264 3.75 10.75 2.74264 10.75 1.5V1H11.25C12.0784 1 12.75 1.67157 12.75 2.5V12.5C12.75 13.3284 12.0784 14 11.25 14H2.75C1.92157 14 1.25 13.3284 1.25 12.5V2.5C1.25 1.67157 1.92157 1 2.75 1ZM3.875 8.50049C3.875 8.15531 4.15482 7.87549 4.5 7.87549H9.5C9.84518 7.87549 10.125 8.15531 10.125 8.50049C10.125 8.84567 9.84518 9.12549 9.5 9.12549H4.5C4.15482 9.12549 3.875 8.84567 3.875 8.50049ZM4.5 10.3755C4.15482 10.3755 3.875 10.6553 3.875 11.0005C3.875 11.3457 4.15482 11.6255 4.5 11.6255H9.5C9.84518 11.6255 10.125 11.3457 10.125 11.0005C10.125 10.6553 9.84518 10.3755 9.5 10.3755H4.5Z" clip-rule="evenodd"></path></g></svg> Opción 3'
465
+ }
466
+ ],
467
+ "attributes": {
468
+ "id": "mi-menu-icons",
469
+ "aria-label": "Menu vertical"
470
+ }
471
+ }
472
+ },
449
473
  {
450
474
  "name": "con idPrefix",
451
475
  "description": 'Mostrar código para ver el <code>idPrefix</code> aplicado',
package/src/templates/components/nav/_examples.nav.njk CHANGED
@@ -212,6 +212,30 @@
212
212
  }
213
213
  }
214
214
  },
215
+ {
216
+ "name": "con iconos en items",
217
+ "data": {
218
+ "idPrefix": "with-icons",
219
+ "items": [
220
+ {
221
+ "href": "#",
222
+ "html": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Archivo" focusable="false" role="img"><g id="new-file--empty-common-file-content"><path id="Subtract" fill="currentColor" fill-rule="evenodd" d="M7.875 0H2.5C2.10218 0 1.72064 0.158035 1.43934 0.43934C1.15804 0.720644 1 1.10218 1 1.5V12.5C1 12.8978 1.15804 13.2794 1.43934 13.5607C1.72064 13.842 2.10217 14 2.5 14H11.5C11.8978 14 12.2794 13.842 12.5607 13.5607C12.842 13.2794 13 12.8978 13 12.5V5.125H8.5C8.15482 5.125 7.875 4.84518 7.875 4.5V0ZM12.5821 3.875L9.125 0.417893V3.875H12.5821Z" clip-rule="evenodd"></path></g></svg> Opción 1'
223
+ },
224
+ {
225
+ "href": "#",
226
+ "html": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Link" focusable="false" role="img"><g id="link-chain--create-hyperlink-link-make-unlink-connection-chain"><path id="Union-1" fill="currentColor" fill-rule="evenodd" d="M7.6715 2.7426L7.67146 2.74264L6.70715 3.70707C6.31665 4.09761 5.68348 4.09765 5.29293 3.70715C4.90239 3.31665 4.90235 2.68348 5.29285 2.29293L6.25721 1.32847L6.25725 1.32843C8.02849 -0.442809 10.9002 -0.442809 12.6715 1.32843C14.4427 3.09965 14.4427 5.97136 12.6715 7.7426L12.6715 7.74264L11.7071 8.70707C11.3166 9.09761 10.6835 9.09765 10.2929 8.70715C9.90239 8.31664 9.90235 7.68348 10.2929 7.29293L11.2572 6.32847L11.2572 6.32843C12.2474 5.33824 12.2474 3.73283 11.2572 2.74264C10.2671 1.75247 8.66169 1.75245 7.6715 2.7426ZM3.70696 5.29285C4.0975 5.68335 4.09754 6.31652 3.70704 6.70707L2.74268 7.67153L2.74264 7.67157C1.75245 8.66176 1.75245 10.2672 2.74264 11.2574C3.73282 12.2475 5.33819 12.2475 6.32839 11.2574L6.32843 11.2574L7.29274 10.2929C7.68324 9.90239 8.31641 9.90235 8.70696 10.2929C9.0975 10.6834 9.09754 11.3165 8.70704 11.7071L7.74268 12.6715L7.74264 12.6716C5.9714 14.4428 3.09966 14.4428 1.32843 12.6716C-0.442796 10.9003 -0.442809 8.02864 1.32839 6.2574L1.32843 6.25736L2.29274 5.29293C2.68324 4.90239 3.31641 4.90235 3.70696 5.29285ZM9.20711 6.20711C9.59763 5.81658 9.59763 5.18342 9.20711 4.79289C8.81658 4.40237 8.18342 4.40237 7.79289 4.79289L4.79289 7.79289C4.40237 8.18342 4.40237 8.81658 4.79289 9.20711C5.18342 9.59763 5.81658 9.59763 6.20711 9.20711L9.20711 6.20711Z" clip-rule="evenodd"></path></g></svg> Opción 2'
227
+ },
228
+ {
229
+ "href": "#",
230
+ "html": '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14" width="1em" height="1em" class="inline-block align-baseline mr-sm" aria-label="Solicitud" focusable="false" role="img"><g id="clipboard-text--edition-form-task-checklist-edit-clipboard"><path id="Union-2" fill="currentColor" fill-rule="evenodd" d="M5.5 0C4.94772 0 4.5 0.447716 4.5 1V1.5C4.5 2.05229 4.94772 2.5 5.5 2.5H8.5C9.05229 2.5 9.5 2.05229 9.5 1.5V1C9.5 0.447715 9.05229 0 8.5 0H5.5ZM2.75 1H3.25V1.5C3.25 2.74264 4.25736 3.75 5.5 3.75H8.5C9.74264 3.75 10.75 2.74264 10.75 1.5V1H11.25C12.0784 1 12.75 1.67157 12.75 2.5V12.5C12.75 13.3284 12.0784 14 11.25 14H2.75C1.92157 14 1.25 13.3284 1.25 12.5V2.5C1.25 1.67157 1.92157 1 2.75 1ZM3.875 8.50049C3.875 8.15531 4.15482 7.87549 4.5 7.87549H9.5C9.84518 7.87549 10.125 8.15531 10.125 8.50049C10.125 8.84567 9.84518 9.12549 9.5 9.12549H4.5C4.15482 9.12549 3.875 8.84567 3.875 8.50049ZM4.5 10.3755C4.15482 10.3755 3.875 10.6553 3.875 11.0005C3.875 11.3457 4.15482 11.6255 4.5 11.6255H9.5C9.84518 11.6255 10.125 11.3457 10.125 11.0005C10.125 10.6553 9.84518 10.3755 9.5 10.3755H4.5Z" clip-rule="evenodd"></path></g></svg> Opción 3'
231
+ }
232
+ ],
233
+ "attributes": {
234
+ "id": "mi-menu-icons",
235
+ "aria-label": "Navegación local"
236
+ }
237
+ }
238
+ },
215
239
  {
216
240
  "name": "con idPrefix",
217
241
  "description": 'Mostrar código para ver el <code>idPrefix</code> aplicado.',
package/src/js/aria/disclosureMenu.js DELETED
@@ -1,152 +0,0 @@
1
- export function DisclosureNav(aria) {
2
- /*
3
- * This content is licensed according to the W3C Software License at
4
- * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
5
- *
6
- * Supplemental JS for the disclosure menu keyboard behavior
7
- */
8
-
9
-
10
- aria.DisclosureNav = function (domNode) {
11
- this.rootNode = domNode;
12
- this.triggerNodes = [];
13
- this.controlledNodes = [];
14
- this.openIndex = null;
15
- this.useArrowKeys = true;
16
- };
17
-
18
- aria.DisclosureNav.prototype.init = function () {
19
- var buttons = this.rootNode.querySelectorAll('button[aria-expanded][aria-controls]');
20
- for (var i = 0; i < buttons.length; i++) {
21
- var button = buttons[i];
22
- var menu = button.parentNode.querySelector('ul');
23
- if (menu) {
24
- // save ref to button and controlled menu
25
- this.triggerNodes.push(button);
26
- this.controlledNodes.push(menu);
27
-
28
- // collapse menus
29
- button.setAttribute('aria-expanded', 'false');
30
- this.toggleMenu(menu, false);
31
-
32
- // attach event listeners
33
- menu.addEventListener('keydown', this.handleMenuKeyDown.bind(this));
34
- button.addEventListener('click', this.handleButtonClick.bind(this));
35
- button.addEventListener('keydown', this.handleButtonKeyDown.bind(this));
36
- }
37
- }
38
-
39
- this.rootNode.addEventListener('focusout', this.handleBlur.bind(this));
40
- };
41
-
42
- aria.DisclosureNav.prototype.toggleMenu = function (domNode, show) {
43
- if (domNode) {
44
- domNode.style.display = show ? 'block' : 'none';
45
- }
46
- };
47
-
48
- aria.DisclosureNav.prototype.toggleExpand = function (index, expanded) {
49
- // close open menu, if applicable
50
- if (this.openIndex !== index) {
51
- this.toggleExpand(this.openIndex, false);
52
- }
53
-
54
- // handle menu at called index
55
- if (this.triggerNodes[index]) {
56
- this.openIndex = expanded ? index : null;
57
- this.triggerNodes[index].setAttribute('aria-expanded', expanded);
58
- this.toggleMenu(this.controlledNodes[index], expanded);
59
- }
60
- };
61
-
62
- aria.DisclosureNav.prototype.controlFocusByKey = function (keyboardEvent, nodeList, currentIndex) {
63
- switch (keyboardEvent.key) {
64
- case 'ArrowUp':
65
- case 'ArrowLeft':
66
- keyboardEvent.preventDefault();
67
- if (currentIndex > -1) {
68
- var prevIndex = Math.max(0, currentIndex - 1);
69
- nodeList[prevIndex].focus();
70
- }
71
- break;
72
- case 'ArrowDown':
73
- case 'ArrowRight':
74
- keyboardEvent.preventDefault();
75
- if (currentIndex > -1) {
76
- var nextIndex = Math.min(nodeList.length - 1, currentIndex + 1);
77
- nodeList[nextIndex].focus();
78
- }
79
- break;
80
- case 'Home':
81
- keyboardEvent.preventDefault();
82
- nodeList[0].focus();
83
- break;
84
- case 'End':
85
- keyboardEvent.preventDefault();
86
- nodeList[nodeList.length - 1].focus();
87
- break;
88
- }
89
- };
90
-
91
- /* Event Handlers */
92
- aria.DisclosureNav.prototype.handleBlur = function (event) {
93
- var menuContainsFocus = this.rootNode.contains(event.relatedTarget);
94
- if (!menuContainsFocus && this.openIndex !== null) {
95
- this.toggleExpand(this.openIndex, false);
96
- }
97
- };
98
-
99
- aria.DisclosureNav.prototype.handleButtonKeyDown = function (event) {
100
- var targetButtonIndex = this.triggerNodes.indexOf(document.activeElement);
101
-
102
- // close on escape
103
- if (event.key === 'Escape') {
104
- this.toggleExpand(this.openIndex, false);
105
- }
106
-
107
- // move focus into the open menu if the current menu is open
108
- else if (this.useArrowKeys && this.openIndex === targetButtonIndex && event.key === 'ArrowDown') {
109
- event.preventDefault();
110
- this.controlledNodes[this.openIndex].querySelector('a').focus();
111
- }
112
-
113
- // handle arrow key navigation between top-level buttons, if set
114
- else if (this.useArrowKeys) {
115
- this.controlFocusByKey(event, this.triggerNodes, targetButtonIndex);
116
- }
117
- };
118
-
119
- aria.DisclosureNav.prototype.handleButtonClick = function (event) {
120
- var button = event.target;
121
- var buttonIndex = this.triggerNodes.indexOf(button);
122
- var buttonExpanded = button.getAttribute('aria-expanded') === 'true';
123
- this.toggleExpand(buttonIndex, !buttonExpanded);
124
- };
125
-
126
- aria.DisclosureNav.prototype.handleMenuKeyDown = function (event) {
127
- if (this.openIndex === null) {
128
- return;
129
- }
130
-
131
- var menuLinks = Array.prototype.slice.call(this.controlledNodes[this.openIndex].querySelectorAll('a'));
132
- var currentIndex = menuLinks.indexOf(document.activeElement);
133
-
134
- // close on escape
135
- if (event.key === 'Escape') {
136
- this.triggerNodes[this.openIndex].focus();
137
- this.toggleExpand(this.openIndex, false);
138
- }
139
-
140
- // handle arrow key navigation within menu links, if set
141
- else if (this.useArrowKeys) {
142
- this.controlFocusByKey(event, menuLinks, currentIndex);
143
- }
144
- };
145
-
146
- // switch on/off arrow key navigation
147
- aria.DisclosureNav.prototype.updateKeyControls = function (useArrowKeys) {
148
- this.useArrowKeys = useArrowKeys;
149
- };
150
-
151
-
152
- }