aria-controls and aria-labelledby are undefined and duplicated

[kotyy]

Here's the HTML for the accordions:

<p>here is some copy</p>
<div class="js-accordion" data-accordion-prefix-classes="toggle_32">
    <div class="js-accordion__panel">
        <h2 class="js-accordion__header">accordion title</h2>
        <div class="js-accordion__content">
            <p>accordion body</p>
        </div>
    </div>
    <div class="js-accordion__panel">
        <h2 class="js-accordion__header">accordion title accordion title accordion title accordion title accordion title accordion title accordion title accordion title accordion title accordion title accordion title accordion title accordion title </h2>
        <div class="js-accordion__content">
            <p>accordion body</p>
        </div>
    </div>
    <div class="js-accordion__panel">
        <h2 class="js-accordion__header">accordion title</h2>
        <div class="js-accordion__content">
            <p>accordion body</p>
        </div>
    </div>
</div>
<p>copy block</p>
<div class="js-accordion" data-accordion-prefix-classes="toggle_36">
    <div class="js-accordion__panel">
        <h2 class="js-accordion__header">accordion title</h2>
        <div class="js-accordion__content">
            <p>accordion body</p>
        </div>
    </div>
</div>

After invoking the plugin, here's the markup:

<p>here is some copy</p>
<div class="js-accordion toggle_32" data-accordion-prefix-classes="toggle_32" role="tablist" aria-multiselectable="true">
    <button class="js-accordion__header toggle_32__header" type="button" aria-controls="undefined-0" aria-expanded="false" role="tab" id="undefined-0_tab" aria-selected="false">accordion title</button>
    <div class="js-accordion__panel toggle_32__panel" aria-labelledby="undefined-0_tab" role="tabpanel" id="undefined-0" aria-hidden="false">
        <h2 class="js-accordion__header toggle_32__title" tabindex="0">accordion title</h2>
        <div class="js-accordion__content">
            <p>accordion body</p>
        </div>
    </div>
    <button class="js-accordion__header toggle_32__header" type="button" aria-controls="undefined-1" aria-expanded="false" role="tab" id="undefined-1_tab" tabindex="-1" aria-selected="false">accordion title accordion title accordion title accordion title accordion title accordion title accordion title accordion title accordion title accordion title accordion title accordion title accordion title </button>
    <div class="js-accordion__panel toggle_32__panel" aria-labelledby="undefined-1_tab" role="tabpanel" id="undefined-1" aria-hidden="true">
        <h2 class="js-accordion__header toggle_32__title" tabindex="0">accordion title accordion title accordion title accordion title accordion title accordion title accordion title accordion title accordion title accordion title accordion title accordion title accordion title </h2>
        <div class="js-accordion__content">
            <p>accordion body</p>
        </div>
    </div>
    <button class="js-accordion__header toggle_32__header" type="button" aria-controls="undefined-2" aria-expanded="false" role="tab" id="undefined-2_tab" tabindex="-1" aria-selected="false">accordion title</button>
    <div class="js-accordion__panel toggle_32__panel" aria-labelledby="undefined-2_tab" role="tabpanel" id="undefined-2" aria-hidden="true">
        <h2 class="js-accordion__header toggle_32__title" tabindex="0">accordion title</h2>
        <div class="js-accordion__content">
            <p>accordion body</p>
        </div>
    </div>
</div>
<p>copy block</p>
<div class="js-accordion toggle_36" data-accordion-prefix-classes="toggle_36" role="tablist" aria-multiselectable="true">
    <button class="js-accordion__header toggle_36__header" type="button" aria-controls="undefined-0" aria-expanded="true" role="tab" id="undefined-0_tab" aria-selected="true">accordion title</button>
    <div class="js-accordion__panel toggle_36__panel" aria-labelledby="undefined-0_tab" role="tabpanel" id="undefined-0" aria-hidden="true">
        <h2 class="js-accordion__header toggle_36__title" tabindex="0">accordion title</h2>
        <div class="js-accordion__content">
            <p>accordion body</p>
        </div>
    </div>
</div>

You'll notice that the aria-controls, id and aria-labeledby attributes follow the "undefined-[id]" pattern. This would work just fine, but having two accordions in a single page, they affect each other.

I read the docs and your example page, but I don't see anything that controls this value. Although, I'm sure I missed something. Any advice?

[nico3333fr]

Hi @kotyy

could you add an id attribute to <div class="js-accordion" data-accordion-prefix-classes="toggle_32"> and tell me if it is okay ?

[kotyy]

That fixed it!

Thank you for the help.

[nico3333fr]

You're welcomed ;)