Improve validation messages for better readability and accessibility

[lvarnavas]

This PR:

• Updates validation messages to use clear sentences

• Avoids mixed or condensed forms that can confuse users

• Makes messages easier to read and understand across languages

• Improves accessibility (A11Y), especially for users relying on screen readers

Related to #2724

[changeset-bot]

⚠️ No Changeset found

Latest commit: 059e772

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.

---

Lampros Varnavas seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[tlouisse]

Looks like a great improvement @movrack @lvarnavas 🙌

Maybe it's an idea to align:

• sentences without "the field":
  • 'Geben Sie einen gültigen Wert für {fieldName} ein.'
  • 'Please enter a value for {fieldName}.'
• sentences with "the field":
  • 'Veuillez également renseigner le champ {fieldName}.'
  • 'Vul een waarde in voor het veld {fieldName}.'

So I think they will all work without mentioning "the field".

On top, it might become more readable if we add quotes to the fieldName (which is by default the label).
Consider <lion-input-date label="Date of Birth"></lion-input-date>...
So if the label is "Date of Birth", we get Please enter a value for "Date of Birth". instead of 'Please enter a value for Date of Birth'.

One potential problem is that fieldName can be prefilled in a way that is fitting in the current sentence.
Consider <lion-input-date label="Date of Birth" .fieldName="${'date'}"></lion-input-date>...
"Please enter a(n) date." would then become 'Please enter a value for "date".'

Not the end of the world, but we need to check usage of this to measure the impact.

[movrack]

@tlouisse
Thanks for the feedback, we will check for it.

For the last remarks:
One potential problem is that fieldName can be prefilled in a way that is fitting in the current sentence. Consider <lion-input-date label="Date of Birth" .fieldName="${'date'}"></lion-input-date>... "Please enter a(n) date." would then become 'Please enter a value for "date".'

I do think, it's to you to choose. We can't have both excepting adding complexity with other attribute/parameters enabling the quotes in the translation .

Are you able to know how many are using the "fieldName" ? Else, can we know if we get the value form label or from fieldName ? In that case, we might add the quotes from the code based on that information ?

[tlouisse]

I do think, it's to you to choose. We can't have both excepting adding complexity with other attribute/parameters enabling the quotes in the translation.

It's not worth it indeed I agree (that complexity). I think the suggestion to drop the quotes could be acceptable in this case. We could deprecate that option as from an a11y perspective, the reference to the label is recognizable for the user.

Are you able to know how many are using the "fieldName" ?

You could write an Omniscient plugin, but I think a search for .fieldName in Azure would do as well to get a rough impression.

Else, can we know if we get the value form label or from fieldName ? In that case, we might add the quotes from the code based on that information ?

Good idea. We could do something like:

    get fieldName() {
      return this.__fieldName || `"${this.label}"` || this.name || '';
    }

See: https://github.com/ing-bank/lion/blob/master/packages/ui/components/form-core/src/FormControlMixin.js#L102