fix: set pointer event to none on children in button component

[khamudom]

Pull request checklist

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

Description of changes

Added pointer-events: none on content, start and end classes. The contents were triggering focus-visible on the button when clicked.

Focus areas to test

(optional)

[size-auditor]

Asset size changes

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

Baseline commit: e81620081c85eaf0224b3bc290bf15f589ca7281 (build)

[fabricteam]

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	879	889	5000
BaseButton	mount	1009	1012	5000
Breadcrumb	mount	3005	3036	1000
ButtonNext	mount	545	545	5000
Checkbox	mount	1714	1783	5000
CheckboxBase	mount	1508	1494	5000
ChoiceGroup	mount	5346	5341	5000
ComboBox	mount	1072	1072	1000
CommandBar	mount	11422	11425	1000
ContextualMenu	mount	6931	6839	1000
DefaultButton	mount	1286	1274	5000
DetailsRow	mount	4103	4088	5000
DetailsRowFast	mount	4152	4143	5000
DetailsRowNoStyles	mount	3920	3877	5000
Dialog	mount	2354	2237	1000
DocumentCardTitle	mount	165	177	1000
Dropdown	mount	3563	3618	5000
FocusTrapZone	mount	2005	1907	5000
FocusZone	mount	1885	1918	5000
IconButton	mount	2017	1969	5000
Label	mount	365	386	5000
Layer	mount	1970	2009	5000
Link	mount	535	527	5000
MakeStyles	mount	1958	1899	50000
MenuButton	mount	1672	1646	5000
MessageBar	mount	2240	2263	5000
Nav	mount	3640	3610	1000
OverflowSet	mount	1142	1161	5000
Panel	mount	2162	2186	1000
Persona	mount	928	898	1000
Pivot	mount	1568	1547	1000
PrimaryButton	mount	1435	1434	5000
Rating	mount	8785	8664	5000
SearchBox	mount	1522	1520	5000
Shimmer	mount	2900	2833	5000
Slider	mount	2209	2199	5000
SpinButton	mount	5548	5692	5000
Spinner	mount	454	452	5000
SplitButton	mount	3538	3574	5000
Stack	mount	545	552	5000
StackWithIntrinsicChildren	mount	1742	1808	5000
StackWithTextChildren	mount	5137	5169	5000
SwatchColorPicker	mount	11351	11360	5000
Tabs	mount	1557	1531	1000
TagPicker	mount	2662	2699	5000
TeachingBubble	mount	12768	12685	5000
Text	mount	460	466	5000
TextField	mount	1491	1486	5000
ThemeProvider	mount	1287	1280	5000
ThemeProvider	virtual-rerender	646	618	5000
ThemeProviderNext	mount	7597	7184	5000
Toggle	mount	888	908	5000
buttonNative	mount	123	120	5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
TableMinimalPerf.default	491	449	1.09:1
TextAreaMinimalPerf.default	617	567	1.09:1
LabelMinimalPerf.default	453	425	1.07:1
LayoutMinimalPerf.default	423	397	1.07:1
AnimationMinimalPerf.default	483	454	1.06:1
TextMinimalPerf.default	403	381	1.06:1
TreeWith60ListItems.default	208	197	1.06:1
PortalMinimalPerf.default	205	196	1.05:1
AccordionMinimalPerf.default	176	169	1.04:1
AttachmentMinimalPerf.default	184	177	1.04:1
ChatDuplicateMessagesPerf.default	331	319	1.04:1
DropdownManyItemsPerf.default	796	769	1.04:1
FlexMinimalPerf.default	334	322	1.04:1
GridMinimalPerf.default	403	386	1.04:1
MenuButtonMinimalPerf.default	1794	1730	1.04:1
PopupMinimalPerf.default	625	603	1.04:1
RefMinimalPerf.default	259	249	1.04:1
AlertMinimalPerf.default	325	317	1.03:1
CardMinimalPerf.default	654	637	1.03:1
ChatWithPopoverPerf.default	424	413	1.03:1
ListWith60ListItems.default	752	728	1.03:1
SplitButtonMinimalPerf.default	4258	4141	1.03:1
TooltipMinimalPerf.default	1116	1088	1.03:1
CarouselMinimalPerf.default	520	509	1.02:1
DialogMinimalPerf.default	846	833	1.02:1
HeaderSlotsPerf.default	865	847	1.02:1
ListCommonPerf.default	736	719	1.02:1
ProviderMinimalPerf.default	1177	1153	1.02:1
RadioGroupMinimalPerf.default	520	508	1.02:1
ReactionMinimalPerf.default	450	440	1.02:1
StatusMinimalPerf.default	771	758	1.02:1
AttachmentSlotsPerf.default	1286	1274	1.01:1
BoxMinimalPerf.default	407	401	1.01:1
ButtonOverridesMissPerf.default	1912	1898	1.01:1
ButtonSlotsPerf.default	620	615	1.01:1
EmbedMinimalPerf.default	4571	4516	1.01:1
FormMinimalPerf.default	490	483	1.01:1
HeaderMinimalPerf.default	411	406	1.01:1
SliderMinimalPerf.default	1794	1770	1.01:1
TableManyItemsPerf.default	2196	2167	1.01:1
ToolbarMinimalPerf.default	1066	1056	1.01:1
AvatarMinimalPerf.default	218	217	1:1
ChatMinimalPerf.default	715	712	1:1
CheckboxMinimalPerf.default	3029	3021	1:1
DatepickerMinimalPerf.default	6358	6383	1:1
DividerMinimalPerf.default	420	421	1:1
InputMinimalPerf.default	1398	1400	1:1
ListMinimalPerf.default	591	590	1:1
LoaderMinimalPerf.default	742	742	1:1
SegmentMinimalPerf.default	398	400	1:1
CustomToolbarPrototype.default	4202	4199	1:1
DropdownMinimalPerf.default	3391	3435	0.99:1
ImageMinimalPerf.default	437	440	0.99:1
ItemLayoutMinimalPerf.default	1429	1444	0.99:1
ProviderMergeThemesPerf.default	1799	1815	0.99:1
SkeletonMinimalPerf.default	400	403	0.99:1
ListNestedPerf.default	629	642	0.98:1
MenuMinimalPerf.default	957	973	0.98:1
VideoMinimalPerf.default	710	726	0.98:1
TreeMinimalPerf.default	888	914	0.97:1
IconMinimalPerf.default	654	679	0.96:1
ButtonMinimalPerf.default	196	208	0.94:1
RosterPerf.default	1187	1264	0.94:1

[chrisdholt]

Thanks @khamudom!

[msft-fluent-ui-bot]

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

Handy links:

• Release Notes
• Official NPM Release