Anpassung für jQuery-Accordion um es barrierefrei zu machen

[NinaG]

Hier ist der Code um das jQuery-Accordion barrierefrei zu machen. Kannst du das bitte noch in die 3.0 aufnehmen? Es ist nur die kleine Änderung im Template, sonst wird da nix angefasst, so dass das keinerlei negative Auswirkungen haben sollte.

<script>
(function($) {
$(document).ready(function() {
    $(document).accordion({
        header:'div.toggler'
    });

    var setActive = function(togglerElement) {
        var togglerElements = $('div.toggler');
        togglerElements.removeClass('active');
        togglerElement.addClass('active');
        togglerElements.next('div.accordion').attr('aria-hidden',  'true');
        togglerElement.next('div.accordion').attr('aria-hidden', 'false');
    }

    $('div.toggler').focus(function(event) {
        $('div.toggler').attr('tabindex', 0);
        $(this).attr('tabindex', -1);
    }).blur(function() {
        $(this).attr('tabindex', 0);
    }).click(function() {
        setActive($(this));
    }).keypress(function(event) {
        if (event.keyCode == 13) {
            setActive($(this));
        }
    });
});
})(jQuery);
</script>

[NinaG]

Nach einigen Tests habe ich es noch ein klein wenig modifiziert.
Neu dazu kam die Angabe für:

autoHeight: false

Verhindert, dass die Accordionfelder sich in der Höhe automatisch am höchsten Eintrag ausrichten. Ohne diesen Eintrag kann es zu extremen Fehldarstellungen kommen, wenn der Inhalt eines Accordions bedeutend länger ist, als der der anderen. Habe es mit dieser Ergänzung getestet, es funktioniert jetzt wie die MooTools-Variante.

<script src="<?php echo TL_ASSETS_URL; ?>assets/jquery/ui/<?php echo JQUERY_UI; ?>/jquery-ui.min.js"></script>
<script>
(function($) {
$(document).ready(function() {
    $(document).accordion({
        header:'div.toggler',
        autoHeight: false
    });

    var setActive = function(togglerElement) {
        var togglerElements = $('div.toggler');
        togglerElements.removeClass('active');
        togglerElement.addClass('active');
        togglerElements.next('div.accordion').attr('aria-hidden',  'true');
        togglerElement.next('div.accordion').attr('aria-hidden', 'false');
    }

    $('div.toggler').focus(function(event) {
        $('div.toggler').attr('tabindex', 0);
        $(this).attr('tabindex', -1);
    }).blur(function() {
        $(this).attr('tabindex', 0);
    }).click(function() {
        setActive($(this));
    }).keypress(function(event) {
        if (event.keyCode == 13) {
            setActive($(this));
        }
    });
});
})(jQuery);
</script>

[NinaG]

Nur zur Info, falls mal jemand möchte, dass alle Accordions am Anfang geschlosssen sind:

autoHeight: false

ersetzen mit:

autoHeight: false,
active: false

[NinaG]

Ich empfehle noch die Ergänzung mit

collapsible: true

Dadurch kann man Accordion-Felder auch wieder einzeln schließen, wenn man will ohne gleichzeitig ein anderes zu öffnen. Damit hat man dann auch hier den gleichen Effekt wie beim MooTools-Accordion.

[leofeyer]

Hinzugefügt in fbdc9f9.