@paul-portfolio/react 0.5.0 → 0.5.1

package/dist/Ticker.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { type ReactNode } from "react";
 type TickerProps = {
     /** Accessible name for the strip. Scroll mode renders a labelled region. */
     label: string;
@@ -7,11 +7,11 @@ type TickerProps = {
      * auto-scroll — every item stays reachable. `marquee` is a decorative,
      * aria-hidden CSS loop for pure flavour.
      */
-    mode?: 'scroll' | 'marquee';
+    mode?: "scroll" | "marquee";
     /** Which edge the strip sits on; picks the border side. */
-    edge?: 'top' | 'bottom';
+    edge?: "top" | "bottom";
     /** Which way the ambient motion travels. */
-    direction?: 'left' | 'right';
+    direction?: "left" | "right";
     /** Ambient auto-scroll speed for scroll mode, in px/sec. */
     speed?: number;
     className?: string;

package/dist/Ticker.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
-import { cx } from './cx';
-import { usePrefersReducedMotion } from './usePrefersReducedMotion';
+import { useEffect, useLayoutEffect, useRef, useState, } from "react";
+import { cx } from "./cx";
+import { usePrefersReducedMotion } from "./usePrefersReducedMotion";
 /** How long a touch keeps the strip frozen before the ambient scroll resumes. */
 const TOUCH_RESUME_MS = 4000;
 /**
@@ -11,17 +11,17 @@ const TOUCH_RESUME_MS = 4000;
  * children, so the strip stays content-agnostic.
  */
 export function Ticker(props) {
-    return props.mode === 'marquee' ? (_jsx(MarqueeTicker, { ...props })) : (_jsx(ScrollTicker, { ...props }));
+    return props.mode === "marquee" ? (_jsx(MarqueeTicker, { ...props })) : (_jsx(ScrollTicker, { ...props }));
 }
 function edgeClassFor(edge) {
-    return edge === 'top' ? 'ticker--top' : 'ticker--bottom';
+    return edge === "top" ? "ticker--top" : "ticker--bottom";
 }
 /** Decorative marquee: aria-hidden, CSS-driven, content duplicated for the loop. */
-function MarqueeTicker({ edge = 'top', direction = 'left', className, children, }) {
-    return (_jsx("div", { "aria-hidden": "true", "data-direction": direction, className: cx('ticker', 'ticker--marquee', edgeClassFor(edge), className), children: _jsxs("div", { className: "ticker__track", children: [_jsx("div", { className: "ticker__group", children: children }), _jsx("div", { className: "ticker__group", children: children })] }) }));
+function MarqueeTicker({ edge = "top", direction = "left", className, children, }) {
+    return (_jsx("div", { "aria-hidden": "true", "data-direction": direction, className: cx("ticker", "ticker--marquee", edgeClassFor(edge), className), children: _jsxs("div", { className: "ticker__track", children: [_jsx("div", { className: "ticker__group", children: children }), _jsx("div", { className: "ticker__group", children: children })] }) }));
 }
 /** Accessible scroll container with an ambient JS auto-scroll loop. */
-function ScrollTicker({ label, edge = 'top', direction = 'left', speed = 40, className, children, }) {
+function ScrollTicker({ label, edge = "top", direction = "left", speed = 40, className, children, }) {
     const reduced = usePrefersReducedMotion();
     const scrollerRef = useRef(null);
     const cloneRef = useRef(null);
@@ -32,19 +32,25 @@ function ScrollTicker({ label, edge = 'top', direction = 'left', speed = 40, cla
     useEffect(() => {
         pausedRef.current = paused;
     }, [paused]);
-    // Fallback for browsers without `inert`.
+    // Take the clone out of the tab order, but leave it clickable.
     //
-    // The clone carries `inert` in the markup, which drops its descendants from
-    // the tab order and the accessibility tree together, before first paint. This
-    // effect used to be the only mechanism, and it left a gap: an effect runs
-    // after the DOM exists, so between render and this call the duplicate held
-    // tabbable controls inside an aria-hidden container. Hiding something from
-    // assistive tech while leaving it reachable by keyboard is worse than not
-    // hiding it — the user lands on a control a screen reader insists is absent.
-    useEffect(() => {
-        if ('inert' in HTMLElement.prototype)
-            return;
-        const focusables = cloneRef.current?.querySelectorAll('a[href], button, input, select, textarea, [tabindex]');
+    // The clone used to carry `inert`, which was the right instinct aimed one
+    // notch too broadly: `inert` removes a subtree from the accessibility tree
+    // AND from the pointer. Since the loop wraps at half the scroll width,
+    // roughly half of what is on screen at any moment is the clone, so half the
+    // strip silently ignored clicks.
+    //
+    // What is actually wanted is narrower: hidden from assistive tech
+    // (`aria-hidden` on the element), not tabbable (`tabIndex = -1` here), and
+    // still interactive with a pointer. Both copies render the same children, so
+    // clicking either runs the same handler and the reader cannot tell which one
+    // they hit — which is the point.
+    //
+    // A layout effect rather than a passive one: it runs before the browser
+    // paints, so there is no frame in which the duplicate holds tabbable controls
+    // inside an aria-hidden container, which axe rates serious.
+    useLayoutEffect(() => {
+        const focusables = cloneRef.current?.querySelectorAll("a[href], button, input, select, textarea, [tabindex]");
         focusables?.forEach((el) => {
             el.tabIndex = -1;
         });
@@ -57,7 +63,7 @@ function ScrollTicker({ label, edge = 'top', direction = 'left', speed = 40, cla
         const el = scrollerRef.current;
         if (!el)
             return;
-        const dir = direction === 'left' ? 1 : -1;
+        const dir = direction === "left" ? 1 : -1;
         // Start the rightward strip one copy in, so it has somewhere to scroll back.
         if (dir < 0)
             el.scrollLeft = el.scrollWidth / 2;
@@ -87,10 +93,10 @@ function ScrollTicker({ label, edge = 'top', direction = 'left', speed = 40, cla
             clearTimeout(resumeTimer.current);
         resumeTimer.current = setTimeout(() => setPaused(false), TOUCH_RESUME_MS);
     };
-    const classes = cx('ticker', edgeClassFor(edge), className);
+    const classes = cx("ticker", edgeClassFor(edge), className);
     // Reduced motion: a plain, single-copy scrollable row. No clone, no loop.
     if (reduced) {
         return (_jsx("section", { "aria-label": label, className: classes, children: _jsx("div", { className: "ticker__group", children: children }) }));
     }
-    return (_jsx("section", { ref: scrollerRef, "aria-label": label, "data-direction": direction, className: classes, onMouseEnter: () => setPaused(true), onMouseLeave: () => setPaused(false), onTouchStart: freezeForTouch, children: _jsxs("div", { className: "ticker__track", "data-paused": paused || undefined, children: [_jsx("div", { className: "ticker__group", children: children }), _jsx("div", { ref: cloneRef, "aria-hidden": "true", inert: true, className: "ticker__group", children: children })] }) }));
+    return (_jsx("section", { ref: scrollerRef, "aria-label": label, "data-direction": direction, className: classes, onMouseEnter: () => setPaused(true), onMouseLeave: () => setPaused(false), onTouchStart: freezeForTouch, children: _jsxs("div", { className: "ticker__track", "data-paused": paused || undefined, children: [_jsx("div", { className: "ticker__group", children: children }), _jsx("div", { ref: cloneRef, "aria-hidden": "true", className: "ticker__group", children: children })] }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paul-portfolio/react",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "React components for the Paul Design System",
   "license": "MIT",
   "repository": {