fix: focus styling inconsistencies

[eljefe223]

Pull request checklist

Fixed focus styling inconsistencies. Seems the only broken focus state in fluent was anchor and button outline appearance.

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

Description of changes

(give an overview)

Focus areas to test

(optional)

[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 51772e2:

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

[fabricteam]

Perf Analysis

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	899	925	5000
BaseButtonCompat	mount	1033	1019	5000
Breadcrumb	mount	44679	46478	5000
Checkbox	mount	1656	1655	5000
CheckboxBase	mount	1418	1416	5000
ChoiceGroup	mount	5043	5096	5000
ComboBox	mount	1046	1027	1000
CommandBar	mount	11272	10927	1000
ContextualMenu	mount	6357	6734	1000
DefaultButtonCompat	mount	1172	1185	5000
DetailsRow	mount	3754	3741	5000
DetailsRowFast	mount	3898	3777	5000
DetailsRowNoStyles	mount	3735	3777	5000
Dialog	mount	1574	1635	1000
DocumentCardTitle	mount	2063	2061	1000
Dropdown	mount	3679	3685	5000
FocusTrapZone	mount	1946	1992	5000
FocusZone	mount	1929	1985	5000
IconButtonCompat	mount	1961	1987	5000
Label	mount	367	387	5000
Layer	mount	1935	1918	5000
Link	mount	516	516	5000
MenuButtonCompat	mount	1630	1649	5000
MessageBar	mount	2155	2216	5000
Nav	mount	3545	3566	1000
OverflowSet	mount	1080	1077	5000
Panel	mount	1500	1482	1000
Persona	mount	892	903	1000
Pivot	mount	1490	1457	1000
PrimaryButtonCompat	mount	1357	1308	5000
Rating	mount	8419	8056	5000
SearchBox	mount	1528	1463	5000
Shimmer	mount	2907	2829	5000
Slider	mount	2134	2162	5000
SpinButton	mount	5466	5532	5000
Spinner	mount	465	467	5000
SplitButtonCompat	mount	3679	3549	5000
Stack	mount	561	566	5000
StackWithIntrinsicChildren	mount	1685	1684	5000
StackWithTextChildren	mount	5084	5124	5000
SwatchColorPicker	mount	11612	11542	5000
Tabs	mount	1686	1649	1000
TagPicker	mount	3177	3439	5000
TeachingBubble	mount	13149	12453	5000
Text	mount	494	483	5000
TextField	mount	1550	1527	5000
ThemeProvider	mount	2306	2300	5000
ThemeProvider	virtual-rerender	698	678	5000
Toggle	mount	877	897	5000
button	mount	740	729	5000
buttonNative	mount	116	119	5000

Perf Analysis (Fluent)

Perf comparison

Status	Scenario	Fluent TPI	Fabric TPI	Ratio	Iterations	Ticks
🎯	Avatar.Fluent	0.5	0.54	0.93:1	2000	994
🦄	Button.Fluent	0.13	0.22	0.59:1	5000	644
🔧	Checkbox.Fluent	0.69	0.39	1.77:1	1000	688
🎯	Dialog.Fluent	0.18	0.24	0.75:1	5000	885
🔧	Dropdown.Fluent	3.24	0.44	7.36:1	1000	3243
🔧	Icon.Fluent	0.16	0.07	2.29:1	5000	779
🦄	Image.Fluent	0.1	0.15	0.67:1	5000	476
🔧	Slider.Fluent	1.77	0.51	3.47:1	1000	1771
🔧	Text.Fluent	0.09	0.03	3:1	5000	430
🦄	Tooltip.Fluent	0.13	1	0.13:1	5000	659

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
RefMinimalPerf.default	282	257	1.1:1
AttachmentMinimalPerf.default	190	175	1.09:1
PortalMinimalPerf.default	185	172	1.08:1
ChatMinimalPerf.default	760	712	1.07:1
TableMinimalPerf.default	512	478	1.07:1
ButtonMinimalPerf.default	207	196	1.06:1
HeaderMinimalPerf.default	445	421	1.06:1
StatusMinimalPerf.default	888	836	1.06:1
Slider.Fluent	1771	1665	1.06:1
BoxMinimalPerf.default	428	406	1.05:1
ChatDuplicateMessagesPerf.default	490	468	1.05:1
FormMinimalPerf.default	494	470	1.05:1
PopupMinimalPerf.default	817	776	1.05:1
TreeWith60ListItems.default	231	221	1.05:1
AnimationMinimalPerf.default	452	436	1.04:1
ImageMinimalPerf.default	448	429	1.04:1
ItemLayoutMinimalPerf.default	1427	1368	1.04:1
LabelMinimalPerf.default	504	483	1.04:1
ReactionMinimalPerf.default	481	461	1.04:1
IconMinimalPerf.default	811	780	1.04:1
VideoMinimalPerf.default	756	730	1.04:1
AccordionMinimalPerf.default	182	176	1.03:1
ChatWithPopoverPerf.default	535	519	1.03:1
DialogMinimalPerf.default	902	878	1.03:1
DividerMinimalPerf.default	445	431	1.03:1
MenuButtonMinimalPerf.default	1814	1762	1.03:1
SplitButtonMinimalPerf.default	4328	4208	1.03:1
TextAreaMinimalPerf.default	620	604	1.03:1
TreeMinimalPerf.default	922	895	1.03:1
Tooltip.Fluent	659	642	1.03:1
ButtonOverridesMissPerf.default	1832	1790	1.02:1
DatepickerMinimalPerf.default	56580	55395	1.02:1
FlexMinimalPerf.default	339	332	1.02:1
LayoutMinimalPerf.default	457	447	1.02:1
Checkbox.Fluent	688	674	1.02:1
Text.Fluent	430	422	1.02:1
AttachmentSlotsPerf.default	1236	1225	1.01:1
AvatarMinimalPerf.default	519	513	1.01:1
CardMinimalPerf.default	662	655	1.01:1
CarouselMinimalPerf.default	541	535	1.01:1
DropdownMinimalPerf.default	3093	3074	1.01:1
EmbedMinimalPerf.default	4391	4356	1.01:1
ListNestedPerf.default	681	677	1.01:1
ListWith60ListItems.default	1059	1052	1.01:1
ProviderMergeThemesPerf.default	2236	2213	1.01:1
ProviderMinimalPerf.default	1114	1099	1.01:1
RadioGroupMinimalPerf.default	531	526	1.01:1
SkeletonMinimalPerf.default	524	517	1.01:1
TableManyItemsPerf.default	2574	2542	1.01:1
ToolbarMinimalPerf.default	1123	1107	1.01:1
Avatar.Fluent	994	989	1.01:1
ButtonUseCssPerf.default	899	901	1:1
ButtonUseCssNestingPerf.default	1172	1175	1:1
CheckboxMinimalPerf.default	3177	3165	1:1
GridMinimalPerf.default	410	412	1:1
LoaderMinimalPerf.default	811	807	1:1
SliderMinimalPerf.default	1743	1746	1:1
TextMinimalPerf.default	442	443	1:1
CustomToolbarPrototype.default	4242	4263	1:1
TooltipMinimalPerf.default	910	910	1:1
Button.Fluent	644	645	1:1
Dropdown.Fluent	3243	3237	1:1
MenuMinimalPerf.default	981	987	0.99:1
SegmentMinimalPerf.default	437	440	0.99:1
ButtonSlotsPerf.default	630	640	0.98:1
InputMinimalPerf.default	1346	1369	0.98:1
ListCommonPerf.default	719	735	0.98:1
ListMinimalPerf.default	573	582	0.98:1
Dialog.Fluent	885	904	0.98:1
Image.Fluent	476	484	0.98:1
DropdownManyItemsPerf.default	826	855	0.97:1
HeaderSlotsPerf.default	857	883	0.97:1
Icon.Fluent	779	802	0.97:1
AlertMinimalPerf.default	327	341	0.96:1

[size-auditor]

Asset size changes

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

Baseline commit: 2bd75583ad636c408cb56a4de9f149995f732d68 (build)

[msft-fluent-ui-bot]

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

Handy links:

• Release Notes
• Official NPM Release