Support for multiple a11y tabs in the same page, parent tabs loaded when child tabs are clicked

[munyiva]

Hello,

I would like to implement child tab inside a parent tab, as below, however when the child tabs are clicked the parent tabs are loaded.

Does a11y support this functionality?

<section class="accordion-tabs js-tabs" data-tabs-allowed="true" data-breakpoint="400" data-start-collapsed="false">
      <ul role="tablist" class="tabs-tab-list">
          <li role="presentation"><a id="tab1" href="#section1" role="tab" aria-controls="section1" aria-selected="true" class="tabs-trigger js-tabs-trigger">Section 1</a></li>
          <li role="presentation"><a id="tab2" href="#section2" role="tab" aria-controls="section2" class="tabs-trigger js-tabs-trigger">Section 2</a></li>
          <li role="presentation"><a id="tab3" href="#section3" role="tab" aria-controls="section3" class="tabs-trigger js-tabs-trigger">Section 3</a></li>
      </ul>
      <section id="section1" role="tabpanel" aria-labelledby="tab1" class="tabs-panel js-tabs-panel" tabindex="0">
        <div class="accordeon-trigger js-accordeon-trigger" aria-controls="section1" aria-expanded="true" tabindex="0">Section 1 <div class="accordeon-trigger-icon"><span class="label--open">Open</span><span class="label--close">Close</span>
          <svg aria-hidden="true" focusable="false" viewBox="0 0 20 20">
            <rect class="vert" height="18" width="2" fill="currentColor" y="1" x="9"></rect>
            <rect height="2" width="18" fill="currentColor" y="9" x="1"></rect>
          </svg>
        </div></div>
        <div class="content" aria-hidden="false">
          <h2>Headline Section 1</h2>
          <ul role="tablist" class="tabs-tab-list">
          <li role="presentation"><a id="tab11" href="#section11" role="tab" aria-controls="section11" aria-selected="true" class="tabs-trigger js-tabs-trigger">Section 11</a></li>
          <li role="presentation"><a id="tab12" href="#section12" role="tab" aria-controls="section12" class="tabs-trigger js-tabs-trigger">Section 12</a></li>
          <li role="presentation"><a id="tab13" href="#section13" role="tab" aria-controls="section13" class="tabs-trigger js-tabs-trigger">Section 13</a></li>
      </ul>
      <section id="section11" role="tabpanel" aria-labelledby="tab11" class="tabs-panel js-tabs-panel">
        <div class="accordeon-trigger js-accordeon-trigger" aria-controls="section11" aria-expanded="false" tabindex="0">Section 11 <div class="accordeon-trigger-icon"><span class="label--open">Open</span><span class="label--close">Close</span>
          <svg aria-hidden="true" focusable="false" viewBox="0 0 20 20">
            <rect class="vert" height="18" width="2" fill="currentColor" y="1" x="9"></rect>
            <rect height="2" width="18" fill="currentColor" y="9" x="1"></rect>
          </svg>
        </div></div>
        <div class="content" aria-hidden="false">
          <h2>Headline Section 1</h2>
          <p>Cum prefrontal cortex horribilem walking fornix dead resurgere brains de crazed limbic cortex optic nerve sepulcris creaturis, braaaaaiins zombie sicut hypothalamus de <a href="#">grave hippocampus feeding</a> iride brainz et serpens. Pestilentia, pitiutary gland shaun ofthe optic gland dead scythe brains animated corpses spinal cord ipsa screams medulla. Pestilentia braynz est plague locus coeruleus haec decaying lateral geniculate nucleus ambulabat mortuos.</p>
        </div>
      </section>
      <section id="section12" role="tabpanel" aria-labelledby="tab12" class="tabs-panel js-tabs-panel">
        <div class="accordeon-trigger js-accordeon-trigger" aria-controls="section12" aria-expanded="false" tabindex="0">Section 12 <div class="accordeon-trigger-icon"><span class="label--open">Open</span><span class="label--close">Close</span><svg aria-hidden="true" focusable="false" viewBox="0 0 20 20">
            <rect class="vert" height="18" width="2" fill="currentColor" y="1" x="9"></rect>
            <rect height="2" width="18" fill="currentColor" y="9" x="1"></rect>
          </svg></div></div>
        <div class="content" aria-hidden="true">
          <h2>Headline Section 12</h2>
          <p>Zombie ipsum brains reversus ab cerebellum viral inferno, brein nam rick mend grimes malum cerveau cerebro. De carne cerebro lumbering animata cervello corpora quaeritis. Summus thalamus brains sit​​, morbo basal ganglia vel maleficia? De braaaiiiins apocalypsi gorger omero prefrontal cortex <a href="#">undead survivor</a> fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve, imo evil braaiinns stalking monstra hypothalamus adventus resi hippocampus dentevil.</p>
        </div>
      </section>
      <section id="section13" role="tabpanel" aria-labelledby="tab13" class="tabs-panel js-tabs-panel">
        <div class="accordeon-trigger js-accordeon-trigger" aria-controls="section13" aria-expanded="false" tabindex="0">Section 13 <div class="accordeon-trigger-icon"><span class="label--open">Open</span><span class="label--close">Close</span><svg aria-hidden="true" focusable="false" viewBox="0 0 20 20">
            <rect class="vert" height="18" width="2" fill="currentColor" y="1" x="9"></rect>
            <rect height="2" width="18" fill="currentColor" y="9" x="1"></rect>
          </svg></div></div>
        <div class="content" aria-hidden="true">
          <h2>Headline Section 13</h2>
          <p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De <a href="#">carne lumbering animata</a> corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. </p>
        </div>
      </section>
        </div>
      </section>
      <section id="section2" role="tabpanel" aria-labelledby="tab2" class="tabs-panel js-tabs-panel">
        <div class="accordeon-trigger js-accordeon-trigger" aria-controls="section2" aria-expanded="false" tabindex="0">Section 2 <div class="accordeon-trigger-icon"><span class="label--open">Open</span><span class="label--close">Close</span><svg aria-hidden="true" focusable="false" viewBox="0 0 20 20">
            <rect class="vert" height="18" width="2" fill="currentColor" y="1" x="9"></rect>
            <rect height="2" width="18" fill="currentColor" y="9" x="1"></rect>
          </svg></div></div>
        <div class="content" aria-hidden="true">
          <h2>Headline Section 2</h2>
          <p>Zombie ipsum brains reversus ab cerebellum viral inferno, brein nam rick mend grimes malum cerveau cerebro. De carne cerebro lumbering animata cervello corpora quaeritis. Summus thalamus brains sit​​, morbo basal ganglia vel maleficia? De braaaiiiins apocalypsi gorger omero prefrontal cortex <a href="#">undead survivor</a> fornix dictum mauris. Hi brains mindless mortuis limbic cortex soulless creaturas optic nerve, imo evil braaiinns stalking monstra hypothalamus adventus resi hippocampus dentevil.</p>
        </div>
      </section>
      <section id="section3" role="tabpanel" aria-labelledby="tab3" class="tabs-panel js-tabs-panel">
        <div class="accordeon-trigger js-accordeon-trigger" aria-controls="section3" aria-expanded="false" tabindex="0">Section 3 <div class="accordeon-trigger-icon"><span class="label--open">Open</span><span class="label--close">Close</span><svg aria-hidden="true" focusable="false" viewBox="0 0 20 20">
            <rect class="vert" height="18" width="2" fill="currentColor" y="1" x="9"></rect>
            <rect height="2" width="18" fill="currentColor" y="9" x="1"></rect>
          </svg></div></div>
        <div class="content" aria-hidden="true">
          <h2>Headline Section 3</h2>
          <p>Zombie ipsum reversus ab viral inferno, nam rick grimes malum cerebro. De <a href="#">carne lumbering animata</a> corpora quaeritis. Summus brains sit​​, morbo vel maleficia? De apocalypsi gorger omero undead survivor dictum mauris. Hi mindless mortuis soulless creaturas, imo evil stalking monstra adventus resi dentevil vultus comedat cerebella viventium. Qui animated corpse, cricket bat max brucks terribilem incessu zomby. The voodoo sacerdos flesh eater, suscitat mortuos comedere carnem virus. </p>
        </div>
      </section>
    </section>

[hmartens]

Hi Matthias, as always, thanks for this amazing library!

I think tabs inside tabs is a contentious subject 😊 But I think it would be nice for the js to target its own wrapper when clicking the tabs.

So I can have multiple tab wrappers on the page and they work perfect. Just the tab wrapper within tab wrapper that is giving a problem.

As a side note, it "might" be the way I am implementing your library into my Drupal module, But I don't know. If I know your library works perfect with tabs within tabs then I need to investigate how I am implementing your library within my module.

Thanks Matthias, I appreciate your help.

[antrecu]

Thanks Matthias for your work on this library! but as stated by hmartens, Im having the same challenge, how to have nested tabs. Any guidance is very appreciated. Thanks!

[davo20019]

Hi Matthias,

Thanks for this amazing library. I am having the same issue as @antrecu and @hmartens . Any help to fix this issue will be very appreciated.

Thanks!

[matthiasott]

Hey everyone! Thanks so much for your feedback (and your patience 😉)! You are right in that tabs inside of tabs are currently not supported. I’ll look into it and see how this could work…