Make WordPress Core

Opened 13 years ago

Closed 12 years ago

#20294 closed defect (bug) (fixed)

User profile edit: no label on second password field

Reported by: philippevay's profile PhilippeVay Owned by: ocean90's profile ocean90
Milestone: 3.6 Priority: normal
Severity: normal Version:
Component: Accessibility Keywords: has-patch
Focuses: Cc:

Description

When editing a User profile in admin, there are 2 fields for password, the second one asking to "Type your new password again".

This second field has neither a label element nor a title attribute associated to it.
The first field has a label, the one in the th element: "New Password", correctly associated to the input via its for attribute (e.g. for="pass1" when the input field has an id="pass1").

Any form field should have an associated label (or at least a title) per WCAG 2.0, see the Technique H44: Using label elements to associate text labels with form controls. This helps screenreader and other assistive technologies users to understand without a doubt what is the role of each form field, improving the accessibility of the admin and thus ATAG and WCAG compliance of WordPress).

A simple solution would be to use the existing hint "Type your new password again." (right after the second password field) as its associated label.
span.description thus becomes:

<label class="description"><?php _e("Type your new password again."); ?></label>

This new label isn't styled in italic anymore (because the applied selector is span.description) so, in wp-admin/css/wp-admin.dev.css, one should also add label.description to the existing selector rule and to the one at the end of the same CSS file that removes italic for zh_CN localization.

Related ticket: #9445 (All Input Tags are not Section 508 Compliance)

Attachments (6)

20294.diff (1.7 KB) - added by PhilippeVay 13 years ago.
User profile edit: associates a label to 2nd password input and keeps existing styling
20294.2.diff (2.8 KB) - added by MikeHansenMe 12 years ago.
adds label to user-new page
20294.3.diff (2.8 KB) - added by MikeHansenMe 12 years ago.
changes '(required)' to 'Required' based on .2 patch
20294.4.diff (3.0 KB) - added by ocean90 12 years ago.
20294.5.diff (3.0 KB) - added by MikeHansenMe 12 years ago.
20294.6.diff (3.0 KB) - added by MikeHansenMe 12 years ago.
removes scope="row" from user-new and user-edit

Download all attachments as: .zip

Change History (18)

@PhilippeVay
13 years ago

User profile edit: associates a label to 2nd password input and keeps existing styling

#1 @PhilippeVay
13 years ago

First diff was incorrect: I managed to forget @for on label.

Attachment is now OK.

#2 @MikeHansenMe
12 years ago

user-new.php will also need a label.

@MikeHansenMe
12 years ago

adds label to user-new page

#3 @MikeHansenMe
12 years ago

  • Cc mdhansen@… added

#4 @grahamarmfield
12 years ago

Is this still being actioned - it doesn't seem to have been included in 3.5?

@MikeHansenMe
12 years ago

changes '(required)' to 'Required' based on .2 patch

#5 follow-up: @MikeHansenMe
12 years ago

Updated the patch since I do not think '(required)' is best. The correction is simple enough perhaps someone else could review it for 3.6 milestone?

#6 in reply to: ↑ 5 @SergeyBiryukov
12 years ago

  • Milestone changed from Awaiting Review to 3.6

Replying to MikeHansenMe:

Updated the patch since I do not think '(required)' is best.

(required) is consistent with the strings next to Username, E-mail, and Nickname:
http://core.trac.wordpress.org/browser/tags/3.5.1/wp-admin/user-new.php#L322
http://core.trac.wordpress.org/browser/tags/3.5.1/wp-admin/user-edit.php#L291

I'd suggest reusing that string rather than introducing a new one.

#7 @MikeHansenMe
12 years ago

Sounds good, lets just go with .2 patch since it is the same as .3 with the original string

@ocean90
12 years ago

#8 @ocean90
12 years ago

user-new.php seems fine. Not sure about user-edit.php. Shouldn't we be consistent and add a new row for the second password?

I did it in 20294.4.diff. It adds also the missing class="form-field form-required" to user-new.php.

#9 @lessbloat
12 years ago

I tested 20294.4.diff​. Not sure we need scope="row" in there. Other than that it looks good.

@MikeHansenMe
12 years ago

removes scope="row" from user-new and user-edit

#10 @MikeHansenMe
12 years ago

20294.6.diff removes scope="row" on td. Left it on th to maintain consistency with the rest of the table.

#11 @DrewAPicture
12 years ago

20294.6.diff looks pretty good to me and still applies cleanly.

user-new: http://cl.ly/image/1q0E0l2I2h12

user-edit: http://cl.ly/image/3r0M1s3a202v

On the one hand, I almost wanted to add (required) to the Repeat new password label on user-edit, on the other though, I'd be concerned about sending mixed messages, due to it only being "required" if you're actually changing your password.

#12 @ocean90
12 years ago

  • Owner set to ocean90
  • Resolution set to fixed
  • Status changed from new to closed

In 24531:

Add a label to the second password field on User New and User Edit screen. props MikeHansenMe. fixes #20294.

Note: See TracTickets for help on using tickets.