[Accordion] ID set on <li data-accordion-item> element get's duplicated to the <a .accordion-title> and breaks accessibility tests

[fleps]

Hello
I have a page with multiple accordions and two of them I need ID's manually set on the accordion-items, which shouldn't be a problem as they don't have any ID attributed by foundation, but oddly when I do this I found an issue that breaks accessibility tests.

How to reproduce this bug:

1. Create a simple accordion following the template
2. Manually set an ID in one of the <li data-accordion-item> inside your accordion.
3. Load the page and see that the <a class="accordion-title"> inside this specific wrapper receives the same ID instead of the default XXX-accordion-label, therefore breaking accessibility tests (because .accordion-content receives the aria-labelledby value with an ID that is not unique)

What should happen:

As the <li data-accordion-item> doesn't receive an ID by foundation by default, its ID shouldn't matter to the normal behavior and ID attribution for the <a class="accordion-title">

Foundation Version(s) you are using:

6.2.3

Code Sample

<ul class="accordion" data-accordion="" data-allow-all-closed="true" data-multi-expand="true">
    <li class="accordion-item payment-section" id="payment-methods-section" data-accordion-item>
        <a class="accordion-title reset" href="#">Valid Payment Methods</a>
        <div class="accordion-content" data-tab-content="">
            Content
        </div>
    </li>
</ul>

I even tried to then set an ID on the <a class="accordion-title"> like "payment-methods-link" but it get's overwritten with its parent ID.

And if I try to manually set the ID only on the <a class="accordion-title"> and NOT having an ID on its parent, then the ID get overwrite by the default foundation ID XXX-accordion-label

Here's a codepen https://codepen.io/anon/pen/QazPLo (using Foundation 6.4.1 and the issue also happens)

Thanks

[colin-marshall]

@fleps please see #10871 and let me know if my solution works. Also, what are you using to test accessibility?

[fleps]

Hi @colin-marshall sorry for the delay.
The fix seems to work, thanks for the quick one.

I saw this was merged already but I imagine a new release of foundation doesn't happen all the time, so which is the best way to implement this on my project? Manually added / change the foundation.js with the fix?

About accessibility, we use 2 chrome plugins mostly: SiteImprove Accessibility Checker and aXe.

[ncoden]

Hello @fleps.

If you installed Foundation via npm, you can replace the package version by the merge commit 4f95271. However, I'm afraid that updating the package manually is the only solution (or download the foundation repo and build it yourself).

This PR is scheduled for v6.4.4. We planned to release this version in 2-3 weeks.

[fleps]

Hi @ncoden

Alright, thanks for the info =)