Ein kleines Skript (weniger als 1,6 KB komprimiert und gzipped) ohne Abhängigkeiten zur Erstellung von barrierefreien Akkordeon-Tab-Komponenten.
Basierend auf der barrierefreien Tabs-Komponente von @stowball.
Die Komponente ist ein Akkordeon auf kleineren Bildschirmen und wechselt zu einer Tab-Ansicht auf größeren Viewports.
Demo
Sieh es hier in Aktion.
Installation
Download oder Klon
Lade die neueste Version herunter oder git clone https://github.com/matthiasott/a11y-accordion-tabs.git.
npm
npm install a11y-accordion-tabs --save-dev
Verwendung
Binden Sie zunächst https://github.com/matthiasott/a11y-accordion-tabs.js (oder die reduzierte Version) in Ihr Dokument ein:
<script src="https://github.com/matthiasott/a11y-accordion-tabs.js" async></script>
Sie können Ihre eigenen Stile von Grund auf neu schreiben oder die CSS-Datei im docs-Ordner als Ausgangspunkt verwenden und sie ebenfalls in Ihr Dokument einbinden.
<link rel="stylesheet" href="styles.css" />
Die grundlegende HTML-Struktur für die Akkordeon-Registerkarten-Komponente lautet wie folgt:
Für eine fortgeschrittene Version schauen Sie sich die Demo an.
Standardmäßig sucht das Skript nach allen Elementen mit der Klasse js-tabs und verwandelt sie automatisch in eine Akkordeon-Tabs-Komponente, aber Sie können die Komponente auch wie folgt in Ihrem JavaScript instanziieren:
var tabs = document.getElementById("myTabs");new AccordionTabs(tabs);
Optionen
a11y-accordion-tabs kommt mit einigen Optionen, um die Komponente flexibler zu machen. Alle Optionen können entweder über ein data--Attribut oder eine JS-Eigenschaft am zweiten Argument des Konstruktors gesetzt werden:
new AccordionTabs(tabs, { breakpoint: 800, tabsAllowed: true, selectedTab: 2, startCollapsed: false});
| tabsAllowed | Boolean | true | Wenn tabsAllowed auf false gesetzt ist, bleibt die Komponente immer ein Akkordeon || breakpoint | Number | 640 | Definiert den Breakpoint der Mindestbreite, an dem das Akkordeon zu einer Tabs-Komponente wird. Stellen Sie sicher, dass Sie auch das CSS entsprechend anpassen. || selectedTab | Number | 0 | Legt den Tab fest, der beim Start ausgewählt wird || startCollapsed | Boolean | false | Legt fest, ob das Akkordeon beim Start eingeklappt werden soll |
Kompatibilität
Die Funktionen im Skript werden von allen modernen Browsern unterstützt, einschließlich IE10+.Wenn Sie Unterstützung für IE9 benötigen, sollten Sie dieses Polyfill für element.classList verwenden.
Changelog
0.5.0
- Neue Option
startCollapsed: Definiert, ob das Akkordeon beim Start eingeklappt werden soll
0.4.1
- Fix CJS module export- Update dependencies to fix vulnerabilities
0.4.0
- Datenattribute folgen jetzt den W3C-Namenskonventionen (keine Großbuchstaben)- Verbesserte Standard-Arie-Rollen im Demo-HTML-Code- Plus-/Minus-Symbole anstelle von Chevrons im Demo-Code
0.3.2
- Dokumentation aktualisieren
0.3.1
- Beispiel-HTML-Code aufräumen
0.3.0
- Unterstützung für mehrere Instanzen hinzufügen
- README mit grundlegender Dokumentation aktualisieren