Skip to content

[6.x] Fix/15396 field error association - #15576

Open
jaygeorge wants to merge 2 commits into
6.xfrom
fix/15396-field-error-association
Open

jaygeorge wants to merge 2 commits into
6.xfrom
fix/15396-field-error-association

Conversation

@jaygeorge

Copy link
Copy Markdown
Contributor

Description of the Problem

When a publish form (or login) fails validation, the error is shown visually but never connected to the control that failed. Measured after a failed save on an empty required field:

  • no aria-invalid="true"
  • no aria-describedby on the input
  • focus stays on BODY
  • screen readers only hear a generic toast (“The given data was invalid”)

On a long blueprint that means walking the entire form to find the error. Field instructions have the same gap — they’re rendered as unlinked siblings. WCAG 2.1 SC 3.3.1 (and related 3.3.2).

Depends on fields having reliable ids (#15389).

What this PR Does

  • Gives ErrorMessage / Description stable ids ({fieldId}-error, {fieldId}-description)
  • Sets aria-describedby and aria-invalid on the field’s own control (id must match the Field id, so Table/List cells aren’t all marked invalid)
  • Merges consumer aria-describedby with the field’s description/error ids
  • Focuses the first invalid control after a failed submit (reveal.invalid(), including login)
  • Includes the ui/Field label is not associated with its control on 37 of 48 call sites, including login #15389 Field label/id association work this depends on

Fixes #15396
Related: #15389

How to Reproduce

  1. Add a required field to a collection blueprint
  2. Create a new entry, leave the required field empty, click Save
  3. Before this PR:
document.querySelectorAll('[aria-invalid="true"]').length   // 0
document.querySelectorAll('input[aria-describedby]').length // 0
document.activeElement.tagName                              // "BODY"

After this PR: the failing input is focused, has aria-invalid="true", and aria-describedby pointing at the error (and instructions when present).

Field now generates an id for its label and lets the first nested control
claim it, so screens like login get a proper for/id association without
call-site changes. Explicit Field ids (Publish) are not injected, avoiding
duplicate ids inside fieldtypes.
Wire ErrorMessage and Description ids into aria-describedby, set
aria-invalid on the field's control, and focus the first invalid
control after a failed submit so screen readers can find the error.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Validation errors are not programmatically associated with the field that failed

1 participant