Rethinking the usage of aria-expanded in collapsible body in favor of aria-hidden.

[svenhaag]

• Operating system and version: Windows 10 Pro
• Browser and version: Firefox 51.0.1 64bit, Chrome 56
• Test case: http://getbootstrap.com/javascript/#collapse

When pressing the button in the example test case:

<button
  data-toggle="collapse"
  data-target="#collapseExample"
  aria-expanded="false"
  aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample">content</div>

the aria-expanded attribute is also added to the collapseExample DIV like:

<button
  data-toggle="collapse"
  data-target="#collapseExample"
  aria-expanded="true"
  aria-controls="collapseExample">
  Button with data-target
</button>
<div class="collapse" id="collapseExample" aria-expanded="true">content</div>

Instead, for the #collapseExample, it should be not rendered at all due to the data-target attribute
OR the aria-hidden attribute should be explicitly set in every case (expanded or not) according to:

• https://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden
• https://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/
• http://heydonworks.com/practical_aria_examples/

[patrickhlauke]

• Bootstrap 3 isn't being developed further at this point - but the same behavior is present in Bootstrap 4 http://v4-alpha.getbootstrap.com/components/collapse/
• aria-hidden is not needed, as the flip between display:none and display:block has the same effect (things that are display:none'd are hidden from assistive technology, the same way that those with aria-hidden="true" are)
• the fact that aria-expanded is set on the element that is expanded/collapsed is a valid bug. it doesn't do any harm, but it's certainly incorrect - it should only be the trigger element (the link or button that causes the expand/collapse) that has that attribute. i'll see if this can be fixed

[mdo]

Does anything need addressing here in v4 that might be a breaking change?