Make WordPress Core

Opened 10 years ago

Closed 10 years ago

Last modified 10 years ago

#32490 closed defect (bug) (fixed)

New user: spacing could be increased about input field

Reported by: karmatosed's profile karmatosed Owned by: helen's profile helen
Milestone: 4.3 Priority: normal
Severity: normal Version: 3.8
Component: Users Keywords:
Focuses: ui Cc:

Description

On error styling the left is flush against the colouring:

https://cldup.com/vaoMPwxbwo.PNG

This is inconsistent with the right side.

Attachments (7)

32490.patch (598 bytes) - added by liljimmi 10 years ago.
We looked at the pale pink background color in an accessibility tool and it did not provide enough contrast to be helpful. I removed the background and added a red shadow for emphasis.
32490-2.patch (1.1 KB) - added by liljimmi 10 years ago.
Better error indicators
32490-3.patch (1.0 KB) - added by liljimmi 10 years ago.
Same patch as above without the "required" description in red.
32490-4.patch (1.8 KB) - added by liljimmi 10 years ago.
( ! ) Dashicon for error messaging inside fields. Replaced red with @hugobaeta's red. Note: this patch relies on new 4.3 Dashicons
32490-5.patch (1.8 KB) - added by liljimmi 10 years ago.
Changed all hex codes to lowercase
image.jpg (196.5 KB) - added by ryan 10 years ago.
Add new user with empty fields, iPhone 6+
add new user with empty fields, Macnchrome.png (405.0 KB) - added by ryan 10 years ago.
Add new user with empty fields, Macnchrome

Download all attachments as: .zip

Change History (24)

#1 @johnbillion
10 years ago

  • Keywords needs-patch added
  • Version changed from trunk to 3.8

@liljimmi
10 years ago

We looked at the pale pink background color in an accessibility tool and it did not provide enough contrast to be helpful. I removed the background and added a red shadow for emphasis.

This ticket was mentioned in Slack in #accessibility by helen. View the logs.


10 years ago

#3 @joedolson
10 years ago

As with any error message, the real problem here is that the error is only being conveyed with color. The fact that the color is below contrast guidelines when contrasted with the background is significantly less important than the lack of an error indicator that isn't purely based on color. For a screen reader user, for example, this is completely meaningless, regardless of the color used.

There should be included text that indicates that there's an error and explicitly describes it, e.g. "Error: Email is required". With that included, the color doesn't actually matter - it's a purely supplemental indicator, rather than the sole indicator.

Caveat: I didn't check whether this indicator includes hidden screen reader text. If it does, then that's fine for users of screen readers, but still a problem for people with other vision impairments.

#4 @helen
10 years ago

Right now, that particular error is just a class added by JS when it detects an empty required field, so purely visual changes. From what I can tell, this can be leveraged by plugins. I'm not sure what we can do more generally along the lines of more text.

#5 @afercia
10 years ago

Noticed only the first required field has an aria-required="true"attribute. Maybe worth considering to add it to the other fields too.
For the visual indicator, maybe we could try some simple CSS. Tried a very basic thing and got this:

https://cldup.com/WM8tyWkTZN.png

.form-required label:after {
	content: '\f158';
	float: right;
	font: normal 20px/1 dashicons;
	color: #c00;
	vertical-align: middle;
	visibility: hidden;
}

.form-invalid label:after {
	visibility: visible;
}

The position of the "X" could be tweaked a bit, it's just a basic try.

For the text part, this is a basic JavaScript client side validation and maybe the tricky part would be about translatable string but probably something could be done along the lines of wpAjax.invalidateForm where we have a jQuery collection of the invalid fields.

This ticket was mentioned in Slack in #design by liljimmi. View the logs.


10 years ago

@liljimmi
10 years ago

Better error indicators

#7 @liljimmi
10 years ago

I removed the background color (which fixes the original padding problem), added the X Dashicon as an indicator (similar to @afercia's suggestion) and made the "required" description red.

There is no room for the X on small screens though.

This is how it looks > 782px

https://cldup.com/bzNovb2wiJ.png

And max-width: 782px

https://cldup.com/RTCB01TPsU.png

#8 @liljimmi
10 years ago

Another version without "required" being red, because it's a lot of red.

https://cldup.com/Y2ES_64T0l.png

@liljimmi
10 years ago

Same patch as above without the "required" description in red.

#9 @liljimmi
10 years ago

Another option using the new (!) Dashicon and Hugo's red.

https://cldup.com/1d3V5kv-yr.png

https://cldup.com/k2IJS42FGn.png

Last edited 10 years ago by liljimmi (previous) (diff)

#10 @picard102
10 years ago

looks a lot better

@liljimmi
10 years ago

( ! ) Dashicon for error messaging inside fields. Replaced red with @hugobaeta's red. Note: this patch relies on new 4.3 Dashicons

This ticket was mentioned in Slack in #design by liljimmi. View the logs.


10 years ago

@liljimmi
10 years ago

Changed all hex codes to lowercase

#12 @helen
10 years ago

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

In 33109:

Better styling for .form-invalid inputs.

props liljimmi.
fixes #32490.

#13 @helen
10 years ago

A note for the future that this is JS-only right now, maybe in the future of a more unified fields API we could do it server-side, too. :)

#14 @ocean90
10 years ago

  • Keywords has-patch added; needs-patch removed
  • Milestone changed from Awaiting Review to 4.3

#15 @ryan
10 years ago

  • Keywords needs-screenshots added; has-patch removed

#16 follow-up: @helen
10 years ago

  • Keywords needs-screenshots removed

Screenshots are in the ticket description and comment 9.

#17 in reply to: ↑ 16 @ryan
10 years ago

Replying to helen:

Screenshots are in the ticket description and comment 9.

I'm going to do a set of fullscreen ones.

@ryan
10 years ago

Add new user with empty fields, iPhone 6+

@ryan
10 years ago

Add new user with empty fields, Macnchrome

Note: See TracTickets for help on using tickets.