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

Author: dmytrokirpa

change/@fluentui-react-combobox-ad77e7e8-12a4-426a-83c3-428085e15705.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: use role attribute instead of classname for active descendant",
+  "packageName": "@fluentui/react-combobox",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-combobox/library/etc/react-combobox.api.md

@@ -150,6 +150,9 @@ export type DropdownState = ComponentState<DropdownSlots> & Omit<ComboboxBaseSta
     activeDescendantController: ActiveDescendantImperativeRef;
 };
 
+// @public
+export function isComboboxOptionElement(element: HTMLElement): boolean;
+
 // @public
 export const Listbox: ForwardRefComponent<ListboxProps>;
 

packages/react-components/react-combobox/library/src/components/Combobox/useCombobox.tsx

@@ -26,7 +26,7 @@ import type {
 } from './Combobox.types';
 import { useListboxSlot } from '../../utils/useListboxSlot';
 import { useInputTriggerSlot } from './useInputTriggerSlot';
-import { optionClassNames } from '../Option/useOptionStyles.styles';
+import { isComboboxOptionElement } from '../../utils/isComboboxOptionElement';
 
 /**
  * Create the base state required to render Combobox, without design-only props.
@@ -47,7 +47,7 @@ export const useComboboxBase_unstable = (
     activeParentRef,
     controller: activeDescendantController,
   } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({
-    matchOption: el => el.classList.contains(optionClassNames.root),
+    matchOption: isComboboxOptionElement,
   });
   const comboboxInternalState = useComboboxBaseState({ ...props, editable: true, activeDescendantController });
   const { appearance: _appearance, size: _size, ...baseState } = comboboxInternalState;

packages/react-components/react-combobox/library/src/components/Dropdown/useDropdown.tsx

@@ -19,8 +19,8 @@ import { Listbox } from '../Listbox/Listbox';
 import type { DropdownBaseProps, DropdownBaseState, DropdownProps, DropdownState } from './Dropdown.types';
 import { useListboxSlot } from '../../utils/useListboxSlot';
 import { useButtonTriggerSlot } from './useButtonTriggerSlot';
-import { optionClassNames } from '../Option/useOptionStyles.styles';
 import type { ComboboxOpenEvents } from '../Combobox/Combobox.types';
+import { isComboboxOptionElement } from '../../utils/isComboboxOptionElement';
 
 /**
  * Create the base state required to render Dropdown, without design-only props.
@@ -41,7 +41,7 @@ export const useDropdownBase_unstable = (
     activeParentRef,
     controller: activeDescendantController,
   } = useActiveDescendant<HTMLButtonElement, HTMLDivElement>({
-    matchOption: el => el.classList.contains(optionClassNames.root),
+    matchOption: isComboboxOptionElement,
   });
 
   const dropdownInternalState = useComboboxBaseState({ ...props, activeDescendantController, freeform: false });

packages/react-components/react-combobox/library/src/components/Listbox/useListbox.ts

@@ -19,9 +19,9 @@ import type { ListboxProps, ListboxState } from './Listbox.types';
 import { getDropdownActionFromKey } from '../../utils/dropdownKeyActions';
 import { useOptionCollection } from '../../utils/useOptionCollection';
 import { useSelection } from '../../utils/useSelection';
-import { optionClassNames } from '../Option/useOptionStyles.styles';
 import { ListboxContext, useListboxContext_unstable } from '../../contexts/ListboxContext';
 import { useOnKeyboardNavigationChange } from '@fluentui/react-tabster';
+import { isComboboxOptionElement } from '../../utils/isComboboxOptionElement';
 
 // eslint-disable-next-line @typescript-eslint/naming-convention
 const UNSAFE_noLongerUsed = {
@@ -50,7 +50,7 @@ export const useListbox_unstable = (props: ListboxProps, ref: React.Ref<HTMLElem
     activeParentRef,
     controller,
   } = useActiveDescendant<HTMLInputElement, HTMLDivElement>({
-    matchOption: el => el.classList.contains(optionClassNames.root),
+    matchOption: isComboboxOptionElement,
   });
 
   const hasListboxContext = useHasParentContext(ListboxContext);

packages/react-components/react-combobox/library/src/index.ts

@@ -76,3 +76,4 @@ export { useButtonTriggerSlot } from './components/Dropdown/useButtonTriggerSlot
 export { useInputTriggerSlot } from './components/Combobox/useInputTriggerSlot';
 export { useListboxSlot } from './utils/useListboxSlot';
 export type { ComboboxBaseState, ComboboxBaseProps } from './utils/ComboboxBase.types';
+export { isComboboxOptionElement } from './utils/isComboboxOptionElement';

packages/react-components/react-combobox/library/src/utils/isComboboxOptionElement.test.ts

@@ -0,0 +1,34 @@
+import { isComboboxOptionElement } from './isComboboxOptionElement';
+
+/**
+ * Helper function to create an element with a specified role
+ */
+function createElementWithRole(tagName: string, role?: string) {
+  const element = document.createElement(tagName);
+  if (role) {
+    element.setAttribute('role', role);
+  }
+  return element;
+}
+
+describe('isComboboxOptionElement', () => {
+  it('returns true for elements with role="option"', () => {
+    const element = createElementWithRole('div', 'option');
+    expect(isComboboxOptionElement(element)).toBe(true);
+  });
+
+  it('returns true for elements with role="menuitemcheckbox"', () => {
+    const element = createElementWithRole('div', 'menuitemcheckbox');
+    expect(isComboboxOptionElement(element)).toBe(true);
+  });
+
+  it('returns false for elements without role attribute', () => {
+    const element = createElementWithRole('div');
+    expect(isComboboxOptionElement(element)).toBe(false);
+  });
+
+  it('returns false for elements with other role values', () => {
+    const element = createElementWithRole('div', 'listbox');
+    expect(isComboboxOptionElement(element)).toBe(false);
+  });
+});

packages/react-components/react-combobox/library/src/utils/isComboboxOptionElement.ts

@@ -0,0 +1,10 @@
+/**
+ * Checks whether the given element is a combobox option element.
+ * Supports elements with role="option" or role="menuitemcheckbox".
+ *
+ * @param element - the element to check
+ * @returns true if the element has a valid combobox option role, false otherwise
+ */
+export function isComboboxOptionElement(element: HTMLElement): boolean {
+  return element.role === 'option' || element.role === 'menuitemcheckbox';
+}