Skip to content

[GOOD FIRST ISSUE]: Add accessible relative-time tooltips with exact IST timestamps #22

Description

@Hanu2908

Task summary

Wrap relative time strings on announcements and comments in accessible tooltips that display the exact localized timestamp in IST (Asia/Kolkata).

Estimated scope / difficulty

Starter (1 to 2 hours)

Motivation and context

Announcements and discussion comments currently render relative time strings (such as "2h ago" or "yesterday"). Students need to inspect the exact date and time for deadlines and schedule notices.

Relevant files and code pointers

  • src/pages/app/AnnouncementsPage.tsx
  • src/components/announcement-qa/AnnouncementQA.tsx
  • src/components/announcement-qa/AnnouncementCommentsDrawer.tsx
  • tests/unit/components.test.tsx

Acceptance criteria

  • Wrap timestamp text in a Radix UI Tooltip component.
  • Format exact timestamp in the user's locale with timeZone: 'Asia/Kolkata' using Intl.DateTimeFormat or date-fns (including weekday, date, time, and timezone).
  • Accessible via keyboard focus (Tab) as well as mouse hover.
  • Includes aria-label / aria-describedby for screen reader accessibility.
  • Handles invalid, null, or missing timestamp strings gracefully without throwing errors.
  • Unit tests added covering valid ISO timestamps and graceful fallback for invalid dates.
  • npm test and npm run lint pass with 0 errors.

Implementation guide and hints

Check how Radix UI Tooltip is used across other components in src/components/ui/ or src/components/AttachmentCard.tsx. Ensure the trigger element is focusable (e.g. <button> or <span tabIndex={0}>).

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions