(web-components) Increased contrast for small input controls

[bheston]

Pull request checklist

• Addresses an existing issue: Fixes #0000
• Include a change request file using $ yarn change

Description of changes

The smaller input controls like checkbox and radio need to meet 3:1 contrast, but the current neutral stroke recipe wasn't designed for that. Added a "strong" recipe to meet contrast.

Focus areas to test

(optional)

[fabricteam]

📊 Bundle size report

_{🤖 This report was generated against 72069cc41eede3a26725611b39d28c8b551ac003}

[size-auditor]

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: e429b5325e128d7cc6068a208c5f9e87b9ce09ca (build)

[fabricteam]

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	911	890	5000
BaseButton	mount	895	921	5000
Breadcrumb	mount	2666	2615	1000
ButtonNext	mount	438	447	5000
Checkbox	mount	1533	1483	5000
CheckboxBase	mount	1281	1284	5000
ChoiceGroup	mount	4794	4765	5000
ComboBox	mount	989	978	1000
CommandBar	mount	10338	10432	1000
ContextualMenu	mount	6339	6385	1000
DefaultButton	mount	1137	1131	5000
DetailsRow	mount	3819	3717	5000
DetailsRowFast	mount	3863	3811	5000
DetailsRowNoStyles	mount	3616	3583	5000
Dialog	mount	2082	2084	1000
DocumentCardTitle	mount	146	150	1000
Dropdown	mount	3271	3212	5000
FluentProviderNext	mount	7581	7486	5000
FocusTrapZone	mount	1796	1772	5000
FocusZone	mount	1834	1837	5000
IconButton	mount	1777	1739	5000
Label	mount	343	343	5000
Layer	mount	1803	1806	5000
Link	mount	473	469	5000
MakeStyles	mount	1846	1836	50000
MenuButton	mount	1460	1483	5000
MessageBar	mount	2065	2051	5000
Nav	mount	3269	3280	1000
OverflowSet	mount	1111	1095	5000
Panel	mount	2140	2075	1000
Persona	mount	839	848	1000
Pivot	mount	1442	1419	1000
PrimaryButton	mount	1290	1294	5000
Rating	mount	7697	7773	5000
SearchBox	mount	1364	1311	5000
Shimmer	mount	2542	2507	5000
Slider	mount	1932	1985	5000
SpinButton	mount	5001	5016	5000
Spinner	mount	438	419	5000
SplitButton	mount	3237	3179	5000
Stack	mount	503	518	5000
StackWithIntrinsicChildren	mount	1502	1507	5000
StackWithTextChildren	mount	4515	4492	5000
SwatchColorPicker	mount	10078	10133	5000
Tabs	mount	1384	1388	1000
TagPicker	mount	2574	2611	5000
TeachingBubble	mount	11905	12061	5000
Text	mount	431	416	5000
TextField	mount	1361	1396	5000
ThemeProvider	mount	1160	1187	5000
ThemeProvider	virtual-rerender	613	616	5000
Toggle	mount	817	797	5000
buttonNative	mount	118	113	5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ChatWithPopoverPerf.default	374	344	1.09:1
CardMinimalPerf.default	562	532	1.06:1
FlexMinimalPerf.default	297	281	1.06:1
FormMinimalPerf.default	403	379	1.06:1
PortalMinimalPerf.default	182	172	1.06:1
TreeWith60ListItems.default	174	164	1.06:1
VideoMinimalPerf.default	661	630	1.05:1
ChatDuplicateMessagesPerf.default	286	276	1.04:1
LayoutMinimalPerf.default	366	351	1.04:1
ButtonSlotsPerf.default	553	539	1.03:1
HeaderSlotsPerf.default	773	752	1.03:1
ReactionMinimalPerf.default	379	367	1.03:1
RefMinimalPerf.default	247	240	1.03:1
SkeletonMinimalPerf.default	357	347	1.03:1
TableMinimalPerf.default	398	385	1.03:1
ChatMinimalPerf.default	648	633	1.02:1
InputMinimalPerf.default	1255	1229	1.02:1
ItemLayoutMinimalPerf.default	1222	1200	1.02:1
ProviderMergeThemesPerf.default	1686	1656	1.02:1
RadioGroupMinimalPerf.default	451	444	1.02:1
SegmentMinimalPerf.default	347	339	1.02:1
SliderMinimalPerf.default	1568	1543	1.02:1
SplitButtonMinimalPerf.default	4132	4059	1.02:1
AttachmentSlotsPerf.default	1075	1063	1.01:1
ButtonOverridesMissPerf.default	1697	1684	1.01:1
DatepickerMinimalPerf.default	5586	5536	1.01:1
DropdownMinimalPerf.default	3107	3073	1.01:1
EmbedMinimalPerf.default	4133	4110	1.01:1
ImageMinimalPerf.default	375	370	1.01:1
LoaderMinimalPerf.default	688	684	1.01:1
MenuButtonMinimalPerf.default	1650	1637	1.01:1
TableManyItemsPerf.default	1889	1873	1.01:1
CustomToolbarPrototype.default	3864	3842	1.01:1
ToolbarMinimalPerf.default	962	950	1.01:1
ButtonMinimalPerf.default	169	169	1:1
DividerMinimalPerf.default	365	364	1:1
DropdownManyItemsPerf.default	679	676	1:1
HeaderMinimalPerf.default	349	348	1:1
ListWith60ListItems.default	639	637	1:1
MenuMinimalPerf.default	846	849	1:1
TextMinimalPerf.default	353	353	1:1
TooltipMinimalPerf.default	1017	1017	1:1
TreeMinimalPerf.default	804	808	1:1
AttachmentMinimalPerf.default	147	149	0.99:1
CarouselMinimalPerf.default	466	470	0.99:1
DialogMinimalPerf.default	749	759	0.99:1
PopupMinimalPerf.default	589	594	0.99:1
StatusMinimalPerf.default	664	670	0.99:1
AnimationMinimalPerf.default	392	400	0.98:1
AvatarMinimalPerf.default	197	201	0.98:1
BoxMinimalPerf.default	341	347	0.98:1
CheckboxMinimalPerf.default	2740	2789	0.98:1
LabelMinimalPerf.default	378	384	0.98:1
ListCommonPerf.default	626	636	0.98:1
RosterPerf.default	1119	1147	0.98:1
ProviderMinimalPerf.default	966	988	0.98:1
IconMinimalPerf.default	597	607	0.98:1
GridMinimalPerf.default	321	332	0.97:1
ListNestedPerf.default	542	556	0.97:1
TextAreaMinimalPerf.default	501	515	0.97:1
ListMinimalPerf.default	496	515	0.96:1
AccordionMinimalPerf.default	148	157	0.94:1
AlertMinimalPerf.default	265	288	0.92:1

[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 81a4c01:

Sandbox	Source
Fluent UI React Starter	Configuration

[msft-fluent-ui-bot]

🎉@fluentui/web-components@v1.4.0 has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release