Closed Bug 951180 Opened 10 years ago Closed 6 years ago

Beta tester label is faulty positioned before the input type="checkbox" on the edit user page

Categories

(developer.mozilla.org Graveyard :: Profiles, defect, P5)

defect

Tracking

(Not tracked)

RESOLVED FIXED

People

(Reporter: icaaq, Assigned: u611638, Mentored)

Details

(Whiteboard: [points:2][lod:2])

1. When logged in, Press Cmd+N to open a new browser window, then type https://developer.mozilla.org/en-US/profiles/[YOUR USERNAME]/edit in the address bar and press Enter.
2. inspect the beta user checkbox
3. Se that the corresponding label is located before the input


To follow WCAG 2.0 guideline H44, Using label elements to associate text labels with form controls. http://www.w3.org/TR/WCAG20-TECHS/H44.html
As mentioned in that document:
"Note that the label is positioned after input elements of type="checkbox" and type="radio"."

This is because the pronunciation will be more understandable for screenreader users.
Component: Design → Profiles
Priority: -- → P5
The spec still recommends placing the element after the checkbox, as seen in the examples:

https://www.w3.org/TR/WCAG20-TECHS/H44.html#H44-examples

This can be changed in the user edit template:

https://github.com/mozilla/kuma/blob/7e83c6bebdfb7f86087f5c8d4092a813a9cbf788/kuma/users/jinja2/users/user_edit.html#L54

A similar change can be made to other booleans, such as "is_github_url_public".

Visual inspection is needed to ensure the checkbox is still left-aligned, and may require styling changes.
Mentor: jwhitlock
Whiteboard: [points:2][lod:2]
Hello,

I'd like to work on this issue.

Thanks.
Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/f8fb3d0bb6c522d6328423edfd95311f24fb6d2d
bug 951180: Position labels after checkboxes

https://github.com/mozilla/kuma/commit/6d6c074c2b128a5d94c457d4a804676f814326ba
Merge pull request #4682 from GloverDonovan/label-after-checkbox-951180

bug 951180: Position labels after checkboxes
Deployed to stage and production. Thanks Donovan!
Assignee: nobody → donovan
Status: NEW → RESOLVED
Closed: 6 years ago
Resolution: --- → FIXED
Product: developer.mozilla.org → developer.mozilla.org Graveyard
You need to log in before you can comment on or make changes to this bug.