TheVicky1 / TheVicky1/Pact_OS

[A11y] Add aria-describedby Instruction Link to Goal Target Input Field

Open Beginner friendly
#94 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

accessibility area:core beginner friendly bug community contributions-welcome difficulty:beginner difficulty:easy enhancement good first issue hacktoberfest help wanted testing time:<15m up-for-grabs
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
  1. Assign a unique id to the helper text span in src/components/goals/goal-form-modal.tsx.
  2. Add aria-describedby={helperId} to the goal target input element.
Acceptance Criteria
  • Unique ID assigned to target input helper text element.
  • aria-describedby attribute 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

  1. Choose an Issue: Browse our open issues and pick one matching your interest and available time.
  2. Comment on GitHub: Leave a comment on the corresponding GitHub issue: "I would like to work on this issue. Please assign it to me."
  3. Follow the Guide: Review our Beginner's Contribution Guide for step-by-step Git instructions.
  4. Verify Locally: Run the specific verification command listed on the issue before opening your PR.
  5. Submit PR: Open a pull request against main referencing this issue number!

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.