Skip to content

[A11y] Add aria-label and type="button" to Habit Card Reset Triggers #80

Description

@TheVicky1
  • Labels: good first issue, accessibility, difficulty:beginner, area:core
  • Target File: src/components/habits/habit-card.tsx
  • Estimated Time: 10–15 minutes
  • Difficulty: Level 1 (Beginner)

Why This Matters

Accessibility is essential for all PACT OS users. Action buttons without explicit ARIA labels can prevent screen readers from accurately announcing button functionality, and missing type="button" attributes can cause accidental form submissions.

Current Behavior

Reset triggers inside src/components/habits/habit-card.tsx perform streak reset actions but lack explicit aria-label attributes and explicit type="button" declarations.

Requested Change

Update the habit card reset trigger elements in src/components/habits/habit-card.tsx to include:

  1. aria-label="Reset streak progress for habit"
  2. type="button"

Acceptance Criteria

  • Explicit aria-label added to reset button element.
  • type="button" attribute declared.
  • Verification test suite passes cleanly with npm run test:file -- tests/habits-routines.test.ts.

Verification

npm run test:file -- tests/habits-routines.test.ts

Contributor Notes

Self-contained accessibility enhancement.


🚀 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!

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    accessibilityAccessibility / a11y improvements (ARIA attributes, keyboard navigation, contrast)area:coreCore domain logic, shared arithmetic helpers, security, and utility servicesbeginner friendlyAccessible task suitable for developers new to open sourcebugConfirmed defect, malfunctioning behavior, or validation errorcommunityCommunity-driven enhancement, UX feedback, or resource sharingcontributions-welcomeCommunity contributions are explicitly encouraged for this issuedifficulty:beginnerBeginner-friendly task with single-file scope and clear acceptance criteriadifficulty:easyStraightforward task requiring basic familiarity with React/TypeScriptenhancementSmall improvement, refinement, or feature expansiongood first issueCurated, self-contained task suitable for first-time contributorshacktoberfestEligible high-quality task for open-source community eventshelp wantedMaintainer is actively welcoming community contributions on this issuetestingUnit tests, test matrix expansion, validation fixtures, and regression coveragetime:<15mQuick fix, typo correction, or minor tweak (< 15 minutes)up-for-grabsUnassigned issue that is available for any contributor

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions