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
- Navigate to
http://localhost:3000/primitives
- Enable browser translation
- Scroll down to the "Accessibility out of the box" section
- Wait for the screen reader animation to cycle through states
- 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 |
Bug report
Current Behavior
When using browser translation on the
/primitivespage and scrolling to the "Accessibility out of the box" section, the following error occurs:The error originates from the
ScreenReaderOutputcomponent inAccessibilitySection.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
http://localhost:3000/primitivesSuggested solution
Render all screen reader text items simultaneously and control visibility with CSS
display: noneinstead 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