Checkbox & radio RTL ordering/relation issues

[janbrasna]

Description

When in RTL, it's not obvious which form component belongs to what label, starting with alignment/whitespace not exactly confirming the affordance; and after selecting one in LTR and switching to RTL it's shown the wrong control is the active.

Steps to reproduce

Open https://protocol.mozilla.org/components/detail/radio-buttons, select "Option 1", switch to RTL. What label it reads now?

Expected result

First option should be rightmost (which is). Its label should be "Option 1" (which is not).

Actual result

Screen.Recording.2024-07-27.at.00.25.57.mov

Environment

macOS Catalina (EU, LTR)
FXDE, chromium, webkit nightly

[janbrasna]

If you do the same in https://protocol.mozilla.org/components/detail/choices the correct relation of control and label is preserved in RTL, nonetheless the whitespace doesn't look like they belong together.