Add tooltips to fun picker

ts/components/fun/base/FunSubNav.tsx

@@ -64,6 +64,25 @@ export function FunSubNavScroller(props: FunSubNavScrollerProps): JSX.Element {
     );
   });
 
+  useEffect(() => {
+    strictAssert(outerRef.current, 'Must have scroller ref');
+    const scroller = outerRef.current;
+
+    function onWheel(event: WheelEvent) {
+      event.preventDefault();
+      scroller.scrollBy({
+        left: event.deltaX + event.deltaY,
+        behavior: 'instant',
+      });
+    }
+
+    scroller.addEventListener('wheel', onWheel, { passive: false });
+
+    return () => {
+      scroller.addEventListener('wheel', onWheel, { passive: false });
+    };
+  }, []);
+
   return (
     <div className="FunSubNav__Scroller">
       <div
@@ -203,12 +222,21 @@ function FunSubNavListBoxItemButton(props: {
 
   useEffect(() => {
     strictAssert(ref.current, 'Expected ref to be defined');
+    const element = ref.current;
+    let timer: ReturnType<typeof setTimeout>;
     if (props.isSelected) {
-      ref.current.scrollIntoView({
-        behavior: 'smooth',
-        inline: 'nearest',
-      });
+      // Needs setTimeout() for arrow key navigation to work.
+      // Might be something to do with native arrow key scroll handling.
+      timer = setTimeout(() => {
+        element.scrollIntoView({
+          behavior: 'smooth',
+          inline: 'nearest',
+        });
+      }, 1);
     }
+    return () => {
+      clearTimeout(timer);
+    };
   }, [props.isSelected]);
 
   return (
@@ -230,7 +258,7 @@ export function FunSubNavListBoxItem(
       aria-label={props.label}
       textValue={props.label}
     >
-      {({ isSelected }) => {
+      {({ isSelected, isFocusVisible }) => {
         return (
           <FunSubNavListBoxItemButton isSelected={isSelected}>
             <span className="FunSubNav__ListBoxItem__ButtonIcon">
@@ -244,6 +272,9 @@ export function FunSubNavListBoxItem(
                 transition={FunSubNavListBoxItemTransition}
               />
             )}
+            {!isSelected && isFocusVisible && (
+              <div className="FunSubNav__ListBoxItem__ButtonIndicator" />
+            )}
           </FunSubNavListBoxItemButton>
         );
       }}