[Accessibility] Input/Select - wrapped error message within live region

[Destinyyyy]

Description

Wrapped the error message within a parent with attribute aria-live="assertive" aria-live="polite" so that it gets announced by the screen reader

Update 1: Added similar wrapper to Select component

Github issue

• [Accessibilité] - Champ de saisie (aria-live="assertive") #311

[ddecrulle]

Hello, thank you for this Pull Request!

I noticed that the documentation includes an example using aria-live="assertive":

However, in the playground (which is usually more up to date), I see it uses aria-live="polite":

Link: Playground Example

In some accessibility reports I've received, it's recommended to use aria-live="polite", especially when multiple errors could appear on the same page.

What are your thoughts on this? Would it make sense to align with the polite option here?

[Destinyyyy]

Hey @ddecrulle thanks for your reply,

I'm fine with your suggestion as long as the playground is the most up-to-date with the latest recommendations.

In the meantime, I also noticed that the Select component could benefit from a similar fix. Would you be okay with me including it in this PR?

[ddecrulle]

Hey @ddecrulle thanks for your reply,

I'm fine with your suggestion as long as the playground is the most up-to-date with the latest recommendations.

In the meantime, I also noticed that the Select component could benefit from a similar fix. Would you be okay with me including it in this PR?

Yes of course !

[ddecrulle]

Merci beaucoup !