ui-carousel: Fix unnecessary scroll of carousel items into view

packages/ui-carousel/src/SwiperCarousel.tsx

@@ -48,6 +48,21 @@ const SwiperCarousel = ({
   const { direction } = useLocale();
   const reducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
   const swiperRef = useRef<SwiperClass>();
+  const pointerModality = useRef(false);
+  useEffect(() => {
+    const onPointerDown = () => {
+      pointerModality.current = true;
+    };
+    const onKeyDown = () => {
+      pointerModality.current = false;
+    };
+    window.addEventListener("pointerdown", onPointerDown, true);
+    window.addEventListener("keydown", onKeyDown, true);
+    return () => {
+      window.removeEventListener("pointerdown", onPointerDown, true);
+      window.removeEventListener("keydown", onKeyDown, true);
+    };
+  }, []);
   const handleSlideFocus = useCallback(
     (e: React.FocusEvent<HTMLElement, Element>) => {
       const swiper = swiperRef.current;
@@ -57,7 +72,11 @@ const SwiperCarousel = ({
         // overflow-hidden container desyncs the view.
         swiper.el.scrollLeft = 0;
         swiper.slides.forEach((slide, i) => {
-          if (slide.contains(e.target)) {
+          if (
+            slide.contains(e.target) &&
+            !pointerModality.current &&
+            !slide.classList.contains("swiper-slide-fully-visible")
+          ) {
             swiper.activeIndex = i;
             swiper.updateSlidesClasses();
             swiper.slideTo(i);

packages/ui-carousel/stories/Carousel.stories.tsx

@@ -5,7 +5,7 @@
  */
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { Carousel } from "../src";
-import { exampleCards, linkCards } from "./cards";
+import { exampleCards, linkCards, menuCards } from "./cards";
 
 const meta = {
   title: "Carousel/Carousel",
@@ -42,6 +42,20 @@ export const LinkCards: Story = {
   },
 };
 
+/**
+ * Cards with a "…" actions menu, as the apps' project cards have. The menu
+ * trigger focuses itself on press, driving focus-follows-slide: opening a
+ * wholly visible card's menu (or tabbing to it) must not move the carousel.
+ * Most visible at narrow widths, where the carousel can be at a position
+ * that isn't the focused card's own snap point.
+ */
+export const MenuCards: Story = {
+  args: {
+    carouselItems: menuCards(12),
+    containerLabel: "Example menu cards",
+  },
+};
+
 /** Buttons off, e.g. for touch-only native platforms. */
 export const NoNavigation: Story = {
   args: {

packages/ui-carousel/stories/cards.tsx

@@ -3,7 +3,17 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { css, cx, LinkBox, LinkOverlay, LinkOverlayButton } from "@microbit/ui";
+import {
+  css,
+  cx,
+  IconButton,
+  LinkBox,
+  LinkOverlay,
+  LinkOverlayButton,
+  MenuItem,
+  MenuList,
+  MenuTrigger,
+} from "@microbit/ui";
 import { ReactElement } from "react";
 
 /**
@@ -70,6 +80,60 @@ export const exampleCards = (count: number): ReactElement[] =>
     </LinkBox>
   ));
 
+/**
+ * Cards with a "…" actions menu in the corner, like the apps' project cards.
+ * React-aria menu triggers focus themselves on press, so these exercise
+ * focus-follows-slide staying put: opening a wholly visible card's menu must
+ * not move the carousel.
+ */
+export const menuCards = (count: number): ReactElement[] =>
+  Array.from({ length: count }, (_, i) => (
+    <LinkBox key={i} className={cardStyle}>
+      <div
+        className={cx(
+          css({ height: "120px" }),
+          cardImageTints[i % cardImageTints.length],
+        )}
+      />
+      <MenuTrigger>
+        <IconButton
+          aria-label={`Card ${i + 1} actions`}
+          variant="ghost"
+          css={{
+            position: "absolute",
+            top: 1,
+            insetEnd: 1,
+            zIndex: 1,
+            fontSize: "xl",
+          }}
+        >
+          ⋮
+        </IconButton>
+        <MenuList>
+          <MenuItem onAction={() => alert(`open ${i + 1}`)}>Open</MenuItem>
+          <MenuItem onAction={() => alert(`delete ${i + 1}`)}>Delete</MenuItem>
+        </MenuList>
+      </MenuTrigger>
+      <div
+        className={css({
+          display: "flex",
+          flexDirection: "column",
+          gap: 2,
+          p: 4,
+        })}
+      >
+        <p className={css({ fontWeight: "semibold" })}>
+          <LinkOverlayButton css={{ _focusVisible: { focusRing: "outline" } }}>
+            Card {i + 1}
+          </LinkOverlayButton>
+        </p>
+        <p className={css({ color: "gray.600", fontSize: "sm" })}>
+          {descriptions[i % descriptions.length]}
+        </p>
+      </div>
+    </LinkBox>
+  ));
+
 const tintFills = ["#bee3f8", "#b2f5ea", "#e9d8fd", "#feebcb"];
 
 const tintImageSrc = (i: number): string =>