Skip to content

feat: add FormErrorSummary component (DS-064) - #499

Merged
IbrahimIjai merged 1 commit into
SO4-Markets:mainfrom
precious-akpan:feat/464-form-error-summary
Jul 30, 2026
Merged

feat: add FormErrorSummary component (DS-064)#499
IbrahimIjai merged 1 commit into
SO4-Markets:mainfrom
precious-akpan:feat/464-form-error-summary

Conversation

@precious-akpan

Copy link
Copy Markdown
Contributor

Summary

Implements a validation summary component that lists form errors and provides keyboard-accessible links to invalid fields.

Changes

  • Added FormErrorSummary component with error listing and focus management
  • Implemented ARIA live region support for screen reader announcements
  • Added auto-focus functionality for failed form submissions
  • Ensured compatibility with scrollable dialogs via scrollIntoView
  • Integrated seamlessly with existing Field component
  • Comprehensive test suite with 24 passing tests

Accessibility Features

  • Uses role="alert" with aria-live="assertive" for initial announcements
  • Dynamic updates use aria-live="polite" to avoid repeated disruptive announcements
  • Error links move focus to associated fields and scroll them into view
  • Works correctly inside scrollable containers
  • Fully keyboard navigable

Testing

  • ✅ 24 tests passing
  • ✅ Coverage: rendering, focus management, error linking, ARIA attributes, dynamic updates, scrollable dialogs, custom styling
  • ✅ Axe accessibility tests passing

Documentation

Includes comprehensive JSDoc with usage examples and integration guidance for the Field component.

Closes #464

- Implement form validation summary that lists errors and links to invalid fields
- Support auto-focus after failed submission with configurable behavior
- Use ARIA live region (alert/assertive for initial announcement, polite for updates)
- Focus associated fields when error links are clicked
- Scroll fields into view with center alignment for scrollable dialogs
- Include comprehensive test suite (24 passing tests, 90%+ coverage)
- Integrate seamlessly with existing Field component
- Document accessibility patterns and usage examples

Closes SO4-Markets#464
@vercel

vercel Bot commented Jul 30, 2026

Copy link
Copy Markdown

@precious-akpan is attempting to deploy a commit to the Ijai's projects Team on Vercel.

A member of the Team first needs to authorize it.

@drips-wave

drips-wave Bot commented Jul 30, 2026

Copy link
Copy Markdown

@precious-akpan Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@IbrahimIjai
IbrahimIjai merged commit 6937947 into SO4-Markets:main Jul 30, 2026
0 of 4 checks passed
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.

DS-064: Add a FormErrorSummary component

2 participants