Cannot navigate around accordion tabs

[raratiru]

Hallo,

Using the tab button, I can navigate up to the first accordion panel, open it hitting enter and surf around it using the tab button again.

That's it... !

There is no way I can surf the rest of the tabs: No arrow, or Ctrl + Arrow or Tab will allow something like that.

I am using Firefox ESR 45.3.0.

The html code is the following:

  <div class="js-accordion" data-accordion-prefix-classes="newChallenge-accordion">
    {% for key, value in result_dict.items %}
    <section class='category'>
      <h2 class="js-accordion__header" >Panel Title</h2>
      <div class="js-accordion__panel">
        {% for each in value %}
        <section class='entry'>
          <ul class='container'>
            <li class='inline-12'>First Column</li>
            <li class='inline-22'><a class='button' href='http://blah.com'>Button Link</a></li>
          </ul>
        </section>
        {% endfor %}
      </div>
    </section>
    {% endfor %}
  </div>

[nico3333fr]

Hi @raratiru

let's try to reproduce this issue : if you focus on the first navigation panel, and type "Down" of "Left" arrow, does the focus goes to another panel or nothing happens ?

Could you test with the demo page ? https://a11y.nicolas-hoffmann.net/accordion/ (it should be ok with this demo)

Thanks, Nicolas

[raratiru]

Hallo @nico3333fr,

Thank you for helping:

if you focus on the first navigation panel, and type "Down" of "Left" arrow, does the focus goes to another panel or nothing happens ?

Nothing happens... If I hit tab, it takes me outside of the page.

Could you test with the demo page ?

OK, the demo page works fine!

Hmmm.

Can you imagine what could be wrong? I will have to dig a bit deeper when I get back home.

I post two blocks of rendered code just in case.

<div class="js-accordion" data-accordion-prefix-classes="newChallenge-accordion">

  <section class='category'>
    <h2 class="js-accordion__header" data-accordion-opened="false">Bookstore (1)</h2>
    <div class="js-accordion__panel">
      <section class='entry'>
        <h3>Order: 1</h3>
        <ul class='container'>
          <li class='inline-12'>Proximity: 86%</li>
          <li class='inline-22'><a class='button' rel='help' target='_blank' href=''>Directions</a></li>
        </ul>
      </section>
    </div>
  </section>

  <section class='category'>
    <h2 class="js-accordion__header" data-accordion-opened="false">Private Cram School (1)</h2>
    <div class="js-accordion__panel">
       <section class='entry'>
        <h3>Order: 2</h3>
        <ul class='container'>
          <li class='inline-12'>Proximity: 84%</li>
          <li class='inline-22'><a class='button' rel='help' target='_blank' href=''>Directions</a></li>
        </ul>
      </section>
    </div>
  </section>
</div>

[raratiru]

OK, I have found why this is happening:

<section class='category'>
  <h2 class="js-accordion__header" data-accordion-opened="false"></h2>
  ...
</section>

This <section> addition above <h2> creates the whole issue.

I will try to modify the javascript to see if I can make it work, because I would not like to sacrifice the section element.