[Bug] "removeChild" error on /primitives page when using browser translation

[jaem0629]

Bug report

Current Behavior

When using browser translation on the /primitives page and scrolling to the "Accessibility out of the box" section, the following error occurs:

Uncaught NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

The error originates from the ScreenReaderOutput component in AccessibilitySection.tsx. This happens because browser translation modifies the DOM structure, and when React tries to update/remove nodes based on state changes, it conflicts with the translated DOM.

Expected behavior

The page should work without errors even when browser translation is enabled.

Reproducible example

1. Navigate to http://localhost:3000/primitives
2. Enable browser translation
3. Scroll down to the "Accessibility out of the box" section
4. Wait for the screen reader animation to cycle through states
5. Error appears in console

Suggested solution

Render all screen reader text items simultaneously and control visibility with CSS display: none instead of conditional rendering. This prevents React from removing/adding DOM nodes when state changes, avoiding conflicts with browser translation.

Additional context

This is a known issue pattern when React's virtual DOM conflicts with external DOM modifications.
The fix involves keeping all DOM nodes mounted and toggling visibility via CSS.

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/themes	3.2.1
React	react	18.3.1
Browser	Chrome	143.0.7499.193(arm64)
Assistive tech	n/a	n/a
Node	n/a	v20.19.4
npm/yarn/pnpm	pnpm	10.2.0
Operating System	macOS	Tahoe 26.2