Fluentui: [MAS1.3.1]: Ensures elements with an ARIA role that require child roles contain them.

[bcoard]

User Impact:
People with Visual Impairments will be unable to know the group/header name while navigated to the items under it.

Build Details: ​
OS Version: 19628.1
AT: Narrator

Repro Steps: ​
Using a grouped list run A11yInsights Fast Pass.

Actual Result: ​
Required ARIA children role not present: group label must be associated to all the list items in the list under them.

Expected Result: ​
Ensures elements with an ARIA role that require child roles contain them

This image for a list in use today but the same failure should apply with the out of box experience.

[khmakoto]

This is something that is occurring also on our GroupedList.Custom.Example.tsx, but after some investigation it turns out that those roles need to be provided onRenderCell which is something the user must pass. I'll fix the example, but to fix the actual error you should provide role="row" and role="cell" in your onRenderCell.

[bcoard]

Thanks. Could we add some documentation on this as well? Could you also explain, possibly, why this can't be fixed in the control itself?

[khmakoto]

Basically, GroupedListSections render a List of role grid with its cells determined by what onRenderCell is passing. A grid role expects to have as children elements with either role row or rowgroup. An element with role row in turn expects to have children with roles cell, columnheader, gridcell or rowheader.

Since onRenderCell is something provided entirely by the user the responsibility of applying these roles relies on them if they choose to not use the DetailsRow component to render those cells.

[msft-github-bot]

:tada:This issue was addressed in #13457, which has now been successfully released as [email protected].:tada:

Handy links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site

[bcoard]

@khmakoto I've managed to get a repro in CodePen even with your changes.

First collapse all the headers in this CodePen then run Accessibility Insights.
https://codepen.io/bcoard/pen/BajNEvL?editors=0010

[khmakoto]

This issue seems to have been fixed by #14835. I have talked with @bcoard offline about it and he'll check things on his end to see if he's pulling the correct version to get these changes.