@proyecto-viviana/solidaria 0.2.5 → 0.3.0

package/src/calendar/createCalendarCell.ts

@@ -5,20 +5,24 @@
  * Based on @react-aria/calendar useCalendarCell
  */
 
-import { createSignal, createMemo, onMount } from 'solid-js';
-import { access, type MaybeAccessor } from '../utils/reactivity';
-import type { CalendarState, CalendarDate, DateValue } from '@proyecto-viviana/solid-stately';
-import { isToday as isTodayUtil, DateFormatter, getLocalTimeZone } from '@internationalized/date';
-
-// ============================================
-// TYPES
-// ============================================
+import { createSignal, createMemo, createEffect, type Accessor } from "solid-js";
+import { access, type MaybeAccessor } from "../utils/reactivity";
+import { focusSafely } from "../utils/focus";
+import { createFocusRing } from "../interactions/createFocusRing";
+import { getInteractionModality } from "../interactions/createInteractionModality";
+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 { getCalendarHookData } from "./utils";
 
 export interface AriaCalendarCellProps {
   /** The date represented by the cell. */
   date: DateValue;
   /** Whether the cell is disabled. */
   isDisabled?: boolean;
+  /** Whether the date is outside the current month grid. */
+  isOutsideMonth?: boolean;
 }
 
 export interface CalendarCellAria {
@@ -30,10 +34,14 @@ export interface CalendarCellAria {
   isSelected: boolean;
   /** Whether the cell is focused. */
   isFocused: boolean;
+  /** Whether the cell should display a keyboard focus ring. */
+  isFocusVisible: boolean;
   /** Whether the cell is disabled. */
   isDisabled: boolean;
   /** Whether the cell is unavailable (e.g., booked date). */
   isUnavailable: boolean;
+  /** Whether the cell is part of an invalid selection. */
+  isInvalid: boolean;
   /** Whether the cell is outside the visible month. */
   isOutsideMonth: boolean;
   /** Whether the cell represents today. */
@@ -44,21 +52,22 @@ export interface CalendarCellAria {
   formattedDate: string;
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides the behavior and accessibility implementation for a calendar cell.
  */
 export function createCalendarCell<T extends CalendarState>(
   props: MaybeAccessor<AriaCalendarCellProps>,
   state: T,
-  ref?: () => HTMLElement | null
+  ref?: () => HTMLElement | null,
 ): CalendarCellAria {
   const getProps = () => access(props);
   const [isPressed, setIsPressed] = createSignal(false);
+  const { focusProps, isFocusVisible: isRingFocusVisible } = createFocusRing();
   const timeZone = getLocalTimeZone();
+  const inheritedLocale = useLocale();
+  const stateWithLocale = state as T & { locale?: Accessor<string> };
+  const locale = () => stateWithLocale.locale?.() ?? inheritedLocale().locale;
+  let ignoreNextClick = false;
 
   // Get the date from props
   const date = createMemo(() => getProps().date as CalendarDate);
@@ -66,16 +75,32 @@ 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());
   });
   const isUnavailable = createMemo(() => state.isCellUnavailable(date()));
-  const isOutsideMonth = createMemo(() => state.isOutsideVisibleRange(date()));
+  const isOutsideMonth = createMemo(
+    () => getProps().isOutsideMonth ?? state.isOutsideVisibleRange(date()),
+  );
   const isToday = createMemo(() => isTodayUtil(date(), timeZone));
+  const isCellFocusVisible = createMemo(
+    () => isFocused() && isRingFocusVisible() && getInteractionModality() !== null,
+  );
 
   // Format the date for display
   const formattedDate = createMemo(() => {
-    return date().day.toString();
+    const d = date();
+    const formatter = new DateFormatter(locale(), {
+      day: "numeric",
+      timeZone,
+      calendar: d.calendar.identifier,
+    } as Intl.DateTimeFormatOptions);
+
+    return (
+      formatter.formatToParts(d.toDate(timeZone)).find((part) => part.type === "day")?.value ??
+      d.day.toString()
+    );
   });
 
   // Handle pointer down - this is where selection happens
@@ -87,6 +112,7 @@ export function createCalendarCell<T extends CalendarState>(
       // Select the date on pointer down for immediate response
       // This matches React Aria's behavior of using onPressStart
       state.selectDate(date());
+      ignoreNextClick = true;
       // Prevent default to avoid double-triggering with onClick
       e.preventDefault();
     }
@@ -94,6 +120,11 @@ export function createCalendarCell<T extends CalendarState>(
 
   // Handle click - kept for accessibility (keyboard Enter/Space)
   const handleClick = () => {
+    if (ignoreNextClick) {
+      ignoreNextClick = false;
+      return;
+    }
+
     // Only select on click if not already selected via pointerdown
     // This handles keyboard activation (Enter/Space)
     if (!isDisabled() && !isUnavailable()) {
@@ -105,51 +136,68 @@ export function createCalendarCell<T extends CalendarState>(
     setIsPressed(false);
   };
 
-  // Focus the button when it becomes focused in state
-  onMount(() => {
+  // Keep DOM focus synchronized with focused date updates.
+  // Use focusSafely (preventScroll) to match @react-aria/calendar — bare focus()
+  // causes the browser to auto-scroll the page when bringing the cell into view,
+  // which is wrong inside a popover. Scroll-into-view should be opt-in based on
+  // interaction modality (handled at a higher layer when needed).
+  createEffect(() => {
     const element = ref?.();
     if (element && isFocused()) {
-      element.focus();
+      focusSafely(element);
     }
   });
 
   // Cell props (for the td element)
   const cellProps = createMemo(() => ({
-    role: 'gridcell',
-    'aria-disabled': isDisabled() || undefined,
-    'aria-selected': isSelected() || undefined,
+    role: "gridcell",
+    "aria-disabled": isDisabled() || isUnavailable() || undefined,
+    "aria-selected": isSelected() || undefined,
+    "aria-invalid": isInvalid() || undefined,
   }));
 
   // Button props (for the interactive element inside)
   const buttonProps = createMemo(() => {
     const d = date();
-    const formatter = new DateFormatter('en-US', {
-      weekday: 'long',
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-    });
-
-    return {
-      role: 'button',
-      tabIndex: isFocused() ? 0 : -1,
-      'aria-label': formatter.format(d.toDate(timeZone)),
-      'aria-disabled': isDisabled() || undefined,
-      'aria-pressed': isPressed() || undefined,
-      disabled: isDisabled(),
-      onClick: handleClick,
-      onPointerDown: handlePointerDown,
-      onPointerUp: handlePointerUp,
-      onPointerLeave: handlePointerUp,
-      onFocus: () => {
-        // Only update if this cell isn't already the focused date
-        // This prevents infinite loops when focus is programmatically set
-        if (!state.isCellFocused(d)) {
-          state.setFocusedDate(d);
-        }
-        state.setFocused(true);
-      },
-    };
+    const formatter = new DateFormatter(locale(), {
+      weekday: "long",
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      calendar: d.calendar.identifier,
+    } as Intl.DateTimeFormatOptions);
+    let label = formatter.format(d.toDate(timeZone));
+    if (isSelected()) {
+      label += " selected";
+    }
+    const errorMessageId = getCalendarHookData(state)?.errorMessageId;
+
+    return mergeProps(
+      focusProps as Record<string, unknown>,
+      {
+        role: "button",
+        tabIndex: isFocused() ? 0 : -1,
+        "aria-label": label,
+        "aria-disabled": isDisabled() || isUnavailable() || undefined,
+        "aria-invalid": isInvalid() || undefined,
+        "aria-describedby": isInvalid() ? errorMessageId : undefined,
+        "aria-pressed": isPressed() || undefined,
+        "data-focus-visible": isCellFocusVisible() || undefined,
+        disabled: isDisabled() || isUnavailable(),
+        onClick: handleClick,
+        onPointerDown: handlePointerDown,
+        onPointerUp: handlePointerUp,
+        onPointerLeave: handlePointerUp,
+        onFocus: () => {
+          // Only update if this cell isn't already the focused date.
+          // This prevents infinite loops when focus is programmatically set.
+          if (!state.isCellFocused(d)) {
+            state.setFocusedDate(d);
+          }
+          state.setFocused(true);
+        },
+      } as Record<string, unknown>,
+    );
   });
 
   return {
@@ -165,12 +213,18 @@ export function createCalendarCell<T extends CalendarState>(
     get isFocused() {
       return isFocused();
     },
+    get isFocusVisible() {
+      return isCellFocusVisible();
+    },
     get isDisabled() {
       return isDisabled();
     },
     get isUnavailable() {
       return isUnavailable();
     },
+    get isInvalid() {
+      return isInvalid();
+    },
     get isOutsideMonth() {
       return isOutsideMonth();
     },

package/src/calendar/createCalendarGrid.ts

@@ -5,13 +5,10 @@
  * Based on @react-aria/calendar useCalendarGrid
  */
 
-import { createMemo, onMount, onCleanup } from 'solid-js';
-import { type MaybeAccessor } from '../utils/reactivity';
-import type { CalendarState, CalendarDate } from '@proyecto-viviana/solid-stately';
-
-// ============================================
-// TYPES
-// ============================================
+import { createMemo } from "solid-js";
+import { DateFormatter, startOfWeek, today } from "@internationalized/date";
+import { access, type MaybeAccessor } from "../utils/reactivity";
+import type { CalendarState, CalendarDate } from "@proyecto-viviana/solid-stately";
 
 export interface AriaCalendarGridProps {
   /** The start date of the grid (defaults to start of focused month). */
@@ -19,7 +16,7 @@ export interface AriaCalendarGridProps {
   /** The end date of the grid (defaults to end of focused month). */
   endDate?: CalendarDate;
   /** The number of weeks to display. */
-  weekdayStyle?: 'narrow' | 'short' | 'long';
+  weekdayStyle?: "narrow" | "short" | "long";
 }
 
 export interface CalendarGridAria {
@@ -31,100 +28,134 @@ export interface CalendarGridAria {
   weekDays: string[];
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides the behavior and accessibility implementation for a calendar grid.
  */
 export function createCalendarGrid<T extends CalendarState>(
-  _props: MaybeAccessor<AriaCalendarGridProps>,
+  props: MaybeAccessor<AriaCalendarGridProps>,
   state: T,
-  ref?: () => HTMLElement | null
+  ref?: () => HTMLElement | null,
 ): CalendarGridAria {
   // Week days for headers
-  const weekDays = createMemo(() => state.weekDays());
+  const weekDays = createMemo(() => {
+    const gridProps = access(props);
+    const formatter = new DateFormatter(state.locale(), {
+      weekday: gridProps.weekdayStyle ?? "narrow",
+      timeZone: state.timeZone,
+    });
+    const weekStart = startOfWeek(today(state.timeZone), state.locale(), state.firstDayOfWeek());
+
+    return Array.from({ length: 7 }, (_, index) =>
+      formatter.format(weekStart.add({ days: index }).toDate(state.timeZone)),
+    );
+  });
 
   // Handle keyboard navigation
+  const isRTL = (): boolean => {
+    const element = ref?.();
+    const scopedDirection = element?.closest("[dir]")?.getAttribute("dir");
+    const documentDirection = typeof document !== "undefined" ? document.dir : "";
+    return (scopedDirection ?? documentDirection) === "rtl";
+  };
+
   const handleKeyDown = (e: KeyboardEvent) => {
     if (state.isDisabled()) return;
 
     switch (e.key) {
-      case 'ArrowLeft':
+      case "ArrowLeft":
         e.preventDefault();
-        state.focusPreviousDay();
+        e.stopPropagation();
+        if (isRTL()) {
+          state.focusNextDay();
+        } else {
+          state.focusPreviousDay();
+        }
         break;
-      case 'ArrowRight':
+      case "ArrowRight":
         e.preventDefault();
-        state.focusNextDay();
+        e.stopPropagation();
+        if (isRTL()) {
+          state.focusPreviousDay();
+        } else {
+          state.focusNextDay();
+        }
         break;
-      case 'ArrowUp':
+      case "ArrowUp":
         e.preventDefault();
+        e.stopPropagation();
         state.focusPreviousWeek();
         break;
-      case 'ArrowDown':
+      case "ArrowDown":
         e.preventDefault();
+        e.stopPropagation();
         state.focusNextWeek();
         break;
-      case 'PageUp':
+      case "PageUp":
         e.preventDefault();
+        e.stopPropagation();
         if (e.shiftKey) {
           state.focusPreviousSection(); // Previous year
         } else {
-          state.focusPreviousPage(); // Previous month
+          state.setFocusedDate(state.focusedDate().subtract({ months: 1 }));
         }
         break;
-      case 'PageDown':
+      case "PageDown":
         e.preventDefault();
+        e.stopPropagation();
         if (e.shiftKey) {
           state.focusNextSection(); // Next year
         } else {
-          state.focusNextPage(); // Next month
+          state.setFocusedDate(state.focusedDate().add({ months: 1 }));
         }
         break;
-      case 'Home':
+      case "Home":
         e.preventDefault();
+        e.stopPropagation();
         state.focusPageStart();
         break;
-      case 'End':
+      case "End":
         e.preventDefault();
+        e.stopPropagation();
         state.focusPageEnd();
         break;
-      case 'Enter':
-      case ' ':
+      case "Enter":
+      case " ":
         e.preventDefault();
         state.selectFocusedDate();
         break;
+      case "Escape":
+        if (
+          "anchorDate" in state &&
+          typeof state.anchorDate === "function" &&
+          state.anchorDate() &&
+          "setAnchorDate" in state &&
+          typeof state.setAnchorDate === "function"
+        ) {
+          e.preventDefault();
+          e.stopPropagation();
+          state.setAnchorDate(null);
+          if ("setDragging" in state && typeof state.setDragging === "function") {
+            state.setDragging(false);
+          }
+        }
+        break;
     }
   };
 
-  // Register keyboard listener
-  onMount(() => {
-    const element = ref?.();
-    if (element) {
-      element.addEventListener('keydown', handleKeyDown);
-      onCleanup(() => {
-        element.removeEventListener('keydown', handleKeyDown);
-      });
-    }
-  });
-
   // Grid props
   const gridProps = createMemo(() => ({
-    role: 'grid',
-    'aria-readonly': state.isReadOnly() || undefined,
-    'aria-disabled': state.isDisabled() || undefined,
+    role: "grid",
+    "aria-readonly": state.isReadOnly() || undefined,
+    "aria-disabled": state.isDisabled() || undefined,
     tabIndex: state.isFocused() ? 0 : -1,
     onFocus: () => state.setFocused(true),
     onBlur: () => state.setFocused(false),
     onKeyDown: handleKeyDown,
   }));
 
-  // Header props
-  const headerProps = createMemo(() => ({
-    role: 'row',
-  }));
+  // Header props are intentionally empty. Consumers render this on <thead>,
+  // which already has correct table semantics.
+  const headerProps = createMemo(() => ({}));
 
   return {
     get gridProps() {

package/src/calendar/createRangeCalendar.ts

@@ -5,15 +5,17 @@
  * Based on @react-aria/calendar useRangeCalendar
  */
 
-import { createMemo } from 'solid-js';
-import { createId } from '../ssr';
-import { access, type MaybeAccessor } from '../utils/reactivity';
-import { mergeProps } from '../utils/mergeProps';
-import type { RangeCalendarState } from '@proyecto-viviana/solid-stately';
-
-// ============================================
-// TYPES
-// ============================================
+import { createMemo } from "solid-js";
+import { createId } from "../ssr";
+import { access, type MaybeAccessor } from "../utils/reactivity";
+import { mergeProps } from "../utils/mergeProps";
+import type { RangeCalendarState } from "@proyecto-viviana/solid-stately";
+import {
+  formatSelectedDateDescription,
+  formatVisibleRangeDescription,
+  getCalendarHookData,
+  setCalendarHookData,
+} from "./utils";
 
 export interface AriaRangeCalendarProps {
   /** An ID for the calendar. */
@@ -23,11 +25,19 @@ export interface AriaRangeCalendarProps {
   /** Whether the calendar is read-only. */
   isReadOnly?: boolean;
   /** An accessible label for the calendar. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** The ID of an element that labels the calendar. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
   /** The ID of an element that describes the calendar. */
-  'aria-describedby'?: string;
+  "aria-describedby"?: string;
+  /** The ID of an element that provides additional details about the calendar. */
+  "aria-details"?: string;
+  /** Whether the current selection is invalid. */
+  isInvalid?: boolean;
+  /** Error message rendered for invalid selections. */
+  errorMessage?: string;
+  /** ID of the rendered error message element. */
+  errorMessageId?: string;
 }
 
 export interface RangeCalendarAria {
@@ -39,35 +49,55 @@ export interface RangeCalendarAria {
   nextButtonProps: Record<string, unknown>;
   /** Props for the title/heading element. */
   titleProps: Record<string, unknown>;
+  /** Props for the error message element, if any. */
+  errorMessageProps: Record<string, unknown>;
   /** An accessible label for the title. */
   title: string;
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides the behavior and accessibility implementation for a range calendar component.
  */
 export function createRangeCalendar<T extends RangeCalendarState>(
   props: MaybeAccessor<AriaRangeCalendarProps>,
-  state: T
+  state: T,
 ): RangeCalendarAria {
   const getProps = () => access(props);
   const id = createId(getProps().id);
   const titleId = createId();
+  const errorMessageId = createId(getProps().errorMessageId);
 
   // Title (e.g., "December 2024")
   const title = createMemo(() => state.title());
+  const visibleRangeDescription = createMemo(() => {
+    const range = state.visibleRange();
+    return formatVisibleRangeDescription(range.start, range.end, state.timeZone, state.locale());
+  });
+  const calendarLabel = createMemo(() => {
+    const p = getProps();
+    return [p["aria-label"], visibleRangeDescription()].filter(Boolean).join(", ");
+  });
+  const selectedDateDescription = createMemo(() => formatSelectedDateDescription(state));
+
+  const initialProps = getProps();
+  const existingHookData = getCalendarHookData(state);
+  setCalendarHookData(state, {
+    errorMessageId:
+      initialProps.errorMessage || initialProps.errorMessageId
+        ? errorMessageId
+        : existingHookData?.errorMessageId,
+    get selectedDateDescription() {
+      return selectedDateDescription();
+    },
+  });
 
   // Previous button props
   const prevButtonProps = createMemo(() => {
     const p = getProps();
-    const isDisabled = p.isDisabled || state.isDisabled();
+    const isDisabled = p.isDisabled || state.isDisabled() || state.isPreviousVisibleRangeInvalid();
 
     return {
-      'aria-label': 'Previous month',
+      "aria-label": "Previous month",
       onClick: () => {
         if (!isDisabled) {
           state.focusPreviousPage();
@@ -81,10 +111,10 @@ export function createRangeCalendar<T extends RangeCalendarState>(
   // Next button props
   const nextButtonProps = createMemo(() => {
     const p = getProps();
-    const isDisabled = p.isDisabled || state.isDisabled();
+    const isDisabled = p.isDisabled || state.isDisabled() || state.isNextVisibleRangeInvalid();
 
     return {
-      'aria-label': 'Next month',
+      "aria-label": "Next month",
       onClick: () => {
         if (!isDisabled) {
           state.focusNextPage();
@@ -98,22 +128,24 @@ export function createRangeCalendar<T extends RangeCalendarState>(
   // Title props
   const titleProps = createMemo(() => ({
     id: titleId,
-    'aria-live': 'polite' as const,
+    "aria-live": "polite" as const,
+  }));
+  const errorMessageProps = createMemo(() => ({
+    id: errorMessageId,
   }));
 
   // Calendar container props
   const calendarProps = createMemo(() => {
     const p = getProps();
 
-    return mergeProps(
-      {
-        id,
-        role: 'group',
-        'aria-labelledby': p['aria-labelledby'] ?? titleId,
-        'aria-label': p['aria-label'],
-        'aria-describedby': p['aria-describedby'],
-      }
-    );
+    return mergeProps({
+      id,
+      role: "application",
+      "aria-labelledby": p["aria-labelledby"],
+      "aria-label": calendarLabel(),
+      "aria-describedby": p["aria-describedby"],
+      "aria-details": p["aria-details"],
+    });
   });
 
   return {
@@ -129,6 +161,9 @@ export function createRangeCalendar<T extends RangeCalendarState>(
     get titleProps() {
       return titleProps();
     },
+    get errorMessageProps() {
+      return errorMessageProps();
+    },
     get title() {
       return title();
     },