@multiplatform.one/forms 8.2.2 → 8.4.0

package/src/fields/DatePicker/dateFieldMarks.spec.tsx

@@ -0,0 +1,154 @@
+import { CalendarBlankIcon, ClockIcon } from "@phosphor-icons/react";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import {
+  createThemesBuilder,
+  defaultAccentTheme,
+  defaultBaseTheme,
+  defaultBuilderOptions,
+} from "@multiplatform.one/theme";
+import { configWithoutAnimations } from "@tamagui/config";
+import { animationsCSS } from "@tamagui/config/v5-css";
+import { render } from "@testing-library/react";
+import type { ReactElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { TamaguiProvider, createTamagui } from "tamagui";
+import { describe, expect, it, vi } from "vitest";
+import { Input } from "../Input";
+import { TimePicker } from "../TimePicker";
+import { DatePicker, DatetimePicker } from "./index";
+import { CalendarDays, MonthGrid, YearGrid, isSameDay, useCalendarData } from "./parts";
+
+vi.mock("@multiplatform.one/storybook", () => ({ action: () => () => {} }));
+vi.mock("@multiplatform.one/table", () => ({ DataTable: () => null }));
+
+const houseThemes = createThemesBuilder(
+  defaultBaseTheme,
+  defaultAccentTheme,
+  defaultBuilderOptions,
+).themes() as Record<string, Record<string, string>>;
+
+const houseConfig = createTamagui({
+  ...configWithoutAnimations,
+  animations: animationsCSS,
+  themes: houseThemes as never,
+});
+
+function placeholderInk(node: ReactElement) {
+  const { container, unmount } = renderWithProviders(node);
+  const input = container.querySelector("input");
+  expect(input).toBeTruthy();
+  const ink = input!.style.getPropertyValue("--t_placeholderColor");
+  unmount();
+  return ink;
+}
+
+function pathOf(icon: ReactElement) {
+  return renderToStaticMarkup(icon).match(/ d="([^"]+)"/)![1];
+}
+
+function June() {
+  const calendarData = useCalendarData(new Date(2024, 5, 15));
+  return (
+    <CalendarDays
+      calendarData={calendarData}
+      isSelected={(day) => isSameDay(day, new Date(2024, 5, 15))}
+      onSelect={() => {}}
+    />
+  );
+}
+
+function selectedCell(node: ReactElement, scheme: "light" | "dark") {
+  const { container } = render(
+    <TamaguiProvider config={houseConfig} defaultTheme={scheme} disableInjectCSS>
+      {node}
+    </TamaguiProvider>,
+  );
+  const cell = container.querySelector<HTMLElement>("[aria-pressed='true']");
+  expect(cell).toBeTruthy();
+  return cell!;
+}
+
+describe("date and time fields read empty, name their kind and mark the pick (FZ-8433)", () => {
+  const stock = placeholderInk(<Input label="Name" placeholder="Your name" />);
+
+  it.each([
+    ["DatePicker", <DatePicker key="d" label="Date" placeholder="Pick a date" />],
+    ["DatetimePicker", <DatetimePicker key="dt" label="When" placeholder="Pick a time" />],
+    ["TimePicker", <TimePicker key="t" label="Time" placeholder="Select time" />],
+  ])("an empty %s draws its placeholder in the theme's placeholder ink", (_name, node) => {
+    const ink = placeholderInk(node);
+    expect(stock).not.toBe("");
+    expect(ink).toBe(stock);
+    expect(ink).not.toBe("var(--color11)");
+  });
+
+  it.each([
+    [
+      "DatetimePicker",
+      <DatetimePicker key="dt" label="When" />,
+      "date-picker-glyph",
+      CalendarBlankIcon,
+    ],
+    ["DatePicker", <DatePicker key="d" label="Date" />, "date-picker-glyph", CalendarBlankIcon],
+    ["TimePicker", <TimePicker key="t" label="Time" />, "time-picker-glyph", ClockIcon],
+    [
+      "a read-only DatetimePicker",
+      <DatetimePicker key="ro" label="When" value={new Date(2026, 9, 31, 9, 30)} readOnly />,
+      "date-picker-glyph",
+      CalendarBlankIcon,
+    ],
+  ] as const)("%s draws one glyph, on the input's right", (_name, node, testId, Icon) => {
+    const { container, unmount } = renderWithProviders(node);
+    const glyphs = container.querySelectorAll(`[data-testid='${testId}']`);
+    expect(glyphs).toHaveLength(1);
+    const paths = Array.from(glyphs[0]!.querySelectorAll("svg path")).map((p) =>
+      p.getAttribute("d"),
+    );
+    expect(paths).toEqual([pathOf(<Icon />)]);
+    const input = container.querySelector("input")!;
+    expect(
+      input.compareDocumentPosition(glyphs[0]!) & Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+    unmount();
+  });
+
+  it("a filled web field swaps its glyph for the clear action, so the right holds one icon", () => {
+    const { container } = renderWithProviders(
+      <DatetimePicker label="When" value={new Date(2026, 9, 31, 9, 30)} />,
+    );
+    expect(container.querySelector("[data-testid='date-picker-glyph']")).toBeNull();
+    expect(container.querySelector("[data-testid='date-picker-clear']")).toBeTruthy();
+  });
+
+  it.each(
+    (["light", "dark"] as const).flatMap((scheme) => [
+      ["day", scheme, <June key="d" />],
+      [
+        "month",
+        scheme,
+        <MonthGrid key="m" currentYear={2024} selectedMonth={5} onSelectMonth={() => {}} />,
+      ],
+      [
+        "year",
+        scheme,
+        <YearGrid
+          key="y"
+          yearPageStart={2020}
+          selectedYear={2024}
+          onSelectYear={() => {}}
+          onPrevPage={() => {}}
+          onNextPage={() => {}}
+        />,
+      ],
+    ]) as [string, "light" | "dark", ReactElement][],
+  )(
+    "the picked %s fills with the accent mark in %s, inked for that fill",
+    (_name, scheme, node) => {
+      const cell = selectedCell(node, scheme);
+      expect(cell.className).toMatch(/(?:^|\s)_bg-accentBackg/);
+      expect(cell.className).not.toMatch(/t_accent/);
+      const ink = cell.querySelector<HTMLElement>("span")!.className;
+      expect(ink).toMatch(/(?:^|\s)_col-(?:hsla?|rgba?)/);
+    },
+  );
+});

package/src/fields/DatePicker/parts.tsx

@@ -12,6 +12,7 @@ import {
   getMonthNames,
   useAccentOnSurface,
   useGlyphColor,
+  useReadableTextOn,
   useResolvedKnobs,
 } from "@multiplatform.one/theme";
 import {
@@ -29,7 +30,7 @@ import { FloatingPanel, floatingPanelActionProps, isNestedPanelAction } from "..
 import type { PanelActionEvent } from "../../FloatingPanel/nestedAction";
 import type { PanelWidth } from "../../FloatingPanel/panelWidth";
 import { Input as InputParts } from "../../InputParts";
-import { formCommonColors } from "../../shared/colorRamps";
+import { formCommonColors, formSelectedColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
 
 // ---------------------------------------------------------------------------
@@ -341,6 +342,7 @@ export function CalendarDayCell({
 }) {
   const { knobProps } = useCalendarKnobs();
   const accentText = useAccentOnSurface();
+  const onMark = useReadableTextOn(formSelectedColors.mark);
   const { px, hitSlop, box } = splitNestedControl(knobProps.nestedControl);
 
   if (!visible) {
@@ -373,8 +375,7 @@ export function CalendarDayCell({
       // identical to a choosable cell; we do not adopt that.
       opacity={disabled ? 0.5 : dimmed ? 0.45 : 1}
       pointerEvents={disabled ? "none" : "auto"}
-      backgroundColor={selected ? (selectedBackground ?? "$background") : "transparent"}
-      theme={selected ? ("accent" as any) : undefined}
+      backgroundColor={selected ? (selectedBackground ?? formSelectedColors.mark) : "transparent"}
       borderWidth={showTodayMark ? 2 : 0}
       borderColor={showTodayMark ? accentText : "transparent"}
       zIndex={1}
@@ -398,7 +399,7 @@ export function CalendarDayCell({
         {...knobProps.label}
         {...knobProps.textWeight}
         fontWeight={selected ? "bold" : knobProps.textWeight.fontWeight}
-        color={selected ? undefined : today ? accentText : formCommonColors.text}
+        color={selected ? onMark : today ? accentText : formCommonColors.text}
       >
         {day.getDate()}
       </Text>
@@ -675,6 +676,7 @@ interface MonthGridProps {
 
 export function MonthGrid({ currentYear, selectedMonth, onSelectMonth }: MonthGridProps) {
   const { knobProps } = useCalendarKnobs();
+  const onMark = useReadableTextOn(formSelectedColors.mark);
   const { animation, animationKey } = useDateAnimation(currentYear);
   const { px, hitSlop, box } = splitNestedControl(knobProps.nestedControl);
   const cellW = (px * 7) / 3;
@@ -706,8 +708,7 @@ export function MonthGrid({ currentYear, selectedMonth, onSelectMonth }: MonthGr
               cursor="pointer"
               alignItems="center"
               justifyContent="center"
-              theme={isSelected ? ("accent" as any) : undefined}
-              backgroundColor={isSelected ? "$background" : "transparent"}
+              backgroundColor={isSelected ? formSelectedColors.mark : "transparent"}
               onPress={() => onSelectMonth(index)}
               outlineWidth={0}
               focusStyle={{ outlineWidth: 0 }}
@@ -725,7 +726,7 @@ export function MonthGrid({ currentYear, selectedMonth, onSelectMonth }: MonthGr
             >
               <Text
                 {...knobProps.label}
-                color={isSelected ? "$color" : formCommonColors.text}
+                color={isSelected ? onMark : formCommonColors.text}
                 fontWeight={isSelected ? "bold" : "400"}
               >
                 {t(name.slice(0, 3))}
@@ -758,6 +759,7 @@ export function YearGrid({
   onNextPage,
 }: YearGridProps) {
   const { knobProps } = useCalendarKnobs();
+  const onMark = useReadableTextOn(formSelectedColors.mark);
   const glyphColor = useGlyphColor();
   const { px, hitSlop, box } = splitNestedControl(knobProps.nestedControl);
   const cellW = (px * 7) / 3;
@@ -810,8 +812,7 @@ export function YearGrid({
                 cursor="pointer"
                 alignItems="center"
                 justifyContent="center"
-                theme={isSelected ? ("accent" as any) : undefined}
-                backgroundColor={isSelected ? "$background" : "transparent"}
+                backgroundColor={isSelected ? formSelectedColors.mark : "transparent"}
                 onPress={() => onSelectYear(year)}
                 outlineWidth={0}
                 focusStyle={{ outlineWidth: 0 }}
@@ -829,7 +830,7 @@ export function YearGrid({
               >
                 <Text
                   {...knobProps.label}
-                  color={isSelected ? "$color" : formCommonColors.text}
+                  color={isSelected ? onMark : formCommonColors.text}
                   fontWeight={isSelected ? "bold" : "400"}
                 >
                   {year}
@@ -855,8 +856,8 @@ interface DatePickerInputTriggerProps {
   onReset: () => void;
   onButtonPress: () => void;
   id?: string;
-  /** Empty-state glyph. Datetime uses calendar; TimePicker uses clock. */
-  glyph?: "calendar" | "clock";
+  /** Trailing glyph: a clock for a time, else a calendar. */
+  glyph?: TriggerGlyphKind;
   "aria-label"?: string;
   "aria-labelledby"?: string;
   "aria-describedby"?: string;
@@ -864,6 +865,16 @@ interface DatePickerInputTriggerProps {
   "aria-invalid"?: boolean;
 }
 
+type TriggerGlyphKind = "calendar" | "clock";
+
+function TriggerGlyph({ glyph, ...groupItem }: { glyph: TriggerGlyphKind }) {
+  return (
+    <InputParts.Icon adornment="trailing" color={formCommonColors.muted} {...groupItem}>
+      {glyph === "clock" ? <ClockIcon /> : <CalendarBlankIcon />}
+    </InputParts.Icon>
+  );
+}
+
 export function DatePickerClearButton({
   onReset,
   disabled,
@@ -918,8 +929,6 @@ export function DatePickerInputTrigger({
     }
   };
 
-  const Glyph = glyph === "clock" ? ClockIcon : CalendarBlankIcon;
-
   return (
     // LC-40: the disabled Box below is pointerEvents-none, so the cursor
     // affordance must ride this wrapper — the fragment's not-allowed never
@@ -961,11 +970,6 @@ export function DatePickerInputTrigger({
             }
           : undefined)}
       >
-        <InputParts.Section data-testid="date-picker-glyph">
-          <InputParts.Icon adornment="leading" color={formCommonColors.muted}>
-            <Glyph />
-          </InputParts.Icon>
-        </InputParts.Section>
         <InputParts.Section>
           <InputParts.Area
             readOnly
@@ -975,14 +979,17 @@ export function DatePickerInputTrigger({
             placeholder={placeholder}
             disabled={disabled}
             color={formCommonColors.text}
-            placeholderTextColor={formCommonColors.muted}
           />
         </InputParts.Section>
-        {value && isWeb ? (
+        {value && isWeb && !disabled ? (
           <InputParts.Section>
             <DatePickerClearButton onReset={onReset} disabled={disabled} />
           </InputParts.Section>
-        ) : null}
+        ) : (
+          <InputParts.Section data-testid="date-picker-glyph">
+            <TriggerGlyph glyph={glyph} />
+          </InputParts.Section>
+        )}
       </InputParts.Box>
     </View>
   );
@@ -992,7 +999,7 @@ interface DatePickerReadOnlyFieldProps {
   value: string;
   placeholder?: string;
   id?: string;
-  glyph?: "calendar" | "clock";
+  glyph?: TriggerGlyphKind;
   "aria-label"?: string;
   "aria-required"?: boolean;
   "aria-invalid"?: boolean;
@@ -1011,7 +1018,6 @@ export function DatePickerReadOnlyField({
   "aria-required": ariaRequired,
   "aria-invalid": ariaInvalid,
 }: DatePickerReadOnlyFieldProps) {
-  const Glyph = glyph === "clock" ? ClockIcon : CalendarBlankIcon;
   return (
     <View flexDirection="row" alignItems="center" width="100%">
       <InputParts.Box
@@ -1020,11 +1026,6 @@ export function DatePickerReadOnlyField({
         elevation={undefined}
         data-testid="date-picker-readonly"
       >
-        <InputParts.Section data-testid="date-picker-glyph">
-          <InputParts.Icon adornment="leading" color={formCommonColors.muted}>
-            <Glyph />
-          </InputParts.Icon>
-        </InputParts.Section>
         <InputParts.Section>
           <InputParts.Area
             readOnly
@@ -1032,13 +1033,15 @@ export function DatePickerReadOnlyField({
             value={value}
             placeholder={placeholder}
             color={formCommonColors.text}
-            placeholderTextColor={formCommonColors.muted}
             aria-label={ariaLabel}
             aria-readonly="true"
             aria-required={ariaRequired}
             aria-invalid={ariaInvalid}
           />
         </InputParts.Section>
+        <InputParts.Section data-testid="date-picker-glyph">
+          <TriggerGlyph glyph={glyph} />
+        </InputParts.Section>
       </InputParts.Box>
     </View>
   );

package/src/fields/FileUpload/index.tsx

@@ -2,7 +2,16 @@ import { transitionProps } from "@multiplatform.one/theme";
 import { useTouchSurface } from "@multiplatform.one/theme";
 import { FileIcon, UploadIcon, XIcon } from "@phosphor-icons/react";
 import type { DeepKeys, DeepValue } from "@tanstack/form-core";
-import { type DragEvent, type ReactNode, useCallback, useEffect, useRef, useState } from "react";
+import {
+  type DragEvent,
+  type ReactNode,
+  type Ref,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react";
 import { useMedia, useProps, type SizeTokens } from "tamagui";
 import { Image, isWeb, Text, XStack, YStack, styled } from "tamagui";
 import { Button, IconButton, IconButtonGroup } from "../../Button";
@@ -26,6 +35,7 @@ import {
 import { formCommonColors, formDropzoneColors, formInputColors } from "../../shared/colorRamps";
 import { t } from "../../shared/t";
 import type { FieldComponentProps, Validator } from "../../types";
+import type { FieldPickerHandle, FieldPickerTrigger } from "../pickerHandle";
 import type { NativePickedFile, NativePickerMode } from "./filePickerTypes";
 // Platform-split: the web twin is inert, the `.native` twin opens
 // expo-document-picker / expo-image-picker (Geolocation map-surface pattern).
@@ -114,6 +124,10 @@ export type FileUploadProps<
     existing?: { src: string; name?: string; isImage?: boolean } | null;
     /** Removes the existing file; given, its tile carries a remove disc. */
     onExistingRemove?: () => void;
+    /** LC-290: `open()` runs the picker from the app's own control. */
+    ref?: Ref<FieldPickerHandle>;
+    /** LC-290: the app's own control, drawn in place of the dropzone; call `open` from its press. */
+    trigger?: FieldPickerTrigger;
   };
 
 const UploadAreaFrame = styled(YStack, {
@@ -203,6 +217,7 @@ export function FileUpload<
 >(props: FileUploadProps<TParentData, TName, TFieldValidator, TFormValidator, TData>) {
   const hydrationTouch = useTouchSurface();
   const media = useMedia();
+  const { ref: pickerRef, trigger } = props;
   const {
     defaultValue,
     form,
@@ -230,6 +245,8 @@ export function FileUpload<
     existing,
     onExistingRemove,
     id: idProp,
+    ref: _ref,
+    trigger: _trigger,
     ...fieldProps
   } = useProps(props);
 
@@ -615,6 +632,9 @@ export function FileUpload<
     fileInputRef.current?.click();
   }, [disabled, readOnly]);
 
+  const requestFilesRef = useRef<() => void>(openFileDialog);
+  useImperativeHandle(pickerRef, () => ({ open: () => requestFilesRef.current() }), []);
+
   // Native has no <input type="file">. The same press opens the OS picker and
   // routes its result through the identical validate → setState → field path,
   // so `accept`, `maxSize`, `multiple` and the removal list behave as on web.
@@ -912,6 +932,29 @@ export function FileUpload<
       : () => {
           void openNativePicker(onValueChange, onBlurHandler);
         };
+    requestFilesRef.current = requestFiles;
+    const hiddenInput = isWeb ? (
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        tabIndex={-1}
+        onChange={(e) => {
+          handleFileSelect(e.target.files, onValueChange, e.target.files);
+          onBlurHandler?.();
+        }}
+        style={{ display: "none" }}
+        disabled={!canInteract}
+      />
+    ) : null;
+    if (trigger)
+      return (
+        <YStack data-file-upload="trigger" alignItems="flex-start">
+          {trigger(requestFiles)}
+          {hiddenInput}
+        </YStack>
+      );
 
     // Drag-and-drop, keyboard activation and the focus ring are DOM concerns;
     // native gets a plain press target on the same surface instead.
@@ -1150,21 +1193,7 @@ export function FileUpload<
             </Text>
           )}
 
-          {isWeb ? (
-            <input
-              ref={fileInputRef}
-              type="file"
-              accept={accept}
-              multiple={multiple}
-              tabIndex={-1}
-              onChange={(e) => {
-                handleFileSelect(e.target.files, onValueChange, e.target.files);
-                onBlurHandler?.();
-              }}
-              style={{ display: "none" }}
-              disabled={!canInteract}
-            />
-          ) : null}
+          {hiddenInput}
         </YStack>
 
         {((multiple && hasRows) || transfers.length > 0) && (

package/src/fields/ImageField/index.tsx

@@ -18,8 +18,9 @@ import {
   type DisabledSurfaceProps,
   type KnobProps,
 } from "@multiplatform.one/theme";
-import type { DragEvent, ReactNode } from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import type { DragEvent, ReactNode, Ref } from "react";
+import { useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import type { FieldPickerHandle, FieldPickerTrigger } from "../pickerHandle";
 import type { LabelProps, SizeTokens } from "tamagui";
 import { Image, Text as TamaguiText, View, YStack, isWeb, styled } from "tamagui";
 import { IconButton } from "../../Button";
@@ -78,6 +79,10 @@ export interface ImageFieldProps {
   objectFit?: "cover" | "contain" | "fill" | "none";
   /** When true, renders a skeleton placeholder instead of the image field */
   skeleton?: boolean;
+  /** LC-290: `open()` runs the picker from the app's own control. */
+  ref?: Ref<FieldPickerHandle>;
+  /** LC-290: the app's own control, drawn in place of the image frame; call `open` from its press. */
+  trigger?: FieldPickerTrigger;
 }
 
 const ImageFrame = styled(View, {
@@ -112,6 +117,8 @@ type ImageControlProps = {
   onChangeProp?: (val: string | File | null) => void;
   onInvalid?: (message: string | undefined) => void;
   blurHandler?: (...args: any[]) => void;
+  pickerRef?: Ref<FieldPickerHandle>;
+  trigger?: FieldPickerTrigger;
 };
 
 function isImageFile(file: File, accept: string): boolean {
@@ -148,6 +155,8 @@ function ImageControl({
   onChangeProp,
   onInvalid,
   blurHandler,
+  pickerRef,
+  trigger,
 }: ImageControlProps) {
   const describedBy = useFieldDescribedBy();
   const fieldA11y = useFieldA11y();
@@ -230,6 +239,7 @@ function ImageControl({
     if (!canInteract) return;
     fileInputRef.current?.click();
   }, [canInteract]);
+  useImperativeHandle(pickerRef, () => ({ open: openFileDialog }), [openFileDialog]);
 
   const isInteractiveChild = useCallback((e: { target: unknown; currentTarget: unknown }) => {
     const target = e.target as HTMLElement | null;
@@ -313,6 +323,31 @@ function ImageControl({
   const emptyName =
     typeof label === "string" && label ? t("{{label}}: add image", { label }) : t("Add image");
 
+  const hiddenInput = isWeb ? (
+    <input
+      ref={fileInputRef}
+      type="file"
+      accept={accept}
+      tabIndex={-1}
+      aria-hidden={true}
+      onChange={(e) => {
+        const files = e.target.files;
+        e.target.value = "";
+        if (!files || files.length === 0) return;
+        applyFile(files[0]);
+      }}
+      style={{ display: "none" }}
+      disabled={!canInteract}
+    />
+  ) : null;
+  if (trigger)
+    return (
+      <YStack alignItems="flex-start" data-image-field="trigger">
+        {trigger(openFileDialog)}
+        {hiddenInput}
+      </YStack>
+    );
+
   return (
     <YStack alignItems="flex-start" {...knobProps.gap}>
       <ImageFrame
@@ -398,23 +433,7 @@ function ImageControl({
           </View>
         )}
 
-        {isWeb && (
-          <input
-            ref={fileInputRef}
-            type="file"
-            accept={accept}
-            tabIndex={-1}
-            aria-hidden={true}
-            onChange={(e) => {
-              const files = e.target.files;
-              e.target.value = "";
-              if (!files || files.length === 0) return;
-              applyFile(files[0]);
-            }}
-            style={{ display: "none" }}
-            disabled={!canInteract}
-          />
-        )}
+        {hiddenInput}
       </ImageFrame>
 
       {showRemove && hasValue && canInteract && !inTableCell && (
@@ -453,6 +472,8 @@ export function ImageField({
   placeholder,
   objectFit = "cover",
   skeleton,
+  ref,
+  trigger,
 }: ImageFieldProps) {
   const { resolvedForm, knobProps, disabledState, id } = useFormField({
     form: formProp,
@@ -486,6 +507,8 @@ export function ImageField({
     disabledSurface: disabled ? disabledState.surfaceKnobProps : undefined,
     onChangeProp,
     onInvalid: setValidationError,
+    pickerRef: ref,
+    trigger,
   };
 
   if (!resolvedForm || !name) {

package/src/fields/Progress/index.tsx

@@ -25,6 +25,7 @@ import {
 import { Field, FieldLayout, useFieldDescribedBy } from "../../fieldLayout";
 import { Skeleton } from "../../Skeleton";
 import { formControlColors, formSelectedColors } from "../../shared/colorRamps";
+import { useControlTrackFill } from "../../shared/controlTrack";
 import { useIsInTableCell } from "../../shared/tableCellContext";
 import { bidiIsolate, t } from "../../shared/t";
 import {
@@ -186,6 +187,7 @@ function ProgressTrack({
   blurHandler,
 }: ProgressTrackProps) {
   const describedBy = useFieldDescribedBy();
+  const trackFill = useControlTrackFill();
   const trackSize = size ?? sizeToken;
   const percent = Math.round((progressValue / max) * 100);
   const motion = indicatorMotion(knobProps.motion.slide);
@@ -197,6 +199,7 @@ function ProgressTrack({
       size={trackSize}
       overflow="hidden"
       outlined={knobProps.outlined}
+      {...(knobProps.outlined ? undefined : { backgroundColor: trackFill })}
       {...knobProps.borderRadius}
       {...(knobProps.outlined ? knobProps.inputSurface : { borderWidth: 0 })}
       {...(knobProps.outlined ? { borderColor: formControlColors.boundary } : undefined)}

package/src/fields/Slider/Slider.system.native.spec.tsx

@@ -25,6 +25,17 @@ const SystemSliderProbe = vi.hoisted(
           data-rail={props.maximumTrackTintColor}
           data-thumb={props.thumbTintColor ?? ""}
           data-label={props.accessibilityLabel ?? ""}
+          data-accessible={String(props.accessible ?? "")}
+          data-role={props.accessibilityRole ?? ""}
+          data-a11y-value={JSON.stringify(props.accessibilityValue ?? null)}
+          data-actions={(props.accessibilityActions ?? [])
+            .map((a: { name: string }) => a.name)
+            .join(",")}
+          onKeyDown={(event) => {
+            const actionName =
+              event.key === "ArrowUp" ? "increment" : event.key === "ArrowDown" ? "decrement" : "";
+            if (actionName) props.onAccessibilityAction?.({ nativeEvent: { actionName } });
+          }}
           data-min={props.minimumValue}
           data-max={props.maximumValue}
           data-step={props.step}
@@ -101,6 +112,39 @@ describe("Slider on iOS and Android", () => {
     },
   );
 
+  it("is an adjustable element named by its label, valued, stepping on VoiceOver swipes (FZ-8905)", () => {
+    const onChange = vi.fn();
+    const result = renderWithProviders(
+      <Slider
+        label="Brightness"
+        defaultValue={[80]}
+        min={0}
+        max={100}
+        step={1}
+        onChange={onChange}
+      />,
+    );
+    const view = result.getByTestId("system-slider");
+    expect(view.dataset).toMatchObject({
+      accessible: "true",
+      role: "adjustable",
+      label: "Brightness",
+      actions: "increment,decrement",
+    });
+    expect(JSON.parse(view.dataset.a11yValue ?? "null")).toEqual({
+      min: 0,
+      max: 100,
+      now: 80,
+      text: "80",
+    });
+    fireEvent.keyDown(view, { key: "ArrowUp" });
+    expect(onChange).toHaveBeenLastCalledWith([81]);
+    expect(JSON.parse(view.dataset.a11yValue ?? "null")).toMatchObject({ now: 81 });
+    fireEvent.keyDown(view, { key: "ArrowDown" });
+    fireEvent.keyDown(view, { key: "ArrowDown" });
+    expect(onChange).toHaveBeenLastCalledWith([79]);
+  });
+
   it("tints the Android thumb with the fill", () => {
     system.os = "android";
     const result = renderInScheme(<Slider label="Volume" />, "light");