Skip to content

feat(FieldError): announce errors via role="alert" + fix react peerDep - #59

Merged
hugomallet merged 1 commit into
masterfrom
a11y/fielderror-alert-peerdeps
Aug 6, 2026
Merged

hugomallet merged 1 commit into
masterfrom
a11y/fielderror-alert-peerdeps

Conversation

@hugomallet

@hugomallet hugomallet commented Aug 6, 2026 •

Copy link
Copy Markdown
Collaborator

Fixes part of #57 (a11y).

  • Add role="alert" as a default on the element rendered by <FieldError>, so screen readers announce validation errors when they appear. Placed before the props spread, so consumers can still override it (test covers both).
  • Fix peerDependencies.react: >=15 was wrong — the code uses createContext (16.3+) and useContext (16.8+). Now >=16.8.

Tests: 6 suites, 65 tests (2 new), 5 snapshots, all green (CI=true yarn test:runtime).

Release / follow-up notes (from self-review)

@hugomallet hugomallet left a comment

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tooled self-review (author = reviewer; GitHub blocks a formal approve, so this is a COMMENT). Review conducted with the team review checklist; lint + tsc clean on changed files.

Verdict: mergeable. Scope is strictly respected (FieldError + peerDependencies only), role="alert" is placed before {...props} so it stays overridable, and both the default and the override are covered by tests. The peerDep fix is factually correct: src/lib/Form/Context.js uses createContext + useContext, so >=15 was a lie and >=16.8 is the real floor.

Minor findings, grouped — none blocking:

  1. Announcement relies on CSS un-hide, not on mount (src/lib/FieldError/FieldError.scss). The default stylesheet renders the alert display: none as soon as the field has errors and only reveals it via .isSubmitted. Screen readers must therefore pick up the display:none → block toggle, which is historically flakier than inserting the alert element with its content (the pattern that motivated this PR). Worth a quick VoiceOver/NVDA sanity check; the robust fix (gate rendering in JS on submitted/touched instead of CSS) can go in a #57 follow-up.
  2. Release the peerDep change as ≥ 0.7.0, not a patch. Narrowing react to >=16.8 makes npm install fail (ERESOLVE on npm 7+) for consumers still on React <16.8. They were already broken at runtime, so this is surfacing reality — but it deserves a minor bump and an explicit line in the release notes.
  3. role="alert" = aria-live="assertive" + aria-atomic="true": submitting a form with several invalid fields fires several assertive announcements at once. Acceptable default (matches our guideline for form errors) and consumers can pass role="status" — just flagging the trade-off consciously.
  4. Docs + remaining a11y wiring: README shows <FieldError> but doesn't mention the new default role or how to override it; and the guideline's companion wiring (aria-invalid + aria-describedby on the input pointing at this alert) is still absent. Both presumably later lots of #57 — please make sure they're tracked there.

Tests: the two new cases mirror the suite's conventions (mocked FormContext.Consumer, enzyme mount), bite was proven by mutation, and the snapshot diff is limited to the added role line. Good to merge with the notes above.

Add role="alert" as a default on the rendered element so screen readers
announce validation errors when they appear. Placed before the props
spread so consumers can still override it.

Also fix peerDependencies: react >=15 was wrong since the code relies on
createContext (16.3+) and useContext (16.8+); require >=16.8.
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.

1 participant