Checkbox & radio RTL ordering/relation issues
Nobody has claimed this yet.
- Dominant language
- SCSS
- Stars
- 298
- Forks
- 83
- Avg merge
- 16h 48m
- Merged PRs (30d)
- 1
Description
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
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Open the linked radio-buttons component page and reproduce the issue by selecting “Option 1” before switching to RTL. Trace the component’s RTL ordering and label relationship, then verify that the selected control still displays the matching label and that spacing makes the association clear.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- scss
- Domain
- frontend, internationalization
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100