feat: Avatar's aria label includes 'active' or 'inactive' when using the active prop

[behowell]

Current Behavior

The state of Avatar's active prop is conveyed visually via a highlight ring, but not conveyed to accessibility tools.

New Behavior

Append 'active' or 'inactive' to the active state when the active prop is set. This is achieved by adding a new slot to Avatar: activeAriaLabel, which is a hidden span that is only rendered when the active prop is set. Its ID is appended to the Avatar's aria-labelledby prop, to add it to the Avatar's aria label.

Related Issue(s)

• Fixes #23128

[fabricteam]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-alert Alert	83.511 kB 20.921 kB	83.822 kB 21.029 kB	311 B 108 B
react-avatar Avatar	48.381 kB 13.696 kB	48.692 kB 13.8 kB	311 B 104 B
react-avatar AvatarGroupItem	68.349 kB 19.039 kB	68.66 kB 19.138 kB	311 B 99 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-avatar AvatarGroup	14.95 kB 5.989 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	188.672 kB 52.359 kB
react-components react-components: FluentProvider & webLightTheme	33.394 kB 11.007 kB
react-portal-compat PortalCompatProvider	5.851 kB 1.964 kB

_{🤖 This report was generated against c63200d5cd47dc36f9d8f3ad07c5fecb7e5c6d41}

[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.

Latest deployment of this branch, based on commit 4ff5c63d6f6136735321c8dec76edd5c341a4d68:

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

[size-auditor[bot]]

Asset size changes

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

Baseline commit: c63200d5cd47dc36f9d8f3ad07c5fecb7e5c6d41 (build)

[fabricteam]

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations	Status
Avatar	mount	1586	1666	5000
Button	mount	1169	1191	5000
FluentProvider	mount	2000	1964	5000
FluentProviderWithTheme	mount	800	803	10
FluentProviderWithTheme	virtual-rerender	756	771	10
FluentProviderWithTheme	virtual-rerender-with-unmount	773	781	10
MakeStyles	mount	2420	2430	50000
SpinButton	mount	3125	3150	5000