[data grid] Fix accessibility violation in detail panel toggle column header#22178
Open
michelengelen wants to merge 1 commit intomui:masterfrom
Open
[data grid] Fix accessibility violation in detail panel toggle column header#22178michelengelen wants to merge 1 commit intomui:masterfrom
michelengelen wants to merge 1 commit intomui:masterfrom
Conversation
Signed-off-by: michel <jsnerdic@gmail.com>
michelengelen
added
type: bug
Bundle size
Deploy previewhttps://deploy-preview-22178--material-ui-x.netlify.app/ Check out the code infra dashboard for more information about this PR. |
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
1 participant
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.
The detail panel toggle column header had conflicting ARIA attributes that violated WAI-ARIA 1.2 in two successive ways:
<div aria-label="Detail panel toggle" />—aria-labelis not a supported property onrole="generic"elements, which axe flags per WCAG F59.<div aria-label="..." role="presentation" />— WAI-ARIA requires user agents to ignorerole="presentation"whenaria-labelis present, making the combination invalid and causing inconsistent screen reader behavior (reported in [data grid] Detail panel toggle header has conflicting aria-label and role="presentation" #22140).This PR replaces both patterns with
<span style={visuallyHidden}>{colDef.headerName}</span>. The visually-hiddenspancontains no ARIA attributes. The columnheader's accessible name is computed from its text content via the standard accname algorithm. The text remains invisible in the narrow column header, so there is no visual regression and no risk of re-triggering the VoiceOver double-reading issue fixed in #14482.Fixes #22140