Skip to content

feat: clickable robot cards with detail modal - #10

Open
xdnaimino wants to merge 2 commits into
Malek-Ghorbel:mainfrom
xdnaimino:Malek-Ghorbel_first-react_6
Open

feat: clickable robot cards with detail modal#10
xdnaimino wants to merge 2 commits into
Malek-Ghorbel:mainfrom
xdnaimino:Malek-Ghorbel_first-react_6

Conversation

@xdnaimino

@xdnaimino xdnaimino commented Aug 21, 2026

Copy link
Copy Markdown
Contributor

Fixes #6

Changes

  • Card.js: Add onSelect prop with role=button, tabIndex=0, keyboard handlers (Enter/Space), pointer cursor, aria-label. Fix robohash URL from ?50x50 to ?size=200x200
  • CardList.js: Accept and forward onSelect callback to each Card
  • App.js: Add selectedRobot state, onSelectRobot/onCloseModal methods, pass onSelect to CardList, render RobotModal when selected
  • RobotModal.js (new): Centered modal overlay with large avatar, name/email/ID, Close button. Accessibility: focus trap, Esc to close, backdrop click to close, aria-modal, role=dialog, body scroll lock
  • RobotModal.test.js (new): 11 tests covering rendering, a11y attributes, close button, backdrop click, Escape key, scroll lock, and null robot

Acceptance Criteria

  • Clicking a card opens a modal showing the large avatar, name, email, and ID
  • Cards show cursor: pointer, are focusable via Tab, activatable with Enter/Space
  • Modal closes via: Close button, backdrop click, and Escape key
  • Background scroll locked while modal open, focus moves into modal, aria-modal/role=dialog present
  • Selecting a different card while modal is open updates the modal content
  • No console warnings/errors; existing search filtering still works

Evidence

  • All 24 tests pass (Card.test.js: 8, SearchBox.test.js: 5, RobotModal.test.js: 11)
  • Production build succeeds

@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 22:08
@syntaro-bot

syntaro-bot Bot commented Aug 21, 2026

Copy link
Copy Markdown
Contributor

🔄 Syntaro requested review from: @Malek-Ghorbel

@xdnaimino
xdnaimino force-pushed the Malek-Ghorbel_first-react_6 branch from f5ed899 to f64607e Compare August 21, 2026 23:09
opencode added 2 commits August 22, 2026 15:43
…k-Ghorbel#6)

- Add onSelect prop to Card with role=button, tabIndex, keyboard handlers, pointer cursor
- Fix robohash URL from ?50x50 to ?size=200x200
- Thread onSelect through CardList
- Add selectedRobot state and modal handlers to App
- Create RobotModal with focus trap, Esc/backdrop/close button, scroll lock, aria-modal
@xdnaimino
xdnaimino force-pushed the Malek-Ghorbel_first-react_6 branch from a6bd42b to 1478342 Compare August 22, 2026 15:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Clickable robot cards with detail modal

1 participant