HTML5 semantic enhancement proposal

[raratiru]

I would like to propose a semantic enhancement:

It seems safe to presume that each accordion tab represents a thematic grouping of content, and therefore it would be semantically correct to enclose it in a <section> element:

<div class="js-accordion" data-accordion-prefix-classes="your-prefix-class">
  <section>
    <h2 class="js-accordion__header">First tab</h2>
    <div class="js-accordion__panel">
      <p>Content of 1st tab</p>
    </div>
  </section>
  <section>    
    <h2 class="js-accordion__header">Second tab</h2>
    <div class="js-accordion__panel">
      <p>Content of 2nd tab</p>
    </div>
  </section>
  <section>
    <h2 class="js-accordion__header">Third tab</h2>
    <div class="js-accordion__panel">
      <p>Content of 3rd tab</p>
    </div>
  </section>
</div>

Currently this is not possible because it breaks the keyboard navigation.

I have found out that the code needing refactoring is the $accordion selector around the document but my JQuery skills do not permit me more.

For example, changing the relevant lines to $accordion = $this.parent().parent(), I achived to navigate with the keyboard only to the first and last tab.

[raratiru]

I have just installed jquery-accessible-hide-show-aria and works as expected out of the box.

Chuck is -right now- losing a tear.