Hier ein barrierefreies Accordion für Etch – den neuen Builder für WordPress
Ja, dieses Accordion wurde von Grund auf mit Blick auf die Barrierefreiheit entwickelt. Es folgt dem WAI-ARIA Accordion Design Pattern. Verwendet aria-expanded, aria-controls und aria-labelledby. Das hidden Attribut wird gesetzt, wenn der Inhalt geschlossen ist. Umfassende Tastaturnavigation ist implementiert.
Du kannst die folgenden Tasten verwenden:<ul><li><b>Tab:</b> Navigiert zwischen den Triggern und anderen Elementen auf der Seite.</li><li><b>Enter / Space:</b> Öffnet oder schließt das aktuell fokussierte Element.</li><li><b>Pfeil-Ab:</b> Bewegt den Fokus zum nächsten Trigger.</li><li><b>Pfeil-Auf:</b> Bewegt den Fokus zum vorherigen Trigger.</li><li><b>Home:</b> Bewegt den Fokus zum ersten Trigger.</li><li><b>End:</b> Bewegt den Fokus zum letzten Trigger.</li></ul>
Standardmäßig ist dieses Accordion so konfiguriert, dass nur ein Element gleichzeitig geöffnet sein kann (<code>type="single"</code>).</p><p>Du kannst jedoch das Attribut <code>data-accordion-type="multiple"</code> zum übergeordneten <code>.accordion</code>-Element hinzufügen, um mehrere Elemente gleichzeitig zu ermöglichen.
Hier ist der Code der benötigt wird:
{"type":"block","gutenbergBlock":{"blockName":"core/group","attrs":{"metadata":{"etchData":{"origin":"etch","script":{"code":"LyoqCiAqIEFjY29yZGlvbi1LbGFzc2UgZsO8ciBWYW5pbGxhIEpTIEFjY29yZGlvbnMuCiAqIFVudGVyc3TDvHR6dCBFaW56ZWwtIG9kZXIgTWVocmZhY2hhdXN3YWhsIHVuZCB1bWZhc3NlbmRlIEJhcnJpZXJlZnJlaWhlaXQuCiAqLwpjbGFzcyBBY2NvcmRpb24gewogICAgLyoqCiAgICAgKiBFcnN0ZWxsdCBlaW5lIEluc3RhbnogZGVyIEFjY29yZGlvbi1LbGFzc2UuCiAgICAgKiBAcGFyYW0ge0hUTUxFbGVtZW50fSBlbGVtZW50IERhcyBET00tRWxlbWVudCBkZXMgQWNjb3JkaW9ucyAoZGFzIEVsZW1lbnQgbWl0IGBkYXRhLWFjY29yZGlvbmApLgogICAgICogQHBhcmFtIHtzdHJpbmd9IFt0eXBlPSdzaW5nbGUnXSBEZXIgVHlwIGRlcyBBY2NvcmRpb25zOiAnc2luZ2xlJyAoc3RhbmRhcmQpIG9kZXIgJ211bHRpcGxlJy4KICAgICAqLwogICAgY29uc3RydWN0b3IoZWxlbWVudCwgdHlwZSA9ICdzaW5nbGUnKSB7CiAgICAgICAgdGhpcy5hY2NvcmRpb25FbGVtZW50ID0gZWxlbWVudDsKICAgICAgICAvLyBUeXAgYXVzIGRhdGEtQXR0cmlidXQgbGVzZW4sIHNvbnN0IGRlbiBTdGFuZGFyZHdlcnQgdmVyd2VuZGVuCiAgICAgICAgdGhpcy50eXBlID0gZWxlbWVudC5kYXRhc2V0LmFjY29yZGlvblR5cGUgfHwgdHlwZTsKICAgICAgICB0aGlzLml0ZW1zID0gQXJyYXkuZnJvbSh0aGlzLmFjY29yZGlvbkVsZW1lbnQucXVlcnlTZWxlY3RvckFsbCgnLmFjY29yZGlvbi1hbHBoYV9faXRlbScpKTsKICAgICAgICB0aGlzLnRyaWdnZXJzID0gW107IC8vIFdpcmQgaW4gaW5pdCgpIGdlZsO8bGx0CiAgICAgICAgdGhpcy5pbml0KCk7CiAgICB9CgogICAgLyoqCiAgICAgKiBJbml0aWFsaXNpZXJ0IGRhcyBBY2NvcmRpb24sIHNldHp0IEFSSUEtQXR0cmlidXRlIHVuZCBFdmVudC1MaXN0ZW5lci4KICAgICAqLwogICAgaW5pdCgpIHsKICAgICAgICB0aGlzLml0ZW1zLmZvckVhY2goaXRlbSA9PiB7CiAgICAgICAgICAgIGNvbnN0IHRyaWdnZXIgPSBpdGVtLnF1ZXJ5U2VsZWN0b3IoJy5hY2NvcmRpb24tYWxwaGFfX3RyaWdnZXInKTsKICAgICAgICAgICAgY29uc3QgY29udGVudCA9IGl0ZW0ucXVlcnlTZWxlY3RvcignLmFjY29yZGlvbi1hbHBoYV9fY29udGVudCcpOwoKICAgICAgICAgICAgaWYgKCF0cmlnZ2VyIHx8ICFjb250ZW50KSB7CiAgICAgICAgICAgICAgICBjb25zb2xlLndhcm4oIkFjY29yZGlvbiBpdGVtIG1pc3NpbmcgdHJpZ2dlciBvciBjb250ZW50OiIsIGl0ZW0pOwogICAgICAgICAgICAgICAgcmV0dXJuOwogICAgICAgICAgICB9CgogICAgICAgICAgICB0aGlzLnRyaWdnZXJzLnB1c2godHJpZ2dlcik7CgogICAgICAgICAgICBjb25zdCBpc0V4cGFuZGVkID0gdHJpZ2dlci5nZXRBdHRyaWJ1dGUoJ2FyaWEtZXhwYW5kZWQnKSA9PT0gJ3RydWUnOwoKICAgICAgICAgICAgLy8gSW5pdGlhbGVuIFp1c3RhbmQgZsO8ciBJbmhhbHQgdW5kIEFSSUEgZmVzdGxlZ2VuCiAgICAgICAgICAgIGlmIChpc0V4cGFuZGVkKSB7CiAgICAgICAgICAgICAgICAvLyBXZW5uIGluaXRpYWwgZ2XDtmZmbmV0LCBtdXNzIGRpZSBIw7ZoZSBnZXNldHp0IHdlcmRlbiB1bmQgaGlkZGVuPWZhbHNlCiAgICAgICAgICAgICAgICBjb250ZW50LnN0eWxlLm1heEhlaWdodCA9IGNvbnRlbnQucXVlcnlTZWxlY3RvcignLmFjY29yZGlvbi1hbHBoYV9fY29udGVudC1pbm5lcicpLnNjcm9sbEhlaWdodCArICdweCc7CiAgICAgICAgICAgICAgICBjb250ZW50LmhpZGRlbiA9IGZhbHNlOwogICAgICAgICAgICB9IGVsc2UgewogICAgICAgICAgICAgICAgLy8gV2VubiBpbml0aWFsIGdlc2NobG9zc2VuLCBoaWRkZW49dHJ1ZSB1bmQgbWF4LWhlaWdodD0wCiAgICAgICAgICAgICAgICBjb250ZW50LnN0eWxlLm1heEhlaWdodCA9ICcwcHgnOwogICAgICAgICAgICAgICAgY29udGVudC5oaWRkZW4gPSB0cnVlOwogICAgICAgICAgICAgICAgdHJpZ2dlci5zZXRBdHRyaWJ1dGUoJ2FyaWEtZXhwYW5kZWQnLCAnZmFsc2UnKTsgLy8gU2ljaGVyc3RlbGxlbiwgZGFzcyBlcyBhdWYgZmFsc2Ugc3RlaHQKICAgICAgICAgICAgfQogICAgICAgIH0pOwoKICAgICAgICAvLyBFdmVudC1MaXN0ZW5lciBmw7xyIEtsaWNrcyB1bmQgVGFzdGF0dXJlcmVpZ25pc3NlCiAgICAgICAgdGhpcy5hY2NvcmRpb25FbGVtZW50LmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgdGhpcy5oYW5kbGVDbGljay5iaW5kKHRoaXMpKTsKICAgICAgICB0aGlzLmFjY29yZGlvbkVsZW1lbnQuYWRkRXZlbnRMaXN0ZW5lcigna2V5ZG93bicsIHRoaXMuaGFuZGxlS2V5ZG93bi5iaW5kKHRoaXMpKTsKICAgIH0KCiAgICAvKioKICAgICAqIEJlaGFuZGVsdCBLbGlja3MgYXVmIEFjY29yZGlvbi1UcmlnZ2VyLgogICAgICogQHBhcmFtIHtFdmVudH0gZXZlbnQgRGFzIEtsaWNrLUVyZWlnbmlzLgogICAgICovCiAgICBoYW5kbGVDbGljayhldmVudCkgewogICAgICAgIGNvbnN0IHRyaWdnZXIgPSBldmVudC50YXJnZXQuY2xvc2VzdCgnLmFjY29yZGlvbi1hbHBoYV9fdHJpZ2dlcicpOwogICAgICAgIGlmICghdHJpZ2dlcikgcmV0dXJuOyAvLyBOaWNodCBhdWYgZWluZW4gVHJpZ2dlciBnZWtsaWNrdAoKICAgICAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpOyAvLyBWZXJoaW5kZXJ0IFN0YW5kYXJkLUJ1dHRvbi1WZXJoYWx0ZW4gKHouQi4gRm9ybXVsYXItU3VibWl0KQoKICAgICAgICBjb25zdCBpdGVtID0gdHJpZ2dlci5jbG9zZXN0KCcuYWNjb3JkaW9uLWFscGhhX19pdGVtJyk7CiAgICAgICAgaWYgKCFpdGVtKSByZXR1cm47CgogICAgICAgIHRoaXMudG9nZ2xlSXRlbShpdGVtKTsKICAgIH0KCiAgICAvKioKICAgICAqIMOWZmZuZXQgb2RlciBzY2hsaWXDn3QgZWluIGJlc3RpbW10ZXMgQWNjb3JkaW9uLUVsZW1lbnQuCiAgICAgKiBAcGFyYW0ge0hUTUxFbGVtZW50fSBpdGVtIERhcyBgLmFjY29yZGlvbl9faXRlbWAtRWxlbWVudC4KICAgICAqLwogICAgdG9nZ2xlSXRlbShpdGVtKSB7CiAgICAgICAgY29uc3QgdHJpZ2dlciA9IGl0ZW0ucXVlcnlTZWxlY3RvcignLmFjY29yZGlvbi1hbHBoYV9fdHJpZ2dlcicpOwogICAgICAgIGNvbnN0IGlzRXhwYW5kZWQgPSB0cmlnZ2VyLmdldEF0dHJpYnV0ZSgnYXJpYS1leHBhbmRlZCcpID09PSAndHJ1ZSc7CgogICAgICAgIC8vIFdlbm4gZGVyIFR5cCAnc2luZ2xlJyBpc3QgdW5kIHdpciBlaW4gYW5kZXJlcyBFbGVtZW50IMO2ZmZuZW4gd29sbGVuLAogICAgICAgIC8vIHNjaGxpZcOfZW4gd2lyIHp1ZXJzdCBhbGxlIGFuZGVyZW4uCiAgICAgICAgaWYgKHRoaXMudHlwZSA9PT0gJ3NpbmdsZScgJiYgIWlzRXhwYW5kZWQpIHsKICAgICAgICAgICAgdGhpcy5jbG9zZUFsbEV4Y2VwdChpdGVtKTsKICAgICAgICB9CgogICAgICAgIGlmIChpc0V4cGFuZGVkKSB7CiAgICAgICAgICAgIHRoaXMuY2xvc2VJdGVtKGl0ZW0pOwogICAgICAgIH0gZWxzZSB7CiAgICAgICAgICAgIHRoaXMub3Blbkl0ZW0oaXRlbSk7CiAgICAgICAgfQogICAgfQoKICAgIC8qKgogICAgICogw5ZmZm5ldCBlaW4gQWNjb3JkaW9uLUVsZW1lbnQuCiAgICAgKiBAcGFyYW0ge0hUTUxFbGVtZW50fSBpdGVtIERhcyBgLmFjY29yZGlvbl9faXRlbWAtRWxlbWVudCwgZGFzIGdlw7ZmZm5ldCB3ZXJkZW4gc29sbC4KICAgICAqLwogICAgb3Blbkl0ZW0oaXRlbSkgewogICAgICAgIGNvbnN0IHRyaWdnZXIgPSBpdGVtLnF1ZXJ5U2VsZWN0b3IoJy5hY2NvcmRpb24tYWxwaGFfX3RyaWdnZXInKTsKICAgICAgICBjb25zdCBjb250ZW50ID0gaXRlbS5xdWVyeVNlbGVjdG9yKCcuYWNjb3JkaW9uLWFscGhhX19jb250ZW50Jyk7CiAgICAgICAgY29uc3QgY29udGVudElubmVyID0gY29udGVudC5xdWVyeVNlbGVjdG9yKCcuYWNjb3JkaW9uLWFscGhhX19jb250ZW50LWlubmVyJyk7CgogICAgICAgIGlmICghdHJpZ2dlciB8fCAhY29udGVudCB8fCAhY29udGVudElubmVyKSByZXR1cm47CgogICAgICAgIHRyaWdnZXIuc2V0QXR0cmlidXRlKCdhcmlhLWV4cGFuZGVkJywgJ3RydWUnKTsKICAgICAgICBjb250ZW50LmhpZGRlbiA9IGZhbHNlOyAvLyBJbmhhbHQgc2ljaHRiYXIgbWFjaGVuIGbDvHIgU2NyZWVucmVhZGVyIHVuZCBMYXlvdXQKCiAgICAgICAgLy8gU2V0enQgZGllIG1heC1oZWlnaHQgYXVmIGRpZSB0YXRzw6RjaGxpY2hlIEjDtmhlIGRlcyBJbmhhbHRzIGbDvHIgZGllIEFuaW1hdGlvbgogICAgICAgIGNvbnRlbnQuc3R5bGUubWF4SGVpZ2h0ID0gY29udGVudElubmVyLnNjcm9sbEhlaWdodCArICdweCc7CgogICAgICAgIC8vIEV2ZW50LUxpc3RlbmVyIGbDvHIgZGFzIEVuZGUgZGVyIFRyYW5zaXRpb24KICAgICAgICBjb25zdCBoYW5kbGVUcmFuc2l0aW9uRW5kID0gKCkgPT4gewogICAgICAgICAgICAvLyBOYWNoIGRlciBUcmFuc2l0aW9uLCB3ZW5uIGRhcyBFbGVtZW50IG5vY2ggZ2XDtmZmbmV0IGlzdCwKICAgICAgICAgICAgLy8gc2V0emVuIHdpciBtYXgtaGVpZ2h0IGF1ZiAnbm9uZScsIGRhbWl0IGRlciBJbmhhbHQgZHluYW1pc2NoIHdhY2hzZW4ga2FubgogICAgICAgICAgICAvLyAoei5CLiBiZWkgQmlsZGxhZGV2b3Jnw6RuZ2VuIG9kZXIgd2VubiBkZXIgVGV4dCBwZXIgSlMgZ2XDpG5kZXJ0IHdpcmQpLgogICAgICAgICAgICBpZiAodHJpZ2dlci5nZXRBdHRyaWJ1dGUoJ2FyaWEtZXhwYW5kZWQnKSA9PT0gJ3RydWUnKSB7CiAgICAgICAgICAgICAgICBjb250ZW50LnN0eWxlLm1heEhlaWdodCA9ICdub25lJzsKICAgICAgICAgICAgfQogICAgICAgICAgICBjb250ZW50LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ3RyYW5zaXRpb25lbmQnLCBoYW5kbGVUcmFuc2l0aW9uRW5kKTsKICAgICAgICB9OwogICAgICAgIGNvbnRlbnQuYWRkRXZlbnRMaXN0ZW5lcigndHJhbnNpdGlvbmVuZCcsIGhhbmRsZVRyYW5zaXRpb25FbmQpOwogICAgfQoKICAgIC8qKgogICAgICogU2NobGllw590IGVpbiBBY2NvcmRpb24tRWxlbWVudC4KICAgICAqIEBwYXJhbSB7SFRNTEVsZW1lbnR9IGl0ZW0gRGFzIGAuYWNjb3JkaW9uX19pdGVtYC1FbGVtZW50LCBkYXMgZ2VzY2hsb3NzZW4gd2VyZGVuIHNvbGwuCiAgICAgKi8KICAgIGNsb3NlSXRlbShpdGVtKSB7CiAgICAgICAgY29uc3QgdHJpZ2dlciA9IGl0ZW0ucXVlcnlTZWxlY3RvcignLmFjY29yZGlvbi1hbHBoYV9fdHJpZ2dlcicpOwogICAgICAgIGNvbnN0IGNvbnRlbnQgPSBpdGVtLnF1ZXJ5U2VsZWN0b3IoJy5hY2NvcmRpb24tYWxwaGFfX2NvbnRlbnQnKTsKCiAgICAgICAgaWYgKCF0cmlnZ2VyIHx8ICFjb250ZW50KSByZXR1cm47CgogICAgICAgIHRyaWdnZXIuc2V0QXR0cmlidXRlKCdhcmlhLWV4cGFuZGVkJywgJ2ZhbHNlJyk7CgogICAgICAgIC8vIFdpY2h0aWc6IFNldHplIGRpZSBtYXgtaGVpZ2h0IHp1ZXJzdCBhdWYgZGllIGFrdHVlbGxlIHNjcm9sbEhlaWdodCwKICAgICAgICAvLyBiZXZvciBkdSBzaWUgYXVmIDAgc2V0enQuIERhcyBlcm3DtmdsaWNodCBkaWUgQ1NTLVRyYW5zaXRpb24uCiAgICAgICAgY29udGVudC5zdHlsZS5tYXhIZWlnaHQgPSBjb250ZW50LnNjcm9sbEhlaWdodCArICdweCc7CiAgICAgICAgLy8gRXJ6d2luZ2UgZWluZW4gUmVmbG93LCBkYW1pdCBkZXIgQnJvd3NlciBkaWUgYWt0dWVsbGUgSMO2aGUgYW53ZW5kZXQsCiAgICAgICAgLy8gYmV2b3IgZGllIFRyYW5zaXRpb24genUgMCBiZWdpbm50LgogICAgICAgIGNvbnRlbnQub2Zmc2V0V2lkdGg7IC8vIERpZXMgaXN0IGVpbmUgZWluZmFjaGUgTcO2Z2xpY2hrZWl0LCBSZWZsb3cgenUgZXJ6d2luZ2VuLgoKICAgICAgICBjb250ZW50LnN0eWxlLm1heEhlaWdodCA9ICcwcHgnOwoKICAgICAgICAvLyBFdmVudC1MaXN0ZW5lciBmw7xyIGRhcyBFbmRlIGRlciBUcmFuc2l0aW9uCiAgICAgICAgY29uc3QgaGFuZGxlVHJhbnNpdGlvbkVuZCA9ICgpID0+IHsKICAgICAgICAgICAgLy8gTmFjaCBkZXIgVHJhbnNpdGlvbiwgd2VubiBkYXMgRWxlbWVudCB0YXRzw6RjaGxpY2ggZ2VzY2hsb3NzZW4gaXN0LAogICAgICAgICAgICAvLyBzZXR6ZW4gd2lyIGhpZGRlbj10cnVlLCB1bSBlcyB2b24gU2NyZWVucmVhZGVybiB6dSB2ZXJiZXJnZW4gdW5kCiAgICAgICAgICAgIC8vIHNpY2hlcnp1c3RlbGxlbiwgZGFzcyBlcyBrZWluZSBJbnRlcmFrdGlvbmVuIG1laHIgenVsw6Rzc3QuCiAgICAgICAgICAgIGlmICh0cmlnZ2VyLmdldEF0dHJpYnV0ZSgnYXJpYS1leHBhbmRlZCcpID09PSAnZmFsc2UnKSB7CiAgICAgICAgICAgICAgICBjb250ZW50LmhpZGRlbiA9IHRydWU7CiAgICAgICAgICAgIH0KICAgICAgICAgICAgY29udGVudC5yZW1vdmVFdmVudExpc3RlbmVyKCd0cmFuc2l0aW9uZW5kJywgaGFuZGxlVHJhbnNpdGlvbkVuZCk7CiAgICAgICAgfTsKICAgICAgICBjb250ZW50LmFkZEV2ZW50TGlzdGVuZXIoJ3RyYW5zaXRpb25lbmQnLCBoYW5kbGVUcmFuc2l0aW9uRW5kKTsKICAgIH0KCiAgICAvKioKICAgICAqIFNjaGxpZcOfdCBhbGxlIEFjY29yZGlvbi1FbGVtZW50ZSBhdcOfZXIgZGVtIGFuZ2VnZWJlbmVuLgogICAgICogQHBhcmFtIHtIVE1MRWxlbWVudH0gZXhjbHVkZUl0ZW0gRGFzIGAuYWNjb3JkaW9uX19pdGVtYC1FbGVtZW50LCBkYXMgbmljaHQgZ2VzY2hsb3NzZW4gd2VyZGVuIHNvbGwuCiAgICAgKi8KICAgIGNsb3NlQWxsRXhjZXB0KGV4Y2x1ZGVJdGVtKSB7CiAgICAgICAgdGhpcy5pdGVtcy5mb3JFYWNoKGl0ZW0gPT4gewogICAgICAgICAgICBpZiAoaXRlbSAhPT0gZXhjbHVkZUl0ZW0pIHsKICAgICAgICAgICAgICAgIGNvbnN0IHRyaWdnZXIgPSBpdGVtLnF1ZXJ5U2VsZWN0b3IoJy5hY2NvcmRpb24tYWxwaGFfX3RyaWdnZXInKTsKICAgICAgICAgICAgICAgIGlmICh0cmlnZ2VyICYmIHRyaWdnZXIuZ2V0QXR0cmlidXRlKCdhcmlhLWV4cGFuZGVkJykgPT09ICd0cnVlJykgewogICAgICAgICAgICAgICAgICAgIHRoaXMuY2xvc2VJdGVtKGl0ZW0pOwogICAgICAgICAgICAgICAgfQogICAgICAgICAgICB9CiAgICAgICAgfSk7CiAgICB9CgogICAgLyoqCiAgICAgKiBCZWhhbmRlbHQgVGFzdGF0dXJlcmVpZ25pc3NlIGbDvHIgZGllIE5hdmlnYXRpb24gaW5uZXJoYWxiIGRlcyBBY2NvcmRpb25zLgogICAgICogQHBhcmFtIHtFdmVudH0gZXZlbnQgRGFzIFRhc3RhdHVyZXJlaWduaXMuCiAgICAgKi8KICAgIGhhbmRsZUtleWRvd24oZXZlbnQpIHsKICAgICAgICBjb25zdCB0YXJnZXQgPSBldmVudC50YXJnZXQ7CiAgICAgICAgY29uc3QgaXNUcmlnZ2VyID0gdGFyZ2V0LmNsYXNzTGlzdC5jb250YWlucygnYWNjb3JkaW9uLWFscGhhX190cmlnZ2VyJyk7CgogICAgICAgIGlmICghaXNUcmlnZ2VyKSByZXR1cm47IC8vIE51ciBhdWYgVHJpZ2dlci1FbGVtZW50ZSByZWFnaWVyZW4KCiAgICAgICAgY29uc3QgdHJpZ2dlcnMgPSB0aGlzLnRyaWdnZXJzOyAvLyBBa3R1ZWxsZSBMaXN0ZSBkZXIgVHJpZ2dlcgogICAgICAgIGNvbnN0IGN1cnJlbnRJbmRleCA9IHRyaWdnZXJzLmluZGV4T2YodGFyZ2V0KTsKCiAgICAgICAgbGV0IG5leHRJbmRleDsKCiAgICAgICAgc3dpdGNoIChldmVudC5rZXkpIHsKICAgICAgICAgICAgY2FzZSAnQXJyb3dEb3duJzoKICAgICAgICAgICAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7IC8vIFZlcmhpbmRlcnQgU2Nyb2xsZW4gZGVyIFNlaXRlCiAgICAgICAgICAgICAgICBuZXh0SW5kZXggPSAoY3VycmVudEluZGV4ICsgMSkgJSB0cmlnZ2Vycy5sZW5ndGg7CiAgICAgICAgICAgICAgICB0cmlnZ2Vyc1tuZXh0SW5kZXhdLmZvY3VzKCk7CiAgICAgICAgICAgICAgICBicmVhazsKICAgICAgICAgICAgY2FzZSAnQXJyb3dVcCc6CiAgICAgICAgICAgICAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpOyAvLyBWZXJoaW5kZXJ0IFNjcm9sbGVuIGRlciBTZWl0ZQogICAgICAgICAgICAgICAgbmV4dEluZGV4ID0gKGN1cnJlbnRJbmRleCAtIDEgKyB0cmlnZ2Vycy5sZW5ndGgpICUgdHJpZ2dlcnMubGVuZ3RoOwogICAgICAgICAgICAgICAgdHJpZ2dlcnNbbmV4dEluZGV4XS5mb2N1cygpOwogICAgICAgICAgICAgICAgYnJlYWs7CiAgICAgICAgICAgIGNhc2UgJ0hvbWUnOgogICAgICAgICAgICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTsKICAgICAgICAgICAgICAgIHRyaWdnZXJzWzBdLmZvY3VzKCk7CiAgICAgICAgICAgICAgICBicmVhazsKICAgICAgICAgICAgY2FzZSAnRW5kJzoKICAgICAgICAgICAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7CiAgICAgICAgICAgICAgICB0cmlnZ2Vyc1t0cmlnZ2Vycy5sZW5ndGggLSAxXS5mb2N1cygpOwogICAgICAgICAgICAgICAgYnJlYWs7CiAgICAgICAgICAgIGNhc2UgJ0VudGVyJzoKICAgICAgICAgICAgY2FzZSAnU3BhY2UnOgogICAgICAgICAgICAgICAgLy8gRGFzIEtsaWNrZW4gYXVmIGRlbiBCdXR0b24gd2lyZCBkdXJjaCBkZW4gQ2xpY2stSGFuZGxlciBiZWhhbmRlbHQsCiAgICAgICAgICAgICAgICAvLyBoaWVyIG3DvHNzZW4gd2lyIG51ciBzaWNoZXJzdGVsbGVuLCBkYXNzIG5pY2h0cyBVbmVyd8O8bnNjaHRlcyBwYXNzaWVydC4KICAgICAgICAgICAgICAgIC8vIEVpbiBgZXZlbnQucHJldmVudERlZmF1bHQoKWAga8O2bm50ZSBoaWVyIGhpbnp1Z2Vmw7xndCB3ZXJkZW4sCiAgICAgICAgICAgICAgICAvLyB3ZW5uIGRlciBCdXR0b24gei5CLiBpbiBlaW5lbSBGb3JtdWxhciB3w6RyZS4KICAgICAgICAgICAgICAgIC8vIERhIHdpciBgZXZlbnQucHJldmVudERlZmF1bHQoKWAgYmVyZWl0cyBpbSBgaGFuZGxlQ2xpY2tgIGhhYmVuLAogICAgICAgICAgICAgICAgLy8gaXN0IGVzIGhpZXIgbmljaHQgdW5iZWRpbmd0IG5vdHdlbmRpZywgYWJlciBndXRlIFByYXhpcy4KICAgICAgICAgICAgICAgIC8vIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7CiAgICAgICAgICAgICAgICBicmVhazsKICAgICAgICB9CiAgICB9Cn0KCi8vIEluaXRpYWxpc2llcmUgYWxsZSBBY2NvcmRpb25zIGF1ZiBkZXIgU2VpdGUsIHNvYmFsZCBkYXMgRE9NIGdlbGFkZW4gaXN0Lgpkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKCdET01Db250ZW50TG9hZGVkJywgKCkgPT4gewogICAgZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbCgnW2RhdGEtYWNjb3JkaW9uXScpLmZvckVhY2goYWNjb3JkaW9uRWxlbWVudCA9PiB7CiAgICAgICAgbmV3IEFjY29yZGlvbihhY2NvcmRpb25FbGVtZW50KTsKICAgIH0pOwp9KTsK","id":"snhnh6a"},"styles":["7ff91ct"],"attributes":{"data-accordion":"data-accordion","data-accordion-type":"{props.type}","class":"accordion-alpha"},"block":{"type":"html","tag":"div"}}}},"innerBlocks":[{"blockName":"core/group","attrs":{"metadata":{"name":"Loop","etchData":{"origin":"etch","name":"Loop","block":{"type":"loop","loop":{"target":"sk679rs","itemId":"item","version":2}}}}},"innerBlocks":[{"blockName":"core/group","attrs":{"metadata":{"etchData":{"origin":"etch","styles":["1i5zyl2"],"attributes":{"class":"accordion-alpha__item"},"block":{"type":"html","tag":"div"}}}},"innerBlocks":[{"blockName":"core/group","attrs":{"metadata":{"etchData":{"origin":"etch","styles":["atxeadk"],"attributes":{"class":"accordion-alpha__header"},"block":{"type":"html","tag":"h3"}}}},"innerBlocks":[{"blockName":"core/group","attrs":{"metadata":{"etchData":{"origin":"etch","styles":["w0pjsgi","wl6xzyw"],"attributes":{"type":"button","id":"accordion-trigger-1","aria-expanded":"false","aria-controls":"accordion-content-1","class":"accordion-alpha__trigger"},"block":{"type":"html","tag":"button"}}}},"innerBlocks":[{"blockName":"core/paragraph","attrs":{"metadata":{"etchData":{"origin":"etch","styles":["tfntwqw"],"attributes":{"class":"accordion-alpha__title"},"block":{"type":"html","tag":"span"},"removeWrapper":true,"nestedData":{"mdcchq3":{"origin":"etch","styles":["tfntwqw"],"attributes":{"class":"accordion-alpha__title"},"block":{"type":"html","tag":"span"}}}}}},"innerBlocks":[],"innerHTML":"<p><span data-etch-ref=\"mdcchq3\">{item.frage}</span></p>","innerContent":["<p><span data-etch-ref=\"mdcchq3\">{item.frage}</span></p>"]},{"blockName":"core/group","attrs":{"metadata":{"etchData":{"origin":"etch","styles":["8odflkz"],"attributes":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","stroke-width":"2","stroke-linecap":"round","stroke-linejoin":"round","class":"accordion-alpha__icon"},"block":{"type":"html","tag":"svg"}}}},"innerBlocks":[{"blockName":"core/group","attrs":{"metadata":{"etchData":{"origin":"etch","attributes":{"points":"6 9 12 15 18 9"},"block":{"type":"html","tag":"polyline"}}}},"innerBlocks":[],"innerHTML":"<div class=\"wp-block-group\"></div>","innerContent":["<div class=\"wp-block-group\">","</div>"]}],"innerHTML":"<div class=\"wp-block-group\"></div>","innerContent":["<div class=\"wp-block-group\">",null,"</div>"]}],"innerHTML":"<div class=\"wp-block-group\"></div>","innerContent":["<div class=\"wp-block-group\">",null,null,"</div>"]}],"innerHTML":"<div class=\"wp-block-group\"></div>","innerContent":["<div class=\"wp-block-group\">",null,"</div>"]},{"blockName":"core/group","attrs":{"metadata":{"etchData":{"origin":"etch","styles":["ewcm132","jgarsx7"],"attributes":{"id":"accordion-content-1","role":"region","aria-labelledby":"accordion-trigger-1","hidden":"hidden","class":"accordion-alpha__content"},"block":{"type":"html","tag":"div"}}}},"innerBlocks":[{"blockName":"core/group","attrs":{"metadata":{"etchData":{"origin":"etch","styles":["y0cq72a"],"attributes":{"class":"accordion-alpha__content-inner"},"block":{"type":"html","tag":"div"}}}},"innerBlocks":[{"blockName":"core/paragraph","attrs":{"metadata":{"etchData":{"origin":"etch","styles":["5k1qopw"],"attributes":{"class":"accordion-alpha__content-antwort"},"block":{"type":"html","tag":"p"}}}},"innerBlocks":[],"innerHTML":"<p>{item.antwort}</p>","innerContent":["<p>{item.antwort}</p>"]}],"innerHTML":"<div class=\"wp-block-group\"></div>","innerContent":["<div class=\"wp-block-group\">",null,"</div>"]}],"innerHTML":"<div class=\"wp-block-group\"></div>","innerContent":["<div class=\"wp-block-group\">",null,"</div>"]}],"innerHTML":"<div class=\"wp-block-group\"></div>","innerContent":["<div class=\"wp-block-group\">",null,null,"</div>"]}],"innerHTML":"<div class=\"wp-block-group\"></div>","innerContent":["<div class=\"wp-block-group\">",null,"</div>"]}],"innerHTML":"<div class=\"wp-block-group\"></div>","innerContent":["<div class=\"wp-block-group\">",null,"</div>"]},"version":2,"styles":{"7ff91ct":{"type":"class","selector":".accordion-alpha","collection":"default","css":"border: 1px solid #e0e0e0;\n border-radius: 6px;\n overflow: hidden; /* Wichtig für abgerundete Ecken und border auf den Items */","readonly":false},"1i5zyl2":{"type":"class","selector":".accordion-alpha__item","collection":"default","css":"border-bottom: 1px solid #e0e0e0;\n\n /* CSS Nesting */\n &:last-child {\n border-bottom: none; /* Letztes Item soll keinen unteren Border haben */\n }\n\n /* Accordion Header */\n .accordion-alpha__header {\n margin: 0; /* Standard h3 margin entfernen */\n }\n\n /* Accordion Trigger (der Button) */\n .accordion-alpha__trigger {\n display: flex;\n align-items: center;\n width: 100%;\n padding: 1rem 1.25rem;\n background-color: #fff;\n border: none;\n text-align: left;\n font-size: 1rem;\n font-weight: 600;\n cursor: pointer;\n outline: none; /* Default outline entfernen, aber focus-visible setzen */\n color: #333;\n transition:\n background-color 0.2s ease,\n color 0.2s ease;\n\n &:hover {\n background-color: #f0f0f0;\n }\n\n /* Focus-visible für Barrierefreiheit */\n &:focus-visible {\n outline: 2px solid #007bff; /* Blauer Rahmen bei Fokus */\n outline-offset: 2px;\n background-color: #e6f3ff; /* Leichter blauer Hintergrund */\n }\n\n /* Accordion Title */\n .accordion-alpha__title {\n flex-grow: 1; /* Nimmt den meisten Platz ein */\n }\n\n /* Accordion Icon (Pfeil/Chevron) */\n .accordion-alpha__icon {\n width: 1.25rem;\n height: 1.25rem;\n margin-left: 1rem;\n transition: transform 0.3s ease; /* Übergang für Rotation */\n color: #666;\n }\n\n /* Icon Rotation, wenn das Element geöffnet ist */\n &[aria-expanded='true'] .accordion-alpha__icon {\n transform: rotate(180deg);\n }\n }","readonly":false},"atxeadk":{"type":"class","selector":".accordion-alpha__header","collection":"default","css":"","readonly":false},"w0pjsgi":{"type":"id","selector":"#accordion-trigger-1","collection":"default","css":"","readonly":false},"wl6xzyw":{"type":"class","selector":".accordion-alpha__trigger","collection":"default","css":"","readonly":false},"tfntwqw":{"type":"class","selector":".accordion-alpha__title","collection":"default","css":"","readonly":false},"8odflkz":{"type":"class","selector":".accordion-alpha__icon","collection":"default","css":"","readonly":false},"ewcm132":{"type":"id","selector":"#accordion-content-1","collection":"default","css":"","readonly":false},"jgarsx7":{"type":"class","selector":".accordion-alpha__content","collection":"default","css":"max-height: 0; /* Standardmäßig ausgeblendet */\n overflow: hidden;\n transition: max-height 0.3s ease-out; /* Weiche Übergangs-Animation */\n background-color: #f9f9f9;\n color: #555;\n\n /* Wenn der Inhalt geöffnet ist, wird max-height von JS gesetzt */\n /* Wir nutzen keine reine CSS-Lösung hier, da dynamische max-height besser ist */\n\n /* Accordion Content Inner (für Padding, damit das Padding nicht in die max-height-Berechnung einfließt) */\n .accordion-alpha__content-inner {\n padding: 1rem 1.25rem;\n }\n\n p,\n ul {\n margin-top: 0;\n margin-bottom: 1rem;\n }\n ul {\n padding-left: 1.5rem;\n }\n li {\n margin-bottom: 0.5rem;\n }\n &:last-child {\n margin-bottom: 0;\n }","readonly":false},"y0cq72a":{"type":"class","selector":".accordion-alpha__content-inner","collection":"default","css":"","readonly":false},"5k1qopw":{"type":"class","selector":".accordion-alpha__content-antwort","collection":"default","css":"","readonly":false}},"loops":{"sk679rs":{"key":"accordionAlpha","name":"AccordionAlpha","global":true,"config":{"type":"json","data":[{"frage":"Ist dieses Accordion barrierefrei?","antwort":"Ja, dieses Accordion wurde von Grund auf mit Blick auf die Barrierefreiheit entwickelt. Es folgt dem WAI-ARIA Accordion Design Pattern. Verwendet aria-expanded, aria-controls und aria-labelledby. Das hidden Attribut wird gesetzt, wenn der Inhalt geschlossen ist. Umfassende Tastaturnavigation ist implementiert."},{"frage":"Wie funktioniert die Tastaturnavigation?","antwort":"Du kannst die folgenden Tasten verwenden:<ul><li><b>Tab:</b> Navigiert zwischen den Triggern und anderen Elementen auf der Seite.</li><li><b>Enter / Space:</b> Öffnet oder schließt das aktuell fokussierte Element.</li><li><b>Pfeil-Ab:</b> Bewegt den Fokus zum nächsten Trigger.</li><li><b>Pfeil-Auf:</b> Bewegt den Fokus zum vorherigen Trigger.</li><li><b>Home:</b> Bewegt den Fokus zum ersten Trigger.</li><li><b>End:</b> Bewegt den Fokus zum letzten Trigger.</li></ul>"},{"frage":"Kann ich mehrere Elemente gleichzeitig öffnen?","antwort":"Standardmäßig ist dieses Accordion so konfiguriert, dass nur ein Element gleichzeitig geöffnet sein kann (<code>type=\"single\"</code>).</p><p>Du kannst jedoch das Attribut <code>data-accordion-type=\"multiple\"</code> zum übergeordneten <code>.accordion</code>-Element hinzufügen, um mehrere Elemente gleichzeitig zu ermöglichen."}]}}}}Und hier der Demo JSON Teil
[
{
"frage": "Ist dieses Accordion barrierefrei?",
"antwort": "Ja, dieses Accordion wurde von Grund auf mit Blick auf die Barrierefreiheit entwickelt. Es folgt dem WAI-ARIA Accordion Design Pattern. Verwendet aria-expanded, aria-controls und aria-labelledby. Das hidden Attribut wird gesetzt, wenn der Inhalt geschlossen ist. Umfassende Tastaturnavigation ist implementiert."
},
{
"frage": "Wie funktioniert die Tastaturnavigation?",
"antwort": "Du kannst die folgenden Tasten verwenden:<ul><li><b>Tab:</b> Navigiert zwischen den Triggern und anderen Elementen auf der Seite.</li><li><b>Enter / Space:</b> Öffnet oder schließt das aktuell fokussierte Element.</li><li><b>Pfeil-Ab:</b> Bewegt den Fokus zum nächsten Trigger.</li><li><b>Pfeil-Auf:</b> Bewegt den Fokus zum vorherigen Trigger.</li><li><b>Home:</b> Bewegt den Fokus zum ersten Trigger.</li><li><b>End:</b> Bewegt den Fokus zum letzten Trigger.</li></ul>"
},
{
"frage": "Kann ich mehrere Elemente gleichzeitig öffnen?",
"antwort": "Standardmäßig ist dieses Accordion so konfiguriert, dass nur ein Element gleichzeitig geöffnet sein kann (<code>type=\"single\"</code>).</p><p>Du kannst jedoch das Attribut <code>data-accordion-type=\"multiple\"</code> zum übergeordneten <code>.accordion</code>-Element hinzufügen, um mehrere Elemente gleichzeitig zu ermöglichen."
}
]