fix: Update useUniqueId to use unicode safe selector (#3643)

Fix the issue introduced by React's `useId` function where it added `:` before ids. This creates a conflict with resting libraries because `:` is a valid CSS selector. More information in this issue [here](facebook/react#32001).

[category:Components]

Co-authored-by: manuel.carrera <[email protected]>
Co-authored-by: @alanbsmith <[email protected]>

Author: 3 people

jest/setupTests.ts

@@ -1,4 +1,4 @@
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import {verifyComponent} from './verifyComponent';
 import {jest} from '@jest/globals';
 import {ResizeObserver} from '@juggle/resize-observer';

modules/react/common/lib/utils/useUniqueId.ts

@@ -26,12 +26,20 @@ export const generateUniqueId = () => seed + (c++).toString(36);
 /**
  * Generate a unique ID if one is not provided. The generated ID will be stable across renders. Uses
  * `React.useId()` if available.
+ *
+ * Note: In React 18, `useId()` generates IDs with colons (e.g., `:r0:`), which are not valid in CSS
+ * selectors. We transform to use unicode guillemets (`«r0»`) matching React's upcoming format
+ * change (https://github.com/facebook/react/pull/32001).
+ *
  * @param id Optional ID provided that will be used instead of a unique ID
  */
 export const useUniqueId = (id?: string) => {
   // https://codesandbox.io/s/react-functional-component-ids-p2ndq
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  const generatedId = hasStableId ? React.useId() : useConstant(generateUniqueId);
+  const reactId = hasStableId ? React.useId() : useConstant(generateUniqueId);
+  // Transform React's useId format (:r0:) to CSS-safe format («r0»)
+  // This matches React 19's [format](https://github.com/facebook/react/pull/32001). When we bump to >= React 19.1.0, we can remove this logic and use `useId()` directly.
+  const generatedId = hasStableId ? reactId.replace(/^:/, '«').replace(/:$/, '»') : reactId;
   return id || generatedId;
 };
 

modules/react/menu/spec/Menu.spec.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import {render, screen, fireEvent, waitFor} from '@testing-library/react';
+import {Basic} from '../stories/examples/Basic';
+
+describe('Menu with RTL queries (verifying useId fix)', () => {
+  const BasicMenu = () => {
+    return <Basic />;
+  };
+
+  it('should work with getByText and fireEvent.click', async () => {
+    render(<BasicMenu />);
+
+    // Click the menu target using getByText - this would fail with :r0: IDs
+    const target = screen.getByText('Open Menu');
+    fireEvent.click(target);
+
+    // Find menu item using getByText
+    const firstItem = await screen.findByText('First Item');
+    fireEvent.click(firstItem);
+
+    // Verify selection worked
+    await waitFor(() => {
+      expect(screen.getByTestId('output')).toHaveTextContent('0');
+    });
+  });
+
+  it('should work with getByRole queries', async () => {
+    render(<BasicMenu />);
+
+    // Use role-based query
+    const target = screen.getByRole('button', {name: 'Open Menu'});
+    fireEvent.click(target);
+
+    // Menu items have menuitem role
+    const secondItem = await screen.findByRole('menuitem', {name: 'Second Item'});
+    fireEvent.click(secondItem);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('output')).toHaveTextContent('1');
+    });
+  });
+});