@proyecto-viviana/solidaria 0.3.0 → 0.4.1

package/src/calendar/createCalendarMonthPicker.ts

@@ -0,0 +1,105 @@
+/**
+ * createCalendarMonthPicker hook for Solidaria
+ *
+ * Provides the behavior and accessibility implementation for a month picker
+ * within a calendar — a listbox/select that jumps the focused date to a chosen
+ * month of the focused year.
+ * Based on @react-aria/calendar useCalendarMonthPicker.
+ */
+
+import { createMemo } from "solid-js";
+import { DateFormatter, type CalendarDate } from "@internationalized/date";
+import type { CalendarState, RangeCalendarState } from "@proyecto-viviana/solid-stately";
+import { access, type MaybeAccessor } from "../utils/reactivity";
+import { useLocale } from "../i18n";
+
+type Key = string | number;
+
+export interface CalendarMonthPickerProps {
+  /** The format of the month to display in the picker. @default 'short' */
+  format?: "numeric" | "2-digit" | "long" | "short" | "narrow";
+}
+
+export interface CalendarMonthPickerItem {
+  /** The 1-based month number, used as the item's key. */
+  id: number;
+  /** The first day of the month. */
+  date: CalendarDate;
+  /** The localized month name. */
+  formatted: string;
+}
+
+export interface CalendarMonthPickerAria {
+  /** An accessible label for the month picker. */
+  "aria-label": string;
+  /** The key of the currently focused month (its 1-based number). */
+  value: Key;
+  /** Handler that moves focus to the selected month. */
+  onChange: (key: Key | null) => void;
+  /** The list of selectable months in the focused year. */
+  items: CalendarMonthPickerItem[];
+}
+
+/**
+ * Provides the behavior and accessibility implementation for a month picker
+ * within a calendar.
+ */
+export function createCalendarMonthPicker(
+  props: MaybeAccessor<CalendarMonthPickerProps>,
+  state: CalendarState | RangeCalendarState,
+): CalendarMonthPickerAria {
+  const getProps = () => access(props);
+  const locale = useLocale();
+
+  const formatter = createMemo(
+    () =>
+      new DateFormatter(locale().locale, {
+        month: getProps().format ?? "short",
+        calendar: state.focusedDate().calendar.identifier,
+        timeZone: state.timeZone,
+      }),
+  );
+
+  // Build the list of months in the focused year. The number of months can vary
+  // by year in some calendar systems (e.g. the Hebrew leap year), so derive it
+  // from the focused date rather than assuming twelve.
+  const items = createMemo<CalendarMonthPickerItem[]>(() => {
+    const focused = state.focusedDate();
+    const fmt = formatter();
+    const numMonths = focused.calendar.getMonthsInYear(focused);
+    const months: CalendarMonthPickerItem[] = [];
+    for (let i = 1; i <= numMonths; i++) {
+      const date = focused.set({ month: i });
+      // Calendars that offset their month numbering (e.g. fiscal calendars)
+      // expose getFormattableMonth to map back to the displayable month.
+      const displayDate = date.calendar.getFormattableMonth?.(date) ?? date;
+      months.push({
+        id: i,
+        date,
+        formatted: fmt.format(displayDate.toDate(state.timeZone)),
+      });
+    }
+    return months;
+  });
+
+  const ariaLabel = createMemo(
+    () => new Intl.DisplayNames(locale().locale, { type: "dateTimeField" }).of("month") ?? "month",
+  );
+
+  return {
+    get "aria-label"() {
+      return ariaLabel();
+    },
+    get value() {
+      return state.focusedDate().month;
+    },
+    onChange: (key) => {
+      if (key != null) {
+        state.setFocusedDate(items()[Number(key) - 1].date);
+      }
+    },
+    get items() {
+      return items();
+    },
+  };
+}

package/src/calendar/createCalendarYearPicker.ts

@@ -0,0 +1,144 @@
+/**
+ * createCalendarYearPicker hook for Solidaria
+ *
+ * Provides the behavior and accessibility implementation for a year picker
+ * within a calendar — a listbox/select that jumps the focused date to a chosen
+ * year within a sliding window centered on the focused year.
+ * Based on @react-aria/calendar useCalendarYearPicker.
+ */
+
+import { createMemo } from "solid-js";
+import {
+  DateFormatter,
+  isSameYear,
+  toCalendarDate,
+  type CalendarDate,
+} from "@internationalized/date";
+import type { CalendarState, RangeCalendarState } from "@proyecto-viviana/solid-stately";
+import { access, type MaybeAccessor } from "../utils/reactivity";
+import { useLocale } from "../i18n";
+
+type Key = string | number;
+
+export interface CalendarYearPickerFormatOptions {
+  /** The format of the year. @default 'numeric' */
+  year?: "numeric" | "2-digit";
+  /** The format of the era. */
+  era?: "long" | "short" | "narrow";
+}
+
+export interface CalendarYearPickerProps {
+  /** The number of years to display in the picker. @default 20 */
+  visibleYears?: number;
+  /** The format of the year/era to display. */
+  format?: CalendarYearPickerFormatOptions;
+}
+
+export interface CalendarYearPickerItem {
+  /** The index of the year within the visible window, used as the item's key. */
+  id: number;
+  /** The first day of the year. */
+  date: CalendarDate;
+  /** The localized year name. */
+  formatted: string;
+}
+
+export interface CalendarYearPickerAria {
+  /** An accessible label for the year picker. */
+  "aria-label": string;
+  /** The key of the currently focused year (its index in the visible window). */
+  value: Key;
+  /** Handler that moves focus to the selected year. */
+  onChange: (key: Key | null) => void;
+  /** The list of selectable years in the visible window. */
+  items: CalendarYearPickerItem[];
+}
+
+/**
+ * Provides the behavior and accessibility implementation for a year picker
+ * within a calendar.
+ */
+export function createCalendarYearPicker(
+  props: MaybeAccessor<CalendarYearPickerProps>,
+  state: CalendarState | RangeCalendarState,
+): CalendarYearPickerAria {
+  const getProps = () => access(props);
+  const locale = useLocale();
+
+  const formatter = createMemo(() => {
+    const focused = state.focusedDate();
+    const format = getProps().format;
+    return new DateFormatter(locale().locale, {
+      year: format?.year ?? "numeric",
+      era:
+        format?.era ??
+        (focused.calendar.identifier === "gregory" && focused.era === "BC" ? "short" : undefined),
+      calendar: focused.calendar.identifier,
+      timeZone: state.timeZone,
+    });
+  });
+
+  // Compute a window of years centered on the focused year, then clamp it to the
+  // calendar's min/max so the picker never offers an out-of-range year.
+  const data = createMemo(() => {
+    const focused = state.focusedDate();
+    const fmt = formatter();
+    // Falsy coercion (not `??`) mirrors upstream `props.visibleYears || 20`, so a
+    // `0`/`NaN` visibleYears falls back to the default 20 rather than producing an
+    // empty window.
+    const visibleYears = getProps().visibleYears || 20;
+    let minDate = focused.subtract({ years: Math.floor(visibleYears / 2) });
+    let maxDate = focused.add({ years: Math.ceil(visibleYears / 2) - 1 });
+
+    const stateMax = state.maxValue();
+    const stateMin = state.minValue();
+    if (stateMax && maxDate.compare(stateMax) > 0) {
+      maxDate = toCalendarDate(stateMax);
+      minDate = maxDate.subtract({ years: visibleYears - 1 });
+    }
+    if (stateMin && minDate.compare(stateMin) < 0) {
+      minDate = toCalendarDate(stateMin);
+      maxDate = minDate.add({ years: visibleYears - 1 });
+      if (stateMax && maxDate.compare(stateMax) > 0) {
+        maxDate = toCalendarDate(stateMax);
+      }
+    }
+
+    const years: CalendarYearPickerItem[] = [];
+    let value: number = 0;
+    let date = minDate;
+    while (date.compare(maxDate) <= 0) {
+      if (isSameYear(date, focused)) {
+        value = years.length;
+      }
+      years.push({
+        id: years.length,
+        date,
+        formatted: fmt.format(date.toDate(state.timeZone)),
+      });
+      date = date.add({ years: 1 });
+    }
+    return { items: years, value };
+  });
+
+  const ariaLabel = createMemo(
+    () => new Intl.DisplayNames(locale().locale, { type: "dateTimeField" }).of("year") ?? "year",
+  );
+
+  return {
+    get "aria-label"() {
+      return ariaLabel();
+    },
+    get value() {
+      return data().value;
+    },
+    onChange: (key) => {
+      if (key != null) {
+        state.setFocusedDate(data().items[Number(key)].date);
+      }
+    },
+    get items() {
+      return data().items;
+    },
+  };
+}

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,16 +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,
-    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(() => {
@@ -97,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,
     };
   });
 
@@ -114,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/index.ts

@@ -1,6 +1,23 @@
 // Calendar
 export { createCalendar, type AriaCalendarProps, type CalendarAria } from "./createCalendar";
 
+// Calendar Month Picker
+export {
+  createCalendarMonthPicker,
+  type CalendarMonthPickerProps,
+  type CalendarMonthPickerItem,
+  type CalendarMonthPickerAria,
+} from "./createCalendarMonthPicker";
+
+// Calendar Year Picker
+export {
+  createCalendarYearPicker,
+  type CalendarYearPickerProps,
+  type CalendarYearPickerFormatOptions,
+  type CalendarYearPickerItem,
+  type CalendarYearPickerAria,
+} from "./createCalendarYearPicker";
+
 // Calendar Grid
 export {
   createCalendarGrid,

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}`,

package/src/calendar/utils.ts

@@ -11,6 +11,10 @@ import { formatCalendarLabel } from "./intl";
 export interface CalendarHookData {
   errorMessageId?: string;
   selectedDateDescription?: string;
+  /** The calendar's accessible label, shared with each grid (mirrors @react-aria/calendar hookData.ariaLabel). */
+  ariaLabel?: string;
+  /** The id of an element labelling the calendar, shared with each grid (mirrors hookData.ariaLabelledBy). */
+  ariaLabelledBy?: string;
 }
 
 const hookData = new WeakMap<CalendarState | RangeCalendarState, CalendarHookData>();

package/src/checkbox/createCheckbox.ts

@@ -37,6 +37,10 @@ export interface CheckboxAria {
   labelProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
   /** Props for the input element. */
   inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
+  /** Props for the checkbox description element, if any. */
+  descriptionProps: JSX.HTMLAttributes<HTMLElement>;
+  /** Props for the checkbox error message element, if any. */
+  errorMessageProps: JSX.HTMLAttributes<HTMLElement>;
   /** Whether the checkbox is selected. */
   isSelected: Accessor<boolean>;
   /** Whether the checkbox is in a pressed state. */
@@ -118,6 +122,12 @@ export function createCheckbox(
         required: isRequired && validationBehavior === "native",
       }) as JSX.InputHTMLAttributes<HTMLInputElement>;
     },
+    get descriptionProps() {
+      return toggleResult.descriptionProps;
+    },
+    get errorMessageProps() {
+      return toggleResult.errorMessageProps;
+    },
     isSelected,
     isPressed,
     isDisabled,

package/src/checkbox/createCheckboxGroupItem.ts

@@ -80,22 +80,18 @@ export function createCheckboxGroupItem(
       const baseInputProps = result.inputProps;
       const groupData = getGroupData();
 
-      const describedByIds: string[] = [];
-
-      const propsDescribedBy = getProps()["aria-describedby"];
-      if (propsDescribedBy) {
-        describedByIds.push(propsDescribedBy);
-      }
-
-      if (state.isInvalid && groupData?.errorMessageId) {
-        describedByIds.push(groupData.errorMessageId);
-      }
-
-      if (groupData?.descriptionId) {
-        describedByIds.push(groupData.descriptionId);
-      }
-
-      const ariaDescribedBy = describedByIds.length > 0 ? describedByIds.join(" ") : undefined;
+      // Mirror upstream useCheckboxGroupItem: keep the checkbox's own
+      // aria-describedby (its description/error slot ids from createCheckbox/
+      // createToggle, which already fold in the user's aria-describedby) and append
+      // the group's shared description/error ids.
+      const ariaDescribedBy =
+        [
+          baseInputProps["aria-describedby"],
+          state.isInvalid && groupData?.errorMessageId ? groupData.errorMessageId : null,
+          groupData?.descriptionId,
+        ]
+          .filter(Boolean)
+          .join(" ") || undefined;
 
       return {
         ...baseInputProps,

package/src/color/createColorArea.ts

@@ -9,6 +9,7 @@ import type { Color, ColorAreaState, ColorChannel } from "@proyecto-viviana/soli
 import { parseColor } from "@proyecto-viviana/solid-stately";
 import { useLocale } from "../i18n";
 import { createId } from "../ssr";
+import { createColorStringFormatter } from "./intl";
 import type { AriaColorAreaOptions, ColorAreaAria } from "./types";
 
 /**
@@ -22,6 +23,7 @@ export function createColorArea(
   const getProps = () => props();
   const getState = () => state();
   const locale = useLocale();
+  const stringFormatter = createColorStringFormatter();
   const isRTL = () => locale().direction === "rtl";
   const [focusedInput, setFocusedInput] = createSignal<"x" | "y" | null>(null);
   const [valueChangedViaKeyboard, setValueChangedViaKeyboard] = createSignal(false);
@@ -32,11 +34,18 @@ export function createColorArea(
   const xInputId = createId();
   const yInputId = createId();
 
-  const colorPickerLabel = () => "Color picker";
+  const colorPickerLabel = () => stringFormatter().format("colorPicker");
   const colorInputLabel = () => {
     const ariaLabel = getProps()["aria-label"];
-    return ariaLabel ? `${ariaLabel}, ${colorPickerLabel()}` : colorPickerLabel();
+    return ariaLabel
+      ? stringFormatter().format("colorInputLabel", {
+          label: ariaLabel,
+          channelLabel: colorPickerLabel(),
+        })
+      : colorPickerLabel();
   };
+  // Upstream joins the group label with a literal ", " (useColorArea.ts:488),
+  // NOT the colorInputLabel message.
   const colorAreaLabel = () => {
     const ariaLabel = getProps()["aria-label"];
     return ariaLabel ? `${ariaLabel}, ${colorPickerLabel()}` : undefined;
@@ -44,7 +53,10 @@ export function createColorArea(
   const formatChannelValueText = (channel: ColorChannel) => {
     const value = getState().getDisplayColor();
     const loc = locale().locale;
-    return `${value.getChannelName(channel, loc)}: ${value.formatChannelValue(channel, loc)}`;
+    return stringFormatter().format("colorNameAndValue", {
+      name: value.getChannelName(channel, loc),
+      value: value.formatChannelValue(channel, loc),
+    });
   };
   const getAriaValueTextForChannel = (channel: ColorChannel) => {
     const s = getState();
@@ -355,7 +367,7 @@ export function createColorArea(
       type: "range",
       id: p.id ?? xInputId,
       "aria-label": colorInputLabel(),
-      "aria-roledescription": "2D slider",
+      "aria-roledescription": stringFormatter().format("twoDimensionalSlider"),
       "aria-valuetext": getAriaValueTextForChannel(s.xChannel),
       "aria-orientation": "horizontal" as const,
       "aria-describedby": p["aria-describedby"],
@@ -375,11 +387,6 @@ export function createColorArea(
       onKeyDown,
       onInput: (e: Event) => updateFromInput(e, "x"),
       onChange: (e: Event) => updateFromInput(e, "x"),
-      onBlur: () => {
-        if (s.isDragging) {
-          s.setDragging(false);
-        }
-      },
       tabIndex: !focusedInput() || focusedInput() === "x" ? undefined : -1,
       style: {
         position: "absolute" as const,
@@ -405,7 +412,7 @@ export function createColorArea(
       type: "range",
       id: p.id ?? yInputId,
       "aria-label": colorInputLabel(),
-      "aria-roledescription": "2D slider",
+      "aria-roledescription": stringFormatter().format("twoDimensionalSlider"),
       "aria-valuetext": getAriaValueTextForChannel(s.yChannel),
       "aria-orientation": "vertical" as const,
       "aria-describedby": p["aria-describedby"],

package/src/color/createColorField.ts

@@ -134,7 +134,14 @@ export function createColorField(
       disabled: isDisabled(),
       readOnly: isReadOnly(),
       required: validationBehavior() === "native" ? required || undefined : undefined,
-      tabIndex: p.excludeFromTabOrder ? -1 : undefined,
+      // Upstream routes the input through useFormattedTextField → useTextField →
+      // useFocusable, which ALWAYS sets a tabIndex ("so that Safari allows focusing
+      // native buttons and inputs"): `excludeFromTabOrder ? -1 : 0`, then `undefined`
+      // when disabled (useFocusable.mjs:65-66). We hand-roll inputProps, so replay that
+      // one focusable prop here — the port previously dropped the default `0`, so the
+      // rendered input carried no `tabindex` while React's carries `tabindex="0"` (a D5
+      // focus-trail divergence), exactly as createNumberField already replays it.
+      tabIndex: isDisabled() ? undefined : p.excludeFromTabOrder ? -1 : 0,
       autoComplete: "off",
       autoCorrect: "off",
       spellCheck: "false",

package/src/color/createColorSlider.ts

@@ -44,7 +44,7 @@ export function createColorSlider(
     const p = getProps();
     if (p.channelName) return p.channelName;
     const s = getState();
-    return s.value.getChannelName(s.channel, "en-US");
+    return s.value.getChannelName(s.channel, locale().locale);
   });
 
   const orientation = () => getProps().orientation ?? "horizontal";
@@ -325,7 +325,6 @@ export function createColorSlider(
     const y = orientation() === "horizontal" ? 0.5 : 1 - percent;
 
     return {
-      role: "presentation" as const,
       onKeyDown,
       style: {
         position: "absolute" as const,

package/src/color/createColorSwatch.ts

@@ -9,6 +9,7 @@ import { normalizeColor } from "@proyecto-viviana/solid-stately";
 import { useLocale } from "../i18n";
 import { createId } from "../ssr";
 import { filterDOMProps } from "../utils/filterDOMProps";
+import { createColorStringFormatter } from "./intl";
 import type { AriaColorSwatchOptions, ColorSwatchAria } from "./types";
 
 /**
@@ -17,6 +18,7 @@ import type { AriaColorSwatchOptions, ColorSwatchAria } from "./types";
 export function createColorSwatch(props: Accessor<AriaColorSwatchOptions>): ColorSwatchAria {
   const getProps = () => props();
   const locale = useLocale();
+  const stringFormatter = createColorStringFormatter();
   const generatedId = createId();
   const id = () => getProps().id ?? generatedId;
 
@@ -28,7 +30,7 @@ export function createColorSwatch(props: Accessor<AriaColorSwatchOptions>): Colo
 
     const resolvedColor = color();
     if (resolvedColor.getChannelValue("alpha") === 0) {
-      return "transparent";
+      return stringFormatter().format("transparent");
     }
 
     return resolvedColor.getColorName(locale().locale);
@@ -44,7 +46,7 @@ export function createColorSwatch(props: Accessor<AriaColorSwatchOptions>): Colo
       id: id(),
       slot: p.slot,
       role: "img" as const,
-      "aria-roledescription": "color swatch",
+      "aria-roledescription": stringFormatter().format("colorSwatch"),
       "aria-label": ariaLabel,
       "aria-labelledby": p["aria-labelledby"] ? `${id()} ${p["aria-labelledby"]}` : undefined,
       style: {