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
Documentation Feedback
The example code displayed for the CDK accordion component contains some accessibility issues:
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 code should probably look more like the WAI-ARIA accordion example, where the header (not the entire accordion item) is a
<button>that gets thearia-expandedandaria-controlsattributes. This seems to be how<mat-expansion-panel>works already.Affected documentation page
https://material.angular.io/cdk/accordion/examples