WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#32490 closed defect (bug) (fixed)

New user: spacing could be increased about input field

Reported by: karmatosed Owned by: 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 5 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 5 years ago.
Better error indicators
32490-3.patch (1.0 KB) - added by liljimmi 5 years ago.
Same patch as above without the "required" description in red.
32490-4.patch (1.8 KB) - added by liljimmi 5 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 5 years ago.
Changed all hex codes to lowercase
image.jpg (196.5 KB) - added by ryan 5 years ago.
Add new user with empty fields, iPhone 6+
add new user with empty fields, Macnchrome.png (405.0 KB) - added by ryan 5 years ago.
Add new user with empty fields, Macnchrome

Download all attachments as: .zip

Change History (24)

#1 @johnbillion
5 years ago

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

@liljimmi
5 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.


5 years ago

#3 @joedolson
5 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
5 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
5 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.


5 years ago

@liljimmi
5 years ago

Better error indicators

#7 @liljimmi
5 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
5 years ago

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

https://cldup.com/Y2ES_64T0l.png

@liljimmi
5 years ago

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

#9 @liljimmi
5 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 5 years ago by liljimmi (previous) (diff)

#10 @picard102
5 years ago

looks a lot better

@liljimmi
5 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.


5 years ago

@liljimmi
5 years ago

Changed all hex codes to lowercase

#12 @helen
5 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
5 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
5 years ago

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

#15 @ryan
5 years ago

  • Keywords needs-screenshots added; has-patch removed

#16 follow-up: @helen
5 years ago

  • Keywords needs-screenshots removed

Screenshots are in the ticket description and comment 9.

#17 in reply to: ↑ 16 @ryan
5 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
5 years ago

Add new user with empty fields, iPhone 6+

@ryan
5 years ago

Add new user with empty fields, Macnchrome

Note: See TracTickets for help on using tickets.