better images

Maybe the css change should have been in https://github.com/joomla/joomla-cms/blob/staging/media/jui/less/forms.less#L367

@C-Lodder @ciar4n please advise

You can add the background to the HTML5 invalid pseudo tags if you like, but as Joomla adds an actual class (.invalid), I don't think :invalid is ever used. Also, we don't use HTML5 validation if I'm not mistaken.

Other than that, this seems fine to me

@brianteeman @C-Lodder there was a decision in the London sprint to keep the old validation and not force the HTML 5 for b/c convenience reasons. So yes the :invalid is not used

Plz ignore me, I love thought this was against j4

I have tested this item ✅ successfully on 7724d11

I have tested this item ✅ successfully on 7724d11

Before:

After:

RTC after two successful tests.

@rdeutz do you want this to be part of 3.7.0 or should we move this to 3.7.1 ?

@zero-24 if it's an a11y related PR...this should go in asap.

This can't break anyhting and looks good. Agree to merge in 3.7.0

I agree too but it is up to the release leader to decide which PRs going to be merged in RC Version (were we usualy only merge critial patches)

not a fan, it makes it hard to see the difference between a field with an error and a disabled field. We exchange on confusing situation with another

We rarely have disabled fields. I chose a bad example to screenshot. Better to be confused between an invalid field and a disabled field than not to be able to see the disabled field at all.

We have already more than one way to inform the user that there is a problem. If the argument is that people can see the bold border, so we need to change the background, it is even more confusing because this would mean these people are not able to see the difference between a error field and a disabled field.

I am not convinced that this change will make the situation better.

Changed the state to needs review

Another option is to add an icon (warning symbol) in the field as well as or instead of the background

@rdeutz - It really helps with those who are colour blind. Also bare in mind that some forms from 3PD's may be Ajax (no refresh) driven, therefore the user may not see any alerts.

Have also just asked a friend who's colour blind, he has said the darker inputs are far easier to distinguish

@rdeutz remember that the background is not the only way to identify the error. We already have the error messages which are a11y valid we just need to add additional help to make it easier to locate the named fields. That really raises the a11y validation

Can we please merge this. It is an a11y improvement and while we are still on bs2 its the best that can be done in a fully b/c manner

A good compromise could be adding an icon and changing the color:
label.invalid:before
{
content: "\48";
display:inline-block;
margin-right:3px;
font-family: 'IcoMoon';
}

input.invalid {
border: 1px solid #9d261d;
background: #f2dede;

}

That would introduce more q11y issues as many screen readers will read out the value of the icon

Personally I think this PR is fine the way it is. An issue exists and this PR addresses it. An alternative is to increase the invalid border width but I think given the choice I would choose the current background color change.

Hi Brain,
screenreader-user are not able to get the value of content filled in with :before and :after

@ylahav You might have some input here?

screenreader-user are not able to get the value of content filled in with :before and :after

That is not universally true across all supported browsers

I still think this is only a half backed solution for a problem, it only changes the area where we put the confusion, before required field with not required field, after required field with disabled fields. I thing the second one is worse than the first one. Adding the icon seems to me a good way to have a better chance to spot the difference between required field with disabled fields.

Hi Brian,
interesting, do you know which screenreader in combination with which browser can interpret generated content? If this is for most of the screenreaders true, the icon solution can really be a problem.

Not sure but i know that why bootstrap 3 does not use that method and instead uses specific markup (sr-only) to hide the icons displayed with invalid fields

ah ok , maybe we should check this before.

To me this is much better, an Icon to the right will suffice.. but that's providing the disabled user can see it clearly and understand it. Changing the color of an entire background is more noticeable.

I have tested this item ✅ successfully on f3ec7a4

I have tested this item ✅ successfully on f3ec7a4

RTC after two successful tests.

Thanks