Associate validation errors with form fields using aria-invalid and aria-describedby

[mikewheeleer]

Improve form accessibility by linking errors to fields

Description

The quote, new-pair, and webhooks forms render error text in a standalone role="alert" paragraph that is not programmatically tied to the input that failed — e.g. src/app/quote/page.tsx and src/app/pairs/new/page.tsx use bare <label>/<input> with a separate error node. Screen-reader users cannot tell which field is invalid. The repo already has an accessible src/components/TextField.tsx that wires aria-invalid/aria-describedby correctly; this issue brings the forms up to that standard.

Requirements and context

• Repository scope: StableRoute-Org/Stableroute-frontend only.
• Refactor the quote and new-pair inputs to use TextField, passing the error prop so aria-invalid and aria-describedby are set on the failing input.
• Move focus to the first invalid field on a failed submit so keyboard/AT users land on the error.
• Keep the existing validation rules and role="alert" semantics (now field-scoped where appropriate).
• Apply the same pattern to the webhooks URL/events inputs in src/app/webhooks/page.tsx.

Suggested execution

• Fork the repo and create a branch
• git checkout -b a11y/forms-30-field-error-association
• Implement changes
  • Write code in: src/app/quote/page.tsx, src/app/pairs/new/page.tsx, src/app/webhooks/page.tsx using src/components/TextField.tsx.
  • Write comprehensive tests in: extend src/app/quote/page.test.tsx and add page tests asserting aria-invalid and aria-describedby linkage.
  • Add documentation: note the form-a11y standard in README.md.
  • Add JSDoc to any error-focus helper.
  • Validate that invalid fields receive focus and are announced.
• Test and commit

Test and commit

• Run npm run lint, npm test, and npm run build.
• Cover edge cases: single invalid field, multiple invalid, valid submit clears aria-invalid, and focus lands correctly.
• Include the full npm test output and a11y notes in the PR description.

Example commit message

a11y: associate form validation errors with fields via aria attributes

Guidelines

• Minimum 95 percent test coverage for impacted modules.
• Clear, reviewer-focused documentation.
• Timeframe: 96 hours.

Community & contribution rewards

• 💬 Join the StableRoute community on Discord for questions, reviews, and faster merges: https://discord.gg/37aCpusvx
• ⭐ This is a GrantFox OSS / Official Campaign task and may be rewarded. When your PR is merged you'll be prompted to rate the project — if this issue and the maintainers helped you ship, we'd be grateful for a 5-star rating. Clear questions in Discord and tidy, well-tested PRs are the fastest path to a merge and a reward.

[Menjay7]

Hi! I came across this issue and would love to work on it. I have experience with similar tasks and I'm confident I can investigate, implement a clean solution, and thoroughly test it before submitting a PR. If the issue is still open, I would appreciate it if you could assign it to me. Thank you!