{"issue":{"state":"open","created_at":"2011-11-29T21:13:58Z","updated_at":"2011-11-29T21:14:12Z","user":{"gravatar_id":"b4420dc33f804875eefac3035380c61e","id":1219952,"url":"https://api.github.com/users/NinaG","avatar_url":"https://secure.gravatar.com/avatar/b4420dc33f804875eefac3035380c61e?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png","login":"NinaG"},"comments":13,"body":"Ich empfehle die nachfolgende Verbesserung des JavaScript-Codes vom Accordion. Dadurch wird das Accordion tastaturbedienbar und erhält auch abhängig vom Status unterschiedliche ergänzende CSS-Klassen (ermöglicht Einbindung von passenden Icons um die Usability des Accordions visuell zu unterstützen).\n\nDie Lösung basiert nur auf der Anpassung des JS-Codes im Accordion-Template und benötigt keine HTML-Anpassung.\n\n```\n<script type=\"text/javascript\">\n<!--//--><\n\n![]([CDATA[//><)--\nwindow.addEvent('domready', function() {\n  new Accordion($$('div.toggler'), $$('div.accordion'), {\n    alwaysHide: true,\n    opacity: false,\n    display: -1, // -1, alle Akkordions sind am Anfang eingeklappt\n    onActive: function(toggler,elem) {\n                elem.setProperty('aria-hidden', 'false');\n\t\ttoggler.addClass('active');\n                toggler.getNext().setStyle('visibility', 'visible').fade('in');\n                toggler.setProperty('aria-expanded', 'true');\n                return false;\n    },\n    onBackground: function(toggler,elem) {\n                elem.setProperty('aria-hidden', 'true');\n\t\ttoggler.removeClass('active');\n                toggler.getNext().fade('out').setStyle('visibility', 'hidden');\n                toggler.setProperty('aria-expanded', 'false');\n                return false;\n    }\n  });\n  $$('div.toggler>*').each(function(elem) {\n\telem.setProperty('tabindex', '0');\n\telem.addEvents({\n    \t'keypress': function(event) {\n\t\t\tif (event.code==13) {\n\t        \tthis.getParent().fireEvent('click');\n\t\t\t}\n\t\t},\n        'focus': function(){\n\t\t\tthis.getParent().addClass('hover');\n\t\t},\n\t\t'blur': function(){\n\t\t\tthis.getParent().removeClass('hover');\n\t\t}\n\t});\n  });\n  $$('div.toggler').each(function(elem){\n\telem.addEvents({\n\t\t'mouseenter': function(){\n\t\t\telem.addClass('hover');\n\t\t},\n\t\t'mouseleave': function(){\n\t\t\telem.removeClass('hover');\n\t\t}\n\t});\n  });\n  $$('div.ce_accordion').each(function(elem){\n\telem.setProperty('role', 'tablist');\n  });\n  $$('div.toggler').each(function(elem){\n\telem.setProperty('role', 'tab');\n  });\n  $$('div.accordion').each(function(elem){\n\telem.setProperty('role', 'tabpanel');\n  });\n});\n//--><!]]>\n</script>\n```\n\nDie Angabe mit display -1 könnte man eventuell auskommentiert reinstellen. So wäre es gleich eine Hilfestellung für alle die wollen, dass anfangs alle Accordions eingeklappt sind.\n\nWenn diese Verbesserung in den Core kommt, schreibe ich dazu gerne auch einen Teambeitrag in dem ich erläutere wie man das Accordion noch barrierefreier bekommt (Nutzung von Überschriften-HTML-Elementen in Toggler) und stelle auch gerne ein Stylesheet-Beispiel zur idealen Nutzung vor (**hint** Contao News **hint**)\n\n[Download the attachments](http://www.contao.org/tl_files/tickets/3264.zip \"Download the attachments of this ticket\")\nRelated issues: #3476\n\n--- _Originally created on July 14th, 2011, at 11:12am (ID 3264)_","assignee":{"gravatar_id":"87d2e5aefadcb310f9155df28c2b3582","id":1192057,"url":"https://api.github.com/users/leofeyer","avatar_url":"https://secure.gravatar.com/avatar/87d2e5aefadcb310f9155df28c2b3582?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png","login":"leofeyer"},"number":3264,"id":2393202,"labels":[{"name":"Feature","color":"4183c4","url":"https://api.github.com/repos/contao/import/labels/Feature"},{"name":"frontend","color":"e6e6e6","url":"https://api.github.com/repos/contao/import/labels/frontend"}],"pull_request":{"patch_url":null,"html_url":null,"diff_url":null},"title":"Verbesserung JS-Code Accordion (Barrierefreiheit/Usability)","closed_at":null,"html_url":"https://github.com/contao/import/issues/3264","url":"https://api.github.com/repos/contao/import/issues/3264","milestone":{"state":"open","created_at":"2011-11-29T15:29:54Z","closed_issues":206,"due_on":null,"creator":{"gravatar_id":"87d2e5aefadcb310f9155df28c2b3582","id":1192057,"url":"https://api.github.com/users/leofeyer","avatar_url":"https://secure.gravatar.com/avatar/87d2e5aefadcb310f9155df28c2b3582?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png","login":"leofeyer"},"number":32,"title":"2.10.0","description":"Contao 2.10.0 (minor release)","url":"https://api.github.com/repos/contao/import/milestones/32","open_issues":1}},"action":"created","comment":{"created_at":"2011-11-29T21:14:10Z","updated_at":"2011-11-29T21:14:10Z","user":{"gravatar_id":"b4420dc33f804875eefac3035380c61e","id":1219952,"url":"https://api.github.com/users/NinaG","avatar_url":"https://secure.gravatar.com/avatar/b4420dc33f804875eefac3035380c61e?d=https://a248.e.akamai.net/assets.github.com%2Fimages%2Fgravatars%2Fgravatar-140.png","login":"NinaG"},"body":"Ich bin mir der Sache schon bewusst - danke auch für den Hinweis darauf - und diskutiere das gerade nochmal mit den Testern. :)\n\n--- _Originally created on July 22nd, 2011, at 11:59am_","id":2948791,"url":"https://api.github.com/repos/contao/import/issues/comments/2948791"}}