You are here

entity-translation-unified-form--a11y-accordion-tabs--wrapper.html.twig in Entity Translation Unified Form 8

<div class="etuf-translated-field-wrapper">
  <div class="accordion-tabs js-tabs">
    <ul role="tablist" class="tabs-tab-list">
      {% for id, field in fields %}
        <li role="presentation"><a href="#{{ id }}--etuftabsection" role="tab" id="{{ id }}--etuftab" aria-controls="section1" aria-selected="true" class="tabs-trigger js-tabs-trigger">{{ field.language_name }}</a></li>
      {% endfor %}
    </ul>
    {% for id, field in fields %}
      <section id="{{ id }}--etuftabsection" role="tabpanel" aria-labelledby="{{ id }}--etuftab" class="tabs-panel js-tabs-panel" tabindex="0">
        <div class="accordeon-trigger js-accordeon-trigger" aria-controls="{{ id }}--etuftabsection" aria-expanded="true" tabindex="0">{{ field.label }}</div>
        <div class="content" aria-hidden="false">
          {{ field.markup }}
        </div>
      </section>
    {% endfor %}
  </div>
</div>

File

templates/entity-translation-unified-form--a11y-accordion-tabs--wrapper.html.twig
View source
  1. <div class="etuf-translated-field-wrapper">
  2. <div class="accordion-tabs js-tabs">
  3. <ul role="tablist" class="tabs-tab-list">
  4. {% for id, field in fields %}
  5. <li role="presentation"><a href="#{{ id }}--etuftabsection" role="tab" id="{{ id }}--etuftab" aria-controls="section1" aria-selected="true" class="tabs-trigger js-tabs-trigger">{{ field.language_name }}</a></li>
  6. {% endfor %}
  7. </ul>
  8. {% for id, field in fields %}
  9. <section id="{{ id }}--etuftabsection" role="tabpanel" aria-labelledby="{{ id }}--etuftab" class="tabs-panel js-tabs-panel" tabindex="0">
  10. <div class="accordeon-trigger js-accordeon-trigger" aria-controls="{{ id }}--etuftabsection" aria-expanded="true" tabindex="0">{{ field.label }}</div>
  11. <div class="content" aria-hidden="false">
  12. {{ field.markup }}
  13. </div>
  14. </section>
  15. {% endfor %}
  16. </div>
  17. </div>