Un petit script (moins de 1,6 Ko compressé et gzippé) avec zéro dépendance pour créer des composants accessibles d’onglets en accordéon.Basé sur le composant accessible d’onglets par @stowball.
Le composant est un accordéon sur les petits écrans et passe à une vue d’onglet sur les plus grands viewports.
Démo
Voyez-le en action ici.
Installation
Télécharger ou cloner
Télécharger la dernière version ou git clone https://github.com/matthiasott/a11y-accordion-tabs.git.
npm
npm install a11y-accordion-tabs --save-dev
Utilisation
Premièrement, incluez https://github.com/matthiasott/a11y-accordion-tabs.js (ou la version minifiée) dans votre document:
<script src="https://github.com/matthiasott/a11y-accordion-tabs.js" async></script>
Vous pouvez écrire vos propres styles à partir de zéro ou utiliser le fichier CSS dans le dossier docs comme point de départ et l’inclure dans votre document, aussi.
<link rel="stylesheet" href="styles.css" />
La structure HTML de base pour le composant des onglets en accordéon se lit comme suit :
Pour une version avancée, jetez un coup d’œil à la démo.
Par défaut, le script recherche tous les éléments avec la classe js-tabs et les transforme en un composant d’onglets en accordéon automatiquement.Mais vous pouvez également instancier le composant dans votre JavaScript comme ceci:
var tabs = document.getElementById("myTabs");new AccordionTabs(tabs);
Options
a11y-accordion-tabs est livré avec quelques options pour rendre le composant plus flexible. Toutes les options peuvent être définies via un attribut data- ou une propriété JS sur le deuxième argument du constructeur :
new AccordionTabs(tabs, { breakpoint: 800, tabsAllowed: true, selectedTab: 2, startCollapsed: false});
| tabsAllowed | Boolean | true | Si tabsAllowed est défini à false, le composant reste toujours un accordéon || breakpoint | Number | 640 | Définit le point de rupture de largeur minimale où l’accordéon devient un composant tabs. Veillez également à ajuster le CSS en conséquence. || selectedTab | Number | 0 | Définit l’onglet qui est sélectionné lors de l’init || startCollapsed | Boolean | false | Définit si l’accordéon doit être replié au démarrage |
Compatibilité
Les fonctions du script sont supportées par tous les navigateurs modernes, y compris IE10+.Si vous avez besoin du support pour IE9, vous pourriez vouloir utiliser ce polyfill pour element.classList.
Changelog
0.5.0
- Nouvelle option
startCollapsed: Définit si l’accordéon doit être replié au démarrage
0.4.1
- Correction de l’exportation du module CJS- Mise à jour des dépendances pour corriger les vulnérabilités
0.4.0
- Les attributs de données suivent désormais les conventions de nommage du W3C (pas de lettres majuscules)- Amélioration des aria-roles par défaut dans le code HTML de démonstration- Symboles plus / moins au lieu de chevrons dans le code de démonstration
0.3.2
- Mise à jour de la documentation
0.3.1
- Nettoyage du code HTML de démonstration
0.3.0
- Ajout du support pour les instances multiples
- Mise à jour du README avec la documentation de base
.