Make the entire ApiCard keyboard-activatable and consistent with its mouse affordance

[greatest0fallt1me]

Description

This is a UI/UX accessibility issue. In src/components/ApiCard.tsx the card has tabIndex={0} and an onKeyDown for Enter but ignores Space, and the hover lift (translateY) has no equivalent keyboard-focus visual. The card also exposes two competing activation targets (the whole card and the inner "View Details" button) without a clear role, which is confusing for screen readers.

Requirements and Context

• Give the card a clear interaction model: either a single clear control or a properly-roled clickable card that responds to both Enter and Space.
• Add a visible focus style on the card matching the hover lift/border affordance.
• Avoid nested redundant tab stops or clarify their purpose (e.g. card navigates, inner button is the primary action).
• Must be secure, tested, and documented
• Should be efficient and easy to review

Suggested Execution

1. Fork the repo and create a branch

   git checkout -b task/api-card-keyboard

2. Implement changes
   • src/components/ApiCard.tsx — handle Space, add focus styling, resolve the dual-target ambiguity
   • src/index.css — add .api-marketplace-card:focus-visible styling using --focus-ring
3. Test and commit
   • npm run dev, open /marketplace, tab to a card and activate with Enter and Space
   • Include test output and notes in the PR

Example commit message

task: full keyboard activation and focus style for ApiCard

Acceptance Criteria

• Card activates on both Enter and Space
• A visible focus style matches the hover affordance
• Tab order is unambiguous (no confusing duplicate targets)
• Screen reader announces the card's role and name clearly

Guidelines

• Meet WCAG 2.1 AA 2.1.1 (Keyboard) and 2.4.7 (Focus Visible)
• Clear documentation and inline comments
• Timeframe: 96 hours