fix(core): reveal a half-visible overflow menu trigger, not just tabs

The strip's focus reveal looked for [data-tab-value], so the TabMenu
trigger -- the strip's other roving stop -- was left out. Chrome scrolls
a focused element into view only when it is entirely outside the
scrollport, so arrowing onto a trigger that straddles the edge left it
cut off with nothing to finish the scroll: measured in Chromium at a
200px strip, the trigger stayed 21px outside the box with its focus ring
running off the edge.

Author: cixzhang

packages/core/src/TabList/TabList.test.tsx

@@ -1153,6 +1153,35 @@ describe('TabList overflow (scroll)', () => {
     expect(scrollBy.mock.calls[0][0].left).toBeCloseTo(40);
   });
 
+  it('reveals a half-visible overflow menu trigger too, not just tabs', () => {
+    const {container} = render(
+      <TabList value="a" onChange={() => {}}>
+        <Tab value="a" label="Alpha" />
+        <Tab value="b" label="Beta" />
+        <TabMenu label="More" options={[{value: 'c', label: 'Gamma'}]} />
+      </TabList>,
+    );
+    const strip = container.querySelector<HTMLElement>(STRIP);
+    if (!strip) {
+      throw new Error('no tab strip');
+    }
+    const scrollBy = vi.fn();
+    strip.scrollBy = scrollBy;
+    strip.getBoundingClientRect = () =>
+      ({left: 0, right: 300, width: 300}) as DOMRect;
+    const trigger = strip.querySelector<HTMLElement>('[data-tab-menu]');
+    if (!trigger) {
+      throw new Error('no menu trigger');
+    }
+    trigger.getBoundingClientRect = () =>
+      ({left: 260, right: 340, width: 80}) as DOMRect;
+
+    fireEvent.focus(trigger, {bubbles: true});
+
+    expect(scrollBy).toHaveBeenCalledTimes(1);
+    expect(scrollBy.mock.calls[0][0].left).toBeCloseTo(40);
+  });
+
   it('does not hand focus to an arrow, which is hidden from assistive tech', () => {
     const {container, strip} = renderStrip();
     fakeScrollBox(strip, {scrollWidth: 600, clientWidth: 300});

packages/core/src/TabList/TabList.tsx

@@ -358,14 +358,14 @@ export function TabList({
     [hasScroll, scrollRef],
   );
 
-  const revealTab = useCallback(
-    (tab: HTMLElement | null) => {
+  const revealStop = useCallback(
+    (stop: HTMLElement | null) => {
       const strip = stripRef.current;
-      if (!hasScroll || !strip || !tab) {
+      if (!hasScroll || !strip || !stop) {
         return;
       }
       const stripBox = strip.getBoundingClientRect();
-      const tabBox = tab.getBoundingClientRect();
+      const tabBox = stop.getBoundingClientRect();
       const inset = parseFloat(getComputedStyle(strip).scrollPaddingLeft) || 0;
       const pastEnd = tabBox.right - (stripBox.right - inset);
       const pastStart = tabBox.left - (stripBox.left + inset);
@@ -384,12 +384,12 @@ export function TabList({
     if (!strip) {
       return;
     }
-    revealTab(
+    revealStop(
       Array.from(strip.querySelectorAll<HTMLElement>('[data-tab-value]')).find(
         el => el.dataset.tabValue === value,
       ) ?? null,
     );
-  }, [revealTab, value]);
+  }, [revealStop, value]);
 
   // The tab you are on has to be visible. Selection can move without focus —
   // on mount, or when the host sets `value` itself — and neither scrolls the
@@ -460,12 +460,12 @@ export function TabList({
       }
       onHintFocus(e);
       handleFocus(e);
-      // The browser scrolls a focused tab into view only when it is entirely
-      // outside the scrollport, so arrowing onto a half-visible tab leaves it
-      // cut off under the fade. Finish the job it started.
-      revealTab(e.target.closest('[data-tab-value]'));
+      // The browser scrolls a focused element into view only when it is
+      // entirely outside the scrollport, so arrowing onto a half-visible stop
+      // leaves it cut off under the fade. Finish the job it started.
+      revealStop(e.target.closest(TAB_STOP_SELECTOR));
     },
-    [onFocusProp, onHintFocus, handleFocus, revealTab],
+    [onFocusProp, onHintFocus, handleFocus, revealStop],
   );
 
   const handleRootBlur = useCallback(