Foundation-sites: Accordion element is not WAI conform

[hirnschmalz]

What should happen?

The accordion component should follow the W3C accessibility recommendations.

The tablist should only contain tabs and the tabpanels should be outside of the tablist.

What happens instead?

The accordion renders an element with the role tablist (ul.accordion). Inside this lis are created. Every single of this lis consist of a link with the role tab and a div with the role tabpanel.

Possible Solution

Adjust the JavaScript you use to generate the structure.

Test Case and/or Steps to Reproduce (for bugs)

Test Case: https://codepen.io/hirnschmalz/pen/RvwpRP

Your Environment

• Foundation version(s) used: 6.5.1

Checklist

• [x] I have read and follow the CONTRIBUTING.md document.
• [x] There are no other issues similar to this one.
• [x] The issue title and template are correctly filled.

[ostigley]

I have also run in to this problem. Running AXE tools against https://foundation.zurb.com/sites/docs/accordion.html will reveal the problem too

Possible solution
I found adding role="presentation" to the <li> elements to fix the problem. The children of the li maintain their roles assigned by the accordion js, and accessibility tools seem happy with the result:

<ul class="accordion" data-accordion>
  <li class="accordion-item is-active" data-accordion-item role="presentation">
    <!-- Accordion tab title -->
    <a href="#" class="accordion-title">Accordion 1</a>

    <!-- Accordion tab content: it would start in the open state due to using the `is-active` state class. -->
    <div class="accordion-content" data-tab-content>
      <p>Panel 1. Lorem ipsum dolor</p>
      <a href="#">Nowhere to Go</a>
    </div>
  </li>
  <!-- ... -->
</ul>

The down side of this is that the role presentation is really poorly explained anywhere online.

[DanielRuf]

cc @owlbertz