aria-expanded="true/false" should be on button that triggers the action

[pauldcollins]

Bug description:

The aria-expanded attribute with true/false values should be on the button the triggers the action. Currently it's on the parent DIV of the content expanding/collapsing. It will therefore not be picked up by screen readers and assistive software. This has been tested in JAWS 17 and NVDA 2016

It should be moved to the button: eg: <button aria-expanded="true/false">Toggle Collapse</button>

You can also see examples of how it should be done on the W3C site - it's a part of the toggle link W3C site example

Link to minimally-working plunker that reproduces the issue:

This can be found on the example site, just inspect the HTML for either of the collapse button examples: https://angular-ui.github.io/bootstrap/#/collapse

Version of Angular, UIBS, and Bootstrap

Angular: 1.5.8 UIBS: 2.2.0 Bootstrap: 3.3.7

[wesleycho]

Reading the spec, it makes no assertion that it should be on a button or anchor tag - see here. Indeed, even looking at the second example here, it is not limited to the DOM element.

The collapse directive is traditionally a user toggleable directive - the spec just mentions that it should denote whether a region is collapsed/expanded, thus the attribute seems to be in the correct location.

[JawsomeJason]

@wesleycho doesn't https://www.w3.org/WAI/GL/wiki/Using_aria-expanded_to_indicate_the_state_of_a_collapsible_element under "Description" state that it should be on the button?

When authors use collapsible content, for example, to hide navigation menus or lists of content, the triggering link or button should indicate to screen reader users whether the collapsable content below is in the expanded or in the collapsed state. The aria-expanded attribute is used for this purpose.