fix: Use role=complementary for Popovers without focus traps

[ling1726]

Current Behavior

Popover always has a dialog role. This announcement can be confusing if the there is no interactive content inside the popover.

New Behavior

Since all interactive popovers should use trapFocus, use role="complementary" when trapFocus is not false.

Related Issue(s)

Addressed by #21107

[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 2450887:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

[fabricteam]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	166.076 kB 47.056 kB	166.094 kB 47.066 kB	18 B 10 B
react-popover Popover	95.33 kB 29.008 kB	95.348 kB 29.017 kB	18 B 9 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-components react-components: FluentProvider & webLightTheme	32.489 kB 10.636 kB

_{🤖 This report was generated against d8fe0da13e1d34028a51e5d740e7bdc78c3a6862}

[size-auditor]

Asset size changes

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

Baseline commit: ebc62b16de199691794df12080d89b77979d1131 (build)

[fabricteam]

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	1026	1043	5000
BaseButton	mount	1088	1064	5000
Breadcrumb	mount	2842	2838	1000
ButtonNext	mount	599	556	5000
Checkbox	mount	1785	1753	5000
CheckboxBase	mount	1519	1477	5000
ChoiceGroup	mount	5467	5431	5000
ComboBox	mount	1069	1084	1000
CommandBar	mount	10856	10830	1000
ContextualMenu	mount	9140	9073	1000
DefaultButton	mount	1339	1293	5000
DetailsRow	mount	4233	4182	5000
DetailsRowFast	mount	4226	4199	5000
DetailsRowNoStyles	mount	3989	3931	5000
Dialog	mount	2767	2755	1000
DocumentCardTitle	mount	214	210	1000
Dropdown	mount	3583	3560	5000
FluentProviderNext	mount	1929	1913	5000
FluentProviderWithTheme	mount	183	182	10
FluentProviderWithTheme	virtual-rerender	144	130	10
FluentProviderWithTheme	virtual-rerender-with-unmount	232	226	10
FocusTrapZone	mount	2033	2001	5000
FocusZone	mount	1951	1959	5000
IconButton	mount	2024	2032	5000
Label	mount	414	410	5000
Layer	mount	3300	3249	5000
Link	mount	554	567	5000
MakeStyles	mount	1757	1761	50000
MenuButton	mount	1756	1706	5000
MessageBar	mount	2172	2194	5000
Nav	mount	3701	3727	1000
OverflowSet	mount	1255	1240	5000
Panel	mount	2614	2649	1000
Persona	mount	938	948	1000
Pivot	mount	1616	1595	1000
PrimaryButton	mount	1440	1484	5000
Rating	mount	8939	8902	5000
SearchBox	mount	1573	1556	5000
Shimmer	mount	2939	2932	5000
Slider	mount	2188	2195	5000
SpinButton	mount	5737	5461	5000
Spinner	mount	503	478	5000
SplitButton	mount	3559	3487	5000
Stack	mount	624	628	5000
StackWithIntrinsicChildren	mount	2765	2774	5000
StackWithTextChildren	mount	6204	6174	5000
SwatchColorPicker	mount	12677	12681	5000
TagPicker	mount	2949	3056	5000
TeachingBubble	mount	14075	14042	5000
Text	mount	507	534	5000
TextField	mount	1580	1620	5000
ThemeProvider	mount	1341	1319	5000
ThemeProvider	virtual-rerender	693	704	5000
ThemeProvider	virtual-rerender-with-unmount	2159	2140	5000
Toggle	mount	943	957	5000
buttonNative	mount	170	180	5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
SegmentMinimalPerf.default	419	382	1.1:1
AttachmentMinimalPerf.default	198	181	1.09:1
PortalMinimalPerf.default	198	184	1.08:1
ReactionMinimalPerf.default	454	421	1.08:1
RefMinimalPerf.default	264	246	1.07:1
IconMinimalPerf.default	731	684	1.07:1
AttachmentSlotsPerf.default	1243	1168	1.06:1
FlexMinimalPerf.default	332	312	1.06:1
GridMinimalPerf.default	392	370	1.06:1
HeaderSlotsPerf.default	906	858	1.06:1
SkeletonMinimalPerf.default	408	390	1.05:1
ToolbarMinimalPerf.default	1068	1022	1.05:1
DialogMinimalPerf.default	844	814	1.04:1
LayoutMinimalPerf.default	414	397	1.04:1
ListCommonPerf.default	727	701	1.04:1
ListWith60ListItems.default	760	730	1.04:1
LoaderMinimalPerf.default	760	732	1.04:1
ProviderMinimalPerf.default	1273	1222	1.04:1
TextMinimalPerf.default	401	385	1.04:1
ButtonMinimalPerf.default	211	204	1.03:1
ButtonOverridesMissPerf.default	1891	1837	1.03:1
ChatDuplicateMessagesPerf.default	339	329	1.03:1
DropdownManyItemsPerf.default	777	753	1.03:1
LabelMinimalPerf.default	448	433	1.03:1
MenuMinimalPerf.default	956	927	1.03:1
SliderMinimalPerf.default	1866	1805	1.03:1
SplitButtonMinimalPerf.default	4821	4682	1.03:1
StatusMinimalPerf.default	804	782	1.03:1
TableManyItemsPerf.default	2196	2137	1.03:1
CardMinimalPerf.default	637	625	1.02:1
DatepickerMinimalPerf.default	6144	6029	1.02:1
EmbedMinimalPerf.default	4620	4532	1.02:1
HeaderMinimalPerf.default	421	414	1.02:1
InputMinimalPerf.default	1404	1380	1.02:1
ListMinimalPerf.default	583	573	1.02:1
ListNestedPerf.default	645	635	1.02:1
MenuButtonMinimalPerf.default	1853	1812	1.02:1
PopupMinimalPerf.default	669	659	1.02:1
TextAreaMinimalPerf.default	596	587	1.02:1
TooltipMinimalPerf.default	1160	1140	1.02:1
TreeWith60ListItems.default	211	207	1.02:1
AnimationMinimalPerf.default	597	589	1.01:1
ChatMinimalPerf.default	832	824	1.01:1
ProviderMergeThemesPerf.default	1823	1798	1.01:1
RadioGroupMinimalPerf.default	513	507	1.01:1
TableMinimalPerf.default	457	454	1.01:1
TreeMinimalPerf.default	901	888	1.01:1
VideoMinimalPerf.default	741	731	1.01:1
AccordionMinimalPerf.default	177	177	1:1
CarouselMinimalPerf.default	528	529	1:1
DividerMinimalPerf.default	408	407	1:1
ItemLayoutMinimalPerf.default	1352	1350	1:1
CustomToolbarPrototype.default	4383	4375	1:1
AvatarMinimalPerf.default	222	224	0.99:1
DropdownMinimalPerf.default	3162	3188	0.99:1
AlertMinimalPerf.default	314	319	0.98:1
BoxMinimalPerf.default	383	391	0.98:1
ButtonSlotsPerf.default	611	623	0.98:1
CheckboxMinimalPerf.default	2886	2931	0.98:1
FormMinimalPerf.default	466	475	0.98:1
ChatWithPopoverPerf.default	416	427	0.97:1
RosterPerf.default	1309	1345	0.97:1
ImageMinimalPerf.default	427	447	0.96:1

[ling1726]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 3 pipeline(s).