Improve accessibility of validation error

Created on 22 November 2023, 7 months ago

Problem/Motivation

Currently the telephone validation is creating a element when a validation error happens like so
<strong class="error form-item--error-message" style="">The phone number is not valid. (e.g. +1 201-555-0123)</strong>

This is not obvious for screen readers and they don't read this validation error message.

We should improve the error message so that also screen readers can read it.

Steps to reproduce

1. Create a Telephone advanced field type.
2. Enter an invalid phone number to the field.
3. Observe that a screen reader cannot read the validation message.

Proposed resolution

We should change the field markup to be more readable for screen readers. According to W3C the recommended approach is to create a element with aria-live attribute. See: https://www.w3.org/WAI/tutorials/forms/notifications/

The recommended markup would be
<span class="error form-item--error-message" aria-live="assertive">The phone number is not valid for the selected country code. (e.g. +1 201-555-0123)</span>

Remaining tasks

User interface changes

API changes

Data model changes

📌 Task
Status

Closed: works as designed

Version

1.0

Component

Code

Created by

🇫🇮Finland HeikkiY Oulu

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.69.0 2024