I have tested this item ✅ successfully on c91ce54

Downvoting this.

1. It's common practice to have error messages displayed below the field
2. You're assuming that the error message will always fit on a single line which is not true. Device size and language content length may vary

I have tested this item ? unsuccessfully on c91ce54

Sorry, this must be user error here but but I can't replicate this change. I have tried multiple browsers.

I have tested this item ✅ successfully on c91ce54

the PR does what it says it does, I dont like it but its not my opinion that counts, the code, as provided in the PR, works.

@Abernyte-Git Have you recompiled the scss using npm after having applied the changes in this PR?

I have tested this item ✅ successfully on c91ce54

Duh...stands in corner with dunces hat on. Thank you Richard.

RTC

Sorry, saw @C-Lodder 's comment too late. Back to pending.

I am agree with @C-Lodder

The issue was that the "jumping" of the fields was annoying for some users. But thinking more about it now, I think this "jumping" makes it easier to see that there is something wrong, while just the red colour of the field label plus the inline validation message might not get so much attention without this "jumping", especially not from colour blind users.

My2Cent: In one line the whole looks like a bad sentence which "makes me think".

It was an attempt and you are free to reject it. The current behaviour of moving the fields is an accessibility failure. You cant just display the message after the field either - it will need id and aria so that the message would be announced before the field

Do you have a link to the WCAG standard that mentions moving content fails?
Imterested in reading it for work and personal stuff too

If it is an issue. Maybe we can replace the label by a complete sentence in case off an error?

https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide.html

I can't find anything in the article that refers to form field error or similar scenarios.
Correct me if I'm wrong, but the moving content they refer to sounds like constant moving, e.g Twitch Chat, which may be too hard to scan each message before the next one appears. Other examples would be flashing banners.
The form field error in this case is a single jump, that does not occur at intervals, but will be reverted upon user action.

I think we need a decision here => pinging @wilsonge .

RTC because it has 3 successful tests, but also setting the RLDQ (release lead decision queue) label to make clear it needs a decision before getting merged.

@brianteeman Maybe to come forward you could improve this PR a bit? It would need at least a space between the "required" asterisk at the end of the field label and the validation message so solve @chmst 's comment above #34066 (comment) ... or even better would be if we could make it float to the right so it right-aligns with the input field?

After some discussions closing this here, it's not really so much better.