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.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}