# Pestañas. DESY. Sistema de diseño del Gobierno de Aragón.

## Componentes Índice de páginas

Componentes

# Pestañas

Mostrar y ocultar

Menú horizontal que permite visualizar distintos paneles con información, permaneciendo en la misma página.

## Índice de apartados de esta página

-   [Anatomía](#anatoma)
-   [Accesibilidad](#accesibilidad)

## Anatomía [#](#anatoma)

## Contenido

Pestaña 1 Pestaña 2 Pestaña 3 Pestaña desactivada

### Pestaña 1

**Panel 1**. Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio?

### Pestaña 2

**Panel 2**. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

### Pestaña 3

**Panel 3**. Provident animi dolor veniam, et quas consequuntur. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

### Pestaña desactivada

**Panel 4**. Reiciendis eius in, nostrum porro? Quaerat, temporibus, optio? Lorem ipsum dolor sit, amet, consectetur adipisicing elit. Est quis exercitationem, nesciunt nulla quisquam temporibus. Provident animi dolor veniam, et quas consequuntur.

-   Pestaña: Contienen el título del panel correspondiente y en móviles se apilan verticalmente. Pueden estar desactivadas cuando el panel no se encuentre disponible. Opcionalmente también pueden contener iconos que apoyen a la etiqueta de título. Cuando hay un alto número de ellas es posible incluir scroll horizontal.
-   Panel: Marco con el contenido relativo a la pestaña.

## Accesibilidad [#](#accesibilidad)

### Cómo funciona [#](#cmo-funciona)

Se compone de varios contenedores:

-   Los botones se encuentran en un contenedor con `role=tablist` y un `aria-label` que describe el tipo de información.
    -   Cada `<button>` tiene un `aria-selected`, `aria-controls` que apunta al contenido del panel, `id` único y `role=tab`.
    -   Cuando un botón toma el foco, la persona puede desplazarse entre ellas con las flechas del teclado para mostrar los paneles y tabular para acceder al contenido.
-   El panel de cada pestaña es tiene su propio contenedor con `role=tabpanel`, `id` único, un `aria-labelledby` que apunta al botón que muestra dicho panel y un `tabindex=0` que permite tomar el foco.

Basado en el [patrón tabs de W3C](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/ "Se abre en ventana nueva")

Qué tener en cuenta

Qué usar

Dónde

Función

`idPrefix`

Parámetro Nunjucks dentro del componente

Permite crear `id` únicos para los items del listado

`id`

Parámetro Nunjucks dentro del item

Permite crear un `id` concreto para el item.

`tablistAriaLabel`

Parámetro Nunjucks dentro del componente

Crea un `aria-label` para el componente que describa el tipo de información que contiene.

`title` y `headingLevel`

Parámetros Nunjucks dentro del componente

Establece el texto y nivel del encabezado.

`aria-label`

Dentro del parámetro Nunjucks `attributes`

Describe el tipo de navegación.