@multiplatform.one/components 6.7.0 → 7.0.0

package/src/SkipLink/index.tsx

@@ -1,8 +1,12 @@
-import { useState, type CSSProperties, type ReactNode, type RefObject } from "react";
+import { type CSSProperties, type MouseEvent, type ReactNode, type RefObject } from "react";
 import { zIndex } from "@multiplatform.one/forms";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import {
+  FOCUS_RING_MIN_WIDTH,
+  FOCUS_VISIBLE_RING,
+  useResolvedKnobs,
+} from "@multiplatform.one/theme";
 import type { GetProps } from "tamagui";
-import { SizableText, YStack, isWeb, styled, useTheme } from "tamagui";
+import { SizableText, YStack, getTokenValue, isWeb, styled } from "tamagui";
 
 // ── Types ─────────────────────────────────────────────────────
 
@@ -26,50 +30,105 @@ const SkipLinkSurface = styled(YStack, {
   paddingHorizontal: "$3.5",
 });
 
-// The standard visually-hidden-but-focusable recipe on a REAL anchor element
-// (react-native-web keeps `tag` as an attribute, so a genuine <a> is the only
-// way to get native link semantics + free Enter activation).
-const hiddenStyle: CSSProperties = {
-  position: "absolute",
-  top: 0,
-  insetInlineStart: 0,
-  width: 1,
-  height: 1,
-  margin: -1,
-  padding: 0,
-  overflow: "hidden",
-  clip: "rect(0 0 0 0)",
-  whiteSpace: "nowrap",
-  border: 0,
-  // Sheet tier (Axiom 14): the revealed chip must sit above page content
-  // and sticky chrome when the first Tab lands on it.
-  zIndex: zIndex.sheet,
-  textDecoration: "none",
-};
+const SKIP_LINK_STYLE_ID = "mp-skip-link-css";
+const SKIP_LINK_TARGET_CLASS = "mp-skip-link-target";
 
-const revealedStyle: CSSProperties = {
-  position: "fixed",
-  top: 12,
-  insetInlineStart: 12,
-  width: "auto",
-  height: "auto",
-  margin: 0,
-  padding: 0,
-  overflow: "visible",
-  clip: "auto",
-  zIndex: zIndex.sheet,
-  textDecoration: "none",
-};
+/**
+ * GOV.UK / Primer visually-hidden-until-focused, plus LC-71 ring on the `<a>`.
+ *
+ * Reveal is CSS-first (`:focus` / `:focus-visible`) so the chip paints the
+ * same frame the keystroke lands — no React `focused` lag. The ring is
+ * `:focus-visible` only (keyboard-origin; mouse click paints none). Offset
+ * is +2px outside: this chip is a floating overlay, not a clipped composite.
+ */
+const skipLinkCss = `.mp-skip-link {
+  position: absolute;
+  top: 0;
+  inset-inline-start: 0;
+  display: inline-block;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+  z-index: ${zIndex.sheet};
+  text-decoration: none;
+  color: inherit;
+}
+.mp-skip-link:focus,
+.mp-skip-link:focus-visible {
+  position: fixed;
+  top: 12px;
+  inset-inline-start: 12px;
+  width: auto;
+  height: auto;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  clip-path: none;
+  white-space: nowrap;
+  z-index: ${zIndex.sheet};
+  text-decoration: none;
+  border-radius: var(--mp-skip-link-radius, 0px);
+}
+.mp-skip-link:focus-visible {
+  outline: ${FOCUS_RING_MIN_WIDTH}px ${FOCUS_VISIBLE_RING.outlineStyle} var(--outlineColor, var(--c-outlineColor, CanvasText));
+  outline-offset: ${FOCUS_VISIBLE_RING.outlineOffset}px;
+}
+.mp-skip-link:focus:not(:focus-visible) {
+  outline: none;
+}
+.${SKIP_LINK_TARGET_CLASS}:focus {
+  outline: none;
+}`;
+
+function ensureSkipLinkStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(SKIP_LINK_STYLE_ID)) return;
+  const tag = document.createElement("style");
+  tag.id = SKIP_LINK_STYLE_ID;
+  tag.textContent = skipLinkCss;
+  document.head.appendChild(tag);
+}
+
+function resolveRadiusPx(token: string | number | undefined): number | undefined {
+  if (typeof token === "number" && Number.isFinite(token)) return token;
+  if (typeof token !== "string" || token.length === 0) return undefined;
+  try {
+    const value = getTokenValue(token as Parameters<typeof getTokenValue>[0], "radius");
+    return typeof value === "number" && Number.isFinite(value) ? value : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+function focusSkipTarget(target: HTMLElement) {
+  const hadTabIndex = target.hasAttribute("tabindex");
+  if (!hadTabIndex) {
+    target.setAttribute("tabindex", "-1");
+  }
+  target.classList.add(SKIP_LINK_TARGET_CLASS);
+  const cleanup = () => {
+    if (!hadTabIndex) target.removeAttribute("tabindex");
+    target.classList.remove(SKIP_LINK_TARGET_CLASS);
+    target.removeEventListener("blur", cleanup);
+  };
+  target.addEventListener("blur", cleanup);
+  target.focus();
+}
 
 // ── SkipLink Component ────────────────────────────────────────
 
 /**
- * "Skip to content" link for keyboard users: invisible until it receives
- * focus (first Tab on the page), then revealed fixed top-start on a themed
- * elevated surface. Activating it (Enter/click) moves focus and scroll to
- * the target element.
- *
- * Renders nothing on native — there is no Tab-order to skip.
+ * "Skip to content" link for keyboard users: visually hidden until it
+ * receives focus (first Tab on the page), then revealed fixed top-start on
+ * a themed elevated surface. Activating it (Enter/click) moves focus to the
+ * target — GOV.UK's VoiceOver pattern: temporary `tabindex="-1"`, stripped
+ * on blur, no ring on the landmark. Renders nothing on native.
  */
 export function SkipLink({
   targetId,
@@ -78,51 +137,41 @@ export function SkipLink({
   onSkip,
 }: SkipLinkProps) {
   const { knobProps } = useResolvedKnobs({ component: "SkipLink" });
-  const theme = useTheme();
-  const [focused, setFocused] = useState(false);
   if (!isWeb) return null;
+  ensureSkipLinkStyles();
 
-  const handleActivate = (event: { preventDefault?: () => void }) => {
-    event?.preventDefault?.();
+  const radiusPx = resolveRadiusPx(knobProps.elevatedSurface.borderRadius);
+  const href = targetId ? `#${targetId}` : "#";
+
+  const handleActivate = (event: MouseEvent<HTMLAnchorElement>) => {
     let target: HTMLElement | null = null;
     if (targetRef?.current) {
+      event.preventDefault();
       const current = targetRef.current;
       if (typeof (current as { focus?: () => void }).focus === "function") {
         target = current as HTMLElement;
       }
     } else if (targetId && typeof document !== "undefined") {
       target = document.getElementById(targetId);
+    } else {
+      event.preventDefault();
     }
-    if (target) {
-      // Containers aren't focusable by default; make this one a valid
-      // programmatic focus target without adding it to the Tab order.
-      if (target instanceof HTMLElement && !target.hasAttribute("tabindex")) {
-        target.setAttribute("tabindex", "-1");
-      }
-      target.focus?.();
-      if (target instanceof HTMLElement) {
-        target.scrollIntoView?.({ block: "start" });
-      }
-    }
+    if (target) focusSkipTarget(target);
     onSkip?.(target instanceof HTMLElement ? target : null);
   };
 
   return (
     <a
-      href={targetId ? `#${targetId}` : "#"}
-      style={{
-        ...(focused ? revealedStyle : hiddenStyle),
-        // Focus ring on the revealed chip: the theme's $outlineColor token
-        // (DG-A11Y-01, ≥3:1 vs page surfaces). The previous color8 measured
-        // 1.89:1 on the light page — an invisible ring on the one control
-        // whose entire job is keyboard visibility.
-        outline: focused
-          ? `2px solid ${theme.outlineColor?.get() ?? theme.color8?.get() ?? "currentColor"}`
-          : "none",
-        outlineOffset: 2,
-      }}
-      onFocus={() => setFocused(true)}
-      onBlur={() => setFocused(false)}
+      className="mp-skip-link"
+      href={href}
+      style={
+        typeof radiusPx === "number"
+          ? ({
+              borderRadius: radiusPx,
+              ["--mp-skip-link-radius"]: `${radiusPx}px`,
+            } as CSSProperties)
+          : undefined
+      }
       onClick={handleActivate}
     >
       <SkipLinkSurface

package/src/Tabs/Tabs.spec.tsx

@@ -67,4 +67,69 @@ describe("Tabs", () => {
     expect(screen.getByText("Panel two")).toBeInTheDocument();
     expect(screen.getByText("Panel one")).toBeInTheDocument();
   });
+
+  it("LC-72: underline tabs expose first/middle/last stack positions", () => {
+    renderWithProviders(<Tabs items={items} />);
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs[0]).toHaveAttribute("data-tab-position", "first");
+    expect(tabs[1]).toHaveAttribute("data-tab-position", "middle");
+    expect(tabs[2]).toHaveAttribute("data-tab-position", "last");
+  });
+
+  it("LC-71: pointer activation does not paint a keyboard ring", () => {
+    renderWithProviders(<Tabs items={items} />);
+    const two = screen.getByRole("tab", { name: "Two" });
+    fireEvent.pointerDown(two);
+    fireEvent.click(two);
+    expect(two).not.toHaveAttribute("data-kb-ring");
+    for (const tab of screen.getAllByRole("tab")) {
+      expect(tab).not.toHaveAttribute("data-kb-ring");
+    }
+  });
+
+  it("size recipes and density are independent axes", () => {
+    const { rerender } = renderWithProviders(<Tabs items={items} size="$5" />);
+    const list = screen.getByRole("tablist");
+    expect(list).toHaveAttribute("data-size-token", "$5");
+    const comfortableDensity = list.getAttribute("data-density");
+    rerender(<Tabs items={items} size="$5" compact />);
+    const compactList = screen.getByRole("tablist");
+    expect(compactList).toHaveAttribute("data-size-token", "$5");
+    expect(compactList).toHaveAttribute("data-density", "compact");
+    expect(comfortableDensity).not.toBe("compact");
+  });
+
+  it("compact density keeps the default size token (LC-76: space only)", () => {
+    renderWithProviders(<Tabs items={items} compact />);
+    const list = screen.getByRole("tablist");
+    expect(list).toHaveAttribute("data-density", "compact");
+    expect(list).toHaveAttribute("data-size-token", "$4");
+  });
+
+  it("LC-75: recipe horizontal padding paints once per tab (no double pad)", () => {
+    // jsdom cannot cascade Tamagui's class CSS, so measure via atomic
+    // classes (tags-trigger.spec idiom): exactly ONE node in each tab's
+    // subtree may carry the recipe's horizontal padding.
+    renderWithProviders(<Tabs items={items} />);
+    for (const tab of screen.getAllByRole("tab")) {
+      const padded = [tab, ...Array.from(tab.querySelectorAll("*"))].filter((el) =>
+        String((el as HTMLElement).className || "")
+          .split(" ")
+          .some((c) => c.startsWith("_pl-")),
+      );
+      expect(padded).toHaveLength(1);
+    }
+  });
+
+  it("contained list clips to the track (LC-72 CONTAINER-CLIP)", () => {
+    renderWithProviders(<Tabs items={items.slice(0, 3)} variant="contained" />);
+    const list = screen.getByRole("tablist");
+    expect(list).toHaveAttribute("data-tabs-list", "contained");
+  });
+
+  it("renders nothing when items is empty", () => {
+    const { container } = renderWithProviders(<Tabs items={[]} />);
+    expect(screen.queryByRole("tablist")).not.toBeInTheDocument();
+    expect(container.querySelector("[data-tabs-variant]")).toBeNull();
+  });
 });

package/src/Tabs/Tabs.stories.tsx

@@ -247,3 +247,35 @@ export const DisabledStates: Story = {
     </YStack>
   ),
 };
+
+export const CompactAndSize: Story = {
+  render: () => (
+    <YStack gap="$6">
+      <YStack gap="$2">
+        <Text fontSize="$2" color="$color11">
+          size=$5 (height/type from size)
+        </Text>
+        <Tabs items={baseItems.slice(0, 3)} size="$5" />
+      </YStack>
+      <YStack gap="$2">
+        <Text fontSize="$2" color="$color11">
+          size=$5 compact (density steps pad, size stays)
+        </Text>
+        <Tabs items={baseItems.slice(0, 3)} size="$5" compact />
+      </YStack>
+      <YStack gap="$2">
+        <Text fontSize="$2" color="$color11">
+          nested compact (scale down)
+        </Text>
+        <YStack
+          backgroundColor="$color3"
+          borderRadius="$4"
+          padding="$3"
+          maxWidth={420}
+        >
+          <Tabs items={baseItems.slice(0, 3)} compact variant="contained" />
+        </YStack>
+      </YStack>
+    </YStack>
+  ),
+};