Operate Dialog in open mode to ensure accessible focus behavior

[chrisdholt]

Pull request checklist

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

Description of changes

Due to issues with slotted content on the dialog this PR returns the dialog back to open mode to ensure accessible focus behavior can be achieved and works as expected.

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 a384537:

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

[msft-github-bot]

Perf Analysis

No significant results to display.

All results

Scenario	Render type	7.0 Ticks	PR Ticks	Iterations	Status
Avatar	mount	928	969	5000
BaseButton	mount	1031	993	5000
Breadcrumb	mount	42259	42500	5000
ButtonNext	mount	707	718	5000
Checkbox	mount	1680	1678	5000
CheckboxBase	mount	1457	1522	5000
ChoiceGroup	mount	5341	5424	5000
ComboBox	mount	962	965	1000
CommandBar	mount	7851	7827	1000
ContextualMenu	mount	13009	13584	1000
DefaultButton	mount	1205	1199	5000
DetailsRow	mount	3878	3928	5000
DetailsRowFast	mount	3775	3832	5000
DetailsRowNoStyles	mount	3608	3647	5000
Dialog	mount	1638	1629	1000
DocumentCardTitle	mount	1878	1896	1000
Dropdown	mount	2823	2853	5000
FocusTrapZone	mount	1841	1796	5000
FocusZone	mount	1884	1949	5000
IconButton	mount	1920	1906	5000
Label	mount	352	359	5000
Layer	mount	2063	2053	5000
Link	mount	478	474	5000
MenuButton	mount	1595	1590	5000
MessageBar	mount	2109	2113	5000
Nav	mount	3499	3446	1000
OverflowSet	mount	1540	1543	5000
Panel	mount	1499	1531	1000
Persona	mount	870	904	1000
Pivot	mount	1480	1532	1000
PrimaryButton	mount	1424	1373	5000
Rating	mount	8181	8166	5000
SearchBox	mount	1421	1385	5000
Shimmer	mount	2831	2831	5000
Slider	mount	1575	1600	5000
SpinButton	mount	5277	5255	5000
Spinner	mount	448	444	5000
SplitButton	mount	3419	3333	5000
Stack	mount	548	540	5000
StackWithIntrinsicChildren	mount	1667	1693	5000
StackWithTextChildren	mount	5063	5172	5000
SwatchColorPicker	mount	11254	11088	5000
TagPicker	mount	2895	2989	5000
TeachingBubble	mount	51859	51731	5000
Text	mount	468	479	5000
TextField	mount	1509	1502	5000
ThemeProvider	mount	1747	1755	5000
ThemeProvider	virtual-rerender	661	644	5000
Toggle	mount	855	885	5000
button	mount	107	126	5000

Perf Analysis (Fluent)

Perf comparison

Status	Scenario	Fluent TPI	Fabric TPI	Ratio	Iterations	Ticks
🎯	Avatar.Fluent	0.5	0.53	0.94:1	2000	1000
🦄	Button.Fluent	0.13	0.21	0.62:1	5000	650
🔧	Checkbox.Fluent	0.69	0.39	1.77:1	1000	689
🎯	Dialog.Fluent	0.18	0.24	0.75:1	5000	888
🔧	Dropdown.Fluent	3.1	0.52	5.96:1	1000	3095
🔧	Icon.Fluent	0.16	0.06	2.67:1	5000	798
🎯	Image.Fluent	0.09	0.12	0.75:1	5000	445
🔧	Slider.Fluent	1.69	0.4	4.22:1	1000	1691
🔧	Text.Fluent	0.09	0.03	3:1	5000	428
🦄	Tooltip.Fluent	0.12	16.68	0.01:1	5000	620

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
AccordionMinimalPerf.default	190	0	Infinity:1
AlertMinimalPerf.default	343	0	Infinity:1
AvatarMinimalPerf.default	553	0	Infinity:1
BoxMinimalPerf.default	444	0	Infinity:1
ButtonMinimalPerf.default	228	0	Infinity:1
ButtonOverridesMissPerf.default	1873	0	Infinity:1
ButtonSlotsPerf.default	650	0	Infinity:1
ButtonUseCssNestingPerf.default	1216	0	Infinity:1
CardMinimalPerf.default	670	0	Infinity:1
CarouselMinimalPerf.default	517	0	Infinity:1
ChatDuplicateMessagesPerf.default	454	0	Infinity:1
ChatWithPopoverPerf.default	529	0	Infinity:1
CheckboxMinimalPerf.default	3088	0	Infinity:1
DialogMinimalPerf.default	881	0	Infinity:1
DividerMinimalPerf.default	451	0	Infinity:1
DropdownManyItemsPerf.default	847	0	Infinity:1
DropdownMinimalPerf.default	3056	0	Infinity:1
EmbedMinimalPerf.default	2098	0	Infinity:1
FlexMinimalPerf.default	350	0	Infinity:1
FormMinimalPerf.default	517	0	Infinity:1
HeaderSlotsPerf.default	927	0	Infinity:1
ImageMinimalPerf.default	485	0	Infinity:1
ItemLayoutMinimalPerf.default	1464	0	Infinity:1
LabelMinimalPerf.default	515	0	Infinity:1
LayoutMinimalPerf.default	495	0	Infinity:1
ListCommonPerf.default	751	0	Infinity:1
ListMinimalPerf.default	596	0	Infinity:1
ListNestedPerf.default	645	0	Infinity:1
ListWith60ListItems.default	1025	0	Infinity:1
LoaderMinimalPerf.default	804	0	Infinity:1
MenuMinimalPerf.default	976	0	Infinity:1
PopupMinimalPerf.default	774	0	Infinity:1
PortalMinimalPerf.default	187	0	Infinity:1
ProviderMinimalPerf.default	1117	0	Infinity:1
RadioGroupMinimalPerf.default	509	0	Infinity:1
ReactionMinimalPerf.default	479	0	Infinity:1
RefMinimalPerf.default	257	0	Infinity:1
SegmentMinimalPerf.default	431	0	Infinity:1
SkeletonMinimalPerf.default	495	0	Infinity:1
SliderMinimalPerf.default	1695	0	Infinity:1
SplitButtonMinimalPerf.default	4154	0	Infinity:1
StatusMinimalPerf.default	852	0	Infinity:1
IconMinimalPerf.default	743	0	Infinity:1
TableMinimalPerf.default	470	0	Infinity:1
TextMinimalPerf.default	425	0	Infinity:1
TextAreaMinimalPerf.default	586	0	Infinity:1
CustomToolbarPrototype.default	4161	0	Infinity:1
ToolbarMinimalPerf.default	1054	0	Infinity:1
TooltipMinimalPerf.default	900	0	Infinity:1
TreeMinimalPerf.default	1011	0	Infinity:1
VideoMinimalPerf.default	727	0	Infinity:1
Avatar.Fluent	1000	0	Infinity:1
Button.Fluent	650	0	Infinity:1
Checkbox.Fluent	689	0	Infinity:1
Dialog.Fluent	888	0	Infinity:1
Dropdown.Fluent	3095	0	Infinity:1
Icon.Fluent	798	0	Infinity:1
Image.Fluent	445	0	Infinity:1
Slider.Fluent	1691	0	Infinity:1
Tooltip.Fluent	620	0	Infinity:1
TableManyItemsPerf.default	2547	1	2547:1
ProviderMergeThemesPerf.default	2152	1	2152:1
MenuButtonMinimalPerf.default	1754	1	1754:1
InputMinimalPerf.default	1452	1	1452:1
AttachmentSlotsPerf.default	1282	1	1282:1
ButtonUseCssPerf.default	911	1	911:1
ChatMinimalPerf.default	703	1	703:1
HeaderMinimalPerf.default	486	1	486:1
AnimationMinimalPerf.default	464	1	464:1
Text.Fluent	428	1	428:1
GridMinimalPerf.default	418	1	418:1
TreeWith60ListItems.default	223	1	223:1
AttachmentMinimalPerf.default	202	1	202:1

[size-auditor]

Asset size changes

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

Baseline commit: 6b5adf5ff536e71ba2dc40ee0b209552fe4c7893 (build)

[SethDonohue]

Works as expected

[msft-github-bot]

🎉@fluentui/[email protected] has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release