Solution

You'll keep one active day index in React state and derive the live status from the fixed day array.

The problem, in plain English

The calendar has 84 stable data points. Each point needs one of five colors, but only the day reached by pointer or keyboard changes the status line. The data and layout are pure derivations; the active index is the only changing fact.

The mental model

Build the days once, then let CSS perform the spatial work. The first seven array entries fill the first column because the grid has seven explicit rows and flows by column. A day's computed level selects l0 through l4.

A first attempt

A tempting handler changes the rendered paragraph directly:

function showDay(day: Day) {
  document.querySelector(".status")!.textContent =
    `${day.count} contributions — day ${day.i}`;
}

That makes the DOM a second source of truth. React does not know which day is active and can replace the text on a later render. It also leaves keyboard focus without equivalent behavior unless you duplicate the mutation.

The working solution

import { useState } from "react";
import "./styles.css";

type Day = { i: number; count: number; level: number };

function buildDays(): Day[] {
  const days: Day[] = [];
  for (let i = 0; i < 84; i++) {
    const level = (i * 3 + (i % 7)) % 5;
    const count = level * 2 + (i % 3);
    days.push({ i, count, level });
  }
  return days;
}

const days = buildDays();

export default function App() {
  const [activeIndex, setActiveIndex] = useState<number | null>(null);
  const active = activeIndex === null ? null : days[activeIndex];

  return (
    <main className="container">
      <h1>Heatmap Calendar</h1>

      <div className="grid" role="group" aria-label="Activity by day">
        {days.map((d) => (
          <button
            key={d.i}
            type="button"
            className={`cell l${d.level}`}
            aria-label={`Day ${d.i}: ${d.count} contributions`}
            onMouseEnter={() => setActiveIndex(d.i)}
            onFocus={() => setActiveIndex(d.i)}
          />
        ))}
      </div>

      <div
        className="legend"
        role="group"
        aria-label="Activity intensity: less to more"
      >
        <span>Less</span>
        <span className="cell l0" aria-hidden="true" />
        <span className="cell l1" aria-hidden="true" />
        <span className="cell l2" aria-hidden="true" />
        <span className="cell l3" aria-hidden="true" />
        <span className="cell l4" aria-hidden="true" />
        <span>More</span>
      </div>

      <p className="status" role="status" aria-live="polite">
        {active
          ? `${active.count} contributions — day ${active.i}`
          : "Hover a day"}
      </p>
    </main>
  );
}

The module-level array stays stable across renders. activeIndex stores only the changing identity, while active and the status string are derived. Both input paths call the same setter, and native buttons provide keyboard focus without extra key handlers.

Walking through one interaction

• Load: activeIndex is null, so the status is Hover a day.
• Enter or focus day 45: setActiveIndex(45) schedules a render.
• The formula gave day 45 level 3 and count 6, so active becomes days[45] and the status announces 6 contributions — day 45.

Gotchas

• Using a truthy check for the index — day 0 is falsy. Compare with null explicitly.
• Rebuilding days in App — every hover would allocate 84 new objects. Build immutable data once at module scope.
• Using divs as controls — mouse hover works, but keyboard users cannot reach the cells. Use native buttons, labels, and onFocus.
• Omitting explicit rows — square cells in implicit auto rows can collapse. Keep grid-template-rows: repeat(7, 1fr).

Going further

• Real dates — add a start date and expose calendar dates in each accessible name.
• Floating tooltip — position a visual popup near the active button while retaining the live status for assistive technology.
• Roving focus — add arrow-key movement so users can cross the grid without tabbing through all 84 buttons.

Alternative solutions

import { useReducer } from "react";
import "./styles.css";

type Day = { i: number; count: number; level: number };

const days: Day[] = Array.from({ length: 84 }, (_, i) => {
  const level = (i * 3 + (i % 7)) % 5;
  return { i, level, count: level * 2 + (i % 3) };
});

function selectedDayReducer(_current: Day | null, next: Day): Day {
  return next;
}

function DayButton({ day, select }: { day: Day; select: (day: Day) => void }) {
  return (
    <button
      type="button"
      className={`cell l${day.level}`}
      aria-label={`Day ${day.i}: ${day.count} contributions`}
      onMouseEnter={() => select(day)}
      onFocus={() => select(day)}
    />
  );
}

export default function App() {
  const [selectedDay, select] = useReducer(selectedDayReducer, null);

  return (
    <main className="container">
      <h1>Heatmap Calendar</h1>

      <div className="grid" role="group" aria-label="Activity by day">
        {days.map((day) => (
          <DayButton key={day.i} day={day} select={select} />
        ))}
      </div>

      <div className="legend" role="group" aria-label="Activity intensity: less to more">
        <span>Less</span>
        <span className="cell l0" aria-hidden="true" />
        <span className="cell l1" aria-hidden="true" />
        <span className="cell l2" aria-hidden="true" />
        <span className="cell l3" aria-hidden="true" />
        <span className="cell l4" aria-hidden="true" />
        <span>More</span>
      </div>

      <p className="status" role="status" aria-live="polite">
        {selectedDay
          ? `${selectedDay.count} contributions — day ${selectedDay.i}`
          : "Hover a day"}
      </p>
    </main>
  );
}