Unable to tab to the accordion

Question

I've been trying to get my accordion to use keyboard tab for accessibility reasons. I've used focus and tried various ways but I'm still having no luck. Unfortunately I'm just adding to an original CSS file, so I'm not sure if something could be blocking it?

As you can see all I need is something simple.

https://codepen.io/sazzak13/pen/eYpbNVm or the code is below:

var acc = document.getElementsByClassName("accordion-cw");
var i;

for (i = 0; i < acc.length; i++) {

  acc[i].addEventListener("click", function () {
    this.classList.toggle("active-accordian-cw");
    
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}

.accordion-cw {
  background-color: #e2e0e0;
  color: #333333;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  outline: none;
  transition: 0.4s;
  }

.active-cw, .accordion-cw:hover, .accordion:focus {
  background-color: #d2d2d2;
}

.panel-cw {
  padding: 0 18px;
  background-color: #E6E6E6;
  display: none;
  overflow: hidden;
}

.accordion-cw:after {
  content: '\02795';
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px; 
}
.active-cw:after {
content: "\2796";

}

enter code here

<h1>Accordions!</h1>
``<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
<button class="accordion-cw">Test</button>
<div class="panel-cw">&nbsp;
 <ul aria-hidden="true">
  <li>Some text</li>
  <li>More text</li>
  <li>And some more</li>
 </ul>
</div>
<button class="accordion-cw">Test 2</button>
<div class="panel-cw">&nbsp;
 <ul aria-hidden="false">
  <li>Some text</li>
  <li>More text</li>
  <li>And some more</li>
 </ul>
</div>

Thank you in advance (rookie here!) Sarah

Answer 1

I believe this is what you want to achieve?

var acc = document.getElementsByClassName("accordion-cw");
var accArray = [].slice.call(acc);
var i;
var j = 0;
var clicked = false;
var toggle = false;

for (i = 0; i < acc.length; i++) {

  acc[i].addEventListener("click", function() {
    this.classList.toggle("active-accordian-cw");
    if (!toggle) {
      j = accArray.indexOf(this);
      clicked = true;
    }
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}


document.addEventListener('keydown', function(e) {
  if (e.keyCode == 9) {
    if (j >= acc.length) {
      j = 0;
    }
    if (clicked) {
      j++;
      clicked = false;
      if (j >= acc.length)
        j = 0;
    }
    toggle = true;
    accArray.forEach(x => {
      x.classList.remove("active-accordian-cw");
      x.nextElementSibling.style.display = "none";
    });
    acc[j].click();

    toggle = false;
    j++;

    e.preventDefault();
  }
});

.accordion-cw {
  background-color: #e2e0e0;
  color: #333333;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  outline: none;
  transition: 0.4s;
}

.active-cw,
.accordion-cw:hover {
  background-color: #d2d2d2;
}

.panel-cw {
  padding: 0 18px;
  background-color: #E6E6E6;
  display: none;
  overflow: hidden;
}

.accordion-cw:after {
  content: '\02795';
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}

.active-cw:after {
  content: "\2796";
}

<div class="accordion-cw"><a>Test</a></div>
<div class="panel-cw">&nbsp;
  <ul aria-hidden="true">
    <li>Some text</li>
    <li>More text</li>
    <li>And some more</li>
  </ul>
</div>
<div class="accordion-cw"><a>Test 2</a></div>
<div class="panel-cw">&nbsp;
  <ul aria-hidden="false">
    <li>Some text</li>
    <li>More text</li>
    <li>And some more</li>
  </ul>
</div>

Answer 2

The reason you cannot get focus on your hyperlinks (<a>) is that they are not valid.

For a hyperlink to be valid it must have a href attribute that is not empty.

If you change

<div class="accordion-cw"><a>Test</a></div>

to

<div class="accordion-cw"><a href="#">Test</a></div>

You will be able to focus and click each element.

There is a lot to consider

Although the above fixes your focus problem, it doesn't make your accordion accessible.

A great example to learn from can be found in this article on accessible accordions from W3

You will notice they use:

• buttons (as they are semantically correct, buttons for same page actions, hyperlinks for new pages)
• the buttons are within headings (as a lot of screen reader users tend to navigate by headings)
• WAI-ARIA properties such as aria-expanded (so the user knows the state of the buttons) etc.

There is a lot in that article but it should give you a great base to use.