@oxy.so/bloom 3.0.1 → 3.1.0

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;
 }

package/src/text-field/TextField.tsx

@@ -53,6 +53,8 @@ import type {
   TextFieldLabelProps,
   TextFieldProps,
 } from './types';
+import { useInheritedControl } from '../control-surface';
+import { useFieldMembership } from '../field/membership';
 
 interface TextFieldContextValue {
   inputRef: React.RefObject<TextInput | null>;
@@ -153,7 +155,7 @@ export function TextField({
   children,
   isInvalid: isInvalidProp = false,
   disabled: disabledProp = false,
-  size: sizeProp = 'medium',
+  size: sizeProp,
   radius = TEXT_FIELD_RADIUS,
   leadingAddon,
   style,
@@ -161,9 +163,19 @@ export function TextField({
   const theme = useTheme();
   const group = useContext(TextFieldGroupContext);
   const bare = group !== null;
-  const isInvalid = isInvalidProp || (group?.isInvalid ?? false);
-  const disabled = disabledProp || (group?.disabled ?? false);
-  const size = group?.size ?? sizeProp;
+  // The enclosing `Field`, read HERE as well as in `TextFieldInput`: the shell
+  // is what paints the disabled and invalid chrome, and a shell that waited for
+  // its input to report up would paint nothing at all around a child that is not
+  // Bloom's input. Both directions are OR, so the two readings cannot disagree.
+  const member = useFieldMembership({ disabled: disabledProp, invalid: isInvalidProp });
+  const isInvalid = member.invalid || (group?.isInvalid ?? false);
+  const disabled = member.disabled || (group?.disabled ?? false);
+  // An `InputGroup` outranks everything: its members have to be one height. Then
+  // the caller's own prop, then the container's density (`ControlSurface`), then
+  // `medium` — the precedence rule in `docs/composition.mdx`, with the group's
+  // geometry first because it is a constraint rather than a default.
+  const inheritedSize = useInheritedControl('density', sizeProp, 'medium');
+  const size = group?.size ?? inheritedSize;
   const inputRef = useRef<TextInput>(null);
   const [inputDisabled, setInputDisabled] = useState(false);
   const {

package/src/textarea/Textarea.tsx

@@ -19,6 +19,8 @@ import {
   resolveShellPaint,
   useTextFieldPalette,
 } from '../text-field/shared';
+import { useInheritedControl } from '../control-surface';
+import { useFieldMembership } from '../field/membership';
 import type { TextareaProps } from './types';
 
 const IS_WEB = Platform.OS === 'web';
@@ -52,7 +54,7 @@ export function Textarea({
   onChangeText,
   onFocus,
   onBlur,
-  size = 'medium',
+  size: sizeProp,
   rows = 3,
   autoResize = false,
   maxRows,
@@ -67,10 +69,29 @@ export function Textarea({
   inputStyle,
   inputRef,
   accessibilityLabel,
+  nativeID,
   testID,
   ...rest
 }: TextareaProps) {
   const theme = useTheme();
+  // The two contracts a textarea sits inside: a container's density
+  // (`ControlSurface`) and an enclosing `Field`'s association. The label is
+  // STACKED here, as it is on `TextField`, so the field's label wins — they are
+  // two spellings of one thing and rendering both is the mistake `docs/field.mdx`
+  // names.
+  const size = useInheritedControl('density', sizeProp, 'medium');
+  const field = useFieldMembership({
+    accessibilityLabel,
+    label: label ?? placeholder,
+    disabled,
+    invalid: isInvalid,
+    required,
+    nativeID,
+    // An `aria-describedby` the caller spread through `rest` is KEPT and the
+    // field's is added to it, the same way `TextFieldInput` treats it: the two
+    // are an id list, not a choice.
+    describedBy: (rest as Record<string, unknown>)['aria-describedby'] as string | undefined,
+  });
   const palette = useTextFieldPalette();
   const innerRef = useRef<TextInput>(null);
   const { state: hovered, onIn: onHoverIn, onOut: onHoverOut } = useInteractionState();
@@ -82,7 +103,7 @@ export function Textarea({
   const [typedLength, setTypedLength] = useState(() => (defaultValue ?? '').length);
   const count = value !== undefined ? value.length : typedLength;
 
-  const state = { hovered, focused, invalid: isInvalid, disabled };
+  const state = { hovered, focused, invalid: field.invalid, disabled: field.disabled };
   const paint = resolveShellPaint(palette, state);
   const line = TEXT_FIELD_TEXT.lineHeight;
 
@@ -92,7 +113,7 @@ export function Textarea({
       fontSize: TEXT_FIELD_TEXT.fontSize,
       lineHeight: line,
       fontWeight: TEXT_FIELD_TEXT.fontWeight,
-      color: disabled ? palette.textDisabled : palette.text,
+      color: field.disabled ? palette.textDisabled : palette.text,
       paddingLeft: TEXT_FIELD_INPUT_INSET,
       paddingRight: TEXT_FIELD_INPUT_INSET,
       paddingTop: 0,
@@ -114,18 +135,16 @@ export function Textarea({
           outlineStyle: 'none',
           resize: autoResize ? 'none' : resize,
           fieldSizing: autoResize ? 'content' : undefined,
-          cursor: disabled ? 'not-allowed' : undefined,
+          cursor: field.disabled ? 'not-allowed' : undefined,
         } as unknown as TextStyle)
       : undefined,
     inputStyle,
   ]) as TextStyle;
 
-  const name = label ?? accessibilityLabel ?? placeholder;
-
   return (
     <View style={[{ width: '100%' }, style]} testID={testID}>
       {label ? (
-        <TextFieldLabel required={required} tooltip={tooltip}>
+        <TextFieldLabel required={field.required} tooltip={tooltip}>
           {label}
         </TextFieldLabel>
       ) : null}
@@ -143,24 +162,28 @@ export function Textarea({
         ]}
         {...(IS_WEB
           ? ({
-              onClick: () => innerRef.current?.focus(),
+              onClick: () => {
+                if (!field.disabled) innerRef.current?.focus();
+              },
               onMouseEnter: onHoverIn,
               onMouseLeave: onHoverOut,
             } as Record<string, unknown>)
           : {})}>
         <TextInput
           {...rest}
-          {...(IS_WEB && disabled ? ({ disabled: true } as Record<string, unknown>) : {})}
+          {...(IS_WEB && field.disabled ? ({ disabled: true } as Record<string, unknown>) : {})}
           ref={mergeRefs([innerRef, inputRef])}
           multiline
           numberOfLines={rows}
           value={value}
           defaultValue={defaultValue}
           maxLength={maxLength}
-          editable={disabled ? false : rest.editable}
-          accessibilityLabel={name}
-          aria-invalid={isInvalid || undefined}
-          aria-disabled={disabled || undefined}
+          editable={field.disabled ? false : rest.editable}
+          nativeID={field.nativeID}
+          accessibilityLabel={field.accessibilityLabel}
+          aria-describedby={field.describedBy}
+          aria-invalid={field.invalid || undefined}
+          aria-disabled={field.disabled || undefined}
           placeholder={placeholder}
           placeholderTextColor={resolvePlaceholderColor(palette, state)}
           keyboardAppearance={theme.isDark ? 'dark' : 'light'}
@@ -190,7 +213,7 @@ export function Textarea({
             marginTop: TEXT_FIELD_STACK_GAP,
           }}>
           {hint ? (
-            <TextFieldHint isInvalid={isInvalid} style={{ marginTop: 0 }}>
+            <TextFieldHint isInvalid={field.invalid} style={{ marginTop: 0 }}>
               {hint}
             </TextFieldHint>
           ) : null}
@@ -202,7 +225,7 @@ export function Textarea({
                 flexShrink: 0,
                 paddingTop: 1,
                 fontVariant: ['tabular-nums'],
-                color: isInvalid ? palette.error : palette.count,
+                color: field.invalid ? palette.error : palette.count,
               }}>
               {maxLength ? `${count}/${maxLength}` : String(count)}
             </Text>