@oxyhq/bloom 0.80.0 → 0.81.0

package/src/__tests__/Tabs.test.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import type { ReactTestInstance } from 'react-test-renderer';
-import { fireEvent, render } from '@testing-library/react-native';
+import { act, fireEvent, render } from '@testing-library/react-native';
 
 import { BloomThemeProvider } from '../theme/BloomThemeProvider';
 import { Tabs, TabsTrigger } from '../tabs';
+import type { TabsDragController } from '../tabs/Tabs';
 
 function renderWithTheme(ui: React.ReactElement) {
   return render(
@@ -34,6 +35,18 @@ function triggerFor(node: ReactTestInstance): ReactTestInstance {
   return current;
 }
 
+/**
+ * The selected state as it actually reaches a platform.
+ *
+ * `aria-selected` rather than `accessibilityState.selected` because
+ * react-native-web's `createDOMProps` reads only the former (the latter appears
+ * nowhere in it), while React Native's `Pressable` folds `aria-selected` back
+ * into `accessibilityState` — so this is the ONE spelling both platforms honour.
+ */
+function selectedState(node: ReactTestInstance): unknown {
+  return node.props['aria-selected'];
+}
+
 function Bar({
   value,
   onValueChange = () => {},
@@ -98,14 +111,36 @@ describe('Tabs', () => {
     }
   });
 
+  /**
+   * A tab strip that does not say WHICH tab is current is unusable with a
+   * screen reader, and the failure is invisible to everyone else: the underline
+   * is drawn, so the strip looks correct while announcing nothing.
+   *
+   * The assertion is on `aria-selected` specifically. Setting only
+   * `accessibilityState={{selected}}` — which reads like the React Native
+   * answer and is what this component shipped — produces no `aria-selected` on
+   * web at all, because react-native-web stopped consulting
+   * `accessibilityState` and now maps `aria-*` props directly.
+   */
   it('marks the active trigger as selected for accessibility', () => {
     const { getByText } = renderWithTheme(<Bar value="b" />);
-    expect(
-      triggerFor(getByText('First')).props.accessibilityState.selected,
-    ).toBe(false);
-    expect(
-      triggerFor(getByText('Second')).props.accessibilityState.selected,
-    ).toBe(true);
+    expect(selectedState(triggerFor(getByText('First')))).toBe(false);
+    expect(selectedState(triggerFor(getByText('Second')))).toBe(true);
+  });
+
+  it('leaves the disabled state to the disabled prop, which both platforms map', () => {
+    // Neither Pressable needs telling twice: React Native's folds a non-null
+    // `disabled` into `accessibilityState`, react-native-web's emits
+    // `aria-disabled` from it. A second copy on the trigger could only ever
+    // disagree with this one.
+    const { getByText } = renderWithTheme(
+      <Tabs value="a" onValueChange={() => {}} testID="tabs">
+        <TabsTrigger value="a" label="First" />
+        <TabsTrigger value="b" label="Second" disabled />
+      </Tabs>,
+    );
+    expect(triggerFor(getByText('Second')).props.disabled).toBe(true);
+    expect(triggerFor(getByText('First')).props.disabled).toBe(false);
   });
 
   /**
@@ -134,7 +169,7 @@ describe('Tabs', () => {
     );
 
     expect(getByTestId('tabs-indicator')).toBeTruthy();
-    expect(triggerFor(getByText('Overview')).props.accessibilityState.selected).toBe(true);
+    expect(selectedState(triggerFor(getByText('Overview')))).toBe(true);
     fireEvent.press(getByText('Activity'));
     expect(onValueChange).toHaveBeenCalledWith('activity');
   });
@@ -148,8 +183,8 @@ describe('Tabs', () => {
           <TabsTrigger value="b" label="Second" isFocused />
         </Tabs>,
       );
-      expect(triggerFor(getByText('First')).props.accessibilityState.selected).toBe(false);
-      expect(triggerFor(getByText('Second')).props.accessibilityState.selected).toBe(true);
+      expect(selectedState(triggerFor(getByText('First')))).toBe(false);
+      expect(selectedState(triggerFor(getByText('Second')))).toBe(true);
     });
 
     it('does NOT report a selection on press, because the caller navigates', () => {
@@ -294,4 +329,245 @@ describe('Tabs', () => {
     ).toThrow(/TabsTrigger must be used within a Tabs/);
     spy.mockRestore();
   });
+
+  /**
+   * A trigger set that CHANGES after the strip has already been laid out.
+   *
+   * This is the case `onLayout` alone cannot serve, and it is worth being
+   * precise about why, because the component looks correct without it. On
+   * react-native-web `onLayout` is one shared `ResizeObserver`
+   * (`react-native-web/dist/modules/useElementLayout`), so it fires for a SIZE
+   * change and never for a position-only move. Insert a tab and every trigger
+   * after it slides right without one of them re-reporting; the underline stays
+   * on the stale numbers, one tab to the left of the tab that is actually
+   * showing. Measured on production `mention.earth`, where a profile's lane tab
+   * arrives from a separate query after first paint: `/@nate/boosts` underlined
+   * "Likes".
+   *
+   * Every test below therefore reports layout for the changed triggers ONLY —
+   * modelling exactly what the platform does — and asserts the underline anyway.
+   * Reporting layout for all of them would hide the bug completely.
+   */
+  describe('a trigger set that changes after first layout', () => {
+    interface Box {
+      x: number;
+      width: number;
+    }
+
+    /**
+     * Which tab an element belongs to, or `undefined` if it is not a trigger.
+     *
+     * The element the strip measures is a trigger's animated wrapper, which is
+     * anonymous; the tab it stands for is named by the Pressable inside it.
+     */
+    function tabLabelOf(element: unknown): string | undefined {
+      // `createNodeMock` is handed a plain `{type, props}` pair rather than a
+      // real element — `React.isValidElement` is false for it — so the outer
+      // hop is narrowed by hand. The CHILD is a genuine element.
+      if (typeof element !== 'object' || element === null || !('props' in element)) {
+        return undefined;
+      }
+      const props = element.props;
+      if (typeof props !== 'object' || props === null || !('children' in props)) {
+        return undefined;
+      }
+      const child = props.children;
+      if (
+        !React.isValidElement<{ accessibilityRole?: string; accessibilityLabel?: string }>(
+          child,
+        )
+      ) {
+        return undefined;
+      }
+      if (child.props.accessibilityRole !== 'tab') return undefined;
+      return child.props.accessibilityLabel;
+    }
+
+    /**
+     * Stand in for a host view.
+     *
+     * react-test-renderer hands `null` to every host ref unless a
+     * `createNodeMock` is supplied, so without this a trigger has no node to
+     * measure and the strip is back to trusting `onLayout` — which is the
+     * behaviour under test, not a background detail. Geometry is read from a
+     * live table so the test can move the tabs between renders, exactly as a
+     * reflow would.
+     */
+    function nodeMockFor(geometry: Map<string, Box>) {
+      return (element: React.ReactElement): unknown => {
+        const label = tabLabelOf(element);
+        if (label === undefined) return {};
+        return {
+          measure: (
+            report: (x: number, y: number, width: number, height: number) => void,
+          ) => {
+            const box = geometry.get(label);
+            if (box) report(box.x, 0, box.width, 40);
+          },
+        };
+      };
+    }
+
+    function mountStrip(tabs: string[], focused: string, geometry: Map<string, Box>) {
+      const dragRef = React.createRef<TabsDragController>();
+      const tree = (next: { tabs: string[]; focused: string }) => (
+        <BloomThemeProvider mode="light" colorPreset="teal">
+          <Tabs testID="tabs" ref={dragRef} hasSelection>
+            {next.tabs.map((tab) => (
+              <TabsTrigger
+                key={tab}
+                value={tab}
+                label={tab}
+                isFocused={tab === next.focused}
+              />
+            ))}
+          </Tabs>
+        </BloomThemeProvider>
+      );
+      const utils = render(tree({ tabs, focused }), {
+        createNodeMock: nodeMockFor(geometry),
+      });
+
+      /** Fire the `onLayout` a trigger's own node would fire. */
+      const reportLayout = (label: string) => {
+        const box = geometry.get(label);
+        if (!box) throw new Error(`no geometry for "${label}"`);
+        let node: ReactTestInstance | null = triggerFor(utils.getByText(label));
+        while (node && node.props?.onLayout === undefined) node = node.parent;
+        if (!node) throw new Error(`no onLayout ancestor for "${label}"`);
+        fireEvent(node, 'layout', { nativeEvent: { layout: box } });
+      };
+
+      /**
+       * Let the measurement pass run and re-render so the mapper is evaluated
+       * against the shared values it wrote — the reanimated mock computes
+       * `useAnimatedStyle` at render time, so nothing written from a callback is
+       * visible in the rendered style until something renders again.
+       */
+      const settle = async (next?: { tabs: string[]; focused: string }) => {
+        await act(async () => {
+          utils.rerender(tree(next ?? { tabs, focused }));
+        });
+        await act(async () => {
+          utils.rerender(tree(next ?? { tabs, focused }));
+        });
+      };
+
+      const indicator = () => {
+        const style = flattenStyle(utils.getByTestId('tabs-indicator').props.style);
+        const transform = style.transform as { translateX?: number }[] | undefined;
+        return {
+          x: transform?.[0]?.translateX,
+          width: style.width,
+        };
+      };
+
+      return { ...utils, dragRef, reportLayout, settle, indicator };
+    }
+
+    it('follows the active tab when one is INSERTED before it', async () => {
+      const geometry = new Map<string, Box>([
+        ['posts', { x: 0, width: 80 }],
+        ['likes', { x: 80, width: 80 }],
+        ['boosts', { x: 160, width: 80 }],
+      ]);
+      const bar = mountStrip(['posts', 'likes', 'boosts'], 'boosts', geometry);
+      for (const tab of ['posts', 'likes', 'boosts']) bar.reportLayout(tab);
+      await bar.settle();
+      expect(bar.indicator()).toEqual({ x: 160, width: 80 });
+
+      // The lane tab lands, and everything after it slides right by its width.
+      geometry.set('lane', { x: 0, width: 100 });
+      geometry.set('posts', { x: 100, width: 80 });
+      geometry.set('likes', { x: 180, width: 80 });
+      geometry.set('boosts', { x: 260, width: 80 });
+      await bar.settle({ tabs: ['lane', 'posts', 'likes', 'boosts'], focused: 'boosts' });
+      // Only the NEW node is newly observed, so only it reports.
+      bar.reportLayout('lane');
+      await bar.settle({ tabs: ['lane', 'posts', 'likes', 'boosts'], focused: 'boosts' });
+
+      expect(bar.indicator()).toEqual({ x: 260, width: 80 });
+    });
+
+    it('follows the active tab when one is REMOVED before it', async () => {
+      const geometry = new Map<string, Box>([
+        ['lane', { x: 0, width: 100 }],
+        ['posts', { x: 100, width: 80 }],
+        ['boosts', { x: 180, width: 80 }],
+      ]);
+      const bar = mountStrip(['lane', 'posts', 'boosts'], 'boosts', geometry);
+      for (const tab of ['lane', 'posts', 'boosts']) bar.reportLayout(tab);
+      await bar.settle();
+      expect(bar.indicator()).toEqual({ x: 180, width: 80 });
+
+      geometry.set('posts', { x: 0, width: 80 });
+      geometry.set('boosts', { x: 80, width: 80 });
+      // Nothing resized and the removed node is gone, so NOTHING reports here.
+      await bar.settle({ tabs: ['posts', 'boosts'], focused: 'boosts' });
+
+      expect(bar.indicator()).toEqual({ x: 80, width: 80 });
+    });
+
+    it('follows the active tab when the set is REORDERED', async () => {
+      const geometry = new Map<string, Box>([
+        ['posts', { x: 0, width: 80 }],
+        ['likes', { x: 80, width: 80 }],
+        ['lane', { x: 160, width: 100 }],
+      ]);
+      const bar = mountStrip(['posts', 'likes', 'lane'], 'lane', geometry);
+      for (const tab of ['posts', 'likes', 'lane']) bar.reportLayout(tab);
+      await bar.settle();
+      expect(bar.indicator()).toEqual({ x: 160, width: 100 });
+
+      // Same tabs, same sizes, new order — the case no size-change notification
+      // can ever report, on either platform.
+      geometry.set('lane', { x: 0, width: 100 });
+      geometry.set('posts', { x: 100, width: 80 });
+      geometry.set('likes', { x: 180, width: 80 });
+      await bar.settle({ tabs: ['lane', 'posts', 'likes'], focused: 'lane' });
+
+      expect(bar.indicator()).toEqual({ x: 0, width: 100 });
+    });
+
+    it('forgets a removed tab, so a swipe cannot commit to one that is gone', async () => {
+      const geometry = new Map<string, Box>([
+        ['posts', { x: 0, width: 80 }],
+        ['likes', { x: 80, width: 80 }],
+        ['lane', { x: 160, width: 100 }],
+      ]);
+      const bar = mountStrip(['posts', 'likes', 'lane'], 'likes', geometry);
+      for (const tab of ['posts', 'likes', 'lane']) bar.reportLayout(tab);
+      await bar.settle();
+      // Dragging left reveals the tab to the RIGHT, so this commits `lane`.
+      expect(bar.dragRef.current?.drag(-1000)).toBe('lane');
+
+      await bar.settle({ tabs: ['posts', 'likes'], focused: 'likes' });
+
+      // `likes` is now last. A phantom `lane` left behind in the geometry would
+      // still be found here, and releasing would navigate to a tab that is not
+      // on screen.
+      expect(bar.dragRef.current?.drag(-1000)).toBeNull();
+    });
+
+    it('ignores a zero measurement, which means "not laid out" and not "empty"', async () => {
+      const geometry = new Map<string, Box>([
+        ['posts', { x: 0, width: 80 }],
+        ['likes', { x: 80, width: 80 }],
+      ]);
+      const bar = mountStrip(['posts', 'likes'], 'likes', geometry);
+      for (const tab of ['posts', 'likes']) bar.reportLayout(tab);
+      await bar.settle();
+      expect(bar.indicator()).toEqual({ x: 80, width: 80 });
+
+      // What a `display: none` ancestor reports on web. A trigger always
+      // carries horizontal padding, so it can never genuinely be zero-wide —
+      // taking this at face value would collapse the underline and lose the
+      // real geometry it has to come back to.
+      geometry.set('posts', { x: 0, width: 0 });
+      geometry.set('likes', { x: 0, width: 0 });
+      await bar.settle();
+
+      expect(bar.indicator()).toEqual({ x: 80, width: 80 });
+    });
+  });
 });

package/src/__tests__/theme.test.ts

@@ -90,9 +90,10 @@ describe('Theme system', () => {
     });
 
     it('defaults to teal for unknown hex values', () => {
-      expect(hexToAppColorName('#000000')).toBe('teal');
       expect(hexToAppColorName('#ffffff')).toBe('teal');
       expect(hexToAppColorName('#123456')).toBe('teal');
+      // '#000000' is no longer unknown — it is the `mono` preset's seed.
+      expect(hexToAppColorName('#000000')).toBe('mono');
     });
   });
 

package/src/tabs/Tabs.tsx

@@ -40,6 +40,18 @@ import type { TabsProps, TabsTriggerProps, TabsContentProps, TabsVariant } from
 
 type TriggerLayout = Pick<LayoutRectangle, 'x' | 'width'>;
 
+/**
+ * Re-read ONE trigger's geometry from the platform and report it back.
+ *
+ * A callback rather than a return value because measuring is asynchronous on
+ * both platforms: react-native-web defers to a `setTimeout(0)` inside
+ * `UIManager.measure`, and native hops to the UI thread. Each trigger keeps its
+ * own host ref and hands the strip this instead, so the registry says exactly
+ * what it needs — a position on demand — and nothing about what a trigger
+ * renders.
+ */
+type TriggerMeasure = (report: (layout: TriggerLayout) => void) => void;
+
 /**
  * Underline travel. The same spring the floating `TabBar` highlight uses, so the
  * two strips read as one motion language; stated here rather than imported
@@ -48,7 +60,7 @@ type TriggerLayout = Pick<LayoutRectangle, 'x' | 'width'>;
  */
 const SLIDE_SPRING = { duration: 420, dampingRatio: 0.82 };
 
-/** Visibility, not travel — see {@link TabsContextValue.indicatorOpacity}. */
+/** Visibility, not travel — the underline fades, it does not slide, in and out. */
 const HIGHLIGHT_FADE = { duration: 160 };
 
 /**
@@ -84,7 +96,13 @@ interface TabsContextValue {
   onValueChange: ((value: string) => void) | undefined;
   variant: TabsVariant;
   fullWidth: boolean;
-  /** A trigger reports its measured position so the shared underline can track it. */
+  /**
+   * A trigger hands the strip a way to RE-READ its own geometry, and takes it
+   * back on unmount. See `remeasureTriggers` for why the strip cannot simply
+   * keep whatever `onLayout` last reported.
+   */
+  registerTrigger: (value: string, measure: TriggerMeasure) => () => void;
+  /** A trigger reports the geometry its own `onLayout` just handed it. */
   reportTriggerLayout: (value: string, layout: TriggerLayout) => void;
   /** A trigger reports that the ROUTER considers it focused. */
   reportFocused: (value: string) => void;
@@ -173,6 +191,11 @@ const TabsBarComponent = forwardRef<TabsDragController, TabsProps>(function Tabs
   const dragWidthDelta = useSharedValue(0);
 
   const triggerLayoutsRef = useRef<Record<string, TriggerLayout>>({});
+  // How to ask each trigger where it is NOW, keyed by value. Registration order
+  // carries no meaning — everything that consumes the geometry orders itself by
+  // measured `x`, which is the only ordering that survives a reorder.
+  const triggerMeasuresRef = useRef(new Map<string, TriggerMeasure>());
+  const remeasureScheduledRef = useRef(false);
   const indicatorPlacedRef = useRef(false);
   const scrollRef = useRef<ScrollView>(null);
   const viewportWidthRef = useRef(0);
@@ -190,9 +213,16 @@ const TabsBarComponent = forwardRef<TabsDragController, TabsProps>(function Tabs
         indicatorX.value = target.x;
         indicatorWidth.value = target.width;
       }
+      // Reveal only while something IS selected. Geometry keeps arriving while
+      // a non-tab sibling route is showing — the measurement pass below is
+      // precisely what makes it arrive — and fading the underline back in there
+      // would re-assert a tab the reader has left. Read from the closure rather
+      // than a ref: a ref written in an effect is still stale at this point,
+      // because a child's effect runs before its parent's.
+      if (!hasSelection) return;
       indicatorOpacity.value = withTiming(1, HIGHLIGHT_FADE);
     },
-    [indicatorX, indicatorWidth, indicatorOpacity],
+    [indicatorX, indicatorWidth, indicatorOpacity, hasSelection],
   );
 
   // Keep the active tab in view when the strip overflows its viewport. Centring
@@ -222,18 +252,99 @@ const TabsBarComponent = forwardRef<TabsDragController, TabsProps>(function Tabs
     [moveIndicator, revealTrigger],
   );
 
-  const reportTriggerLayout = useCallback(
+  /**
+   * Record where a trigger is, from whichever source measured it, and keep the
+   * underline glued to it.
+   *
+   * Placement here never animates: the tab did not become SELECTED, it MOVED,
+   * and it moved instantly because nothing animates a strip's reflow. Sliding
+   * the underline across would read as a selection change that never happened.
+   */
+  const applyTriggerLayout = useCallback(
     (tabValue: string, layout: TriggerLayout) => {
+      const previous = triggerLayoutsRef.current[tabValue];
+      // Unchanged geometry must be a no-op, not a re-place: a measurement pass
+      // runs after every render, and re-placing would cancel a selection slide
+      // mid-flight for no reason.
+      if (previous !== undefined && previous.x === layout.x && previous.width === layout.width) {
+        return;
+      }
       triggerLayoutsRef.current[tabValue] = layout;
+      if (tabValue !== selectedValueRef.current) return;
+      moveIndicator(layout, false);
+      revealTrigger(layout, false);
+      indicatorPlacedRef.current = true;
+    },
+    [moveIndicator, revealTrigger],
+  );
+
+  /**
+   * Re-read EVERY trigger's position from the platform.
+   *
+   * This exists because `onLayout` cannot be trusted to report a MOVE. On
+   * react-native-web it is backed by a single `ResizeObserver`
+   * (`modules/useElementLayout`), which fires for a SIZE change and never for a
+   * position-only one — so a trigger inserted, removed or reordered after first
+   * layout shifts every trigger after it while not one of them re-reports, and
+   * the underline stays where the stale numbers put it: silently, one tab off,
+   * only on the first paint after an async tab list lands. A tab whose own
+   * width changes has the same effect on its neighbours.
+   *
+   * So `onLayout` is demoted to a change SIGNAL and the geometry is read back
+   * explicitly, through the `measure` both platforms put on a host view ref. It
+   * answers in the view's PARENT coordinate space, which is the space the
+   * underline is positioned in and the same one `onLayout` reports — the two
+   * sources cannot disagree about what they mean.
+   */
+  const remeasureTriggers = useCallback(() => {
+    for (const [tabValue, measure] of triggerMeasuresRef.current) {
+      measure((layout) => {
+        // A strip that is mounted but not laid out — a `display: none` ancestor
+        // on web, an unmeasured subtree on native — measures as zero, and a
+        // trigger cannot genuinely be zero-wide (it always carries horizontal
+        // padding). Recording that would collapse the underline and throw away
+        // the real geometry, so the last known position stands until it is on
+        // screen again.
+        if (layout.width <= 0) return;
+        applyTriggerLayout(tabValue, layout);
+      });
+    }
+  }, [applyTriggerLayout]);
+
+  const scheduleRemeasure = useCallback(() => {
+    // One pass per turn, however many signals arrive: a mount registers N
+    // triggers and reports N layouts, which is N+1 reasons to measure the same
+    // frame. A microtask, so the pass is queued before the browser paints the
+    // frame the change landed in.
+    if (remeasureScheduledRef.current) return;
+    remeasureScheduledRef.current = true;
+    queueMicrotask(() => {
+      remeasureScheduledRef.current = false;
+      remeasureTriggers();
+    });
+  }, [remeasureTriggers]);
+
+  const registerTrigger = useCallback((tabValue: string, measure: TriggerMeasure) => {
+    triggerMeasuresRef.current.set(tabValue, measure);
+    return () => {
+      triggerMeasuresRef.current.delete(tabValue);
+      // A tab that is gone must not keep a position in the geometry the drag
+      // controller orders itself by, or a swipe can commit to a trigger that is
+      // no longer on screen.
+      delete triggerLayoutsRef.current[tabValue];
+    };
+  }, []);
+
+  const reportTriggerLayout = useCallback(
+    (tabValue: string, layout: TriggerLayout) => {
       // Snap onto the active trigger the moment it is first measured (mount), or
       // when its size changes — never slide in from the origin.
-      if (tabValue === selectedValueRef.current) {
-        moveIndicator(layout, false);
-        revealTrigger(layout, false);
-        indicatorPlacedRef.current = true;
-      }
+      applyTriggerLayout(tabValue, layout);
+      // One trigger changing size moves every trigger after it, and not one of
+      // them will say so.
+      scheduleRemeasure();
     },
-    [moveIndicator, revealTrigger],
+    [applyTriggerLayout, scheduleRemeasure],
   );
 
   const reportFocused = useCallback(
@@ -263,6 +374,16 @@ const TabsBarComponent = forwardRef<TabsDragController, TabsProps>(function Tabs
     indicatorOpacity.value = withTiming(0, HIGHLIGHT_FADE);
   }, [hasSelection, indicatorOpacity]);
 
+  // Every render of the strip is a render in which its contents may have MOVED:
+  // a trigger inserted, removed or reordered, or one re-rendered at a new size.
+  // Unconditional on purpose, rather than keyed on a signature of `children` —
+  // any such signature has to be built from React keys or child props, both of
+  // which the caller controls and neither of which is obliged to change on a
+  // reorder. A pass writes nothing when nothing moved, so being wrong in this
+  // direction costs a handful of reads and being wrong in the other direction
+  // is the bug.
+  useEffect(scheduleRemeasure);
+
   useImperativeHandle(
     dragRef,
     (): TabsDragController => ({
@@ -327,10 +448,19 @@ const TabsBarComponent = forwardRef<TabsDragController, TabsProps>(function Tabs
       onValueChange,
       variant,
       fullWidth,
+      registerTrigger,
       reportTriggerLayout,
       reportFocused,
     }),
-    [value, onValueChange, variant, fullWidth, reportTriggerLayout, reportFocused],
+    [
+      value,
+      onValueChange,
+      variant,
+      fullWidth,
+      registerTrigger,
+      reportTriggerLayout,
+      reportFocused,
+    ],
   );
 
   const containerStyle = useMemo((): ViewStyle => {
@@ -446,6 +576,7 @@ const TabComponent: React.FC<TabsTriggerProps> = ({
     onValueChange,
     variant,
     fullWidth,
+    registerTrigger,
     reportTriggerLayout,
     reportFocused,
   } = useTabsContext('TabsTrigger');
@@ -456,6 +587,24 @@ const TabComponent: React.FC<TabsTriggerProps> = ({
   const resolvedCount = count ?? 0;
   const showCount = resolvedCount > 0;
 
+  // The trigger's own host view. It stays here rather than in the strip because
+  // the strip has no way to reach a child it did not create — it receives them
+  // as `children` — and because a trigger is the only thing that knows its own
+  // value, which is what the geometry has to be keyed by.
+  const nodeRef = useRef<View | null>(null);
+  const measureSelf = useCallback<TriggerMeasure>((report) => {
+    nodeRef.current?.measure((x, _y, width) => {
+      report({ x, width });
+    });
+  }, []);
+
+  // Registration IS the insertion/removal signal the strip acts on, so it must
+  // outlive nothing: the cleanup drops both the measure hook and the geometry.
+  useEffect(
+    () => registerTrigger(value, measureSelf),
+    [registerTrigger, value, measureSelf],
+  );
+
   // FOCUS-DRIVEN path only. This covers programmatic navigation too — a deep
   // link, a browser Back, a back gesture — because nothing here asks HOW the
   // change happened: the trigger simply re-renders focused and the underline
@@ -528,6 +677,7 @@ const TabComponent: React.FC<TabsTriggerProps> = ({
 
   return (
     <RNAnimated.View
+      ref={nodeRef}
       onLayout={(e) => {
         const { x, width } = e.nativeEvent.layout;
         reportTriggerLayout(value, { x, width });
@@ -542,7 +692,17 @@ const TabComponent: React.FC<TabsTriggerProps> = ({
         disabled={disabled}
         accessibilityRole="tab"
         accessibilityLabel={showCount ? `${label}, ${resolvedCount}` : label}
-        accessibilityState={{ selected: isSelected, disabled }}
+        // `aria-selected`, and NOT a web-only spelling of `accessibilityState`.
+        // react-native-web's `createDOMProps` reads `aria-selected` (or the
+        // deprecated `accessibilitySelected`) and does not look at
+        // `accessibilityState` at all, so a strip that set only the latter
+        // announced no selection on web at all — every tab equally current.
+        // React Native's own `Pressable` folds `aria-selected` back into
+        // `accessibilityState.selected`, so this one prop serves both platforms
+        // and there is no second place for the answer to disagree. `disabled`
+        // needs no counterpart: both Pressables already derive that state from
+        // the `disabled` prop above.
+        aria-selected={isSelected}
       >
         {icon}
         <Text style={[labelStyle, textStyle]}>{label}</Text>