fix: prevent React DOM error when using browser translation

[jaem0629]

fix: prevent React DOM error when browser translation modifies ScreenReaderOutput

• Render all screen reader text items simultaneously with CSS display toggle
• Prevents 'removeChild' error caused by browser translation modifying DOM
• Refactored to use data array for cleaner, more maintainable code

• Use a meaningful title for the pull request. Include the name of the package modified.
• Test the change in your own code.
• Include the URL where we can test the change in the body of your PR.

This pull request:

• Fixes a bug
• Adds additional features/functionality
• Updates documentation or example code
• Other

---

Fixes #896

Problem

When using browser translation on /primitives 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.

This happens because browser translation modifies the DOM structure, and when React tries to conditionally render different <span> elements in ScreenReaderOutput, it conflicts with the translated DOM.

Solution

Instead of conditionally rendering different elements based on dropdownState, render all text items simultaneously and control visibility with CSS display: none. This prevents React from adding or removing DOM nodes, avoiding conflicts with browser translation.

Testing

1. Run pnpm dev
2. Navigate to http://localhost:3000/primitives
3. Enable browser translation
4. Scroll to "Accessibility out of the box" section
5. Verify no console errors appear as the animation cycles

[vercel]

@jaem0629 is attempting to deploy a commit to the WorkOS Team on Vercel.

A member of the Team first needs to authorize it.