@oxy.so/bloom 3.0.1 → 3.1.0

package/src/input-otp/InputOtp.tsx

@@ -24,6 +24,7 @@ import {
 } from '../text-field/shared';
 import { TYPE_SCALE } from '../typography/scale';
 import type { InputOtpProps } from './types';
+import { useFieldMembership } from '../field/membership';
 
 /**
  * `InputOtp`: one box per digit, side by side, behaving as ONE value.
@@ -185,13 +186,25 @@ export function InputOtp({
   disabled: disabledAlias,
   groupEvery,
   autoFocus = false,
-  accessibilityLabel = 'One-time code',
+  accessibilityLabel,
   style,
   testID,
 }: InputOtpProps) {
   const theme = useTheme();
   const palette = useMemo(() => resolveInputOtpPalette(theme), [theme]);
-  const disabled = isDisabled ?? disabledAlias ?? false;
+  // SEVERAL controls behind one name: the boxes are the field's `multiple` case
+  // (`docs/field.mdx`), so the GROUP takes the field's name and description and
+  // each box keeps its own name and its own `aria-invalid`. A caller's own
+  // `accessibilityLabel` still wins; `'One-time code'` is the last resort rather
+  // than a default that would outrank the field's label.
+  const membership = useFieldMembership({
+    accessibilityLabel,
+    disabled: isDisabled ?? disabledAlias ?? false,
+    invalid: isInvalid,
+  });
+  const disabled = membership.disabled;
+  const invalid = membership.invalid;
+  const groupName = membership.accessibilityLabel ?? 'One-time code';
 
   const inputsRef = useRef<Array<TextInput | null>>([]);
   const [internal, setInternal] = useState(() => clean(defaultValue, length));
@@ -259,7 +272,8 @@ export function InputOtp({
   return (
     <View
       role="group"
-      accessibilityLabel={accessibilityLabel}
+      accessibilityLabel={groupName}
+      aria-describedby={membership.describedBy}
       testID={testID}
       // No `aria-invalid` here: `group` does not support it. Each box carries
       // its own, which is where a screen reader looks anyway.
@@ -270,7 +284,7 @@ export function InputOtp({
         const paint = resolveInputOtpBoxPaint(palette, {
           hovered: hoveredIndex === index,
           focused: focusedIndex === index,
-          invalid: isInvalid,
+          invalid,
           disabled,
         });
 
@@ -302,7 +316,7 @@ export function InputOtp({
             caretHidden={false}
             editable={!disabled}
             accessibilityLabel={`Digit ${index + 1} of ${length}`}
-            aria-invalid={isInvalid || undefined}
+            aria-invalid={invalid || undefined}
             aria-disabled={disabled || undefined}
             value={digit === ' ' ? '' : digit}
             onChangeText={(text) => writeFrom(index, text)}

package/src/input-otp/types.ts

@@ -20,7 +20,13 @@ export interface InputOtpProps extends ViewStyleProp {
   groupEvery?: number;
   /** Focus the first box on mount. */
   autoFocus?: boolean;
-  /** The group's accessible name, default `"One-time code"`. */
+  /**
+   * The group's accessible name.
+   *
+   * Inside a `Field` the field's label supplies it. `"One-time code"` is the
+   * last resort when neither is given — a default here would outrank the
+   * field's label, which is the one thing on screen the user can read.
+   */
   accessibilityLabel?: string;
   testID?: string;
 }

package/src/layout/index.ts

@@ -5,9 +5,12 @@
  * `edge` answers "how far from the edge"; `bottom-edge` and `top-edge` answer
  * "what is already parked there"; `scroll-offset` answers "which scroller am I
  * following". A surface that floats at an edge needs the first two; chrome that
- * reacts to scrolling needs the third.
+ * reacts to scrolling needs the third. `screen-scope` answers "am I my own
+ * screen" — a modal or a sheet, whose chrome must claim and read its own edges
+ * rather than the screen's underneath.
  */
 export { EDGE_GAP, windowEdgeGap } from './edge';
 export { BottomEdgeProvider, useBottomEdgeInset, useClaimBottomEdge } from './bottom-edge';
 export { TopEdgeProvider, useClaimTopEdge, useTopEdgeInset } from './top-edge';
 export { ScrollOffsetProvider, useScrollOffset } from './scroll-offset';
+export { ScreenScope } from './screen-scope';

package/src/layout/screen-scope.tsx

@@ -0,0 +1,54 @@
+/**
+ * A surface that is its OWN screen, for the two contracts that are screen-scoped.
+ *
+ * ## What goes wrong without it
+ *
+ * `top-edge.tsx` and `scroll-offset.ts` are per-SCREEN by design: one registry
+ * of what is parked at the top, one scroller that the chrome follows. A modal,
+ * a bottom sheet or a detail panel is a second screen drawn over the first, and
+ * both contracts reach into it from outside:
+ *
+ *   - A header inside a full-screen dialog CLAIMS the top edge of the screen
+ *     underneath it. The claim combines with `max`, so the page behind the modal
+ *     is padded for a header it cannot see — and when the modal closes the claim
+ *     unregisters, so the padding appears and disappears with the modal.
+ *   - Chrome inside the sheet READS the page's scroll offset and follows a
+ *     scroller the user is not touching. The sheet's own list scrolls and the
+ *     sheet's header does not react; the page behind scrolls and it does.
+ *
+ * Neither throws, neither warns, and both look like layout decisions.
+ *
+ * ## What it does
+ *
+ * Nests a fresh `TopEdgeProvider` (an empty registry the surface's own chrome
+ * claims against) and publishes a `null` scroll offset, which is the honest
+ * value: nothing inside has said which scroller it owns yet. A scroll owner
+ * INSIDE the surface publishes its own offset in the ordinary way and wins,
+ * because it is nearer.
+ *
+ * The BOTTOM edge is scoped too, and for the same reason read from the other
+ * side: the bottom edge is the tab bar and the FAB, and a sheet covers both. A
+ * form inside a sheet that padded itself for a tab bar it is drawn over ends in
+ * a band of empty space.
+ *
+ * Bloom's own overlay surfaces mount it (`DialogBody`, `BottomSheetBase`), so a
+ * consumer gets this by using them. It is exported for a surface Bloom does not
+ * own — an app's own full-screen route presented over another.
+ */
+import type { PropsWithChildren } from 'react';
+
+import { BottomEdgeProvider } from './bottom-edge';
+import { ScrollOffsetProvider } from './scroll-offset';
+import { TopEdgeProvider } from './top-edge';
+
+export function ScreenScope({ children }: PropsWithChildren) {
+  return (
+    <TopEdgeProvider>
+      <BottomEdgeProvider>
+        {/* `null`, not a zero SharedValue: the two mean different things to the
+            chrome reading it (`scroll-offset.ts`). */}
+        <ScrollOffsetProvider value={null}>{children}</ScrollOffsetProvider>
+      </BottomEdgeProvider>
+    </TopEdgeProvider>
+  );
+}

package/src/phone-input/PhoneInput.tsx

@@ -11,6 +11,7 @@ import {
 } from '../text-field';
 import { CountryCodeSelect } from './CountryCodeSelect';
 import type { PhoneInputProps } from './types';
+import { useFieldMembership } from '../field/membership';
 
 /**
  * A phone number field: `Input` with a country-code `Select` in its
@@ -29,7 +30,7 @@ export function PhoneInput({
   hint,
   required,
   tooltip,
-  size = 'medium',
+  size,
   isInvalid,
   disabled,
   value,
@@ -46,6 +47,17 @@ export function PhoneInput({
   testID,
   style,
 }: PhoneInputProps) {
+  // The country select is a SECOND control inside this field, and it is the one
+  // a `Field disabled` used to miss: the number input reads the field context
+  // itself, the select does not, so the picker stayed operable inside a disabled
+  // field. Resolving membership here hands the same state to both halves.
+  const field = useFieldMembership({
+    accessibilityLabel,
+    label: label ?? 'Phone number',
+    disabled,
+    invalid: isInvalid,
+    required,
+  });
   const [text, setText] = useControllableState({
     value,
     defaultValue,
@@ -55,14 +67,14 @@ export function PhoneInput({
   return (
     <View style={[{ width: '100%' }, style]} testID={testID}>
       {label ? (
-        <TextFieldLabel required={required} tooltip={tooltip}>
+        <TextFieldLabel required={field.required} tooltip={tooltip}>
           {label}
         </TextFieldLabel>
       ) : null}
       <TextField
         size={size}
-        isInvalid={isInvalid}
-        disabled={disabled}
+        isInvalid={field.invalid}
+        disabled={field.disabled}
         leadingAddon={
           <CountryCodeSelect
             value={country}
@@ -70,15 +82,15 @@ export function PhoneInput({
             onValueChange={onCountryChange}
             countries={countries}
             label={countrySelectLabel}
-            disabled={disabled}
+            disabled={field.disabled}
           />
         }>
         <TextFieldInput
-          label={accessibilityLabel ?? label ?? 'Phone number'}
+          label={field.accessibilityLabel ?? 'Phone number'}
           placeholder={placeholder ?? null}
           value={text}
           onChangeText={setText}
-          isInvalid={isInvalid}
+          isInvalid={field.invalid}
           keyboardType="phone-pad"
           autoComplete="tel"
           textContentType="telephoneNumber"
@@ -87,7 +99,7 @@ export function PhoneInput({
         />
         {trailingIcon ? <TextFieldIcon icon={trailingIcon} position="trailing" /> : null}
       </TextField>
-      {hint ? <TextFieldHint isInvalid={isInvalid}>{hint}</TextFieldHint> : null}
+      {hint ? <TextFieldHint isInvalid={field.invalid}>{hint}</TextFieldHint> : null}
     </View>
   );
 }

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.