Skip to content

feat: add interactive robot cards with detail modal - #7

Draft
xdnaimino wants to merge 2 commits into
Malek-Ghorbel:mainfrom
xdnaimino:feat/robot-card-modal
Draft

feat: add interactive robot cards with detail modal#7
xdnaimino wants to merge 2 commits into
Malek-Ghorbel:mainfrom
xdnaimino:feat/robot-card-modal

Conversation

@xdnaimino

@xdnaimino xdnaimino commented Aug 21, 2026

Copy link
Copy Markdown
Contributor

Summary

Adds click-to-open detail modal for robot cards with full keyboard and screen reader accessibility.

Changes

  • Card.js: Added onClick, onKeyDown (Enter/Space), role="button", tabIndex={0}, aria-label, pointer cursor, and card-focus class for visible focus ring. Fixed robohash URL from ?50x50 to ?size=200x200.
  • CardList.js: Accepts onSelect prop and threads it to each Card component.
  • App.js: Added selectedRobot state, onSelectRobot/onCloseModal handlers. Renders RobotModal when a robot is selected.
  • RobotModal.js (new): Modal component with backdrop overlay, close button, Esc key handling, backdrop click to close, body scroll lock, aria-modal, role="dialog", and aria-labelledby.
  • app.css: Added .card-focus:focus outline style.

Verification

  • Tests: 20/20 pass (Card: 7, RobotModal: 9, SearchBox: 6). New tests cover click, Enter/Space activation, modal rendering, Esc close, backdrop close, body scroll lock.
  • Build: Compiles cleanly (NODE_OPTIONS=--openssl-legacy-provider for CRA4 + Node 18).

Acceptance Criteria

  • Clicking a card opens a modal showing large avatar, name, email, and ID.
  • Cards show cursor: pointer, are focusable via Tab, activatable with Enter and Space.
  • Modal closes via Close button, backdrop click, and Esc.
  • Background scroll is locked; aria-modal/role=dialog are present.
  • Selecting a different card updates modal content.
  • No console warnings/errors; search filtering still works.
  • Modal is centered and not clipped at 375/768/1280px.

Closes #6

opencode
feat: add interactive robot cards with detail modal
f68c864 
- Make Card components clickable with keyboard support (Enter/Space)
- Add aria-label, role='button', tabIndex for a11y
- Create RobotModal component with backdrop, Esc close, focus trap
- Lift selectedRobot state into App, render modal on card select
- Lock background scroll while modal is open
- Fix robohash URL typo (?50x50 → ?size=200x200)
- Add focus ring CSS for card keyboard navigation
- Add comprehensive tests for Card interaction and RobotModal

Closes Malek-Ghorbel#6
@syntaro-bot

syntaro-bot Bot commented Aug 21, 2026

Copy link
Copy Markdown
Contributor

🔄 Syntaro quality gate: waiting for CI checks to pass before marking this PR ready to merge…

@syntaro-bot
syntaro-bot Bot requested a review from Malek-Ghorbel August 21, 2026 16:27
@syntaro-bot

syntaro-bot Bot commented Aug 21, 2026

Copy link
Copy Markdown
Contributor

🔄 Syntaro requested review from: @Malek-Ghorbel

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

Reviewers

@Malek-Ghorbel Malek-Ghorbel Awaiting requested review from Malek-Ghorbel

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Clickable robot cards with detail modal

1 participant

@xdnaimino