@proyecto-viviana/solidaria 0.4.0 → 0.4.1

package/src/autocomplete/createAutocomplete.ts

@@ -9,7 +9,10 @@
 
 import { createSignal, createEffect, onCleanup, type Accessor } from "solid-js";
 import { createId, getOwnerDocument } from "../ssr";
-import { type AutocompleteState } from "@proyecto-viviana/solid-stately";
+import { type AutocompleteState, type CollectionNode } from "@proyecto-viviana/solid-stately";
+import { FOCUS_EVENT, CLEAR_FOCUS_EVENT } from "../selection/constants";
+import { getActiveElement, getEventTarget } from "../utils/dom";
+import { getPointerType } from "../interactions";
 
 export interface CollectionOptions {
   /** The id of the collection element. */
@@ -51,7 +54,7 @@ export interface AutocompleteInputProps {
   autoComplete: "off";
 }
 
-export interface AriaAutocompleteOptions<_T = unknown> {
+export interface AriaAutocompleteOptions<T = unknown> {
   /** Ref accessor for the input element. */
   inputRef: Accessor<HTMLInputElement | undefined>;
   /** Ref accessor for the collection element. */
@@ -64,8 +67,9 @@ export interface AriaAutocompleteOptions<_T = unknown> {
    * An optional filter function used to determine if an option should be included.
    * @param textValue - The text value of the item
    * @param inputValue - The current input value
+   * @param node - The collection node being filtered
    */
-  filter?: (textValue: string, inputValue: string) => boolean;
+  filter?: (textValue: string, inputValue: string, node: CollectionNode<T>) => boolean;
   /**
    * Whether to focus the first item after filtering.
    * @default false
@@ -78,13 +82,13 @@ export interface AriaAutocompleteOptions<_T = unknown> {
   disableVirtualFocus?: boolean;
 }
 
-export interface AutocompleteAria<_T = unknown> {
+export interface AutocompleteAria<T = unknown> {
   /** Props for the autocomplete input element. */
   inputProps: AutocompleteInputProps;
   /** Props for the collection (ListBox/Menu). */
   collectionProps: CollectionOptions;
   /** A filter function that returns if the item should be shown. */
-  filter?: (textValue: string) => boolean;
+  filter?: (nodeTextValue: string, node: CollectionNode<T>) => boolean;
 }
 
 function toKeyboardEventInit(e: KeyboardEvent): KeyboardEventInit {
@@ -103,9 +107,14 @@ function toKeyboardEventInit(e: KeyboardEvent): KeyboardEventInit {
   };
 }
 
-// Custom event names for collection communication
-export const AUTOCOMPLETE_FOCUS_EVENT = "autocomplete:focus";
-export const AUTOCOMPLETE_CLEAR_FOCUS_EVENT = "autocomplete:clearfocus";
+// Custom event names for collection communication.
+// These are the shared @react-aria/selection constants the collection's
+// createSelectableCollection listens for (FOCUS_EVENT / CLEAR_FOCUS_EVENT);
+// the aliases below are retained for backwards-compatible re-exports.
+/** @deprecated Use {@link FOCUS_EVENT} from the selection layer. */
+export const AUTOCOMPLETE_FOCUS_EVENT = FOCUS_EVENT;
+/** @deprecated Use {@link CLEAR_FOCUS_EVENT} from the selection layer. */
+export const AUTOCOMPLETE_CLEAR_FOCUS_EVENT = CLEAR_FOCUS_EVENT;
 
 /**
  * Provides the behavior and accessibility implementation for an autocomplete component.
@@ -158,6 +167,20 @@ export function createAutocomplete<T = unknown>(
   const [autoFocusOnMount, setAutoFocusOnMount] = createSignal(false);
   let lastInputType = "";
 
+  // Reverse-focus (collection → input aria-activedescendant) bookkeeping, mirroring
+  // useAutocomplete's queuedActiveDescendant / delayNextActiveDescendant / timeout
+  // refs. `queuedActiveDescendant` is the id of the option the collection has
+  // virtually focused — tracked synchronously on every collection `focusin`, even
+  // while the visible aria-activedescendant reflection is deferred, so key
+  // navigation always dispatches to the right item. When typing forward,
+  // `delayNextActiveDescendant` defers the next reflection behind a 500ms timeout so
+  // a screen reader finishes announcing the just-typed letter before naming the
+  // active option; every new focusin (and teardown) clears the pending timeout.
+  let queuedActiveDescendant: string | null = null;
+  let delayNextActiveDescendant = false;
+  let activeDescendantTimeout: ReturnType<typeof setTimeout> | undefined;
+  const ACTIVE_DESCENDANT_DELAY = 500;
+
   // Track the input type for determining focus behavior. We listen to
   // `beforeinput` (not `input`) so `lastInputType` is set before the input's
   // `onChange` runs, mirroring @react-aria/autocomplete.
@@ -179,6 +202,11 @@ export function createAutocomplete<T = unknown>(
 
   // Focus first item in collection
   const focusFirstItem = () => {
+    // Typing forward focuses the first filtered row, but the resulting
+    // aria-activedescendant reflection must wait so the SR announces the typed
+    // letter first (see updateActiveDescendant). Mirrors useAutocomplete
+    // setting delayNextActiveDescendant.current = true before the focus event.
+    delayNextActiveDescendant = true;
     const collection = collectionRef();
     if (!collection) {
       // Collection isn't mounted yet — defer focusing the first item to mount
@@ -188,7 +216,7 @@ export function createAutocomplete<T = unknown>(
       return;
     }
     collection.dispatchEvent(
-      new CustomEvent(AUTOCOMPLETE_FOCUS_EVENT, {
+      new CustomEvent(FOCUS_EVENT, {
         cancelable: true,
         bubbles: true,
         detail: { focusStrategy: "first" },
@@ -199,11 +227,18 @@ export function createAutocomplete<T = unknown>(
   // Clear virtual focus
   const clearVirtualFocus = (clearFocusKey = false) => {
     setAutoFocusOnMount(false);
+    // Drop any pending delayed reflection and the tracked item alongside the
+    // active descendant so a subsequent focusin can't resurrect a stale id
+    // (mirrors useAutocomplete clearing queuedActiveDescendant / the timeout /
+    // delayNextActiveDescendant in clearVirtualFocus).
+    clearTimeout(activeDescendantTimeout);
+    queuedActiveDescendant = null;
+    delayNextActiveDescendant = false;
     state.setFocusedNodeId(null);
     const collection = collectionRef();
     if (collection) {
       collection.dispatchEvent(
-        new CustomEvent(AUTOCOMPLETE_CLEAR_FOCUS_EVENT, {
+        new CustomEvent(CLEAR_FOCUS_EVENT, {
           cancelable: true,
           bubbles: true,
           detail: { clearFocusKey },
@@ -243,7 +278,13 @@ export function createAutocomplete<T = unknown>(
       return;
     }
 
-    const focusedNodeId = state.focusedNodeId();
+    // Navigate against the id the collection has virtually focused, tracked
+    // synchronously on every focusin, NOT the (possibly still-delayed)
+    // aria-activedescendant reflection in state — mirrors useAutocomplete
+    // reading queuedActiveDescendant.current here. Reading state.focusedNodeId()
+    // would be null during the post-type reflection delay, so arrows would
+    // re-focus the first row instead of advancing.
+    const focusedNodeId = queuedActiveDescendant;
     const collection = collectionRef();
     const ownerDocument = getOwnerDocument(inputRef() ?? collection);
 
@@ -275,7 +316,7 @@ export function createAutocomplete<T = unknown>(
         // Dispatch focus event to collection
         if (collection) {
           collection.dispatchEvent(
-            new CustomEvent(AUTOCOMPLETE_FOCUS_EVENT, {
+            new CustomEvent(FOCUS_EVENT, {
               cancelable: true,
               bubbles: true,
             }),
@@ -310,7 +351,11 @@ export function createAutocomplete<T = unknown>(
 
     // Forward keyboard events to the focused item (or the collection when there
     // is no virtual focus) so the collection can act on them, e.g. onAction.
-    if (!e.defaultPrevented && collection) {
+    // Gated only on the collection existing — NOT on e.defaultPrevented: arrows
+    // call preventDefault above to stop the input's text cursor moving, but the
+    // key must still be re-dispatched to the row so navigation advances (mirrors
+    // useAutocomplete forwarding whenever collectionRef.current !== null).
+    if (collection) {
       e.stopPropagation();
 
       let shouldPerformDefaultAction = true;
@@ -357,9 +402,85 @@ export function createAutocomplete<T = unknown>(
     // Virtual focus blur handling would go here
   };
 
-  // Create filter function
+  // Reverse path: mirror the collection's virtually-focused option into the
+  // input's aria-activedescendant. The collection dispatches a synthetic,
+  // bubbling `focusin` (via moveVirtualFocus) on its focused option; we read the
+  // target id, track it in `queuedActiveDescendant` synchronously (so key nav
+  // always dispatches to the right item), and reflect it into AutocompleteState
+  // — immediately, or, when `delayNextActiveDescendant` was set by forward
+  // typing, behind a 500ms timeout so the SR finishes announcing the typed
+  // letter before naming the active option. Faithful port of useAutocomplete's
+  // updateActiveDescendantEvent.
+  const updateActiveDescendant = (e: Event) => {
+    const input = inputRef();
+    // If the user clicks/taps an option directly (non-touch), pull real focus
+    // back to the input so typing keeps working.
+    if (
+      !e.isTrusted &&
+      shouldUseVirtualFocus() &&
+      input &&
+      getActiveElement(getOwnerDocument(input)) !== input &&
+      getPointerType() !== "touch"
+    ) {
+      input.focus();
+    }
+
+    const target = getEventTarget<Element>(e);
+    if (e.isTrusted || !target || queuedActiveDescendant === target.id) {
+      return;
+    }
+
+    const collection = collectionRef();
+    // A new focusin supersedes any pending delayed reflection.
+    clearTimeout(activeDescendantTimeout);
+    if (target !== collection) {
+      const targetId = target.id;
+      if (delayNextActiveDescendant) {
+        // Forward typing just focused the first row: track it now, but defer the
+        // aria-activedescendant reflection so the just-typed letter is announced
+        // before the active option.
+        queuedActiveDescendant = targetId;
+        activeDescendantTimeout = setTimeout(() => {
+          state.setFocusedNodeId(targetId);
+        }, ACTIVE_DESCENDANT_DELAY);
+      } else {
+        queuedActiveDescendant = targetId;
+        state.setFocusedNodeId(targetId);
+      }
+    } else if (
+      queuedActiveDescendant &&
+      !getOwnerDocument(collection)?.getElementById(queuedActiveDescendant)
+    ) {
+      // Refocus of the collection itself while the previously focused node no
+      // longer exists (filtered away, or the input was refocused): clear the
+      // tracked item and the active descendant.
+      queuedActiveDescendant = null;
+      state.setFocusedNodeId(null);
+    }
+    // Reflection delay is a one-shot; the next focusin reflects immediately
+    // unless forward typing sets the flag again.
+    delayNextActiveDescendant = false;
+  };
+
+  createEffect(() => {
+    if (!shouldUseVirtualFocus()) return;
+    const collection = collectionRef();
+    if (collection) {
+      collection.addEventListener("focusin", updateActiveDescendant);
+      onCleanup(() => {
+        collection.removeEventListener("focusin", updateActiveDescendant);
+        clearTimeout(activeDescendantTimeout);
+      });
+    }
+  });
+
+  // Create filter function. The user's 3-arg predicate (textValue, inputValue,
+  // node) is closed over the current input value and exposed to the collection
+  // as the 2-arg (nodeTextValue, node) shape that UNSTABLE_useFilteredListState
+  // (createFilteredListState) expects.
   const filterFn = filter
-    ? (textValue: string) => filter(textValue, state.inputValue())
+    ? (nodeTextValue: string, node: CollectionNode<T>) =>
+        filter(nodeTextValue, state.inputValue(), node)
     : undefined;
 
   return {

package/src/breadcrumbs/createBreadcrumbs.ts

@@ -84,8 +84,14 @@ export function createBreadcrumbItem(
   const elementType = () => getProps().elementType ?? "a";
 
   // Use createLink for base link behavior
-  // Current items are treated as disabled (can't navigate to current page)
-  const { linkProps, isPressed } = createLink({
+  // Current items are treated as disabled (can't navigate to current page).
+  // Keep the whole return value (do NOT destructure linkProps): `linkProps` is a
+  // reactive getter, and destructuring it here would snapshot getLinkProps() once
+  // at mount — freezing role/tabIndex to whatever elementType was during the
+  // transient first render (e.g. before isCurrent settles). Reading
+  // linkAria.linkProps fresh inside getItemProps keeps it live, mirroring React
+  // re-running useLink every render.
+  const linkAria = createLink({
     get isDisabled() {
       return isDisabled() || isCurrent();
     },
@@ -148,6 +154,8 @@ export function createBreadcrumbItem(
   const getItemProps = (): Record<string, unknown> => {
     const p = getProps();
     const current = isCurrent();
+    // Read fresh each call so elementType-driven role/tabIndex stay reactive.
+    const linkProps = linkAria.linkProps;
 
     // Start with link props, forwarding id if provided
     let baseProps: Record<string, unknown> = p.id ? mergeProps(linkProps, { id: p.id }) : linkProps;
@@ -175,8 +183,8 @@ export function createBreadcrumbItem(
       return getItemProps();
     },
     get linkProps() {
-      return linkProps;
+      return linkAria.linkProps;
     },
-    isPressed,
+    isPressed: linkAria.isPressed,
   };
 }

package/src/button/createToggleButtonGroup.ts

@@ -1,4 +1,5 @@
 import type { JSX } from "solid-js";
+import { splitProps } from "solid-js";
 import type { Key, ToggleGroupProps, ToggleGroupState } from "@proyecto-viviana/solid-stately";
 import { createToolbar, type Orientation } from "../toolbar";
 import { mergeProps } from "../utils";
@@ -75,21 +76,25 @@ export function createToggleButtonGroupItem(
   props: AriaToggleButtonGroupItemProps,
   state: ToggleGroupState,
 ): ToggleButtonAria {
-  const { id: _id, ...toggleProps } = props;
+  // splitProps keeps `toggleProps` a reactive proxy; an object-rest destructure
+  // (`{ id, ...toggleProps }`) eagerly reads and freezes every key. `id` is
+  // dropped here and re-read live via props.id below. guard:idiomatic-solid.
+  const [, toggleProps] = splitProps(props, ["id"]);
 
-  const toggleButton = createToggleButton({
-    ...toggleProps,
-    get isSelected() {
-      return state.selectedKeys.has(props.id);
-    },
-    onChange(isSelected) {
-      state.setSelected(props.id, isSelected);
-      props.onChange?.(isSelected);
-    },
-    get isDisabled() {
-      return isDisabledValue(props.isDisabled) || state.isDisabled;
-    },
-  });
+  const toggleButton = createToggleButton(
+    mergeProps(toggleProps, {
+      get isSelected() {
+        return state.selectedKeys.has(props.id);
+      },
+      onChange(isSelected: boolean) {
+        state.setSelected(props.id, isSelected);
+        props.onChange?.(isSelected);
+      },
+      get isDisabled() {
+        return isDisabledValue(props.isDisabled) || state.isDisabled;
+      },
+    }) as AriaToggleButtonProps,
+  );
 
   const baseButtonProps = toggleButton.buttonProps as Record<string, unknown>;
   const buttonProps: Record<string, unknown> = {

package/src/calendar/createCalendar.ts

@@ -11,6 +11,7 @@ import { access, type MaybeAccessor } from "../utils/reactivity";
 import { mergeProps } from "../utils/mergeProps";
 import type { CalendarState } from "@proyecto-viviana/solid-stately";
 import { formatVisibleRangeDescription, setCalendarHookData } from "./utils";
+import { formatCalendarLabel } from "./intl";
 
 export interface AriaCalendarProps {
   /** An ID for the calendar. */
@@ -99,14 +100,13 @@ export function createCalendar<T extends CalendarState>(
     const isDisabled = p.isDisabled || state.isDisabled();
 
     return {
-      "aria-label": "Previous month",
+      "aria-label": formatCalendarLabel(state.locale(), "previous"),
       onClick: () => {
         if (!isDisabled) {
           state.focusPreviousPage();
         }
       },
       disabled: isDisabled,
-      tabIndex: -1,
     };
   });
 
@@ -116,14 +116,13 @@ export function createCalendar<T extends CalendarState>(
     const isDisabled = p.isDisabled || state.isDisabled();
 
     return {
-      "aria-label": "Next month",
+      "aria-label": formatCalendarLabel(state.locale(), "next"),
       onClick: () => {
         if (!isDisabled) {
           state.focusNextPage();
         }
       },
       disabled: isDisabled,
-      tabIndex: -1,
     };
   });
 

package/src/calendar/createCalendarCell.ts

@@ -14,7 +14,12 @@ import { getInteractionModality } from "../interactions/createInteractionModalit
 import { useLocale } from "../i18n";
 import { mergeProps } from "../utils/mergeProps";
 import type { CalendarState, CalendarDate, DateValue } from "@proyecto-viviana/solid-stately";
-import { isToday as isTodayUtil, DateFormatter, getLocalTimeZone } from "@internationalized/date";
+import {
+  isToday as isTodayUtil,
+  DateFormatter,
+  getLocalTimeZone,
+  isSameDay,
+} from "@internationalized/date";
 import { getCalendarHookData } from "./utils";
 import { formatCalendarLabel } from "./intl";
 
@@ -76,7 +81,6 @@ export function createCalendarCell<T extends CalendarState>(
 
   // Check states
   const isSelected = createMemo(() => state.isSelected(date()));
-  const isFocused = createMemo(() => state.isCellFocused(date()));
   const isInvalid = createMemo(() => state.isValueInvalid() && isSelected());
   const isDisabled = createMemo(() => {
     return getProps().isDisabled || state.isCellDisabled(date());
@@ -85,6 +89,11 @@ export function createCalendarCell<T extends CalendarState>(
   const isOutsideMonth = createMemo(
     () => getProps().isOutsideMonth ?? state.isOutsideVisibleRange(date()),
   );
+  // Mirror @react-aria/calendar useCalendarCell: `isCellFocused(date) &&
+  // !isOutsideMonth`. isCellFocused is gated on the calendar-level focus flag,
+  // so this drives the focusSafely effect (never on mount) — NOT the roving
+  // tabIndex, which tracks focusedDate directly below.
+  const isFocused = createMemo(() => state.isCellFocused(date()) && !isOutsideMonth());
   const isToday = createMemo(() => isTodayUtil(date(), timeZone));
   const isCellFocusVisible = createMemo(
     () => isFocused() && isRingFocusVisible() && getInteractionModality() !== null,
@@ -193,7 +202,12 @@ export function createCalendarCell<T extends CalendarState>(
       focusProps as Record<string, unknown>,
       {
         role: "button",
-        tabIndex: isFocused() ? 0 : -1,
+        // Roving tabbable cell = the focusedDate cell, ungated by calendar
+        // focus, mirroring @react-aria/calendar useCalendarCell
+        // (`tabIndex = isSameDay(date, state.focusedDate) ? 0 : -1`, undefined
+        // when disabled). Keeps one cell tabbable on mount without stealing
+        // focus, and prunes tabindex from disabled cells like upstream.
+        tabIndex: isDisabled() ? undefined : isSameDay(date(), state.focusedDate()) ? 0 : -1,
         "aria-label": label,
         "aria-disabled": isDisabled() || isUnavailable() || undefined,
         "aria-invalid": isInvalid() || undefined,

package/src/calendar/createCalendarGrid.ts

@@ -180,16 +180,17 @@ export function createCalendarGrid<T extends CalendarState>(
       "aria-readonly": state.isReadOnly() || undefined,
       "aria-disabled": state.isDisabled() || undefined,
       "aria-multiselectable": isMultiSelectable() || undefined,
-      tabIndex: state.isFocused() ? 0 : -1,
       onFocus: () => state.setFocused(true),
       onBlur: () => state.setFocused(false),
       onKeyDown: handleKeyDown,
     };
   });
 
-  // Header props are intentionally empty. Consumers render this on <thead>,
-  // which already has correct table semantics.
-  const headerProps = createMemo(() => ({}));
+  // Column headers are hidden to screen readers to make navigating with a touch
+  // screen reader easier — the day names are already included in each cell's
+  // label, so there's no need to announce them twice. Consumers render this on
+  // <thead>. Mirrors @react-aria/calendar useCalendarGrid headerProps.
+  const headerProps = createMemo(() => ({ "aria-hidden": true }));
 
   return {
     get gridProps() {

package/src/calendar/createRangeCalendar.ts

@@ -13,9 +13,9 @@ import type { RangeCalendarState } from "@proyecto-viviana/solid-stately";
 import {
   formatSelectedDateDescription,
   formatVisibleRangeDescription,
-  getCalendarHookData,
   setCalendarHookData,
 } from "./utils";
+import { formatCalendarLabel } from "./intl";
 
 export interface AriaRangeCalendarProps {
   /** An ID for the calendar. */
@@ -80,18 +80,30 @@ export function createRangeCalendar<T extends RangeCalendarState>(
   const selectedDateDescription = createMemo(() => formatSelectedDateDescription(state));
 
   const initialProps = getProps();
-  const existingHookData = getCalendarHookData(state);
-  setCalendarHookData(state, {
-    errorMessageId:
-      initialProps.errorMessage || initialProps.errorMessageId
-        ? errorMessageId
-        : existingHookData?.errorMessageId,
-    ariaLabel: initialProps["aria-label"],
-    ariaLabelledBy: initialProps["aria-labelledby"],
-    get selectedDateDescription() {
-      return selectedDateDescription();
-    },
-  });
+  // Gate the hook-data write on an identifying prop, mirroring createCalendar.
+  // The headless RangeCalendarButton re-invokes createRangeCalendar({}, state)
+  // to read prev/next button props from context; without this gate that bare
+  // call would clobber the ariaLabel / selectedDateDescription the owning
+  // RangeCalendar published, dropping the calendar label from every grid name.
+  if (
+    initialProps.id ||
+    initialProps["aria-label"] ||
+    initialProps["aria-labelledby"] ||
+    initialProps["aria-describedby"] ||
+    initialProps["aria-details"] ||
+    initialProps.errorMessage ||
+    initialProps.errorMessageId
+  ) {
+    setCalendarHookData(state, {
+      errorMessageId:
+        initialProps.errorMessage || initialProps.errorMessageId ? errorMessageId : undefined,
+      ariaLabel: initialProps["aria-label"],
+      ariaLabelledBy: initialProps["aria-labelledby"],
+      get selectedDateDescription() {
+        return selectedDateDescription();
+      },
+    });
+  }
 
   // Previous button props
   const prevButtonProps = createMemo(() => {
@@ -99,14 +111,13 @@ export function createRangeCalendar<T extends RangeCalendarState>(
     const isDisabled = p.isDisabled || state.isDisabled() || state.isPreviousVisibleRangeInvalid();
 
     return {
-      "aria-label": "Previous month",
+      "aria-label": formatCalendarLabel(state.locale(), "previous"),
       onClick: () => {
         if (!isDisabled) {
           state.focusPreviousPage();
         }
       },
       disabled: isDisabled,
-      tabIndex: -1,
     };
   });
 
@@ -116,14 +127,13 @@ export function createRangeCalendar<T extends RangeCalendarState>(
     const isDisabled = p.isDisabled || state.isDisabled() || state.isNextVisibleRangeInvalid();
 
     return {
-      "aria-label": "Next month",
+      "aria-label": formatCalendarLabel(state.locale(), "next"),
       onClick: () => {
         if (!isDisabled) {
           state.focusNextPage();
         }
       },
       disabled: isDisabled,
-      tabIndex: -1,
     };
   });
 

package/src/calendar/createRangeCalendarCell.ts

@@ -10,7 +10,12 @@ import { access, type MaybeAccessor } from "../utils/reactivity";
 import { focusSafely } from "../utils/focus";
 import { createDescription } from "../utils/createDescription";
 import type { RangeCalendarState, CalendarDate, DateValue } from "@proyecto-viviana/solid-stately";
-import { isToday as isTodayUtil, DateFormatter, getLocalTimeZone } from "@internationalized/date";
+import {
+  isToday as isTodayUtil,
+  isSameDay,
+  DateFormatter,
+  getLocalTimeZone,
+} from "@internationalized/date";
 import { getCalendarHookData, getEraFormat } from "./utils";
 import { formatCalendarLabel, formatCalendarPrompt } from "./intl";
 
@@ -71,7 +76,6 @@ export function createRangeCalendarCell<T extends RangeCalendarState>(
   const isSelected = createMemo(() => state.isSelected(date()));
   const isSelectionStart = createMemo(() => state.isSelectionStart(date()));
   const isSelectionEnd = createMemo(() => state.isSelectionEnd(date()));
-  const isFocused = createMemo(() => state.isCellFocused(date()));
   const isInvalid = createMemo(() => {
     const range = state.highlightedRange();
     const d = date();
@@ -91,6 +95,11 @@ export function createRangeCalendarCell<T extends RangeCalendarState>(
   const isOutsideMonth = createMemo(() => {
     return getProps().isOutsideMonth ?? state.isOutsideVisibleRange(date());
   });
+  // Mirror @react-aria/calendar useCalendarCell: `isCellFocused(date) &&
+  // !isOutsideMonth`. isCellFocused is now gated on the calendar-level focus
+  // flag, so this drives the focusSafely effect + range-selection prompt (never
+  // on mount) — NOT the roving tabIndex, which tracks focusedDate directly.
+  const isFocused = createMemo(() => state.isCellFocused(date()) && !isOutsideMonth());
   const isToday = createMemo(() => isTodayUtil(date(), timeZone));
   const rangeSelectionPrompt = createMemo(() => {
     if (!isFocused() || state.isReadOnly() || !isSelectable()) {
@@ -199,7 +208,12 @@ export function createRangeCalendarCell<T extends RangeCalendarState>(
 
     return {
       role: "button",
-      tabIndex: isFocused() ? 0 : -1,
+      // Roving tabbable cell = the focusedDate cell, ungated by calendar focus,
+      // mirroring @react-aria/calendar useCalendarCell
+      // (`tabIndex = isSameDay(date, state.focusedDate) ? 0 : -1`, undefined when
+      // disabled). Keeps one cell tabbable on mount without stealing focus, and
+      // prunes tabindex from disabled cells like upstream.
+      tabIndex: isDisabled() ? undefined : isSameDay(d, state.focusedDate()) ? 0 : -1,
       "aria-label": label,
       "aria-disabled": isDisabled() || isUnavailable() || undefined,
       "aria-invalid": isInvalid() || undefined,

package/src/calendar/intl/index.ts

@@ -10,6 +10,8 @@ type CalendarLabelKey =
   | "dateSelected"
   | "maximumDate"
   | "minimumDate"
+  | "next"
+  | "previous"
   | "selectedDateDescription"
   | "selectedRangeDescription"
   | "todayDate"
@@ -169,6 +171,8 @@ const calendarLabelStrings: LocalizedStrings<CalendarLabelKey, CalendarLabelMess
     dateSelected: (args) => `${args?.date} selected`,
     maximumDate: "Last available date",
     minimumDate: "First available date",
+    next: "Next",
+    previous: "Previous",
     selectedDateDescription: (args) => `Selected Date: ${args?.date}`,
     selectedRangeDescription: (args) => `Selected Range: ${args?.dateRange}`,
     todayDate: (args) => `Today, ${args?.date}`,
@@ -181,6 +185,8 @@ const calendarLabelStrings: LocalizedStrings<CalendarLabelKey, CalendarLabelMess
     minimumDate: "Première date disponible",
     selectedDateDescription: (args) => `Date sélectionnée : ${args?.date}`,
     selectedRangeDescription: (args) => `Plage sélectionnée : ${args?.dateRange}`,
+    next: "Suivant",
+    previous: "Précédent",
     todayDate: (args) => `Aujourd'hui, ${args?.date}`,
     todayDateSelected: (args) => `Aujourd’hui, ${args?.date} sélectionné`,
   },
@@ -189,6 +195,8 @@ const calendarLabelStrings: LocalizedStrings<CalendarLabelKey, CalendarLabelMess
     dateSelected: (args) => `${args?.date} المحدد`,
     maximumDate: "آخر تاريخ متاح",
     minimumDate: "أول تاريخ متاح",
+    next: "التالي",
+    previous: "السابق",
     selectedDateDescription: (args) => `تاريخ محدد: ${args?.date}`,
     selectedRangeDescription: (args) => `المدى الزمني المحدد: ${args?.dateRange}`,
     todayDate: (args) => `اليوم، ${args?.date}`,