@oxy.so/bloom 3.0.0 → 3.1.0

package/src/radio/Radio.tsx

@@ -12,6 +12,7 @@ import { resolveButtonRamps } from '../button/shared';
 import { focusRingShadow, interactiveWebCss, useInteractiveWebCss } from '../styles/interactive-web-css';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { RadioIndicator } from '../radio-indicator';
+import { useFieldMembership } from '../field/membership';
 import { RadioCard } from './RadioCard';
 import type { RadioGroupProps, RadioProps } from './types';
 
@@ -96,9 +97,20 @@ const RadioComponent = function Radio<Value extends string = string>({
   style,
   labelStyle,
   accessibilityLabel,
+  nativeID,
   testID,
 }: RadioProps<Value>) {
   const theme = useTheme();
+  // ADJACENT label (see `field/membership.ts`); the field's `disabled` is a
+  // constraint, so a radio inside a disabled field cannot re-enable itself.
+  const field = useFieldMembership({
+    accessibilityLabel,
+    label,
+    labelPlacement: 'adjacent',
+    disabled,
+    nativeID,
+  });
+  const isDisabled = field.disabled;
   const ringOffset = useRingOffsetStyle();
   useInteractiveWebCss(STYLE_ID, BLOOM_RADIO_CSS);
   const sizeConfig = SIZE_CONFIG[size];
@@ -109,16 +121,16 @@ const RadioComponent = function Radio<Value extends string = string>({
     // Re-choosing the chosen option is a no-op. A radio, unlike a checkbox, has
     // no "off" — firing here would make a group's `onValueChange` report a
     // change that did not happen.
-    if (disabled || selected) return;
+    if (isDisabled || selected) return;
     onSelect(value);
-  }, [disabled, selected, onSelect, value]);
+  }, [isDisabled, selected, onSelect, value]);
 
   const rowStyle: WebCssStyle = {
     flexDirection: 'row',
     alignItems: 'flex-start',
     gap: LABEL_GAP,
     // `opacity-50` on the whole row.
-    opacity: disabled ? DISABLED_OPACITY : 1,
+    opacity: isDisabled ? DISABLED_OPACITY : 1,
     // The `:focus-visible` ring colour, read by the adopted sheet.
     '--bloom-radio-ring': color ?? accent[500],
     ...ringOffset,
@@ -129,7 +141,9 @@ const RadioComponent = function Radio<Value extends string = string>({
       {...(IS_WEB ? ({ dataSet: { bloomRadio: '' } } as Record<string, unknown>) : {})}
       style={[rowStyle, style]}
       onPress={handlePress}
-      disabled={disabled}
+      disabled={isDisabled}
+      nativeID={field.nativeID}
+      aria-describedby={field.describedBy}
       accessibilityRole="radio"
       // `aria-checked`, not `accessibilityState`: react-native-web never reads
       // the latter, so an option that set only it announced no state at all.
@@ -137,7 +151,7 @@ const RadioComponent = function Radio<Value extends string = string>({
       // this one prop is the spelling both platforms honour, and `disabled`
       // travels on the `disabled` prop, which both map.
       aria-checked={selected}
-      accessibilityLabel={accessibilityLabel ?? label}
+      accessibilityLabel={field.accessibilityLabel}
       hitSlop={HIT_SLOP}
       testID={testID}
     >
@@ -196,12 +210,21 @@ const RadioGroupComponent = function RadioGroup<Value extends string = string>({
   variant = 'default',
   testID,
 }: RadioGroupProps<Value>) {
+  // The group is one control made of several, so a `Field` around it names the
+  // GROUP and disables every option — `multiple` is the field's side of that
+  // (`docs/field.mdx`), and each radio keeps its own id and its own name.
+  // `label` here is a NAME, not rendered text — the group draws no label of its
+  // own — so it goes in as the caller's name and outranks the field's.
+  const field = useFieldMembership({ accessibilityLabel: label, disabled });
+  const isDisabled = field.disabled;
   return (
     <View
       style={[{ gap: space.sm }, style]}
       accessibilityRole="radiogroup"
-      accessibilityLabel={label}
-      aria-label={label}
+      accessibilityLabel={field.accessibilityLabel}
+      aria-label={field.accessibilityLabel}
+      aria-describedby={field.describedBy}
+      aria-invalid={field.invalid || undefined}
       testID={testID}
     >
       {options.map((option) =>
@@ -213,7 +236,7 @@ const RadioGroupComponent = function RadioGroup<Value extends string = string>({
             onSelect={onValueChange}
             title={option.label ?? option.value}
             description={option.description}
-            disabled={disabled || option.disabled === true}
+            disabled={isDisabled || option.disabled === true}
             color={color}
             testID={option.testID}
           />
@@ -226,7 +249,7 @@ const RadioGroupComponent = function RadioGroup<Value extends string = string>({
           label={option.label}
           description={option.description}
           size={size}
-          disabled={disabled || option.disabled === true}
+          disabled={isDisabled || option.disabled === true}
           color={color}
           labelStyle={labelStyle}
           testID={option.testID}

package/src/radio/types.ts

@@ -30,6 +30,11 @@ export interface RadioProps<Value extends string = string> {
   style?: StyleProp<ViewStyle>;
   labelStyle?: StyleProp<TextStyle>;
   accessibilityLabel?: string;
+  /**
+   * The control's id. Inside a `Field` the field supplies one, so the label's
+   * `htmlFor` points at this control on web.
+   */
+  nativeID?: string;
   testID?: string;
 }
 
@@ -44,10 +49,13 @@ export interface RadioOption<Value extends string = string> {
 
 export interface RadioGroupProps<Value extends string = string> {
   /**
-   * The group's accessible name. Required: a `radiogroup` with no name announces
-   * a list of options and nothing about what is being chosen.
+   * The group's accessible name.
+   *
+   * A `radiogroup` with no name announces a list of options and nothing about
+   * what is being chosen, so this or an enclosing `Field`'s label has to supply
+   * one.
    */
-  label: string;
+  label?: string;
   /** The selected value, or `undefined` for a group with nothing chosen yet. */
   value: Value | undefined;
   /** Called with the newly chosen value. */

package/src/rating/RatingInput.tsx

@@ -11,6 +11,7 @@ import { webDataSet } from '../styles/web-data';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { useTheme } from '../theme/use-theme';
 import type { RatingInputProps, RatingInputSize } from './types';
+import { useFieldMembership } from '../field/membership';
 
 /**
  * The star PICKER — `Rating`'s counterpart for a review form. `Rating` draws a
@@ -83,13 +84,17 @@ function RatingInputComponent({
   onChange,
   max = 5,
   size = 'medium',
-  disabled = false,
+  disabled: disabledProp = false,
   accessibilityLabel,
   formatStarLabel = defaultStarLabel,
   style,
   testID,
 }: RatingInputProps) {
   const theme = useTheme();
+  // A row of stars draws no words, so the `radiogroup`'s name is a prop or the
+  // enclosing `Field`'s label; the field's `disabled` freezes the whole row.
+  const field = useFieldMembership({ accessibilityLabel, disabled: disabledProp });
+  const disabled = field.disabled;
   const ringOffset = useRingOffsetStyle();
   useInteractiveWebCss(STYLE_ID, BLOOM_RATING_INPUT_CSS);
   const { accent, neutral } = useMemo(() => resolveButtonRamps(theme), [theme]);
@@ -158,8 +163,10 @@ function RatingInputComponent({
     <View
       testID={testID}
       accessibilityRole="radiogroup"
-      accessibilityLabel={accessibilityLabel}
-      aria-label={accessibilityLabel}
+      nativeID={field.nativeID}
+      accessibilityLabel={field.accessibilityLabel}
+      aria-label={field.accessibilityLabel}
+      aria-describedby={field.describedBy}
       aria-disabled={disabled || undefined}
       style={[
         {

package/src/rating/types.ts

@@ -51,10 +51,13 @@ export interface RatingInputProps {
   disabled?: boolean;
   /**
    * The NAME of what is being rated ("Overall rating", "Cleanliness").
-   * Required: the group draws nothing but stars, so nothing else can tell a
-   * screen reader which of several ratings this one is.
+   *
+   * The group draws nothing but stars, so this or an enclosing `Field`'s label
+   * is the only thing that can tell a screen reader which of several ratings
+   * this one is. With neither it warns once in development
+   * (`hooks/use-accessible-name-warning.ts`).
    */
-  accessibilityLabel: string;
+  accessibilityLabel?: string;
   /**
    * Each star's own name, which is English by default (`"1 star"`,
    * `"4 stars"`). Pass a translated formatter.

package/src/segmented-control/SegmentedControl.tsx

@@ -27,6 +27,7 @@ import { borderRadius, DISABLED_OPACITY } from '../styles/tokens';
 import { NOT_DISABLED, interactiveWebCss, useInteractiveWebCss } from '../styles/interactive-web-css';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { mixColor, resolveButtonRamps } from '../button/shared';
+import { useFieldMembership } from '../field/membership';
 
 /**
  * A segmented control. Colours come from Bloom's theme through
@@ -136,6 +137,8 @@ const InternalContext = createContext<{
   size: SegmentedControlSize;
   variant: SegmentedControlVariant;
   palette: SegmentedPalette;
+  /** The group's disabled state. An item ORs it with its own. */
+  disabled: boolean;
   selectedValue: string;
   selectedPosition: { width: number; x: number } | null;
   onSelectValue: (
@@ -169,9 +172,17 @@ export function SegmentedControl<T extends string>({
   onChange,
   children,
   style,
+  disabled = false,
   accessibilityHint,
+  nativeID,
+  testID,
 }: {
-  label: string;
+  /**
+   * The control's accessible name — it is a `radiogroup`/`tablist`, and the
+   * segment texts name the OPTIONS rather than the choice. Inside a `Field` the
+   * field's label supplies it.
+   */
+  label?: string;
   type: 'tabs' | 'radio';
   /** `medium` (default); `small` and `large` step around it. */
   size?: SegmentedControlSize;
@@ -181,10 +192,28 @@ export function SegmentedControl<T extends string>({
   onChange: (value: T) => void;
   children: React.ReactNode;
   style?: StyleProp<ViewStyle>;
+  /**
+   * Disables every segment.
+   *
+   * A CONSTRAINT the group owns: an item combines it with `||`, so a segment
+   * cannot re-enable itself, and a `Field disabled` around the control reaches
+   * the segments through it.
+   */
+  disabled?: boolean;
   accessibilityHint?: string;
+  /** The group's id. Supplied by an enclosing `Field` when there is one. */
+  nativeID?: string;
+  testID?: string;
 }) {
   const theme = useTheme();
   useInteractiveWebCss(STYLE_ID, SEGMENTED_CSS);
+  // The group is ONE control made of several segments, so a `Field` names the
+  // group and disables all of it. `label` is the group's name rather than
+  // rendered text, so the field's label only fills in what is missing.
+  // `label` is a NAME rather than rendered text (the segments carry the words),
+  // so it goes in as the caller's own name and outranks the field's.
+  const field = useFieldMembership({ accessibilityLabel: label, disabled, nativeID });
+  const isDisabled = field.disabled;
   const palette = useMemo(() => resolveSegmentedPalette(theme), [theme]);
   const [selectedPosition, setSelectedPosition] = useState<{
     width: number;
@@ -197,6 +226,7 @@ export function SegmentedControl<T extends string>({
       size,
       variant,
       palette,
+      disabled: isDisabled,
       selectedValue: value,
       selectedPosition,
       onSelectValue: (
@@ -219,7 +249,7 @@ export function SegmentedControl<T extends string>({
         });
       },
     };
-  }, [value, selectedPosition, setSelectedPosition, onChange, type, size, variant, palette]);
+  }, [value, selectedPosition, setSelectedPosition, onChange, type, size, variant, palette, isDisabled]);
 
   const solid = variant === 'solid';
   const padding = solid ? TRACK_PADDING : 0;
@@ -231,8 +261,15 @@ export function SegmentedControl<T extends string>({
 
   return (
     <View
-      accessibilityLabel={label}
+      testID={testID}
+      nativeID={field.nativeID}
+      accessibilityLabel={field.accessibilityLabel}
       accessibilityHint={accessibilityHint ?? ''}
+      aria-describedby={field.describedBy}
+      aria-invalid={field.invalid || undefined}
+      // A `View`, so `aria-disabled` is the only spelling that reaches web —
+      // there is no `disabled` prop for react-native-web to derive it from.
+      aria-disabled={isDisabled || undefined}
       style={[
         {
           position: 'relative',
@@ -320,10 +357,16 @@ export function SegmentedControlItem({
     }
   }, [needsUpdate]);
 
+  // The group's `disabled` is a constraint, so it is OR-ed with the item's own
+  // — a segment cannot re-enable itself inside a disabled group, and a `Field
+  // disabled` reaches every segment through the group.
+  const isDisabled = ctx.disabled || disabled === true;
+
   const onPress = useCallback(() => {
+    if (isDisabled) return;
     ctx.onSelectValue(value, position);
     onPressProp?.();
-  }, [ctx, value, position, onPressProp]);
+  }, [isDisabled, ctx, value, position, onPressProp]);
 
   // We render the segment as a flat `Pressable` (not Bloom's `Button`)
   // for two reasons:
@@ -346,13 +389,13 @@ export function SegmentedControlItem({
     height: geometry.height,
     paddingHorizontal: geometry.paddingHorizontal,
     borderRadius: borderRadius.full,
-    opacity: disabled ? DISABLED_OPACITY : 1,
+    opacity: isDisabled ? DISABLED_OPACITY : 1,
     '--bloom-segmented-ring': ctx.palette.ring,
   };
 
   const itemContext = useMemo(
-    () => ({ active, hovered: hovered && !disabled }),
-    [active, hovered, disabled],
+    () => ({ active, hovered: hovered && !isDisabled }),
+    [active, hovered, isDisabled],
   );
 
   return (
@@ -384,7 +427,7 @@ export function SegmentedControlItem({
           ? { 'aria-selected': active }
           : { 'aria-checked': active })}
         role={itemRole}
-        disabled={disabled}
+        disabled={isDisabled}
         testID={testID}
         style={[itemStyle, style]}>
         <InternalItemContext.Provider value={itemContext}>

package/src/select/Select.tsx

@@ -57,6 +57,7 @@ import type {
   SelectTriggerProps,
   SelectValueProps,
 } from './types';
+import { useFieldMembership } from '../field/membership';
 
 // ---------------------------------------------------------------------------
 // Context
@@ -133,7 +134,15 @@ export function SelectTrigger({
 }: SelectTriggerProps) {
   const { control, size, disabled: rootDisabled } = useSelectContext();
   const palette = useMenuPalette();
-  const isDisabled = disabled === true || rootDisabled === true;
+  // The trigger IS the select's control, so it takes the enclosing `Field`'s id,
+  // name, description and invalid state — and the field's `disabled` on top of
+  // the two it already combines. A `Popover` trigger deliberately does not do
+  // this (`floating/types.ts`): it is not the field's control.
+  const membership = useFieldMembership({
+    accessibilityLabel: label,
+    disabled: disabled === true || rootDisabled === true,
+  });
+  const isDisabled = membership.disabled;
   const t = palette.trigger;
 
   // The same field the web fork draws — a bordered white select trigger
@@ -171,9 +180,12 @@ export function SelectTrigger({
         handle={{
           onPress: () => control.open(),
           disabled: isDisabled,
-          accessibilityLabel: label,
+          accessibilityLabel: membership.accessibilityLabel,
           accessibilityRole: 'button',
           'aria-haspopup': SELECT_TRIGGER_POPUP,
+          nativeID: membership.nativeID,
+          'aria-describedby': membership.describedBy,
+          'aria-invalid': membership.invalid || undefined,
         }}>
         {asChild ? children : field}
       </TriggerSlot>

package/src/select/Select.web.tsx

@@ -59,6 +59,7 @@ import type {
   SelectTriggerProps,
   SelectValueProps,
 } from './types';
+import { useFieldMembership } from '../field/membership';
 
 /** The trigger's `offset={4}`. */
 const SELECT_OFFSET = 4;
@@ -209,7 +210,12 @@ export function SelectTrigger({
 }: SelectTriggerProps) {
   const ctx = useSelectContext();
   const palette = useMenuPalette();
-  const isDisabled = disabled === true || ctx.disabled === true;
+  // The trigger IS the select's control — see the native fork.
+  const membership = useFieldMembership({
+    accessibilityLabel: label,
+    disabled: disabled === true || ctx.disabled === true,
+  });
+  const isDisabled = membership.disabled;
   useEffect(() => {
     adoptStyleSheet(TRIGGER_STYLE_ID, TRIGGER_CSS);
   }, []);
@@ -261,10 +267,13 @@ export function SelectTrigger({
           // it rather than reopening it.
           onPress: () => (ctx.isOpen ? ctx.close() : ctx.open()),
           disabled: isDisabled,
-          accessibilityLabel: label,
+          accessibilityLabel: membership.accessibilityLabel,
           accessibilityRole: 'button',
           'aria-haspopup': SELECT_TRIGGER_POPUP,
           'aria-expanded': ctx.isOpen,
+          nativeID: membership.nativeID,
+          'aria-describedby': membership.describedBy,
+          'aria-invalid': membership.invalid || undefined,
         }}
       >
         {asChild ? children : field}

package/src/select/types.ts

@@ -26,7 +26,14 @@ export type SelectTriggerProps = {
    */
   asChild?: boolean;
   disabled?: boolean;
-  label: string;
+  /**
+   * The trigger's accessible name.
+   *
+   * The trigger draws the chosen value, which is not a name — "Medium" says
+   * nothing about what is medium. Inside a `Field` the field's label supplies
+   * it; with neither the trigger announces nothing.
+   */
+  label?: string;
   /**
    * Utility classes APPENDED to the part's own — never substituted for them, so
    * a single layout class cannot strip the chrome.

package/src/slider/Slider.tsx

@@ -22,6 +22,7 @@ import { clamp } from '../styles/clamp';
 import { BUTTON_SHADOW, mixColor, resolveButtonRamps } from '../button/shared';
 import { useAccessibleNameWarning } from '../hooks/use-accessible-name-warning';
 import type { RangeSliderProps, SliderProps } from './types';
+import { useFieldMembership } from '../field/membership';
 
 function quantize(raw: number, min: number, max: number, step: number): number {
   if (step <= 0) return clamp(raw, min, max);
@@ -184,7 +185,7 @@ function SliderBase({
   min,
   max,
   step,
-  disabled,
+  disabled: disabledProp,
   trackHeight,
   thumbSize,
   minimumTrackTintColor,
@@ -199,6 +200,12 @@ function SliderBase({
   testID,
 }: SliderBaseProps) {
   const theme = useTheme();
+  // A slider draws no text of its own — its `label` is rendered but hidden from
+  // assistive technology, which is why the name has to be a prop. Inside a
+  // `Field` the field's label is that name (STACKED placement), and the field's
+  // `disabled` constrains the slider whatever the caller passed.
+  const field = useFieldMembership({ accessibilityLabel, label, disabled: disabledProp });
+  const disabled = field.disabled;
   const ringOffset = useRingOffsetStyle();
   React.useEffect(() => {
     adoptStyleSheet(STYLE_ID, BLOOM_SLIDER_CSS);
@@ -365,11 +372,14 @@ function SliderBase({
   return (
     <View
       testID={testID}
+      nativeID={field.nativeID}
+      aria-describedby={field.describedBy}
+      aria-invalid={field.invalid || undefined}
       {...(isRange
-        ? { accessibilityLabel: accessibilityLabel ?? label }
+        ? { accessibilityLabel: field.accessibilityLabel }
         : {
             accessibilityRole: 'adjustable' as const,
-            accessibilityLabel: accessibilityLabel ?? label,
+            accessibilityLabel: field.accessibilityLabel,
             // react-native-web reads the FLAT `aria-value*` props; it has no
             // handling for the `accessibilityValue` object at all, so this
             // rendered a `role="slider"` carrying no value whatsoever. React

package/src/stepper/Stepper.tsx

@@ -14,6 +14,7 @@ import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import type { TypeScaleVariant } from '../typography/scale';
 import type { StepperProps, StepperSize } from './types';
+import { useFieldMembership } from '../field/membership';
 
 /**
  * Bloom's numeric counter: a round `−` button, the value, a round `+` button.
@@ -77,7 +78,7 @@ function StepperComponent({
   min = 0,
   max,
   step = 1,
-  disabled = false,
+  disabled: disabledProp = false,
   size = 'medium',
   formatValue,
   accessibilityLabel,
@@ -88,7 +89,12 @@ function StepperComponent({
 }: StepperProps) {
   const theme = useTheme();
   const ringOffset = useRingOffsetStyle();
-  useAccessibleNameWarning('Stepper', accessibilityLabel);
+  // The digits are not a name, so the stepper is named by a prop or by the
+  // enclosing `Field` — and the warning has to see the resolved name, or a
+  // field-labelled stepper warns anyway.
+  const field = useFieldMembership({ accessibilityLabel, disabled: disabledProp });
+  const disabled = field.disabled;
+  useAccessibleNameWarning('Stepper', field.accessibilityLabel);
   useInteractiveWebCss(STYLE_ID, BLOOM_STEPPER_CSS);
   const { accent } = useMemo(() => resolveButtonRamps(theme), [theme]);
   const config = SIZE_CONFIG[size];
@@ -166,7 +172,9 @@ function StepperComponent({
     <View
       testID={testID}
       role="group"
-      accessibilityLabel={accessibilityLabel}
+      nativeID={field.nativeID}
+      accessibilityLabel={field.accessibilityLabel}
+      aria-describedby={field.describedBy}
       aria-disabled={disabled || undefined}
       style={[{ flexDirection: 'row', alignItems: 'center', gap: config.gap }, style]}
     >
@@ -183,7 +191,7 @@ function StepperComponent({
       />
       <View
         accessibilityRole="adjustable"
-        accessibilityLabel={accessibilityLabel}
+        accessibilityLabel={field.accessibilityLabel}
         aria-valuemin={min}
         aria-valuemax={max}
         aria-valuenow={value}

package/src/stepper/types.ts

@@ -26,7 +26,14 @@ export interface StepperProps {
    * number and two glyphs, so nothing else can tell a screen reader which of
    * several counters this is.
    */
-  accessibilityLabel: string;
+  /**
+   * The control's accessible name.
+   *
+   * Optional only because an enclosing `Field`'s label can supply it — with
+   * neither, the control announces nothing and warns once in development
+   * (`hooks/use-accessible-name-warning.ts`).
+   */
+  accessibilityLabel?: string;
   /** Name of the `−` button. Default `"Decrease"`. */
   decrementLabel?: string;
   /** Name of the `+` button. Default `"Increase"`. */

package/src/styles/styled-primitives.ts

@@ -73,6 +73,22 @@ export interface WebAriaProps {
    * currently needs; the union is the ARIA one, narrowed to what is spellable.
    */
   'aria-haspopup'?: 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+  /**
+   * The id list of the elements that DESCRIBE this control — a field's hint or
+   * its error message (`field/context.ts`).
+   *
+   * Here for the same reason as `aria-haspopup`: React Native types no such prop
+   * (there is no `accessibilityState` entry for it to fold into) while
+   * react-native-web forwards it, so web gets the association and native is
+   * unaffected. A control that needs the description READ on native carries it
+   * in its accessible name instead.
+   */
+  'aria-describedby'?: string;
+  /**
+   * Whether the control's current value is invalid. Same platform split as
+   * `aria-describedby`.
+   */
+  'aria-invalid'?: boolean;
 }
 
 /**

package/src/switch/Switch.tsx

@@ -5,6 +5,7 @@ import { useTheme } from '../theme/use-theme';
 import { animation } from '../styles/tokens';
 import { bloomShadowStyle } from '../design-tokens/shadows';
 import { useAccessibleNameWarning } from '../hooks/use-accessible-name-warning';
+import { useFieldMembership } from '../field/membership';
 import type { SwitchProps } from './types';
 
 const TRACK = { default: { w: 44, h: 26 }, sm: { w: 36, h: 22 } } as const;
@@ -13,9 +14,18 @@ const PADDING = 2;
 const SQUEEZE_RATIO = 0.75; // thumb height shrinks to 75% when pressed
 
 const SwitchComponent = React.forwardRef<React.ElementRef<typeof Pressable>, SwitchProps>(
-  ({ value, onValueChange, disabled, style, size = 'default', accessibilityLabel, testID }, ref) => {
+  (
+    { value, onValueChange, disabled, style, size = 'default', accessibilityLabel, nativeID, testID },
+    ref,
+  ) => {
     const theme = useTheme();
-    useAccessibleNameWarning('Switch', accessibilityLabel);
+    // A switch draws no text, so a `Field` is often the only thing that names
+    // it — and the warning has to see the RESOLVED name, or a correctly
+    // labelled switch inside a field warns anyway and the warning stops
+    // meaning anything.
+    const field = useFieldMembership({ accessibilityLabel, disabled, nativeID });
+    const isDisabled = field.disabled;
+    useAccessibleNameWarning('Switch', field.accessibilityLabel);
     const anim = useRef(new Animated.Value(value ? 1 : 0)).current;
     const pressAnim = useRef(new Animated.Value(0)).current;
 
@@ -32,18 +42,18 @@ const SwitchComponent = React.forwardRef<React.ElementRef<typeof Pressable>, Swi
     }
 
     const handlePress = useCallback(() => {
-      if (disabled) return;
+      if (isDisabled) return;
       onValueChange(!value);
-    }, [disabled, value, onValueChange]);
+    }, [isDisabled, value, onValueChange]);
 
     const onPressIn = useCallback(() => {
-      if (disabled) return;
+      if (isDisabled) return;
       Animated.spring(pressAnim, {
         toValue: 1,
         useNativeDriver: false,
         ...animation.spring.snappy,
       }).start();
-    }, [disabled, pressAnim]);
+    }, [isDisabled, pressAnim]);
 
     const onPressOut = useCallback(() => {
       Animated.spring(pressAnim, {
@@ -91,18 +101,21 @@ const SwitchComponent = React.forwardRef<React.ElementRef<typeof Pressable>, Swi
         // `createDOMProps` emits `aria-label` from it, React Native reads it
         // directly. That is NOT the rule for `accessibilityState` two lines up,
         // which reaches native alone; the state and the name differ here.
-        accessibilityLabel={accessibilityLabel}
+        accessibilityLabel={field.accessibilityLabel}
+        nativeID={field.nativeID}
+        aria-describedby={field.describedBy}
+        aria-invalid={field.invalid || undefined}
         // The disabled state has to travel on this prop, not on `aria-disabled`:
         // react-native-web's `Pressable` appends its own `aria-disabled` from
         // `disabled` AFTER spreading the caller's props, so a caller-supplied
         // one is overwritten. `handlePress` already no-ops when disabled, so
         // this only adds what was missing — the announced state, and skipping
         // the control in the tab order.
-        disabled={disabled}
+        disabled={isDisabled}
         onPress={handlePress}
         onPressIn={onPressIn}
         onPressOut={onPressOut}
-        style={[disabled && styles.disabled, style]}
+        style={[isDisabled && styles.disabled, style]}
         hitSlop={HIT_SLOP}
         testID={testID}
       >

package/src/switch/types.ts

@@ -26,7 +26,14 @@ export interface SwitchProps {
    * are not the same rule.)
    *
    * Omitting it warns once in development; see `use-accessible-name-warning`.
+   * Inside a `Field` the field's label supplies the name, so a switch in a
+   * labelled field needs nothing here and does not warn.
    */
   accessibilityLabel?: string;
+  /**
+   * The switch's id. Inside a `Field` the field supplies one, so the label's
+   * `htmlFor` points at the control on web.
+   */
+  nativeID?: string;
   testID?: string;
 }