search

mozilla / protocol

A design system for Mozilla websites.
https://protocol.mozilla.org/
Mozilla Public License 2.0
258 stars 77 forks source link

Checkbox & radio RTL ordering/relation issues #958

Open janbrasna opened 1 month ago

janbrasna commented 1 month ago

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

https://github.com/user-attachments/assets/380d4e13-c807-4bf2-b7a0-7478faed9852

Environment

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

janbrasna commented 1 month ago

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.