fix(projects): resolve nested button HTML validation error

[nino-chavez]

Summary

• Changed <button> wrappers to <div role="button"> in selection mode to avoid nesting buttons inside Checkbox (which renders as <button role="checkbox">)
• Fixed both project card wrappers and "Select All" row

Related Issue

Fixes #675

Test plan

• Enter selection mode on Projects page
• Click checkboxes on project cards
• Click "Select All" row
• Verify no console errors about nested buttons
• Playwright E2E test included

🤖 Generated with Claude Code

Summary by CodeRabbit

• Refactor
  • Updated interactive controls on the projects page to maintain existing functionality and keyboard accessibility.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[vercel]

@nino-chavez is attempting to deploy a commit to the OpenCut OSS Team on Vercel.

A member of the Team first needs to authorize it.

[netlify]

👷 Deploy request for appcut pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	0f779d1

[coderabbitai]

📝 Walkthrough

Walkthrough

Fixed invalid HTML nesting where button elements contained nested buttons by replacing outer buttons with divs having role="button" and tabIndex={0}, preserving all interactive behavior and keyboard handling.

Changes

Cohort / File(s)	Summary
Button accessibility refactor apps/web/src/app/projects/page.tsx	Replaced two interactive <button> elements with <div> elements having role="button" and tabIndex={0} attributes. Added explicit React.KeyboardEvent typing for keydown handler. Preserved onClick and onKeyDown behavior for selection header and project cards; Enter/Space keys continue to trigger handlers as before.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• feat: makes the select all project button entirely clickable and cleans up small css changes #288: Modifies the same projects page selection UI, replacing interactive containers and updating selection/card interaction handling.

Poem

🐰 A nested button fix, oh what a sight!
No more errors in the browser's light,
Divs with roles now play the part,
Keyboard handlers warm the heart! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarizes the main change: fixing a nested button HTML validation error in the projects page by replacing button elements with divs.
Description check	✅ Passed	The description adequately covers the key aspects: what was changed, why it was changed, related issue, test plan, and includes verification steps. Some template sections are not filled but core information is present and complete.
Linked Issues check	✅ Passed	The PR directly addresses issue #675 by eliminating nested elements through replacing wrappers with , which resolves the console HTML validation error described in the issue.
Out of Scope Changes check	✅ Passed	All changes are scoped to fixing the nested button validation error in the projects selection mode; no unrelated modifications are present beyond the stated objective.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}