[A11y] Add aria-describedby Instruction Link to Goal Target Input Field
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 5
- Forks
- 7
- Avg merge
- 39m
- Merged PRs (30d)
- 39
Description
- Labels:
good first issue,accessibility,difficulty:beginner,area:core - Target File:
src/components/goals/goal-form-modal.tsx - Estimated Time: 10–15 minutes
- Difficulty: Level 1 (Beginner)
Why This Matters
Screen reader users navigating form controls rely on aria-describedby links to connect form input fields directly to their corresponding hint text and input format instructions.
Current Behavior
The goal target input in src/components/goals/goal-form-modal.tsx presents instructional text below the field, but does not connect the input and text via aria-describedby.
Requested Change
- Assign a unique
idto the helper text span insrc/components/goals/goal-form-modal.tsx. - Add
aria-describedby={helperId}to the goal target input element.
Acceptance Criteria
- Unique ID assigned to target input helper text element.
-
aria-describedbyattribute added to input element referencing the helper ID. - Verification command succeeds:
npm run test:file -- tests/goals-validation.test.ts.
Verification
npm run test:file -- tests/goals-validation.test.ts
Contributor Notes
Accessibility improvement.
🚀 How to Claim and Implement an Issue
- Choose an Issue: Browse our open issues and pick one matching your interest and available time.
- Comment on GitHub: Leave a comment on the corresponding GitHub issue: "I would like to work on this issue. Please assign it to me."
- Follow the Guide: Review our Beginner's Contribution Guide for step-by-step Git instructions.
- Verify Locally: Run the specific verification command listed on the issue before opening your PR.
- Submit PR: Open a pull request against
mainreferencing this issue number!
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Open src/components/goals/goal-form-modal.tsx and locate the goal target input and its helper text span. Give the helper text a unique ID and connect the input with aria-describedby, then run npm run test:file -- tests/goals-validation.test.ts. Done means the test succeeds and the input references the helper text ID.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Feature
- Difficulty
- 1/5
- Estimated time
- Under an hour
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 95/100