{formatDisplayValue?.(draft) ?? displayValue}
diff --git a/packages/studio/src/components/nle/TimelineResizeDivider.tsx b/packages/studio/src/components/nle/TimelineResizeDivider.tsx
index fc27d7696..30a462c71 100644
--- a/packages/studio/src/components/nle/TimelineResizeDivider.tsx
+++ b/packages/studio/src/components/nle/TimelineResizeDivider.tsx
@@ -73,9 +73,9 @@ export function TimelineResizeDivider({
);
return (
- // Horizontal resize divider: 3px visible seam (h-[3px]), 8px pointer-capture
+ // Horizontal resize divider: 3px visible seam (h-[3px]), 10px pointer-capture
// zone via the absolutely-positioned inner hit area so the layout gap stays
- // at 3px while draggability is preserved over the full 8px band.
+ // at 3px while draggability is preserved over the full band.
- {/* Expanded hit zone: 8px tall, centered on the 3px seam */}
-
+ {/* Expanded hit zone, deliberately asymmetric: 4px up into the transport
+ row's vertical centring slack, the 3px seam, then 3px down into the
+ timeline card's border + toolbar padding. It stops at 10px rather than
+ the 24px WCAG 2.2 (2.5.8) target because that is all the dead space
+ there is: 28px transport buttons sit above and 28px toolbar buttons
+ below, and silently stealing their clicks is the worse bug. */}
+
{/* Visible hairline — invisible at rest, subtle wash on hover/drag/focus */}
diff --git a/packages/studio/src/components/pointerTargetSize.test.tsx b/packages/studio/src/components/pointerTargetSize.test.tsx
new file mode 100644
index 000000000..54f7519f8
--- /dev/null
+++ b/packages/studio/src/components/pointerTargetSize.test.tsx
@@ -0,0 +1,65 @@
+// @vitest-environment happy-dom
+
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { CompositionsTab } from "./sidebar/CompositionsTab";
+import { TimelineToolbar } from "./TimelineToolbar";
+
+// WCAG 2.2 (2.5.8) requires a 24x24 CSS pixel pointer target. happy-dom has no
+// CSS engine, so getBoundingClientRect() is 0x0 for everything here and the size
+// itself cannot be measured — these assert the utility classes that PRODUCE the
+// size instead, which is enough to fail if someone drops them. Real geometry
+// still needs a browser check.
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+(
+ window as unknown as { happyDOM: { settings: { disableIframePageLoading: boolean } } }
+).happyDOM.settings.disableIframePageLoading = true;
+
+let root: Root | null = null;
+
+afterEach(() => {
+ if (root) act(() => root?.unmount());
+ root = null;
+ document.body.innerHTML = "";
+});
+
+function mount(element: React.ReactNode) {
+ const host = document.createElement("div");
+ document.body.append(host);
+ root = createRoot(host);
+ act(() => root?.render(element));
+ return host;
+}
+
+describe("pointer target size (WCAG 2.5.8)", () => {
+ it("gives the timeline zoom slider a 24px box without changing its 2px track or 10px thumb", () => {
+ const host = mount(
);
+ const slider = host.querySelector
('input[aria-label="Timeline zoom"]');
+ if (!slider) throw new Error("zoom slider did not render");
+
+ expect(slider.className).toContain("h-6");
+ expect(slider.className).toContain("[&::-webkit-slider-runnable-track]:h-[2px]");
+ expect(slider.className).toContain("[&::-webkit-slider-thumb]:h-[10px]");
+ expect(slider.className).toContain("[&::-webkit-slider-thumb]:w-[10px]");
+ });
+
+ it("gives the composition card's render button a 24x24 box around its 14px glyph", () => {
+ const host = mount(
+ ,
+ );
+ const button = host.querySelector('button[aria-label="Render headline"]');
+ if (!button) throw new Error("render button did not render");
+
+ expect(button.className).toContain("h-6");
+ expect(button.className).toContain("w-6");
+ expect(button.querySelector("svg")?.getAttribute("width")).toBe("14");
+ });
+});
diff --git a/packages/studio/src/components/sidebar/CompositionsTab.tsx b/packages/studio/src/components/sidebar/CompositionsTab.tsx
index 5de9703db..96607f338 100644
--- a/packages/studio/src/components/sidebar/CompositionsTab.tsx
+++ b/packages/studio/src/components/sidebar/CompositionsTab.tsx
@@ -317,7 +317,10 @@ function CompCard({
e.stopPropagation();
onRender();
}}
- className={`flex-shrink-0 p-1 rounded transition-colors ${
+ // h-6 w-6 = the 24x24 WCAG 2.2 (2.5.8) minimum target; the 14px glyph
+ // is unchanged, only the box grows. The sibling "+" button is h-8 w-8,
+ // so the card row already has the room.
+ className={`flex h-6 w-6 flex-shrink-0 items-center justify-center rounded transition-colors ${
isRendering
? "text-neutral-600 cursor-not-allowed"
: "text-neutral-600 hover:text-studio-accent hover:bg-neutral-800"
diff --git a/packages/studio/src/player/components/TimelineClipDiamonds.tsx b/packages/studio/src/player/components/TimelineClipDiamonds.tsx
index 2f6ec31b8..a56cd789b 100644
--- a/packages/studio/src/player/components/TimelineClipDiamonds.tsx
+++ b/packages/studio/src/player/components/TimelineClipDiamonds.tsx
@@ -27,6 +27,12 @@ export type { TimelineDiamondKeyframe } from "./timelineDiamondTypes";
// stops there: at the zoom floor the gap alone left a ~7px target, which is
// neither hittable nor selectable with any accuracy. Boxes may overlap slightly
// below this width; each diamond still owns the half-gap around its own centre.
+//
+// Deliberately below the 24px WCAG 2.2 (2.5.8) minimum, under that criterion's
+// own spacing exception: at normal keyframe density the neighbour gap is under
+// 24px, so a 24px floor would make adjacent diamonds' hit boxes OVERLAP — one
+// diamond swallowing its neighbour's clicks is a worse 2.5.8 failure than a
+// small target. Do not "fix" this to 24.
const KF_MIN_HIT_W = 12;
/** A clip-% is a float division, so a raw tooltip reads `25.032499999999995%`. */
@@ -141,6 +147,10 @@ export const TimelineDiamondLane = memo(function TimelineDiamondLane({
? Math.round(clipHeightPx * 0.45)
: Math.round(LANE_H * DIAMOND_RATIO);
const centerY = beatsActive ? BEAT_BAND_H + (clipHeightPx - BEAT_BAND_H) / 2 : clipHeightPx / 2;
+ // Hit-box height only — the glyph keeps `marker.visualSize`. 24 is the WCAG 2.2
+ // (2.5.8) minimum and still fits the 28px lane. Beat-strip lanes keep the
+ // shrunken box: 24px there would reach up into the beat strip.
+ const hitHeight = beatsActive ? diamondSize : 24;
const sorted = keyframesData.keyframes
.filter((kf) => kf.percentage >= KF_MIN_PCT && kf.percentage <= KF_MAX_PCT)
.sort((a, b) => a.percentage - b.percentage);
@@ -412,7 +422,7 @@ export const TimelineDiamondLane = memo(function TimelineDiamondLane({
top: centerY,
transform: "translateY(-50%)",
width: marker.hitWidth,
- height: diamondSize,
+ height: hitHeight,
zIndex: isHighlighted ? 2 : 1,
pointerEvents: "auto",
background: "none",
diff --git a/packages/studio/src/player/components/TimelineDiamondConnectors.tsx b/packages/studio/src/player/components/TimelineDiamondConnectors.tsx
index a0689213d..6298dc62c 100644
--- a/packages/studio/src/player/components/TimelineDiamondConnectors.tsx
+++ b/packages/studio/src/player/components/TimelineDiamondConnectors.tsx
@@ -103,7 +103,10 @@ export function TimelineDiamondConnectors({
data-keyframe-ease-button=""
aria-label={`Edit ${ease} easing`}
title={`Edit ${ease} easing`}
- className="absolute flex items-center justify-center rounded opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100"
+ // A visible 24x24 badge would collide with the diamonds either
+ // side, so the WCAG 2.2 (2.5.8) target is met with a centered
+ // transparent ::before overlay; the box stays 16x16.
+ className="absolute flex items-center justify-center rounded opacity-0 transition-opacity group-hover:opacity-100 focus-visible:opacity-100 before:absolute before:left-1/2 before:top-1/2 before:h-6 before:w-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']"
style={{
left: "50%",
top: "50%",