Un pequeño script (menos de 1,6 KB comprimido y gzipped) con cero dependencias para crear componentes de pestañas de acordeón accesibles.Basado en el componente de pestañas accesibles por @stowball.
El componente es un acordeón en las pantallas más pequeñas y cambia a una vista de pestañas en los viewports más grandes.
Demo
Véalo en acción aquí.
Instalación
Descargue o clone
Descargue la última versión o git clone https://github.com/matthiasott/a11y-accordion-tabs.git.
npm
npm install a11y-accordion-tabs --save-dev
Uso
Primero, incluye https://github.com/matthiasott/a11y-accordion-tabs.js (o la versión minificada) en tu documento:
<script src="https://github.com/matthiasott/a11y-accordion-tabs.js" async></script>
Puedes escribir tus propios estilos desde cero o utilizar el archivo CSS de la carpeta docs como punto de partida e incluirlo también en tu documento.
<link rel="stylesheet" href="styles.css" />
La estructura HTML básica para el componente de pestañas de acordeón es la siguiente:
Para una versión avanzada eche un vistazo a la demo.
Por defecto, el script busca todos los elementos con la clase js-tabs y los convierte en un componente de pestañas de acordeón automáticamente.Pero también puede instanciar el componente en su JavaScript así:
var tabs = document.getElementById("myTabs");new AccordionTabs(tabs);
Opciones
a11y-accordion-tabs viene con algunas opciones para hacer el componente más flexible. Todas las opciones pueden establecerse a través de un atributo data- o una propiedad JS en el segundo argumento del constructor:
new AccordionTabs(tabs, { breakpoint: 800, tabsAllowed: true, selectedTab: 2, startCollapsed: false});
| tabsAllowed | Boolean | true | Si tabsAllowed se establece en false, el componente siempre se mantiene como un acordeón || punto de ruptura | Número | 640 | Define el punto de ruptura de ancho mínimo donde el acordeón se convierte en un componente de pestañas. Asegúrese de ajustar también el CSS en consecuencia. || selectedTab | Number | 0 | Establece la pestaña que se selecciona al inicio || startCollapsed | Boolean | false | Define si el acordeón debe colapsarse al inicio |
Compatibilidad
Las funciones del script son compatibles con todos los navegadores modernos, incluyendo IE10+.Si necesita soporte para IE9, es posible que desee utilizar este polyfill para element.classList.
Changelog
0.5.0
- Nueva opción
startCollapsed: Define si el acordeón debe colapsarse al iniciar
0.4.1
- Corregir la exportación del módulo CJS- Actualizar dependencias para corregir vulnerabilidades
0.4.0
- Los atributos de datos ahora siguen las convenciones de nomenclatura del W3C (no hay letras mayúsculas)- Mejora de los roles de aria por defecto en el código HTML de la demo- Símbolos más/menos en lugar de chevrones en el código de la demo
0.3.2
- Actualización de la documentación
0.3.1
- Limpieza del código HTML de ejemplo
0.3.0
- Añadir soporte para múltiples instancias
- Actualización del README con documentación básica