New user: spacing could be increased about input field

[karmatosed]

On error styling the left is flush against the colouring:

This is inconsistent with the right side.

[liljimmi]

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.

[joedolson]

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.

[helen]

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.

[afercia]

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:

.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.

[liljimmi]

Better error indicators

[liljimmi]

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

And max-width: 782px

[liljimmi]

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

[liljimmi]

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

[liljimmi]

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

[picard102]

looks a lot better

[liljimmi]

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

[liljimmi]

Changed all hex codes to lowercase

[helen]

In 33109:

Better styling for .form-invalid inputs.

props liljimmi.
fixes #32490.

[helen]

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. :)

[helen]

Screenshots are in the ticket description and comment 9.

[ryan]

Replying to helen:

Screenshots are in the ticket description and comment 9.

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

[ryan]

Add new user with empty fields, iPhone 6+

[ryan]

Add new user with empty fields, Macnchrome