New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Problem with nesting #6

Closed
john-cheesman opened this Issue Sep 6, 2016 · 6 comments

Comments

Projects
None yet
2 participants
@john-cheesman

john-cheesman commented Sep 6, 2016

When nesting one accordion in an accordion panel, extra accordion header buttons are being added to the nested panels.

Source:

<section class="js-accordion" data-accordion-prefix-classes="accordion" data-accordion-multiselectable="none">
    <h2 class="js-accordion__header" data-accordion-opened="true">Header</h2>
    <div class="js-accordion__panel">
        <p>content</p>

        <section class="js-accordion" data-accordion-prefix-classes="accordion" data-accordion-multiselectable="none">
            <h2 class="js-accordion__header" data-accordion-opened="true">Header</h2>
            <div class="js-accordion__panel">
                <p>content</p>
            </div>

            <h2 class="js-accordion__header">Header</h2>
            <div class="js-accordion__panel">
                <p>content</p>
            </div>
        </section>
    </div>
</section>

DOM:

<section aria-multiselectable="false" role="tablist" class="accordion" data-accordion-prefix-classes="accordion" data-accordion-multiselectable="none">
    <button aria-selected="true" id="accordion1_tab1" role="tab" aria-expanded="true" aria-controls="accordion1_panel1" class="js-accordion__header accordion__header">Header</button>
    <div aria-hidden="false" id="accordion1_panel1" role="tabpanel" aria-labelledby="accordion1_tab1" class="js-accordion__panel accordion__panel">
        <h2 tabindex="0" class="accordion__title" data-accordion-opened="true">Header</h2>
        <p>content</p>

        <section aria-multiselectable="false" role="tablist" class="accordion" data-accordion-prefix-classes="accordion" data-accordion-multiselectable="none">
            <button tabindex="-1" aria-selected="false" id="accordion2_tab1" role="tab" aria-expanded="false" aria-controls="accordion2_panel1" class="js-accordion__header accordion__header">Header</button>
            <div aria-hidden="true" id="accordion2_panel1" role="tabpanel" aria-labelledby="accordion2_tab1" class="js-accordion__panel accordion__panel">
                <button aria-selected="false" tabindex="0" id="accordion1_tab2" role="tab" aria-expanded="true" aria-controls="accordion1_panel2" class="accordion__header accordion__title">Header</button>
                <h2 tabindex="0" class="accordion__title" data-accordion-opened="true">Header</h2>
                <p>content</p>
            </div>

            <button tabindex="-1" aria-selected="false" id="accordion2_tab2" role="tab" aria-expanded="false" aria-controls="accordion2_panel2" class="js-accordion__header accordion__header">Header</button>
            <div aria-hidden="true" id="accordion2_panel2" role="tabpanel" aria-labelledby="accordion2_tab2" class="js-accordion__panel accordion__panel">
                <button aria-selected="false" tabindex="0" id="accordion1_tab3" role="tab" aria-expanded="false" aria-controls="accordion1_panel3" class="accordion__header accordion__title">Header</button>
                <h2 tabindex="0" class="accordion__title">Header</h2>
                <p>content</p>
            </div>
        </section>
    </div>
</section>

@nico3333fr nico3333fr self-assigned this Sep 6, 2016

@nico3333fr nico3333fr added the bug label Sep 6, 2016

@nico3333fr

This comment has been minimized.

Show comment
Hide comment
@nico3333fr

nico3333fr Sep 6, 2016

Owner

Hi @john-cheesman ,

this must be a too powerful selector. It seems to work well if you replace the line 15

$accordions_headers = $this.find( ".js-accordion__header" ),
by
$accordions_headers = $this.children( ".js-accordion__header" ),

Could you test quickly and confirm ? If it is okay, I'll commit the fix.

Thanks a lot for pointing out this issue.

Owner

nico3333fr commented Sep 6, 2016

Hi @john-cheesman ,

this must be a too powerful selector. It seems to work well if you replace the line 15

$accordions_headers = $this.find( ".js-accordion__header" ),
by
$accordions_headers = $this.children( ".js-accordion__header" ),

Could you test quickly and confirm ? If it is okay, I'll commit the fix.

Thanks a lot for pointing out this issue.

@john-cheesman

This comment has been minimized.

Show comment
Hide comment
@john-cheesman

john-cheesman Sep 7, 2016

I've tried that and it's working as expected now, thanks.

john-cheesman commented Sep 7, 2016

I've tried that and it's working as expected now, thanks.

@nico3333fr

This comment has been minimized.

Show comment
Hide comment
@nico3333fr

nico3333fr Sep 7, 2016

Owner

Fine, I commit the fix asap. Thanks a lot for your help 👍

Owner

nico3333fr commented Sep 7, 2016

Fine, I commit the fix asap. Thanks a lot for your help 👍

@nico3333fr nico3333fr closed this in 884cb95 Sep 7, 2016

@john-cheesman

This comment has been minimized.

Show comment
Hide comment
@john-cheesman

john-cheesman commented Sep 7, 2016

Thanks

@nico3333fr

This comment has been minimized.

Show comment
Hide comment
@nico3333fr

nico3333fr Sep 7, 2016

Owner

I hope you won't mind, I've mentionned your help on the project page: https://a11y.nicolas-hoffmann.net/accordion/

Owner

nico3333fr commented Sep 7, 2016

I hope you won't mind, I've mentionned your help on the project page: https://a11y.nicolas-hoffmann.net/accordion/

@john-cheesman

This comment has been minimized.

Show comment
Hide comment
@john-cheesman

john-cheesman Sep 7, 2016

That's cool, glad to help 👍

john-cheesman commented Sep 7, 2016

That's cool, glad to help 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment