desy-html 12.0.1 → 13.0.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.
- package/docs/_include.template-header.njk +320 -326
- package/docs/_macro.example-render.njk +8 -8
- package/docs/ds/_ds.example.textos.njk +1 -1
- package/docs/ds/_ds.section.espaciado.njk +2 -2
- package/docs/ds/_ds.section.textos.njk +1 -1
- package/docs/ds/_ds.section.typography.njk +1 -1
- package/docs/index.html +14 -0
- package/docs/pagina-accesibilidad.html +1 -1
- package/docs/pagina-mapa-web.html +1 -1
- package/docs/plantilla-con-header-advanced.html +1 -1
- package/docs/plantilla-editar-con-cabecera-fija-y-sidebar-sticky.html +1 -1
- package/docs/plantilla-editar-con-cabecera-fija.html +1 -1
- package/docs/plantilla-logueado-con-cabecera-fija-headroom.html +1 -1
- package/docs/plantilla-logueado-con-cabecera-fija.html +1 -1
- package/docs/plantilla-logueado-con-selector-de-app-y-sidebar.html +1 -1
- package/docs/plantilla-logueado-con-selector-de-app-y-subheader.html +1 -1
- package/docs/plantilla-logueado-con-selector-de-app.html +1 -1
- package/docs/plantilla-logueado-con-titulo-de-app.html +1 -1
- package/docs/plantilla-sin-loguear.html +1 -1
- package/package.json +1 -1
- package/src/js/aria/MenuNavigation.js +4 -1
- package/src/js/aria/MenubarAction.js +100 -25
- package/src/js/aria/listbox.js +1 -1
- package/src/js/aria/tabs.js +0 -2
- package/src/js/desy-html.js +3 -11
- package/src/js/index.js +0 -2
- package/src/templates/components/accordion/_template.accordion.njk +7 -7
- package/src/templates/components/accordion-history/_template.accordion-history.njk +17 -17
- package/src/templates/components/alert/_examples.alert.njk +3 -3
- package/src/templates/components/breadcrumbs/_examples.breadcrumbs.njk +27 -27
- package/src/templates/components/breadcrumbs/_styles.breadcrumbs.css +7 -4
- package/src/templates/components/breadcrumbs/_template.breadcrumbs.njk +1 -1
- package/src/templates/components/button/_examples.button.njk +12 -13
- package/src/templates/components/button-loader/_examples.button-loader.njk +5 -5
- package/src/templates/components/button-loader/_template.button-loader.njk +1 -1
- package/src/templates/components/card/_examples.card.njk +25 -22
- package/src/templates/components/card/_template.card.njk +10 -10
- package/src/templates/components/character-count/_examples.character-count.njk +1 -1
- package/src/templates/components/checkboxes/_template.checkboxes.njk +2 -3
- package/src/templates/components/date-input/_template.date-input.njk +0 -1
- package/src/templates/components/datepicker/_template.datepicker.njk +1 -2
- package/src/templates/components/dropdown/_template.dropdown.njk +1 -1
- package/src/templates/components/error-summary/_template.error-summary.njk +1 -1
- package/src/templates/components/file-upload/_examples.file-upload.njk +6 -6
- package/src/templates/components/file-upload/_template.file-upload.njk +0 -1
- package/src/templates/components/footer/_template.footer.njk +2 -1
- package/src/templates/components/header/_examples.header.njk +5 -4
- package/src/templates/components/header/_template.header.header__navigation.njk +24 -26
- package/src/templates/components/header/_template.header.njk +1 -0
- package/src/templates/components/header-advanced/_examples.header-advanced.njk +63 -52
- package/src/templates/components/header-mini/_examples.header-mini.njk +1 -1
- package/src/templates/components/input/_template.input.njk +1 -2
- package/src/templates/components/input-group/_examples.input-group.njk +2 -2
- package/src/templates/components/input-group/_template.input-group.njk +1 -2
- package/src/templates/components/item/_examples.item.njk +13 -2
- package/src/templates/components/item/_template.item.njk +3 -3
- package/src/templates/components/links-list/_examples.links-list.njk +32 -0
- package/src/templates/components/listbox/_template.listbox.njk +3 -3
- package/src/templates/components/menu-horizontal/_examples.menu-horizontal.njk +34 -19
- package/src/templates/components/menu-horizontal/_styles.menu-horizontal.css +2 -1
- package/src/templates/components/menu-horizontal/_template.menu-horizontal.njk +4 -4
- package/src/templates/components/menu-navigation/_examples.menu-navigation.njk +0 -23
- package/src/templates/components/menu-navigation/_template.menu-navigation.njk +3 -5
- package/src/templates/components/menu-vertical/_template.menu-vertical.njk +2 -2
- package/src/templates/components/menubar/_styles.menubar.css +10 -0
- package/src/templates/components/menubar/_template.menubar.njk +2 -1
- package/src/templates/components/nav/_template.nav.njk +1 -1
- package/src/templates/components/notification/_template.notification.njk +2 -2
- package/src/templates/components/pagination/_template.pagination.njk +6 -6
- package/src/templates/components/pill/_examples.pill.njk +6 -6
- package/src/templates/components/radios/_template.radios.njk +1 -2
- package/src/templates/components/searchbar/_template.searchbar.njk +0 -1
- package/src/templates/components/select/_template.select.njk +0 -3
- package/src/templates/components/spinner/_template.spinner.njk +4 -0
- package/src/templates/components/status-item/_examples.status-item.njk +1 -1
- package/src/templates/components/table/_examples.table.njk +21 -298
- package/src/templates/components/table/_template.table.njk +2 -2
- package/src/templates/components/table/params.table.yaml +4 -0
- package/src/templates/components/table-advanced/_examples.table-advanced.njk +4 -184
- package/src/templates/components/table-advanced/_template.table-advanced.njk +5 -2
- package/src/templates/components/textarea/_template.textarea.njk +0 -1
- package/src/templates/components/toggle/_examples.toggle.njk +12 -12
- package/src/templates/components/tooltip/_template.tooltip.njk +1 -1
- package/src/js/aria/HeaderNavigation.js +0 -55
|
@@ -122,7 +122,7 @@ import componentTree %}
|
|
|
122
122
|
<h2 class="mb-sm font-bold">Parámetros Nunjucks del componente<span class="sr-only">: "{{ exampleComponent | capitalize }}". Versión: {{ '' | filterversion }}</span></h2>
|
|
123
123
|
<p>Los parámetros de Nunjucks para este componente están dentro de la siguiente etiqueta code en formato yaml.</p>
|
|
124
124
|
<pre>
|
|
125
|
-
<code class="language-yaml hljs text-sm">{{ loadComponentParams(exampleComponent) | filterescapeltgt }}</code>
|
|
125
|
+
<code class="language-yaml hljs text-sm" tabindex="-1">{{ loadComponentParams(exampleComponent) | filterescapeltgt }}</code>
|
|
126
126
|
</pre>
|
|
127
127
|
</div>
|
|
128
128
|
<div aria-hidden="true">
|
|
@@ -151,10 +151,10 @@ import componentTree %}
|
|
|
151
151
|
<p class="c-paragraph-base mb-0">{{ example.description | safe }}</p>
|
|
152
152
|
<div class="sr-only">
|
|
153
153
|
<h4>Ejemplo: "{{ example.name | capitalize }}", de código HTML, para maquetar el componente: "{{ exampleComponent | replace("-", " ") | title }}", versión: {{ '' | filterversion }}, del sistema de diseño DESY</h4>
|
|
154
|
-
<p>Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto:
|
|
155
|
-
<p>Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto:
|
|
154
|
+
<p>Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/</p>
|
|
155
|
+
<p>Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/</p>
|
|
156
156
|
<p>Usar sólo el código que está dentro de la siguiente etiqueta <code>.</p>
|
|
157
|
-
<pre><code class="language-html hljs text-sm" data-desy-html-version="{{ '' | filterversion }}">
|
|
157
|
+
<pre><code class="language-html hljs text-sm" data-desy-html-version="{{ '' | filterversion }}" tabindex="-1">
|
|
158
158
|
{{- getHTMLCodeFromExample(exampleComponent, example.data, 'component') -}}
|
|
159
159
|
</code>
|
|
160
160
|
</pre>
|
|
@@ -167,9 +167,9 @@ import componentTree %}
|
|
|
167
167
|
{% raw %}{% {% endraw %}call component{{ exampleComponent | replace("-", " ") | title | replace(" ","") }} {% endset %}
|
|
168
168
|
<div class="sr-only">
|
|
169
169
|
<h4>Ejemplo: "{{ example.name | capitalize }}", de código Nunjucks, para maquetar el componente: "{{ exampleComponent | replace("-", " ") | title }}", versión: {{ '' | filterversion }}, del sistema de diseño DESY</h4>
|
|
170
|
-
<p>Pegar en la página: pagina-prueba.html del proyecto:
|
|
170
|
+
<p>Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/</p>
|
|
171
171
|
<p>Usar sólo el código que está dentro de la siguiente etiqueta <code>.</p>
|
|
172
|
-
<pre><code class="language-js hljs text-sm" data-desy-html-version="{{ '' | filterversion }}">
|
|
172
|
+
<pre><code class="language-js hljs text-sm" data-desy-html-version="{{ '' | filterversion }}" tabindex="-1">
|
|
173
173
|
{{ callerNunjucks | safe }}({{ example.data | filtercaller | filterescapeltgt | dump(2) | safe }}){% raw %} %}{% endraw %}
|
|
174
174
|
{{ callerHtml }}
|
|
175
175
|
{% raw %}{%{% endraw %} endcall {% raw %} %}{% endraw %}</code></pre>
|
|
@@ -178,9 +178,9 @@ import componentTree %}
|
|
|
178
178
|
{% else %}
|
|
179
179
|
<div class="sr-only">
|
|
180
180
|
<h4>Ejemplo: "{{ example.name | capitalize }}", de código Nunjucks, para maquetar el componente: "{{ exampleComponent | replace("-", " ") | title }}", versión: {{ '' | filterversion }}, del sistema de diseño DESY</h4>
|
|
181
|
-
<p>Pegar en la página: pagina-prueba.html del proyecto:
|
|
181
|
+
<p>Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/</p>
|
|
182
182
|
<p>Usar sólo el código que está dentro de la siguiente etiqueta <code>.</p>
|
|
183
|
-
<pre><code class="language-njk hljs text-sm" data-desy-html-version="{{ '' | filterversion }}">{{- getNunjucksCodeFromExample(exampleComponent, example.data, 'component') | filterescapeltgt | safe -}}</code></pre>
|
|
183
|
+
<pre><code class="language-njk hljs text-sm" data-desy-html-version="{{ '' | filterversion }}" tabindex="-1">{{- getNunjucksCodeFromExample(exampleComponent, example.data, 'component') | filterescapeltgt | safe -}}</code></pre>
|
|
184
184
|
</div>
|
|
185
185
|
{% endif %}
|
|
186
186
|
</div>
|
|
@@ -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 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="
|
|
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 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="presentation"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></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="text-neutral-dark">Esto es un <a href="#" class="c-link c-link--neutral">enlace</a> en un texto secundario.</p>
|
|
10
10
|
<p>Esto es un <a href="#" class="c-link c-link--no-underline">enlace</a> sin subrayado (sólo en hover).</p>
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
<!-- _ds.section.spacing.njk -->
|
|
3
3
|
|
|
4
4
|
<div class="container mx-auto">
|
|
5
|
-
|
|
5
|
+
|
|
6
6
|
<div class="pb-lg"></div>
|
|
7
7
|
{% from "ds/_ds.macro.subsection-title.njk" import DSSubsectionTitle %}
|
|
8
8
|
{{ DSSubsectionTitle({
|
|
@@ -291,6 +291,6 @@
|
|
|
291
291
|
title: "Más espaciados"
|
|
292
292
|
}) }}
|
|
293
293
|
<div class="prose">
|
|
294
|
-
<p>Si necesitas más espaciados, usa los <a href="https://tailwindcss.com/docs/customizing-spacing#default-spacing-scale">espaciados por defecto de Tailwind CSS<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="
|
|
294
|
+
<p>Si necesitas más espaciados, usa los <a href="https://tailwindcss.com/docs/customizing-spacing#default-spacing-scale">espaciados por defecto de Tailwind CSS<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="presentation"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path></g></svg></a>.</p>
|
|
295
295
|
</div>
|
|
296
296
|
</div>
|
|
@@ -182,7 +182,7 @@
|
|
|
182
182
|
<li>
|
|
183
183
|
<dl class="grid grid-cols-2 lg:grid-cols-4 gap-x-lg gap-y-base my-base">
|
|
184
184
|
<dt class="col-span-2 lg:col-span-2">
|
|
185
|
-
<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 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="
|
|
185
|
+
<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 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="presentation"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path></g></svg></a> en un texto.</p>
|
|
186
186
|
</dt>
|
|
187
187
|
<dd class="col-span-2 lg:col-span-2">
|
|
188
188
|
<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>
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
title: "Tailwindcss typography plugin"
|
|
12
12
|
}) }}
|
|
13
13
|
|
|
14
|
-
<p class="c-paragraph-base">Para dar estilos por defecto a contenido html sin clases que proviene de markdown o de wysiwyg, utilizamos un plugin de Tailwindcss: <a href="https://github.com/tailwindlabs/tailwindcss-typography" class="c-link">tailwindcss-typography<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="
|
|
14
|
+
<p class="c-paragraph-base">Para dar estilos por defecto a contenido html sin clases que proviene de markdown o de wysiwyg, utilizamos un plugin de Tailwindcss: <a href="https://github.com/tailwindlabs/tailwindcss-typography" class="c-link">tailwindcss-typography<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="presentation"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path></g></svg></a>. Basta con añadir al contenedor la clase <code>.prose</code>. También hay variantes de estos estilos que pueden usarse con breakpoints, por ejemplo: <code>prose prose-sm lg:prose-base max-w-none lg:max-w-none mx-auto</code>. Leer la <a href="https://github.com/tailwindlabs/tailwindcss-typography" class="c-link">documentación<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="0.8em" width="0.8em" class="inline-block mx-xs no-underline align-baseline" aria-hidden="true" focusable="false" role="presentation"><g><path fill="currentcolor" fill-rule="evenodd" d="M7.428571428571428 0.5714285714285714c-0.6311885714285713 0 -1.1428571428571428 0.5116742857142856 -1.1428571428571428 1.1428571428571428 0 0.6311771428571428 0.5116685714285714 1.1428571428571428 1.1428571428571428 1.1428571428571428h4.098057142857143L0.9061634285714285 13.477599999999999c-0.4463131428571428 0.4462857142857143 -0.4463131428571428 1.1699428571428572 0 1.6162285714285711 0.4463165714285714 0.4462857142857143 1.1699279999999999 0.4462857142857143 1.616248 0L13.142857142857142 4.473382857142857V8.571428571428571c0 0.6311771428571428 0.5116571428571428 1.1428571428571428 1.1428571428571428 1.1428571428571428s1.1428571428571428 -0.51168 1.1428571428571428 -1.1428571428571428v-6.857142857142857c0 -0.6311828571428572 -0.5116571428571428 -1.1428571428571428 -1.1428571428571428 -1.1428571428571428h-6.857142857142857Z" clip-rule="evenodd" stroke-width="1"></path></g></svg></a>.</p>
|
|
15
15
|
<div class="pb-lg"></div>
|
|
16
16
|
{% from "components/details/_macro.details.njk" import componentDetails %}
|
|
17
17
|
{% call componentDetails({
|
package/docs/index.html
CHANGED
|
@@ -39,6 +39,20 @@
|
|
|
39
39
|
|
|
40
40
|
<h2>Changelog (English)</h2>
|
|
41
41
|
<p>What's new in the latest version of desy-html</p>
|
|
42
|
+
<h3>v.13.0.0</h3>
|
|
43
|
+
<ul class="text-sm">
|
|
44
|
+
<li>Accesibility fixes in most of the components.</li>
|
|
45
|
+
<li>Header and Header advanced uses Menu navigation now instead of HeaderNavigation.</li>
|
|
46
|
+
<li>Fixed a bug in Menubar.</li>
|
|
47
|
+
<li>Added svg separator icon to breadcrumbs.</li>
|
|
48
|
+
<li>Footer doesn't use abbr now.</li>
|
|
49
|
+
</ul>
|
|
50
|
+
<h3>v.12.1.0</h3>
|
|
51
|
+
<ul class="text-sm">
|
|
52
|
+
<li>Fixed a bug in dropdown with focusable elements.</li>
|
|
53
|
+
<li>Accesibility fixes in Card, Item, Pagination, Table, Table advanced and Menu horizontal, Links list and Header examples.</li>
|
|
54
|
+
<li>Improvements in docs.</li>
|
|
55
|
+
</ul>
|
|
42
56
|
<h3>v.12.0.1</h3>
|
|
43
57
|
<ul class="text-sm">
|
|
44
58
|
<li>Minor fixes.</li>
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
Plantilla en desy-html: src/templates/pages/_template.logged-out.njk
|
|
10
10
|
</p>
|
|
11
11
|
<p class="text-lg mt-0">
|
|
12
|
-
<a href="https://bitbucket.org/sdaragon/desy-html/src/master/docs/pagina-accesibilidad.html" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta página<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="
|
|
12
|
+
<a href="https://bitbucket.org/sdaragon/desy-html/src/master/docs/pagina-accesibilidad.html" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta página<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="presentation"><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>
|
|
13
13
|
</p>
|
|
14
14
|
<p class="text-lg">El Gobierno de Aragón se ha comprometido a hacer accesible su sitio web, de conformidad con el <a href="#">Real Decreto 1112/2018, de 7 de septiembre, sobre accesibilidad de los sitios web y aplicaciones para dispositivos móviles del sector público</a>.</p>
|
|
15
15
|
<p class="text-lg">La presente declaración de accesibilidad se aplica al <a href="#">sitio web actual aragon.es</a> (los subdominios de este sitio web tendrán sus propias declaraciones de accesibilidad).</p>
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
Plantilla en desy-html: src/templates/pages/_template.logged-out.njk
|
|
10
10
|
</p>
|
|
11
11
|
<p class="text-lg mt-0">
|
|
12
|
-
<a href="https://bitbucket.org/sdaragon/desy-html/src/master/docs/pagina-mapa-web.html" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta página<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="
|
|
12
|
+
<a href="https://bitbucket.org/sdaragon/desy-html/src/master/docs/pagina-mapa-web.html" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta página<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="presentation"><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>
|
|
13
13
|
</p>
|
|
14
14
|
<p class="text-lg">Colección de las secciones principales de este sitio web y sus subsecciones.</p>
|
|
15
15
|
</div>
|
|
@@ -9,6 +9,6 @@
|
|
|
9
9
|
Plantilla en desy-html: src/templates/pages/_template.with-header-advanced.njk
|
|
10
10
|
</p>
|
|
11
11
|
<p class="c-paragraph-base">
|
|
12
|
-
<a href="https://bitbucket.org/sdaragon/desy-html/src/master/src/templates/pages/_template.with-header-advanced.njk" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta plantilla<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="
|
|
12
|
+
<a href="https://bitbucket.org/sdaragon/desy-html/src/master/src/templates/pages/_template.with-header-advanced.njk" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta plantilla<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="presentation"><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>
|
|
13
13
|
</p>
|
|
14
14
|
{% endblock %}
|
|
@@ -91,7 +91,7 @@
|
|
|
91
91
|
Plantilla en desy-html: src/templates/pages/_template.edit-fixed-with-sticky-sidebar.njk
|
|
92
92
|
</p>
|
|
93
93
|
<p class="c-paragraph-base">
|
|
94
|
-
<a href="https://bitbucket.org/sdaragon/desy-html/src/master/src/templates/pages/_template.edit-fixed-with-sticky-sidebar.njk" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta plantilla<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="
|
|
94
|
+
<a href="https://bitbucket.org/sdaragon/desy-html/src/master/src/templates/pages/_template.edit-fixed-with-sticky-sidebar.njk" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta plantilla<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="presentation"><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>
|
|
95
95
|
</p>
|
|
96
96
|
<div class="pb-xl"></div>
|
|
97
97
|
<h3 id="descripcion" class="c-anchor-scroll-edit c-h3">Descripción</h3>
|
|
@@ -12,6 +12,6 @@
|
|
|
12
12
|
Plantilla en desy-html: src/templates/pages/_template.edit-fixed.njk
|
|
13
13
|
</p>
|
|
14
14
|
<p class="c-paragraph-base">
|
|
15
|
-
<a href="https://bitbucket.org/sdaragon/desy-html/src/master/src/templates/pages/_template.edit-fixed.njk" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta plantilla<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="
|
|
15
|
+
<a href="https://bitbucket.org/sdaragon/desy-html/src/master/src/templates/pages/_template.edit-fixed.njk" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta plantilla<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="presentation"><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>
|
|
16
16
|
</p>
|
|
17
17
|
{% endblock %}
|
|
@@ -10,6 +10,6 @@
|
|
|
10
10
|
Plantilla en desy-html: src/templates/pages/_template.logged-selector-fixed-headroom.njk
|
|
11
11
|
</p>
|
|
12
12
|
<p class="c-paragraph-base">
|
|
13
|
-
<a href="https://bitbucket.org/sdaragon/desy-html/src/master/src/templates/pages/_template.logged-selector-fixed-headroom.njk" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta plantilla<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="
|
|
13
|
+
<a href="https://bitbucket.org/sdaragon/desy-html/src/master/src/templates/pages/_template.logged-selector-fixed-headroom.njk" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta plantilla<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="presentation"><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>
|
|
14
14
|
</p>
|
|
15
15
|
{% endblock %}
|
|
@@ -10,6 +10,6 @@
|
|
|
10
10
|
Plantilla en desy-html: src/templates/pages/_template.logged-selector-fixed.njk
|
|
11
11
|
</p>
|
|
12
12
|
<p class="c-paragraph-base">
|
|
13
|
-
<a href="https://bitbucket.org/sdaragon/desy-html/src/master/src/templates/pages/_template.logged-selector-fixed.njk" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta plantilla<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="
|
|
13
|
+
<a href="https://bitbucket.org/sdaragon/desy-html/src/master/src/templates/pages/_template.logged-selector-fixed.njk" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta plantilla<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="presentation"><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>
|
|
14
14
|
</p>
|
|
15
15
|
{% endblock %}
|
|
@@ -92,7 +92,7 @@
|
|
|
92
92
|
Plantilla en desy-html: src/templates/pages/_template.logged-selector-with-sidebar.njk
|
|
93
93
|
</p>
|
|
94
94
|
<p class="c-paragraph-base">
|
|
95
|
-
<a href="https://bitbucket.org/sdaragon/desy-html/src/master/src/templates/pages/_template.logged-selector-with-sidebar.njk" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta plantilla<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="
|
|
95
|
+
<a href="https://bitbucket.org/sdaragon/desy-html/src/master/src/templates/pages/_template.logged-selector-with-sidebar.njk" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta plantilla<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="presentation"><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>
|
|
96
96
|
</p>
|
|
97
97
|
{% endblock %}
|
|
98
98
|
|
|
@@ -11,6 +11,6 @@
|
|
|
11
11
|
Plantilla en desy-html: src/templates/pages/_template.logged-selector-subheader.njk
|
|
12
12
|
</p>
|
|
13
13
|
<p class="c-paragraph-base">
|
|
14
|
-
<a href="https://bitbucket.org/sdaragon/desy-html/src/master/src/templates/pages/_template.logged-selector-subheader.njk" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta plantilla<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="
|
|
14
|
+
<a href="https://bitbucket.org/sdaragon/desy-html/src/master/src/templates/pages/_template.logged-selector-subheader.njk" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta plantilla<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="presentation"><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>
|
|
15
15
|
</p>
|
|
16
16
|
{% endblock %}
|
|
@@ -9,6 +9,6 @@
|
|
|
9
9
|
Plantilla en desy-html: src/templates/pages/_template.logged-selector.njk
|
|
10
10
|
</p>
|
|
11
11
|
<p class="c-paragraph-base">
|
|
12
|
-
<a href="https://bitbucket.org/sdaragon/desy-html/src/master/src/templates/pages/_template.logged-selector.njk" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta plantilla<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="
|
|
12
|
+
<a href="https://bitbucket.org/sdaragon/desy-html/src/master/src/templates/pages/_template.logged-selector.njk" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta plantilla<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="presentation"><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>
|
|
13
13
|
</p>
|
|
14
14
|
{% endblock %}
|
|
@@ -9,6 +9,6 @@
|
|
|
9
9
|
Plantilla en desy-html: src/templates/pages/_template.logged.njk
|
|
10
10
|
</p>
|
|
11
11
|
<p class="c-paragraph-base">
|
|
12
|
-
<a href="https://bitbucket.org/sdaragon/desy-html/src/master/src/templates/pages/_template.logged.njk" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta plantilla<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="
|
|
12
|
+
<a href="https://bitbucket.org/sdaragon/desy-html/src/master/src/templates/pages/_template.logged.njk" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta plantilla<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="presentation"><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>
|
|
13
13
|
</p>
|
|
14
14
|
{% endblock %}
|
|
@@ -9,6 +9,6 @@
|
|
|
9
9
|
Plantilla en desy-html: src/templates/pages/_template.logged-out.njk
|
|
10
10
|
</p>
|
|
11
11
|
<p class="c-paragraph-base">
|
|
12
|
-
<a href="https://bitbucket.org/sdaragon/desy-html/src/master/src/templates/pages/_template.logged-out.njk" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta plantilla<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="
|
|
12
|
+
<a href="https://bitbucket.org/sdaragon/desy-html/src/master/src/templates/pages/_template.logged-out.njk" class="c-link" target="_blank" title="Se abre en ventana nueva">Ver código Nunjucks de esta plantilla<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="presentation"><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>
|
|
13
13
|
</p>
|
|
14
14
|
{% endblock %}
|
package/package.json
CHANGED
|
@@ -34,6 +34,7 @@ export function MenuNavigation(aria) {
|
|
|
34
34
|
if(element.getAttribute("aria-current") === "page"){
|
|
35
35
|
const getElement = element.parentElement.parentElement.parentElement.parentElement.querySelector('button');
|
|
36
36
|
getElement.classList.add('c-menu-navigation__button--primary', 'c-menu-navigation__button--has-selection');
|
|
37
|
+
getElement.setAttribute('aria-current', 'true');
|
|
37
38
|
getElement.firstChild.innerHTML = `<strong class="font-bold">${getElement.textContent}</strong>`;
|
|
38
39
|
element.innerHTML = `<strong class="font-bold">${element.textContent}</strong>`;
|
|
39
40
|
}
|
|
@@ -95,6 +96,7 @@ export function MenuNavigation(aria) {
|
|
|
95
96
|
} else {
|
|
96
97
|
const getElementParent = link.parentElement.parentElement.parentElement.parentElement.querySelector('button');
|
|
97
98
|
getElementParent.classList.remove('c-menu-navigation__button--primary', 'c-menu-navigation__button--has-selection');
|
|
99
|
+
getElementParent.removeAttribute('aria-current');
|
|
98
100
|
getElementParent.firstChild.innerHTML = `${getElementParent.textContent}`;
|
|
99
101
|
link.removeAttribute('aria-current');
|
|
100
102
|
link.innerHTML = `${link.textContent}`;
|
|
@@ -104,6 +106,7 @@ export function MenuNavigation(aria) {
|
|
|
104
106
|
if(link.getAttribute("aria-current") === "page"){
|
|
105
107
|
const getElementParent = link.parentElement.parentElement.parentElement.parentElement.querySelector('button');
|
|
106
108
|
getElementParent.classList.add('c-menu-navigation__button--primary', 'c-menu-navigation__button--has-selection');
|
|
109
|
+
getElementParent.setAttribute('aria-current', 'true');
|
|
107
110
|
getElementParent.firstChild.innerHTML = `<strong class="font-bold">${getElementParent.textContent}</strong>`;
|
|
108
111
|
}
|
|
109
112
|
});
|
|
@@ -330,4 +333,4 @@ export function MenuNavigation(aria) {
|
|
|
330
333
|
},
|
|
331
334
|
false
|
|
332
335
|
);
|
|
333
|
-
}
|
|
336
|
+
}
|
|
@@ -87,15 +87,61 @@ export function MenubarAction(aria) {
|
|
|
87
87
|
// Use populated menuitems array to initialize firstItem and lastItem.
|
|
88
88
|
numItems = this.menubarItems.length;
|
|
89
89
|
if (numItems > 0) {
|
|
90
|
-
|
|
91
|
-
this.
|
|
90
|
+
// Find the first enabled item
|
|
91
|
+
this.firstItem = this.findEnabledItem(0, 1);
|
|
92
|
+
// Find the last enabled item
|
|
93
|
+
this.lastItem = this.findEnabledItem(numItems - 1, -1);
|
|
92
94
|
}
|
|
93
|
-
|
|
95
|
+
|
|
96
|
+
// Set initial tabindex on the first enabled item
|
|
97
|
+
if (this.firstItem) {
|
|
98
|
+
this.firstItem.domNode.tabIndex = 0;
|
|
99
|
+
}
|
|
100
|
+
};
|
|
101
|
+
|
|
102
|
+
/*
|
|
103
|
+
* @method MenubarAction.prototype.isItemDisabled
|
|
104
|
+
*
|
|
105
|
+
* @desc
|
|
106
|
+
* Check if a menubar item is disabled
|
|
107
|
+
*/
|
|
108
|
+
aria.MenubarAction.prototype.isItemDisabled = function (item) {
|
|
109
|
+
if (!item || !item.domNode) return true;
|
|
110
|
+
return item.domNode.getAttribute('aria-disabled') === 'true' ||
|
|
111
|
+
item.domNode.classList.contains('c-menubar__button--disabled');
|
|
112
|
+
};
|
|
113
|
+
|
|
114
|
+
/*
|
|
115
|
+
* @method MenubarAction.prototype.findEnabledItem
|
|
116
|
+
*
|
|
117
|
+
* @desc
|
|
118
|
+
* Find the next or previous enabled item from the starting index
|
|
119
|
+
*/
|
|
120
|
+
aria.MenubarAction.prototype.findEnabledItem = function (startIndex, direction) {
|
|
121
|
+
var index = startIndex;
|
|
122
|
+
var numItems = this.menubarItems.length;
|
|
123
|
+
|
|
124
|
+
// Loop through items until we find an enabled one or complete a full cycle
|
|
125
|
+
for (var i = 0; i < numItems; i++) {
|
|
126
|
+
if (!this.isItemDisabled(this.menubarItems[index])) {
|
|
127
|
+
return this.menubarItems[index];
|
|
128
|
+
}
|
|
129
|
+
// Move to the next/previous index with wrapping
|
|
130
|
+
index = (index + direction + numItems) % numItems;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
// If no enabled items found, return null
|
|
134
|
+
return null;
|
|
94
135
|
};
|
|
95
136
|
|
|
96
137
|
/* FOCUS MANAGEMENT METHODS */
|
|
97
138
|
|
|
98
139
|
aria.MenubarAction.prototype.setFocusToItem = function (newItem, hover) {
|
|
140
|
+
// If the item is disabled, do nothing
|
|
141
|
+
if (this.isItemDisabled(newItem)) {
|
|
142
|
+
return;
|
|
143
|
+
}
|
|
144
|
+
|
|
99
145
|
var isOpen = false;
|
|
100
146
|
var hasFocus = this.domNode.contains(document.activeElement);
|
|
101
147
|
for (var i = 0; i < this.menubarItems.length; i++) {
|
|
@@ -120,35 +166,33 @@ export function MenubarAction(aria) {
|
|
|
120
166
|
aria.MenubarAction.prototype.setFocusToFirstItem = function () {
|
|
121
167
|
this.setFocusToItem(this.firstItem);
|
|
122
168
|
};
|
|
169
|
+
|
|
123
170
|
aria.MenubarAction.prototype.setFocusToLastItem = function () {
|
|
124
171
|
this.setFocusToItem(this.lastItem);
|
|
125
172
|
};
|
|
126
173
|
|
|
127
174
|
aria.MenubarAction.prototype.setFocusToPreviousItem = function (currentItem) {
|
|
128
|
-
var
|
|
175
|
+
var index = this.menubarItems.indexOf(currentItem);
|
|
176
|
+
var prevIndex = (index - 1 + this.menubarItems.length) % this.menubarItems.length;
|
|
129
177
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
}
|
|
133
|
-
else {
|
|
134
|
-
index = this.menubarItems.indexOf(currentItem);
|
|
135
|
-
newItem = this.menubarItems[ index - 1 ];
|
|
136
|
-
}
|
|
178
|
+
// Find the previous enabled item
|
|
179
|
+
var newItem = this.findEnabledItem(prevIndex, -1);
|
|
137
180
|
|
|
138
|
-
|
|
181
|
+
if (newItem) {
|
|
182
|
+
this.setFocusToItem(newItem);
|
|
183
|
+
}
|
|
139
184
|
};
|
|
140
185
|
|
|
141
186
|
aria.MenubarAction.prototype.setFocusToNextItem = function (currentItem) {
|
|
142
|
-
var
|
|
187
|
+
var index = this.menubarItems.indexOf(currentItem);
|
|
188
|
+
var nextIndex = (index + 1) % this.menubarItems.length;
|
|
143
189
|
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
newItem = this.menubarItems[ index + 1 ];
|
|
190
|
+
// Find the next enabled item
|
|
191
|
+
var newItem = this.findEnabledItem(nextIndex, 1);
|
|
192
|
+
|
|
193
|
+
if (newItem) {
|
|
194
|
+
this.setFocusToItem(newItem);
|
|
150
195
|
}
|
|
151
|
-
this.setFocusToItem(newItem);
|
|
152
196
|
};
|
|
153
197
|
|
|
154
198
|
aria.MenubarAction.prototype.setFocusByFirstCharacter = function (currentItem, char) {
|
|
@@ -170,10 +214,42 @@ export function MenubarAction(aria) {
|
|
|
170
214
|
|
|
171
215
|
// If match was found...
|
|
172
216
|
if (index > -1) {
|
|
173
|
-
|
|
174
|
-
this.menubarItems[index]
|
|
175
|
-
|
|
217
|
+
// Check if the item is disabled
|
|
218
|
+
if (!this.isItemDisabled(this.menubarItems[index])) {
|
|
219
|
+
this.menubarItems[index].domNode.focus();
|
|
220
|
+
this.menubarItems[index].domNode.tabIndex = 0;
|
|
221
|
+
currentItem.tabIndex = -1;
|
|
222
|
+
} else {
|
|
223
|
+
// Find the next enabled item that starts with the same character
|
|
224
|
+
var nextEnabledIndex = this.findNextEnabledItemWithChar(index, char);
|
|
225
|
+
if (nextEnabledIndex !== -1) {
|
|
226
|
+
this.menubarItems[nextEnabledIndex].domNode.focus();
|
|
227
|
+
this.menubarItems[nextEnabledIndex].domNode.tabIndex = 0;
|
|
228
|
+
currentItem.tabIndex = -1;
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
};
|
|
233
|
+
|
|
234
|
+
/*
|
|
235
|
+
* @method MenubarAction.prototype.findNextEnabledItemWithChar
|
|
236
|
+
*
|
|
237
|
+
* @desc
|
|
238
|
+
* Find the next enabled item that starts with the given character
|
|
239
|
+
*/
|
|
240
|
+
aria.MenubarAction.prototype.findNextEnabledItemWithChar = function (startIndex, char) {
|
|
241
|
+
var numItems = this.menubarItems.length;
|
|
242
|
+
var index = startIndex;
|
|
243
|
+
|
|
244
|
+
// Loop through the menu items
|
|
245
|
+
for (var i = 0; i < numItems; i++) {
|
|
246
|
+
index = (index + 1) % numItems;
|
|
247
|
+
if (this.firstChars[index] === char && !this.isItemDisabled(this.menubarItems[index])) {
|
|
248
|
+
return index;
|
|
249
|
+
}
|
|
176
250
|
}
|
|
251
|
+
|
|
252
|
+
return -1;
|
|
177
253
|
};
|
|
178
254
|
|
|
179
255
|
aria.MenubarAction.prototype.getIndexFirstChars = function (startIndex, char) {
|
|
@@ -252,5 +328,4 @@ export function MenubarAction(aria) {
|
|
|
252
328
|
}
|
|
253
329
|
};
|
|
254
330
|
}());
|
|
255
|
-
}
|
|
256
|
-
|
|
331
|
+
}
|
package/src/js/aria/listbox.js
CHANGED
package/src/js/aria/tabs.js
CHANGED
|
@@ -280,7 +280,6 @@ export function tabs(aria) {
|
|
|
280
280
|
function addActiveClass(element) {
|
|
281
281
|
//Add active class to current tab
|
|
282
282
|
element.classList.add("c-tabs__link--is-active");
|
|
283
|
-
element.setAttribute('role', 'tab');
|
|
284
283
|
if(element.querySelector('strong') === null) {
|
|
285
284
|
element.innerHTML = `<strong class="font-bold">${element.innerHTML}</strong>` ;
|
|
286
285
|
}
|
|
@@ -288,7 +287,6 @@ export function tabs(aria) {
|
|
|
288
287
|
|
|
289
288
|
function removeActiveClass(element) {
|
|
290
289
|
element.classList.remove("c-tabs__link--is-active");
|
|
291
|
-
element.removeAttribute('role');
|
|
292
290
|
if(element.querySelector('strong')) {
|
|
293
291
|
const replaceStrong = element.innerHTML.replace('<strong class="font-bold">', '').replace('<strong/>', '');
|
|
294
292
|
element.innerHTML = `${replaceStrong}`;
|
package/src/js/desy-html.js
CHANGED
|
@@ -18,7 +18,6 @@ import { Notification } from './aria/notification.js';
|
|
|
18
18
|
import { RadioButton } from './aria/radioButton.js';
|
|
19
19
|
import { CheckBox } from './aria/checkBoxes.js';
|
|
20
20
|
import { MenuVertical } from './aria/MenuVertical.js';
|
|
21
|
-
import { HeaderNavigation } from './aria/HeaderNavigation.js';
|
|
22
21
|
import { MenuHorizontal } from './aria/MenuHorizontal.js';
|
|
23
22
|
import { MenuNavigation } from './aria/MenuNavigation.js';
|
|
24
23
|
import { Nav } from './aria/Nav.js';
|
|
@@ -74,7 +73,8 @@ export function dropdownComponent(aria) {
|
|
|
74
73
|
if (
|
|
75
74
|
instance.props.hideOnPopperBlur &&
|
|
76
75
|
event.relatedTarget &&
|
|
77
|
-
!instance.popper.contains(event.relatedTarget)
|
|
76
|
+
!instance.popper.contains(event.relatedTarget) &&
|
|
77
|
+
event.relatedTarget !== instance.reference
|
|
78
78
|
) {
|
|
79
79
|
instance.hide();
|
|
80
80
|
}
|
|
@@ -440,14 +440,6 @@ export function MenuNavigationComponent(aria) {
|
|
|
440
440
|
});
|
|
441
441
|
}
|
|
442
442
|
|
|
443
|
-
export function HeaderNavigationComponent(aria) {
|
|
444
|
-
HeaderNavigation(aria);
|
|
445
|
-
const modules = document.querySelectorAll('[data-module="c-header-navigation"]');
|
|
446
|
-
[...modules].forEach((module) => {
|
|
447
|
-
const headerNavigation = new aria.HeaderNavigation(module);
|
|
448
|
-
headerNavigation.init(null);
|
|
449
|
-
});
|
|
450
|
-
}
|
|
451
443
|
|
|
452
444
|
export function NavComponent(aria) {
|
|
453
445
|
Nav(aria);
|
|
@@ -569,4 +561,4 @@ export function DatepickerComponent(aria) {
|
|
|
569
561
|
}
|
|
570
562
|
}
|
|
571
563
|
});
|
|
572
|
-
}
|
|
564
|
+
}
|
package/src/js/index.js
CHANGED
|
@@ -23,7 +23,6 @@ import {
|
|
|
23
23
|
MenuVerticalComponent,
|
|
24
24
|
MenuHorizontalComponent,
|
|
25
25
|
MenuNavigationComponent,
|
|
26
|
-
HeaderNavigationComponent,
|
|
27
26
|
NavComponent,
|
|
28
27
|
DatepickerComponent
|
|
29
28
|
} from './desy-html.js';
|
|
@@ -49,7 +48,6 @@ checkBoxComponent(aria);
|
|
|
49
48
|
MenuVerticalComponent(aria);
|
|
50
49
|
MenuHorizontalComponent(aria);
|
|
51
50
|
MenuNavigationComponent(aria);
|
|
52
|
-
HeaderNavigationComponent(aria);
|
|
53
51
|
NavComponent(aria);
|
|
54
52
|
DatepickerComponent(aria);
|
|
55
53
|
|