fix(material/table): add aria-expanded to expandable rows example#32823
Open
yogeshwaran-c wants to merge 2 commits intoangular:mainfrom
Open
fix(material/table): add aria-expanded to expandable rows example#32823yogeshwaran-c wants to merge 2 commits intoangular:mainfrom
yogeshwaran-c wants to merge 2 commits intoangular:mainfrom
Conversation
The expandable rows table example did not convey the expanded/collapsed state to assistive technology. Add aria-expanded to the toggle button so screen readers announce whether a row is expanded, and update the aria-label dynamically to reflect the current state. Closes angular#15020
JeanMeche
requested changes
Feb 23, 2026
Comment on lines
15
to
16
| [attr.aria-label]="isExpanded(element) ? 'collapse row' : 'expand row'" | ||
| [attr.aria-expanded]="isExpanded(element)" |
Member
There was a problem hiding this comment.
aria attributes are natively support since 20.2.
Suggested change
| [attr.aria-label]="isExpanded(element) ? 'collapse row' : 'expand row'" | |
| [attr.aria-expanded]="isExpanded(element)" | |
| [aria-label]="isExpanded(element) ? 'collapse row' : 'expand row'" | |
| [aria-expanded]="isExpanded(element)" |
Author
There was a problem hiding this comment.
Applied — switched to native [aria-*] bindings in a277177. Ready for re-review!
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What kind of change does this PR introduce?
Accessibility fix (example)
What is the current behavior?
The "Table with expandable rows" example does not convey the expanded/collapsed state to assistive technology. Screen reader users have no way to know whether a row is currently expanded, and the toggle button always says "expand row" regardless of state.
Closes #15020
What is the new behavior?
[attr.aria-expanded]="isExpanded(element)"to the toggle button, so screen readers announce the expanded/collapsed statearia-labelfrom a static"expand row"to a dynamic binding that says"collapse row"when expanded and"expand row"when collapsedAdditional context
The WAI-ARIA Authoring Practices recommend using
aria-expandedon disclosure triggers to communicate state to assistive technology. The existing button element already provides keyboard accessibility (focusable, activatable via Enter/Space), so only the ARIA state attribute was missing.