docs(react-examples): fix GroupedList example a11y - #36489
Draft
AKnassa wants to merge 1 commit into
Draft
Conversation
The GroupedList 'custom header and footer' examples (V1 and V2) return role-less divs from onRenderHeader/onRenderFooter. Those land directly inside the role="treegrid" list, which only allows row and rowgroup children, so accessibility scanners flag aria-required-children and screen readers get a malformed grid. Give the custom header and footer the same semantics as the built-in GroupHeader row: role="row" with a role="gridcell" child, plus aria-level/setsize/posinset/expanded on the header (the props are already populated by both GroupedList versions). Visual output is unchanged - the added inner divs are unstyled. Verified: header/footer now carry row+gridcell semantics and axe aria-structure rules pass on the rendered example; the react-examples build (CI type gate) succeeds; lint and prettier clean. The built-in GroupFooterBase has the same flaw at component level - left for a follow-up since changing component DOM could affect consumers. Fixes microsoft#33765
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.
Previous Behavior
The GroupedList "custom header and footer" documentation examples (V1 and V2) returned plain divs with no ARIA roles. Those divs sit directly inside the list's
treegrid, which is only allowed to contain rows — so accessibility scanners (like Accessibility Insights, as reported in the issue) flag the example, and anyone copying it ships the same problem.New Behavior
The example header and footer carry the same semantics as the built-in group header: a
rowcontaining agridcell, with the standard level/position/expanded attributes on the header. Visually nothing changes — the added wrappers are unstyled.What changed
GroupedList.Custom.Example.tsxandGroupedListV2.Custom.Example.tsx) updated with the role pattern the built-in GroupHeader uses.One honest note: current axe versions descend through generic divs and no longer flag this pattern by themselves, but the ARIA structure requirement is real and the scanner in the issue does flag it. The built-in GroupFooter has the same flaw at component level — left as a follow-up since changing component DOM could affect existing apps.
Related Issue(s)