feat(react-utilities): use event.key for keyboard events

[ling1726]

Pull request checklist

• Addresses an existing issue: Implements RFC(keyboard-key): Handle keyboard keys in more modern and tree shakeable way #18587 react-components versioning and release cycle #19106 v9: replace keyboard-key with keyboard-keys #19013
• Include a change request file using $ yarn change

Description of changes

Removes dependency from @fluentui/keyboard-key and switches to the converged @fluentui/keyboard-keys implemeting #18587 and bringing all converged dependencies to alpha to be ready to release for lockstep for #19106

Focus areas to test

(optional)

[fabricteam]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	166.545 kB 48.069 kB	166.545 kB 48.068 kB	1 B
react-menu Menu (including children components)	106.034 kB 32.709 kB	106.038 kB 32.722 kB	-4 B -13 B
react-menu Menu (including selectable components)	108.794 kB 33.259 kB	108.798 kB 33.268 kB	-4 B -9 B
react-popover Popover	98.484 kB 29.001 kB	100.644 kB 30.142 kB	-2.16 kB -1.141 kB

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-accordion Accordion (including children components)	55.21 kB 17.401 kB
react-avatar Avatar	56.558 kB 15.66 kB
react-badge Badge	24.343 kB 7.165 kB
react-badge CounterBadge	27.156 kB 7.851 kB
react-badge PresenseBadge	237 B 177 B
react-button Button	25.03 kB 8.04 kB
react-button CompoundButton	30.322 kB 8.917 kB
react-button MenuButton	26.833 kB 8.623 kB
react-button ToggleButton	34.627 kB 8.676 kB
react-components react-components: FluentProvider & webLightTheme	36.258 kB 11.596 kB
react-divider Divider	15.889 kB 5.747 kB
react-image Image	10.642 kB 4.264 kB
react-input Input	31.636 kB 11.312 kB
react-label Label	9.397 kB 3.839 kB
react-link Link	14.715 kB 6.012 kB
react-make-styles makeStaticStyles (runtime)	7.59 kB 3.321 kB
react-make-styles makeStyles + mergeClasses (runtime)	22.135 kB 8.356 kB
react-make-styles makeStyles + mergeClasses (build time)	2.557 kB 1.202 kB
react-portal Portal	7.78 kB 2.672 kB
react-positioning usePopper	23.145 kB 7.942 kB
react-provider FluentProvider	16.256 kB 5.969 kB
react-slider Slider	29.002 kB 9.123 kB
react-text Text - Default	11.798 kB 4.452 kB
react-text Text - Wrappers	15.414 kB 4.734 kB
react-tooltip Tooltip	46.054 kB 15.658 kB
react-utilities SSRProvider	213 B 170 B

_{🤖 This report was generated against ed1de3abb2d386b7ab5dae275063a9a4777ee9b0}

[size-auditor]

Asset size changes

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

Baseline commit: ed1de3abb2d386b7ab5dae275063a9a4777ee9b0 (build)

[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 95e17e7:

Sandbox	Source
Fluent UI React Starter	Configuration

[fabricteam]

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	839	872	5000
BaseButton	mount	865	836	5000
Breadcrumb	mount	2530	2522	1000
ButtonNext	mount	424	428	5000
Checkbox	mount	1414	1405	5000
CheckboxBase	mount	1272	1229	5000
ChoiceGroup	mount	4503	4543	5000
ComboBox	mount	896	926	1000
CommandBar	mount	9685	9680	1000
ContextualMenu	mount	5827	5841	1000
DefaultButton	mount	1050	1064	5000
DetailsRow	mount	3530	3580	5000
DetailsRowFast	mount	3563	3543	5000
DetailsRowNoStyles	mount	3318	3276	5000
Dialog	mount	2046	2003	1000
DocumentCardTitle	mount	131	127	1000
Dropdown	mount	3054	3056	5000
FluentProviderNext	mount	7089	7160	5000
FocusTrapZone	mount	1716	1659	5000
FocusZone	mount	1752	1695	5000
IconButton	mount	1614	1645	5000
Label	mount	317	320	5000
Layer	mount	1733	1705	5000
Link	mount	445	449	5000
MakeStyles	mount	1729	1730	50000
MenuButton	mount	1387	1398	5000
MessageBar	mount	1911	1908	5000
Nav	mount	3144	3051	1000
OverflowSet	mount	1056	1075	5000
Panel	mount	1306	2038	1000
Persona	mount	797	818	1000
Pivot	mount	1323	1364	1000
PrimaryButton	mount	1197	1197	5000
Rating	mount	7193	7202	5000
SearchBox	mount	1225	1259	5000
Shimmer	mount	2400	2470	5000
Slider	mount	1814	1834	5000
SpinButton	mount	4649	4681	5000
Spinner	mount	405	413	5000
SplitButton	mount	2991	2958	5000
Stack	mount	467	478	5000
StackWithIntrinsicChildren	mount	1482	1473	5000
StackWithTextChildren	mount	4225	4264	5000
SwatchColorPicker	mount	9538	9683	5000
Tabs	mount	1352	1327	1000
TagPicker	mount	2396	2443	5000
TeachingBubble	mount	11362	11253	5000
Text	mount	407	412	5000
TextField	mount	1312	1341	5000
ThemeProvider	mount	1130	1122	5000
ThemeProvider	virtual-rerender	567	564	5000
Toggle	mount	760	757	5000
buttonNative	mount	117	111	5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AttachmentMinimalPerf.default	152	140	1.09:1
ButtonSlotsPerf.default	537	512	1.05:1
ListCommonPerf.default	604	573	1.05:1
ListNestedPerf.default	516	491	1.05:1
RadioGroupMinimalPerf.default	432	411	1.05:1
BoxMinimalPerf.default	328	317	1.03:1
ButtonMinimalPerf.default	154	150	1.03:1
DropdownManyItemsPerf.default	645	626	1.03:1
FlexMinimalPerf.default	275	266	1.03:1
RefMinimalPerf.default	225	219	1.03:1
SegmentMinimalPerf.default	322	312	1.03:1
TextMinimalPerf.default	324	315	1.03:1
AttachmentSlotsPerf.default	1002	978	1.02:1
ChatDuplicateMessagesPerf.default	269	264	1.02:1
ChatMinimalPerf.default	611	601	1.02:1
ChatWithPopoverPerf.default	336	328	1.02:1
FormMinimalPerf.default	375	369	1.02:1
HeaderSlotsPerf.default	700	686	1.02:1
ItemLayoutMinimalPerf.default	1137	1110	1.02:1
MenuMinimalPerf.default	790	778	1.02:1
TreeWith60ListItems.default	165	161	1.02:1
VideoMinimalPerf.default	583	574	1.02:1
CardMinimalPerf.default	513	507	1.01:1
DatepickerMinimalPerf.default	5121	5079	1.01:1
DialogMinimalPerf.default	710	705	1.01:1
DropdownMinimalPerf.default	2938	2920	1.01:1
InputMinimalPerf.default	1180	1172	1.01:1
LayoutMinimalPerf.default	347	344	1.01:1
LoaderMinimalPerf.default	651	646	1.01:1
MenuButtonMinimalPerf.default	1543	1525	1.01:1
PopupMinimalPerf.default	560	554	1.01:1
PortalMinimalPerf.default	169	167	1.01:1
TooltipMinimalPerf.default	973	962	1.01:1
ButtonOverridesMissPerf.default	1588	1581	1:1
CheckboxMinimalPerf.default	2575	2572	1:1
DividerMinimalPerf.default	334	334	1:1
HeaderMinimalPerf.default	339	340	1:1
ListMinimalPerf.default	466	465	1:1
ListWith60ListItems.default	602	600	1:1
ProviderMergeThemesPerf.default	1586	1582	1:1
ProviderMinimalPerf.default	925	926	1:1
ReactionMinimalPerf.default	357	357	1:1
SkeletonMinimalPerf.default	331	331	1:1
SliderMinimalPerf.default	1451	1452	1:1
SplitButtonMinimalPerf.default	3875	3877	1:1
IconMinimalPerf.default	581	580	1:1
TextAreaMinimalPerf.default	452	454	1:1
ToolbarMinimalPerf.default	875	873	1:1
LabelMinimalPerf.default	352	357	0.99:1
StatusMinimalPerf.default	617	622	0.99:1
TableManyItemsPerf.default	1746	1769	0.99:1
EmbedMinimalPerf.default	3846	3905	0.98:1
GridMinimalPerf.default	311	317	0.98:1
ImageMinimalPerf.default	350	358	0.98:1
TableMinimalPerf.default	371	378	0.98:1
CustomToolbarPrototype.default	3550	3616	0.98:1
TreeMinimalPerf.default	750	764	0.98:1
AnimationMinimalPerf.default	371	384	0.97:1
CarouselMinimalPerf.default	422	436	0.97:1
AccordionMinimalPerf.default	135	140	0.96:1
AvatarMinimalPerf.default	175	182	0.96:1
RosterPerf.default	1056	1135	0.93:1
AlertMinimalPerf.default	235	255	0.92:1