[FluentUI][React][Web][ChoiceGroup] - Selected ChoiceGroup button's blue dot is misaligned in Right to Left (RTL) layout

[miczhongmsft1]

Environment Information

• Package version(s): "@fluentui/react": "^8.27.2",
• Browser and OS versions: Windows 11, Edgeium

Please provide a reproduction of the bug in a codepen:

1. Go to https://developer.microsoft.com/en-us/fluentui#/controls/web/choicegroup
2. Open browser inspector tool
3. Add dir="rtl" to the or tag to trigger right to left (rtl) layout
4. Radio button will be misaligned

Actual behavior:

Blue dot of selected radio button is not within the circle of the radio button.

Expected behavior:

Blue do of the selected radio button to appear within the button

Priorities and help requested:

Are you willing to submit a PR to fix? (Yes, No)
No

Requested priority: (Blocking, High, Normal, Low)
High - Accessibility/Globalization Bug

Products/sites affected: (if applicable)
All Fluent UI ChoiceGroup consumers

[layershifter]

Hey thanks for reporting.

As I see, there was the same issue few years ago, #5904. It's not enough to change dir on document tag:

• it can be set on document initially, then getRTL() will properly pick the value
• you can call setRTL() before rendering components

Working examples are below:

• Codepen with v7: https://codepen.io/layershifter/pen/zYEvByY
• Codepen with v8: https://codepen.io/layershifter/pen/xxXwOQw
• CodeSandbox with v8: https://codesandbox.io/s/angry-maxwell-y23x8?file=/src/App.js

---

This looks like a similar problem that was discussed in #18836 at it looks that it's by design. @khmakoto can you please confirm?

[bsunderhus]

@miczhongmsft1 is this still a relevant issue? Have you tried following steps provided by @layershifter, like setRTL ?!