GroupList doesn't support HTMLAttributes

[nloyolag]

Environment Information

• Package version(s): @fluentui/react@^7.134.3
• Browser and OS versions: Edge Chromium, Windows 10

Please provide a reproduction of the bug in a codepen:

https://codepen.io/nloyolag/pen/JjKLPpG?editable=true%3Dhttps%3A%2F%2Fdeveloper.microsoft.com%2F

Actual behavior:

When passing aria-labelledby to GroupList, the property is not exposed to the div containing the list. This behavior does work on the List component.

A colleague of mine digged into this and found that List supports the native HTML attributes, but GroupedList doesn't.

fluentui/packages/react-internal/src/components/List/List.tsx

Line 439 in cbc0b9a

const divProps = getNativeProps<React.HTMLAttributes<HTMLDivElement>>(this.props, divProperties);

fluentui/packages/react/src/components/GroupedList/GroupedList.base.tsx

Line 130 in cbc0b9a

} = this.props;

Expected behavior:

GroupedList supports HTML attributes, including aria-labelledby

Priorities and help requested:

Are you willing to submit a PR to fix? Yes, if we get the green light

Requested priority: Normal

[paulgildea]

@nloyolag Thanks for filing this issue!

@tomi-msft / @JustSlone Can we coordinate with @nloyolag to spin up a PR to get this contributed?

[JustSlone]

@ThomasMichon, @dzearing, what do you think of this addition? It seems like we want this functionality on GroupedList and it would help with accessibility.

I can imagine this might cause issues if folks are passing html attributes today and they are being ignored, we might need put this behavior behind a toggle for now?

What do you all think?

(CC: @smhigley since she's looking at GroupedList accessibility in general)

[nloyolag]

Thanks everyone for looking into this. Let me know if there is an ETA for the fix or if there is anything else needed on my side.

[ThomasMichon]

One thing worth noting is that since GroupedList renders a FocusZone as its root component, it takes a prop called focusZoneProps and applies every prop to its root.
One thing it doesn't do is take a rootListProps or similar override to apply to the List element it renders for its virtual root.
It probably wouldn't be a good idea to make IGroupedListProps directly accept all HTML Attributes. Instead, we should add a dedicated prop which takes the prop overrides targeting the relevant element.

[JustSlone]

@nloyolag Does Thomas's suggestion make sense? Basically we could add rootListProps to allow passing these attributes down to the List component, following the pattern of the existing focusZoneProps