[HTML 5] Styling with ARIA

See if you can do a better job styling this button using ARIA states. One huge benefit to styling with ARIA is that it provides visual feedback that you've applied the state correctly, which can act as a safeguard when you're testing and debugging your code.

 

In the following code, we use js to add 'expended' class to the element. But better solution is using aria-expanded to style the element.

<button class="disclosure-button mdl-button raised" aria-expanded="false" aria-controls="content">
        <span class="icon" aria-hidden="true"></span> Read More
      </button>
      <div id="content" class="disclosure-content hidden" aria-hidden="true">
        <p>It turns out contestants who switch have a 2/3 chance of winning the car, while contestants who stick to their choice have only a 1/3 chance! <a href="https://en.wikipedia.org/wiki/Monty_Hall_problem">Curious to know more?</a></p>
      </div>

  if (content.getAttribute('aria-hidden') === 'true') {

    content.setAttribute('aria-hidden', 'false');
    content.classList.remove('hidden');

    button.setAttribute('aria-expanded', 'true');
    button.classList.add('expanded');

  } else {

    content.setAttribute('aria-hidden', 'true');
    content.classList.add('hidden');

    button.setAttribute('aria-expanded', 'false');
    button.classList.remove('expanded');

  }

.disclosure-button .icon::after {
  content: '▶';
}

.disclosure-button.expanded .icon::after {
  content: '▼';
}

.disclosure-content.hidden {
  visibility: hidden;
  opacity: 0;
}

.disclosure-content {
  visibility: visible;
  opacity: 1;
}

 

Better:

.disclosure-button[aria-expanded="false"] .icon::after {
  content: '▶';
}

.disclosure-button[aria-expanded="true"] .icon::after {
  content: '▼';
}

.disclosure-content[aria-hidden="true"] {
  visibility: hidden;
  opacity: 0;
}

.disclosure-content[aria-hidden="false"] {
  visibility: visible;
  opacity: 1;
}