Skip to content

fix: keep month grid keyboard tab stop after navigating to a shorter month#31

Merged
Sachchaa merged 1 commit into
mainfrom
claude/fix-month-grid-tab-stop
May 24, 2026
Merged

fix: keep month grid keyboard tab stop after navigating to a shorter month#31
Sachchaa merged 1 commit into
mainfrom
claude/fix-month-grid-tab-stop

Conversation

@Sachchaa
Copy link
Copy Markdown
Owner

Summary

MonthView uses a roving-tabindex pattern: one cell holds tabIndex={0} (the keyboard tab stop) and the rest hold tabIndex={-1}. The active cell was tracked by a raw focusedIndex that was never reconciled when the displayed month changed.

Months render 4–6 weeks (28–42 cells). Navigating from a 6-week month with a late cell focused (e.g. index 40) to a 5-week month (35 cells) left focusedIndex pointing past the last cell, so the comparison cellIndex === focusedIndex matched no cell. Every cell then had tabIndex={-1} and the container is tabIndex={-1}, so keyboard users could no longer Tab into the grid at all.

Fix

  • Derive a clamped activeIndex = Math.min(focusedIndex, totalCells - 1) so exactly one cell always keeps tabIndex={0}.
  • Use activeIndex for the roving-tabindex comparison and as the base for arrow/Home/End movement, so navigation stays consistent after the index is clamped.

No behavior change for same-month navigation; this only prevents the lost tab stop when the month length shrinks.

Test plan

  • pnpm run lint (tsc) — clean
  • pnpm run lint:eslint — clean
  • pnpm run test — 77 passed (2 new)
  • New tests/month-view-nav.test.tsx: verifies exactly one tabbable cell remains after navigating Aug 2026 (6 weeks) → Sep 2026 (5 weeks), and that arrow keys move the tab stop. Confirmed both tests fail without the fix (the tab-stop test reports 0 tabbable cells).

https://claude.ai/code/session_01RAQ7vWRxzEz4Ladq9PcxfN


Generated by Claude Code

…month

The roving-tabindex active cell was tracked by a raw index that was never
reconciled when the month changed. Months span 4-6 weeks, so navigating
from a 6-week month to a shorter one could leave the stored index past the
last cell, giving every cell tabIndex -1 and removing the grid's only
keyboard tab stop. Clamp the active index to the current cell count so one
cell always remains tabbable, and drive arrow-key movement from the
clamped value.

https://claude.ai/code/session_01RAQ7vWRxzEz4Ladq9PcxfN
@vercel
Copy link
Copy Markdown

vercel Bot commented May 24, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
react-timegrid-storybook Ready Ready Preview, Comment May 24, 2026 4:15am

@Sachchaa Sachchaa merged commit 147e27a into main May 24, 2026
4 checks passed
@Sachchaa Sachchaa deleted the claude/fix-month-grid-tab-stop branch May 24, 2026 07:09
@github-actions
Copy link
Copy Markdown

🎉 This PR is included in version 1.0.3 🎉

The release is available on:

Your semantic-release bot 📦🚀

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

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants