feat: useListenFocusedElement hook

[bsunderhus]

Previous Behavior

New Behavior

1. adds hook to subscribe to focus changes on tabster
2. updates useRovingTabIndexes from Tree to ensure focusability

The Tree component is facing an issue due to its custom focus management implementation. Every time a treeitem is manually focused, the Tree component has to recalculate what is the roved element.

Related Issue(s)

• Fixes https://github.com/microsoft/fluentui/issues/30001

[fabricteam]

Perf Analysis (@fluentui/react-components)

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
FluentProviderWithTheme	virtual-rerender	31	43	10	Possible regression

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	667	645	5000
Button	mount	313	310	5000
Field	mount	1126	1144	5000
FluentProvider	mount	727	721	5000
FluentProviderWithTheme	mount	93	87	10
FluentProviderWithTheme	virtual-rerender	31	43	10	Possible regression
FluentProviderWithTheme	virtual-rerender-with-unmount	83	88	10
MakeStyles	mount	860	855	50000
Persona	mount	1766	1752	5000
SpinButton	mount	1406	1385	5000
SwatchPicker	mount	1542	1561	5000

[fabricteam]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-components react-components: entire library	1.099 MB 266.888 kB	1.099 MB 266.966 kB	271 B 78 B
react-tag-picker-preview @fluentui/react-tag-picker-preview - package	188.225 kB 55.74 kB	188.273 kB 55.749 kB	48 B 9 B

Unchanged fixtures

| Package & Exports | Size (minified/GZIP) | | ----------------- | -------------------: | | react-accordion
Accordion (including children components) | `100.94 kB`
`30.574 kB` | | react-alert
Alert | `83.737 kB`
`23.475 kB` | | react-avatar
Avatar | `50.175 kB`
`15.944 kB` | | react-avatar
AvatarGroup | `19.702 kB`
`7.794 kB` | | react-avatar
AvatarGroupItem | `64.829 kB`
`20.272 kB` | | react-breadcrumb
@fluentui/react-breadcrumb - package | `116.817 kB`
`32.173 kB` | | react-button
Button | `39.513 kB`
`11.17 kB` | | react-button
CompoundButton | `46.874 kB`
`12.662 kB` | | react-button
MenuButton | `44.292 kB`
`12.544 kB` | | react-button
SplitButton | `52.306 kB`
`14.135 kB` | | react-button
ToggleButton | `56.558 kB`
`13.068 kB` | | react-calendar-compat
Calendar Compat | `153.428 kB`
`40.128 kB` | | react-card
Card - All | `103.992 kB`
`29.35 kB` | | react-card
Card | `97.003 kB`
`27.61 kB` | | react-card
CardFooter | `13.971 kB`
`5.626 kB` | | react-card
CardHeader | `16.214 kB`
`6.386 kB` | | react-card
CardPreview | `14.015 kB`
`5.752 kB` | | react-checkbox
Checkbox | `35.656 kB`
`12.07 kB` | | react-combobox
Combobox (including child components) | `104.926 kB`
`33.812 kB` | | react-combobox
Dropdown (including child components) | `106.398 kB`
`33.79 kB` | | react-components
react-components: Button, FluentProvider & webLightTheme | `71.104 kB`
`20.52 kB` | | react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover | `221.287 kB`
`62.497 kB` | | react-components
react-components: FluentProvider & webLightTheme | `43.591 kB`
`14.356 kB` | | react-datepicker-compat
DatePicker Compat | `227.451 kB`
`63.531 kB` | | react-dialog
Dialog (including children components) | `116.899 kB`
`36.102 kB` | | react-infobutton
InfoButton | `139.885 kB`
`43.723 kB` | | react-infobutton
InfoLabel | `143.7 kB`
`44.944 kB` | | react-link
Link | `17.082 kB`
`6.911 kB` | | react-menu
Menu (including children components) | `153.846 kB`
`46.074 kB` | | react-menu
Menu (including selectable components) | `156.532 kB`
`46.623 kB` | | react-message-bar
MessageBar (all components) | `24.204 kB`
`8.983 kB` | | react-persona
Persona | `57.066 kB`
`17.821 kB` | | react-popover
Popover | `128.132 kB`
`40.174 kB` | | react-portal
Portal | `13.717 kB`
`4.886 kB` | | react-portal-compat
PortalCompatProvider | `7.944 kB`
`2.588 kB` | | react-provider
FluentProvider | `23.765 kB`
`8.662 kB` | | react-radio
Radio | `32.95 kB`
`10.252 kB` | | react-radio
RadioGroup | `15.354 kB`
`6.265 kB` | | react-slider
Slider | `39.949 kB`
`12.968 kB` | | react-swatch-picker-preview
@fluentui/react-swatch-picker-preview - package | `108.416 kB`
`30.25 kB` | | react-switch
Switch | `35.14 kB`
`11.199 kB` | | react-table
DataGrid | `168.828 kB`
`46.848 kB` | | react-table
Table (Primitives only) | `45.324 kB`
`14.116 kB` | | react-table
Table as DataGrid | `137.912 kB`
`37.14 kB` | | react-table
Table (Selection only) | `76.328 kB`
`20.545 kB` | | react-table
Table (Sort only) | `74.971 kB`
`20.148 kB` | | react-tags
InteractionTag | `15.299 kB`
`6.08 kB` | | react-tags
Tag | `29.092 kB`
`9.418 kB` | | react-tags
TagGroup | `82.044 kB`
`24.39 kB` | | react-timepicker-compat
TimePicker | `106.944 kB`
`35.169 kB` | | react-toast
Toast (including Toaster) | `98.667 kB`
`29.793 kB` | | react-tooltip
Tooltip | `54.664 kB`
`19.206 kB` |

_{🤖 This report was generated against 2939b63a57f70c5b3c77a4a9e9200bf0e8777596}

[codesandbox-ci[bot]]

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.

[fabricteam]

🕵 fluentuiv9 No visual regressions between this PR and main