Added transaction status badge legend tooltip

[Peolite001]

Closes #157

What were you told to do?

Add transaction status badge legend tooltip

Add a small legend tooltip explaining transaction status badge meanings. Keep content concise and user-friendly. Ensure tooltip is keyboard accessible.

What did you do?

• Created src/components/tx-status/TxStatusLegend.tsx keyboard-accessible tooltip component explaining four transaction statuses:
  • Pending: Transaction submitted, awaiting confirmation
  • Processing: Transaction is being processed on-chain
  • Success: Transaction confirmed and finalized
  • Failed: Transaction reverted or failed
• Created src/components/tx-status/TxStatusBadge.tsx reusable badge component with consistent styling and aria-label for screen readers
• Created src/components/tx-status/__tests__/TxStatusLegend.test.tsx 10 tests covering:
  • Tooltip open/close on trigger click
  • Escape key dismissal with focus return to trigger
  • Close button functionality
  • Click-outside-to-close behavior
  • Toggle behavior on repeated clicks
  • ARIA attributes (aria-expanded, aria-controls, role="dialog")
  • Focus management (returns to trigger on close)
• Created src/components/tx-status/__tests__/TxStatusBadge.test.tsx tests for all four status variants and accessible labeling
• Scoped all changes to src/components/tx-status/ no unrelated file churn
• Accessibility features:
  • Native <button> trigger with aria-expanded and aria-controls
  • Tooltip has role="dialog" with descriptive aria-label
  • Escape key closes and returns focus to trigger
  • Focus trap inside tooltip on open
  • Dark mode support and high-contrast colors
  • Keyboard shortcut hint (Esc to close) visible in tooltip

Summary

Added a keyboard-accessible transaction status badge legend tooltip scoped to src/components/tx-status/. The TxStatusLegend component renders a button that opens a popover explaining Pending, Processing, Success, and Failed statuses. TxStatusBadge provides a reusable, screen-reader-friendly badge with matching styling. All interactions are keyboard accessible (Enter/Space to open, Escape to close, focus management) and ARIA-compliant.

How to validate locally

1. Run the test suite: pnpm test -- src/components/tx-status/
2. Import TxStatusLegend into any page with a transaction table:

   import { TxStatusLegend } from '@/components/tx-status/TxStatusLegend';
   import { TxStatusBadge } from '@/components/tx-status/TxStatusBadge';
   
   
   

Closes #155

What were you told to do?

Add creator card keyboard shortcut hint for quick buy

Add an unobtrusive keyboard shortcut hint on creator cards. Document intended shortcut behavior in UI copy. Keep mobile UX unchanged.

What did you do?

• Created src/components/creator-card/CreatorCard.tsx creator card component with:
  • Quick Buy button: Always visible, keyboard accessible, triggers onQuickBuy(creator.id)
  • Keyboard shortcut: Press B while card is focused to quick buy (no mouse needed)
  • Shortcut hint: Small B badge with "to buy" text that fades in on hover/focus
  • Screen-reader documentation: sr-only text announces "Press B to quick buy from this creator"
• Created src/components/creator-card/__tests__/CreatorCard.test.tsx 13 tests covering:
  • Creator info rendering
  • Quick Buy button click handler
  • B key shortcut (lowercase and uppercase)
  • Other keys ignored (no accidental triggers)
  • Hover/focus hint visibility toggle
  • Accessibility attributes (aria-label, aria-hidden, sr-only, kbd)
• Created src/components/creator-card/CreatorCardGrid.tsx — example grid wrapper with proper role="list"
• Created src/components/creator-card/README.md — documents keyboard shortcuts and accessibility features
• Scoped all changes to src/components/creator-card/ — no unrelated file churn

Accessibility & UX

• Mobile unchanged: Hint hidden on small screens via hidden md:flex — touch users only see the Quick Buy button
• Keyboard-first: Cards are focusable (tabIndex={0}) with visible focus-within ring
• Screen-reader friendly: sr-only text documents the shortcut; visual hint is aria-hidden to avoid double-announcement
• kbd element used for the B key per HTML semantics
• Standard Enter/Space behavior preserved for nested interactive elements

Summary

Added an unobtrusive B keyboard shortcut hint to creator cards for quick buy. The hint appears on hover/focus (desktop only) and is complemented by screen-reader-only documentation. Mobile UX is completely unchanged. All changes scoped to src/components/creator-card/.

Testing

• pnpm lint
• pnpm build
• pnpm test -- src/components/creator-card/ (all 13 tests pass)

How to validate locally

1. Run the test suite: pnpm test -- src/components/creator-card/
2. Import CreatorCard into a page:

   import { CreatorCard } from '@/components/creator-card/CreatorCard';
   
   <CreatorCard creator={creator} onQuickBuy={(id) =&gt; console.log('Buy:', id)} />

[drips-wave]

@Peolite001 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits