fix(react-combobox): use role attribute instead of classname for active descendant

[dmytrokirpa]

Previous Behavior

The Option component’s classname is used in the useActiveDescendant hook’s matchOption function to figure out if an HTMLElement was rendered by the Option component. That’s fine for v9, but it doesn’t really work for headless Combobox/Dropdown setups. The main issues are that there aren’t any default classnames on the HTML elements in headless, and if you import classes from the styles hook file, Griffel gets bundled in—even if you’re not using the style hook (not 100% sure, but my theory is thats because Griffel’s AOT creates side effects and style hooks don’t get tree-shaken)

New Behavior

Use the HTMLElement's role attribute to check if the element was rendered by the Option component. The role attribute values are based on those defined in the Option component implementation https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-combobox/library/src/components/Option/useOption.tsx#L118-L119

Related Issue(s)

• Related to feat(react-headless-components-preview): add Dropdown component and stories #36101

[github-actions]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-combobox Combobox (including child components)	102.637 kB 33.966 kB	102.655 kB 33.8 kB	18 B -166 B
react-combobox Dropdown (including child components)	102.407 kB 33.704 kB	102.423 kB 33.59 kB	16 B -114 B
react-components react-components: entire library	1.291 MB 323.824 kB	1.291 MB 324.443 kB	-16 B 619 B
react-tag-picker @fluentui/react-tag-picker - package	174.502 kB 54.377 kB	174.546 kB 54.381 kB	44 B 4 B
react-timepicker-compat TimePicker	105.595 kB 35.567 kB	105.613 kB 35.351 kB	18 B -216 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-components react-components: Button, FluentProvider & webLightTheme	67.61 kB 19.536 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	226.203 kB 67.961 kB
react-components react-components: FluentProvider & webLightTheme	40.806 kB 13.616 kB
react-portal-compat PortalCompatProvider	5.567 kB 2.237 kB

_{🤖 This report was generated against 77aee0eba2a5e83f4fbb0da39aa5c085d939b829}

[github-actions]

Pull request demo site: URL