(7.0) ComboBox: fix multi-select checkbox role; improve docs and examples

[ecraig12345]

Pull request checklist

• Addresses an existing issue: Related to Checkbox doesn't pass through data- props #16307, fixes ComboBox multi-select has invalid/missing aria attributes #15223, fixes ComboBox multi-select has no children with role="option" #15224
• Include a change request file using $ yarn change

Description of changes

ComboBox tries to pass role="option" and some data-* props as top-level props to an option Checkbox in multi-select mode. As documented in #16307, Checkbox currently doesn't apply most native props, so these props aren't applied. This is definitely a problem (Accessibility Insights flags it) but probably got missed since none of the ComboBox examples on the website used multi-select.

Related changes:

• Fix a minor version of this issue in Dropdown, where data-* props are passed as top-level props to the Checkbox (the more significant issue with the role had already been fixed)
• Add multi-select ComboBox examples on the website, and fix the controlled examples to actually work with freeform mode
• Add snapshot tests for ComboBox and Dropdown's open states

(master version: #16331)

[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 ef8b9de:

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	986	985	5000
Breadcrumb	mount	44779	43866	5000
Checkbox	mount	1738	1749	5000
CheckboxBase	mount	1434	1434	5000
ChoiceGroup	mount	5449	5515	5000
ComboBox	mount	962	959	1000
CommandBar	mount	8066	8006	1000
ContextualMenu	mount	14905	14905	1000
DefaultButton	mount	1285	1233	5000
DetailsRow	mount	4123	4035	5000
DetailsRowFast	mount	4071	4063	5000
DetailsRowNoStyles	mount	3891	3874	5000
Dialog	mount	1885	1835	1000
DocumentCardTitle	mount	1905	1946	1000
Dropdown	mount	2734	2770	5000
FocusTrapZone	mount	1846	1858	5000
FocusZone	mount	1902	1941	5000
IconButton	mount	1926	1996	5000
Label	mount	368	345	5000
Layer	mount	2134	2134	5000
Link	mount	472	489	5000
MenuButton	mount	1653	1659	5000
MessageBar	mount	2217	2218	5000
Nav	mount	3603	3601	1000
OverflowSet	mount	1519	1570	5000
Panel	mount	1545	1539	1000
Persona	mount	867	854	1000
Pivot	mount	1624	1557	1000
PrimaryButton	mount	1422	1411	5000
Rating	mount	8903	8765	5000
SearchBox	mount	1417	1427	5000
Shimmer	mount	2804	2873	5000
Slider	mount	1667	1662	5000
SpinButton	mount	5792	5508	5000
Spinner	mount	434	434	5000
SplitButton	mount	3488	3496	5000
Stack	mount	544	559	5000
StackWithIntrinsicChildren	mount	1942	1942	5000
StackWithTextChildren	mount	5396	5395	5000
SwatchColorPicker	mount	11630	11512	5000
TagPicker	mount	3128	3066	5000
TeachingBubble	mount	53877	53874	5000
Text	mount	467	476	5000
TextField	mount	1506	1497	5000
Toggle	mount	895	882	5000
button	mount	112	135	5000

[size-auditor]

Asset size changes

Project	Bundle	Baseline Size	New Size	Difference
office-ui-fabric-react	office-ui-fabric-react-Dropdown	228.196 kB	228.201 kB	5 bytes
office-ui-fabric-react	office-ui-fabric-react-ComboBox	241.889 kB	241.894 kB	5 bytes

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

Baseline commit: c98610f4fc38ed65b3a0a89350970681393fb0a3 (build)

[smhigley]

Just one change, otherwise it looks good!

[smhigley]

In this one case, I'd suggest leaving this as ariaLabel={item.ariaLabel}, since defining it as item._getPreviewText means the aria-label will always be set, even if an author hasn't defined item.ariaLabel. That actually caused an a11y bug in v8 (fixed now) when a team had different option text in the dropdown than the text used in the input value.

[msft-fluent-ui-bot]

Because this pull request has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

The pull request will still be available for reference. If it's still relevant to merge at some point, you can reopen or make a new version based on the latest code.

[ecraig12345]

@smhigley Finally updated this--would you mind taking another look at the core ComboBox and Dropdown changes and ensuring they look correct?

[smhigley]

LGTM!