[ns-inputter] update html template for accessibility - Githubissues

centrica-engineering / muon

Versatile token based web components for Design Systems

https://main--61dd6b0ee46d9a004ac27873.chromatic.com

ISC License

2 stars 0 forks source link

[ns-inputter] update html template for accessibility #605

Closed PtitBen closed 4 weeks ago

PtitBen commented 1 month ago

Outcome

We regain some of the aria attributes that made the inputter accessible, and that got lost when re-coding components with muon.

Scope

[x] aria-describedby linked to the helper
[x] update validation message HTTML template so that it brings the error message to screen readers.

We had these features in v2.9.8 of Nucleus. Here is a playground and some screenshots to compare the differences.

Playground

https://playground.nucleus.design/#project=715e4417-8c1e-4d4a-84bc-2468a9feba4f

Nucleus - live

nucleus-live

Nucleus - v2.9.8

nucleus-v2 9 8

MekalaNagarajan-Centrica commented 1 month ago

PR to fix the inputter accessibility https://github.com/centrica-engineering/muon/pull/606
- Helper aria-describedby
- Validation message role="alert" & aria-live="assertive"

MekalaNagarajan-Centrica commented 1 month ago

Playground link for inputter with helper / tip-details in live, 2.9.x and latest fix https://playground.nucleus.design/#project=df96ae04-f8fd-44b1-bc0d-f28108623dad

PraveenAsokan commented 4 weeks ago

Released in Nucleus v3.15.3