[Feature]: localization issue in Legends: support callback to get localized overflow string

[fpintos]

Library

React Components / v9 (@fluentui/react-components)

Describe the feature that you would like added

This is in react-charting.

Legends uses overflowText to produce an overflowString and then it assumes that ${items.length} ${overflowString} should be used as aria-label and text for the button. See

fluentui/packages/react-charting/src/components/Legends/Legends.base.tsx

Line 304 in 603fe59

{items.length} {overflowString}

This is not correct for all languages. In English, it is natural to say "3 more", but in Portuguese it is more natural to say "mais 3" instead of "3 mais" (even thou both are correct). There are languages that the number and the noun that follows it can change depending on factors like gender, case, or plurality, so the library needs to account for that.

Suggestion: allow components to pass a callback function to overflowText as overflowText: string | (count: number) => string, (or use a new property for the function) then call this function passing items.length and use the returned string as aria label and button text. The application is then responsible for the full formatting of that string, based on the given count.

Have you discussed this feature with our team

No response

Additional context

No response

Validations

• Check that there isn't already an issue that requests the same feature to avoid creating a duplicate.

Priority

None