Fix news marquee cards becoming unclickable after manual scroll

[michaelassraf]

Problem

The news marquee (and every other children-mode CardsStrip: case-studies, logos, …) becomes non-clickable after you manually scroll inside it for a while.

Root cause

For a seamless endless loop, CardsStrip renders the item list twice — copy 0 (real) and copy 1 (clone). The clone cell was marked inert, which removes it from the a11y tree, the tab order, and disables pointer clicks.

The 2-copy loop keeps scrollLeft warped into [0, singleCopyWidth), but the viewport is wider than that window near the copy seam, so clone cards are always painted on the right side of the strip. During auto-scroll that's invisible (cards keep moving); when a user manually scrolls and parks (which also keeps the marquee suppressed), they end up looking at clone cards that silently swallow every click.

Fix

Clones must stay clickable (any visible card, real or clone, must open its link) while remaining a11y-correct. Replaced the blanket inert with the standard loop-clone treatment (Swiper/Splide):

• aria-hidden on the clone (out of the a11y tree — no duplicate announcements).
• New useSuppressCloneFocus hook forces every focusable clone descendant to tabindex="-1" (out of the tab order — no duplicate tab stops, no aria-hidden-focus violation), re-applied via a scoped MutationObserver.
• Pointer events untouched → the clone's own <a href> handles click / ⌘-click / middle-click / context-menu natively.

Extracted the children-mode cell into a ManagedCell component so the per-cell hook can run. Render-prop strips (VideoBitesStrip) own their clone a11y separately and are untouched.

Full lib tsc --noEmit passes with 0 errors.

Verification

Recommend a real-device tap-test: scroll a children-mode strip to a seam, stop, confirm the visible cards now navigate.

🤖 Generated with Claude Code

Summary by CodeRabbit

• Accessibility
  • Improved carousel card clones so they remain clickable while staying hidden from screen readers and keyboard navigation.
  • Focus behavior now remains consistent when card content changes dynamically.

[coderabbitai]

Warning

Review limit reached

@michaelassraf, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 29 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: f1312bb5-891e-4c27-91ae-c98a18236c9a

📥 Commits

Reviewing files that changed from the base of the PR and between 619027b and b1a8adc.

📒 Files selected for processing (2)

• openframe-frontend-core/src/components/features/cards-strip.tsx
• openframe-frontend-core/src/stories/CardsStrip.stories.tsx

📝 Walkthrough

Walkthrough

CardsStrip children-mode clones remain clickable while being marked aria-hidden and removed from keyboard tab order. A mutation-aware focus-suppression hook and ManagedCell component replace the previous inert-based inline rendering.

Changes

Clone focus management

Layer / File(s)	Summary
Managed cell focus and accessibility behavior openframe-frontend-core/src/components/features/cards-strip.tsx	Clone documentation, focus suppression, mutation observation, sizing, interaction handlers, and aria-hidden behavior are updated in ManagedCell.
Children-mode rendering integration openframe-frontend-core/src/components/features/cards-strip.tsx	renderItem now creates children-mode cells through ManagedCell with item context and responsive widths.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Possibly related PRs

• flamingo-stack/openframe-oss-lib#1408: Also modifies CardsStrip children-mode ManagedCell rendering and uses its card-key attribute for hover synchronization.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately reflects the main fix: news marquee cards were becoming unclickable after manual scrolling.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/news-marquee-clickability-c12d39

---

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.}

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@openframe-frontend-core/src/components/features/cards-strip.tsx`:
- Around line 20-21: Update the CardsStrip story contract in
CardsStrip.stories.tsx so its clone behavior documents clickable clones with
aria-hidden and focus suppression, removing the outdated inert and
unclickable-link claims.
- Around line 154-195: Update useSuppressCloneFocus and CLONE_FOCUSABLE_SELECTOR
to observe attribute changes that can create focusable descendants: include
href/contenteditable/tabindex changes in MutationObserver options, and expand
the selector to cover summary and all contenteditable values. Preserve the
existing tabindex="-1" guard so the observer does not loop on its own writes.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 52a54c27-8e88-4671-a7f1-72069a3c8de0

📥 Commits

Reviewing files that changed from the base of the PR and between bfd3e96 and 619027b.

📒 Files selected for processing (1)

• openframe-frontend-core/src/components/features/cards-strip.tsx