tailwind-a11y 0.14.0 → 0.14.1

package/README.md

@@ -57,7 +57,7 @@ Exits `1` on violations — safe to use as a CI gate.
 | Touch target | 2.5.8 (AA) | Interactive elements under 24×24px — or 44×44px with `--strict` (2.5.5, AAA) |
 | Focus indicator | 2.4.7 (AA) | `focus:outline-none` with no visible replacement |
 | Focus indicator contrast | 1.4.11 (AA) | A present `outline-*`/`ring-*` focus indicator below 3:1 contrast — or also below the 2px minimum thickness with `--strict` (2.4.13, AAA) |
-| Reduced motion | 2.3.3 (AAA, `--strict` only) | A `hover:`/`focus:`/`focus-visible:`/`active:`-scoped `scale-*`/`rotate-*`/`translate-*`/`skew-*` change with an unscoped `transition`/`transition-all`/`transition-transform`, or an `animate-spin`/`-ping`/`-bounce` under the same variants, with no `motion-reduce:`/`motion-safe:` handling |
+| Reduced motion | 2.3.3 (AAA, `--strict` only) | A `hover:`/`focus:`/`focus-visible:`/`active:`-scoped (or their `group-*`/`peer-*` equivalents) `scale-*`/`rotate-*`/`translate-*`/`skew-*` change with an unscoped `transition`/`transition-all`/`transition-transform`, or an `animate-spin`/`-ping`/`-bounce` under the same variants, with no `motion-reduce:`/`motion-safe:` handling |
 
 ## Scope
 

package/dist/parser/extractReducedMotion.js

@@ -1,7 +1,34 @@
 import * as t from "@babel/types";
 import { getStaticClassName, parseJSX, traverse } from "./babelInterop.js";
 const TRANSITION_BASES = new Set(["transition", "transition-all", "transition-transform"]);
-const INTERACTION_VARIANTS = new Set(["hover", "focus", "focus-visible", "focus-within", "active"]);
+// group-hover:/peer-hover:/etc. compile to the identical momentary-pseudo-
+// class shape as bare hover:, just evaluated against an ancestor/sibling
+// (.group/.peer marker) instead of the element itself -- verified against a
+// real Tailwind v4 build (`.group-hover\:scale-110:is(:where(.group):hover *)`).
+// Deliberately NOT extended to has-*:/arbitrary variants ([&:hover]:, already
+// an established out-of-scope precedent for this file -- unbounded selector
+// text, not a closed enumerable set) or in-*: (a real v4.1+ ancestor-state
+// variant with the identical shape, but a legitimate separate follow-up, not
+// folded into this set).
+const INTERACTION_VARIANTS = new Set([
+    "hover", "focus", "focus-visible", "focus-within", "active",
+    "group-hover", "group-focus", "group-focus-visible", "group-focus-within", "group-active",
+    "peer-hover", "peer-focus", "peer-focus-visible", "peer-focus-within", "peer-active",
+]);
+// Named groups/peers (`group-hover/sidebar:scale-110`) compile the group
+// name into the variant token itself via a slash
+// (`.group-hover\/sidebar\:scale-110:is(:where(.group\/sidebar):hover *)`),
+// so variantSegments() returns "group-hover/sidebar" verbatim -- a plain
+// Set.has() would miss it. Safe to slice on the first "/" and re-check:
+// Tailwind's opacity-modifier slash (`text-black/50`) lives inside the base
+// utility segment (after the last ":"), never inside a variant segment, so
+// there's no collision to worry about here.
+function isInteractionVariant(v) {
+    if (INTERACTION_VARIANTS.has(v))
+        return true;
+    const slash = v.indexOf("/");
+    return slash !== -1 && INTERACTION_VARIANTS.has(v.slice(0, slash));
+}
 function baseUtility(raw) {
     return raw.slice(raw.lastIndexOf(":") + 1);
 }
@@ -33,7 +60,7 @@ export function extractReducedMotionChecks(code, filePath) {
                 return;
             const classes = className.split(/\s+/).filter(Boolean);
             const hasTransitionBase = classes.some((raw) => TRANSITION_BASES.has(baseUtility(raw)));
-            const hasInteractionClass = classes.some((raw) => variantSegments(raw).some((v) => INTERACTION_VARIANTS.has(v)));
+            const hasInteractionClass = classes.some((raw) => variantSegments(raw).some(isInteractionVariant));
             // A second, independent candidacy path for animate-* utilities, which
             // carry their own `animation` property and need no transition-*  base
             // at all -- `hover:animate-bounce` alone must be a candidate even
@@ -51,7 +78,7 @@ export function extractReducedMotionChecks(code, filePath) {
             // documents for why unscoped animate-* is out of scope here.
             const hasInteractionScopedAnimate = classes.some((raw) => {
                 const base = baseUtility(raw);
-                return isAnimateBase(base) && variantSegments(raw).some((v) => INTERACTION_VARIANTS.has(v));
+                return isAnimateBase(base) && variantSegments(raw).some(isInteractionVariant);
             });
             // Not a candidate at all unless there's some transition utility
             // (scoped or not) *and* some interaction-scoped class, OR an

package/dist/rules/checkReducedMotion.js

@@ -5,7 +5,25 @@
 // animates (the browser has nothing telling it to transition that
 // property), and correctly isn't flagged.
 const TRANSITION_BASES = new Set(["transition", "transition-all", "transition-transform"]);
-const INTERACTION_VARIANTS = new Set(["hover", "focus", "focus-visible", "focus-within", "active"]);
+// group-hover:/peer-hover:/etc. compile to the identical momentary-pseudo-
+// class shape as bare hover:, just evaluated against an ancestor/sibling
+// (.group/.peer marker) instead of the element itself -- see the identical
+// set (and full explanation) in extractReducedMotion.ts. Deliberately NOT
+// extended to has-*:/arbitrary variants or in-*: -- see that file's comment.
+const INTERACTION_VARIANTS = new Set([
+    "hover", "focus", "focus-visible", "focus-within", "active",
+    "group-hover", "group-focus", "group-focus-visible", "group-focus-within", "group-active",
+    "peer-hover", "peer-focus", "peer-focus-visible", "peer-focus-within", "peer-active",
+]);
+// Named groups/peers (`group-hover/sidebar:...`) put the group name in the
+// variant token itself via a slash -- see extractReducedMotion.ts for the
+// full explanation of why slicing on the first "/" is safe here.
+function isInteractionVariant(v) {
+    if (INTERACTION_VARIANTS.has(v))
+        return true;
+    const slash = v.indexOf("/");
+    return slash !== -1 && INTERACTION_VARIANTS.has(v.slice(0, slash));
+}
 function baseUtility(raw) {
     return raw.slice(raw.lastIndexOf(":") + 1);
 }
@@ -99,7 +117,7 @@ export function checkReducedMotion(checks, strict = false) {
             // `dark:transition hover:scale-110` was silently treated as
             // compliant even though it animates on hover in dark mode
             // regardless of the user's motion preference.
-            const isInteractionGated = segments.some((v) => INTERACTION_VARIANTS.has(v));
+            const isInteractionGated = segments.some(isInteractionVariant);
             const isMotionSafeGated = segments.includes("motion-safe");
             if (TRANSITION_BASES.has(base) && !isInteractionGated && !isMotionSafeGated)
                 realTransition = raw;
@@ -138,7 +156,7 @@ export function checkReducedMotion(checks, strict = false) {
             // explanation of why both checks are per-candidate, not per-element.
             if (segments.includes("motion-safe"))
                 return false;
-            if (!segments.some((v) => INTERACTION_VARIANTS.has(v)))
+            if (!segments.some(isInteractionVariant))
                 return false;
             return ANIMATE_MOTION_BASES.has(baseUtility(raw));
         });
@@ -171,7 +189,7 @@ export function checkReducedMotion(checks, strict = false) {
             // self-guarded at the same time, e.g. `hover:motion-safe:scale-110`).
             if (segments.includes("motion-safe"))
                 return false;
-            if (!segments.some((v) => INTERACTION_VARIANTS.has(v)))
+            if (!segments.some(isInteractionVariant))
                 return false;
             return isNonIdentityMotionUtility(baseUtility(raw));
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwind-a11y",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Static analysis CLI that catches WCAG accessibility violations — color contrast, touch target size, and focus indicator removal/contrast — in Tailwind CSS class combinations before they ship.",
   "type": "module",
   "bin": {