[v7.0] Rating: specifies when a rating's button is selected/not selected to improve a11y experience

[TristanWatanabe]

cherry-pick of #17267

Pull request checklist

• Addresses an existing issue: Fixes Rating component on swipe gesture reads the ariaLabelFormat text but does not change fill color while on right-left arrow it does #16059
• Include a change request file using $ yarn change

Description of changes

• added ariaLabel prop which simplifies naming for the aria-label when not in readOnly mode.
• container and button's are given the role of radiogroup and radio respectively when not in readOnly mode.
• button's are given an aria-checked attribute to specify if they're selected when not in readOnly mode.
• pre-existing getAriaLabel function prop is now solely used for readOnly mode
• React-examples were updated to make use of the new ariaLabel prop.
• Also removed instances of getAriaLabel prop being passed in react-examples when not in readOnly mode.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit f3b7c37:

Sandbox	Source
Fluent UI Button	Configuration
codesandbox-react-template	Configuration

[fabricteam]

Perf Analysis

No significant results to display.

All results

Scenario	Render type	7.0 Ticks	PR Ticks	Iterations	Status
BaseButton	mount	880	884	5000
Breadcrumb	mount	42353	42769	5000
Checkbox	mount	1526	1536	5000
CheckboxBase	mount	1260	1261	5000
ChoiceGroup	mount	4915	4880	5000
ComboBox	mount	920	919	1000
CommandBar	mount	7634	7589	1000
ContextualMenu	mount	14568	14368	1000
DefaultButton	mount	1106	1107	5000
DetailsRow	mount	3481	3561	5000
DetailsRowFast	mount	3526	3601	5000
DetailsRowNoStyles	mount	3355	3400	5000
Dialog	mount	1646	1702	1000
DocumentCardTitle	mount	1842	1827	1000
Dropdown	mount	2520	2501	5000
FocusTrapZone	mount	1708	1730	5000
FocusZone	mount	1793	1831	5000
IconButton	mount	1749	1791	5000
Label	mount	329	333	5000
Layer	mount	1975	1975	5000
Link	mount	463	457	5000
MenuButton	mount	1465	1466	5000
MessageBar	mount	2058	2117	5000
Nav	mount	3221	3271	1000
OverflowSet	mount	1357	1420	5000
Panel	mount	1451	1458	1000
Persona	mount	790	827	1000
Pivot	mount	1429	1431	1000
PrimaryButton	mount	1289	1299	5000
Rating	mount	7530	7823	5000
SearchBox	mount	1279	1260	5000
Shimmer	mount	2499	2556	5000
Slider	mount	1484	1469	5000
SpinButton	mount	4933	5033	5000
Spinner	mount	413	419	5000
SplitButton	mount	3223	3231	5000
Stack	mount	499	507	5000
StackWithIntrinsicChildren	mount	1575	1616	5000
StackWithTextChildren	mount	4660	4631	5000
SwatchColorPicker	mount	10226	10265	5000
TagPicker	mount	2795	2779	5000
TeachingBubble	mount	51065	51391	5000
Text	mount	422	431	5000
TextField	mount	1401	1367	5000
Toggle	mount	820	823	5000
button	mount	117	99	5000

[size-auditor]

Asset size changes

Project	Bundle	Baseline Size	New Size	Difference
office-ui-fabric-react	office-ui-fabric-react-Rating	74.524 kB	74.646 kB	122 bytes

 Over Tolerance (1024 B)  Over Baseline  Below Baseline  New   Removed 1 kB = 1000 B

Baseline commit: 7034e06e3da6bdb70433755312fde9ed7a911ddd (build)

[msft-fluent-ui-bot]

🎉@uifabric/tsx-editor@v0.14.42 has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release

[msft-fluent-ui-bot]

🎉@uifabric/theme-samples@v7.2.41 has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release

[msft-fluent-ui-bot]

🎉@uifabric/fabric-website@v7.16.74 has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release

[msft-fluent-ui-bot]

🎉office-ui-fabric-react@v7.172.0 has been released which incorporates this pull request.:tada:

Handy links:

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

[msft-fluent-ui-bot]

🎉@uifabric/react-cards@v0.115.55 has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release

[msft-fluent-ui-bot]

🎉@uifabric/fabric-website-resources@v7.9.73 has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release

[msft-fluent-ui-bot]

🎉@uifabric/experiments@v7.39.34 has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release

[msft-fluent-ui-bot]

🎉@uifabric/mdl2-theme@v0.4.41 has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release

[msft-fluent-ui-bot]

🎉@uifabric/fluent-theme@v7.4.41 has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release

[msft-fluent-ui-bot]

🎉@uifabric/example-app-base@v7.19.16 has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release

[msft-fluent-ui-bot]

🎉@uifabric/charting@v4.15.31 has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release

[msft-fluent-ui-bot]

🎉@uifabric/date-time@v7.19.47 has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release

[msft-fluent-ui-bot]

🎉@fluentui/react@v7.172.0 has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release

[msft-fluent-ui-bot]

🎉@uifabric/api-docs@v7.6.44 has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release

[msft-fluent-ui-bot]

🎉@fluentui/storybook@v0.6.51 has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release

[msft-fluent-ui-bot]

🎉@uifabric/azure-themes@v7.7.41 has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release

[msft-fluent-ui-bot]

🎉@fluentui/react-examples@v0.14.9 has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release