docs-bug(cdk/accordion): Accordion example code uses ARIA attributes incorrectly, cannot be operated using keyboard

[cartr]

Documentation Feedback

The example code displayed for the CDK accordion component contains some accessibility issues:

• Each entire accordion item is given role="button" -- so when it's open, the accordion body is considered part of the accordion item's name. (This also makes it invalid to put interactive elements inside the accordion.)
• The accordion items are focusable, but there's no way to open/close them using the keyboard.

The code should probably look more like the WAI-ARIA accordion example, where the header (not the entire accordion item) is a <button> that gets the aria-expanded and aria-controls attributes. This seems to be how <mat-expansion-panel> works already.

Affected documentation page

https://material.angular.io/cdk/accordion/examples

[Sepandard]

Hi, everyone. Is anybody working on this issue? I can try to fix it if you don't mind.