tailwind-a11y 0.7.0 → 0.8.0

package/README.md

@@ -78,6 +78,7 @@ When a case can't be resolved with confidence, it's skipped rather than guessed:
 
 - [`eslint-plugin-tailwind-a11y`](https://github.com/chamroro/tailwind-a11y/tree/main/packages/eslint-plugin-tailwind-a11y) — same checks as ESLint rules
 - [`vscode-tailwind-a11y`](https://github.com/chamroro/tailwind-a11y/tree/main/packages/vscode-tailwind-a11y) — same checks as live editor diagnostics
+- [`github-action-tailwind-a11y`](https://github.com/chamroro/tailwind-a11y/tree/main/packages/github-action-tailwind-a11y) — same checks as inline PR annotations
 
 ## License
 

package/dist/parser/extractClasses.d.ts

@@ -5,6 +5,7 @@ export interface ContrastCheck {
     bgColorClass: string;
     bgSource: "self" | "parent";
 }
+export declare const COLOR_TOKEN: RegExp;
 export declare function lastColorToken(className: string, prefix: "text" | "bg"): string | null;
 export declare function extractChecks(code: string, filePath: string): ContrastCheck[];
 export interface ContrastSkip {

package/dist/parser/extractClasses.js

@@ -9,7 +9,11 @@ import { getStaticClassName, parseJSX, traverse } from "./babelInterop.js";
 // an extremely common real idiom, more so than the named-scale case, and
 // dropping it here would make the contrast checker's opacity support (see
 // rules/checkContrast.ts) silently inapplicable to the most common case.
-const COLOR_TOKEN = /^\[(#[0-9a-fA-F]{3,8})\](\/\d{1,3})?$|^[a-z]+-\d{2,3}(\/\d{1,3})?$|^(white|black|transparent|current|inherit)(\/\d{1,3})?$/;
+// Exported for reuse in checkFocusIndicator.ts, which needs the exact same
+// "does this suffix look like a color value" test to detect shadow-{color}/
+// ring-{color} decoys (see that file for why) -- one definition, not a
+// second copy that could silently drift out of sync.
+export const COLOR_TOKEN = /^\[(#[0-9a-fA-F]{3,8})\](\/\d{1,3})?$|^[a-z]+-\d{2,3}(\/\d{1,3})?$|^(white|black|transparent|current|inherit)(\/\d{1,3})?$/;
 // opacity-{N} (e.g. bg-opacity-50, text-opacity-50) matches the same
 // "word-number" shape as a color token but isn't one — without this
 // exclusion it can silently overwrite a real color match via the

package/dist/rules/checkFocusIndicator.js

@@ -1,9 +1,17 @@
+import { COLOR_TOKEN } from "../parser/extractClasses.js";
 const REMOVAL_BASE = "outline-none";
 // Utilities that match the "replacement" shape but are semantically no-ops —
 // the same failure mode as bg-opacity-50 masking a real color match: a
 // same-prefix decoy that would silently hide a real violation if we only
-// checked the prefix.
-const DEGENERATE_BASES = new Set(["outline-none", "ring-0", "border-0", "shadow-none", "bg-transparent"]);
+// checked the prefix. border-none/border-hidden only set border-style, not
+// border-width -- verified against a real Tailwind v4 build that preflight
+// resets every element to `border: 0 solid`, so border-width stays 0
+// regardless of style and no border is ever drawn, same failure mode as
+// border-0.
+const DEGENERATE_BASES = new Set([
+    "outline-none", "ring-0", "border-0", "shadow-none", "bg-transparent",
+    "border-none", "border-hidden",
+]);
 // Modifier-only utilities (opacity/offset/inset) don't set a concrete value
 // on their own — e.g. bg-opacity-50 with no bg-* color, or ring-offset-4
 // with no ring-* width, renders nothing visible by itself. Same failure
@@ -31,8 +39,32 @@ const NON_VISUAL_BASES = new Set([
 ]);
 // bg-blend-{mode} (e.g. bg-blend-multiply) sets a blend mode, not a color --
 // suffix-varying like MODIFIER_ONLY above, so pattern-matched instead of
-// enumerated.
-const NON_VISUAL_PATTERN = /^bg-blend-/;
+// enumerated. border-spacing-*/-x-*/-y-* sets the CSS border-spacing
+// property, which only affects the gap between <table> cells -- verified
+// against a real Tailwind v4 build that it has zero visual effect on any
+// non-table element (the only elements this check ever fires on), even
+// with a real numeric value applied.
+const NON_VISUAL_PATTERN = /^bg-blend-|^border-spacing(-[xy])?-/;
+// shadow-{color}/ring-{color} alone (e.g. shadow-red-500, ring-blue-400/50,
+// an arbitrary hex) only sets the --tw-shadow-color/--tw-ring-color CSS
+// variable -- the actual box-shadow property is set by a separate *size*
+// utility (shadow-lg, ring-2, etc.) that references that variable. Verified
+// against a real Tailwind v4 build: shadow-red-500 alone computes to
+// `box-shadow: none`; shadow-lg shadow-red-500 together produce a real,
+// colored shadow. Same underlying mechanism as MODIFIER_ONLY's opacity/
+// offset cases above, but shaped like a color token rather than a fixed
+// suffix, so it reuses COLOR_TOKEN (the exact same "is this a color value"
+// test extractClasses.ts uses) instead of a third, drifting definition of
+// what a color looks like.
+function isColorOnlyShadowOrRing(base) {
+    const shadowMatch = /^shadow-(.+)$/.exec(base);
+    if (shadowMatch && COLOR_TOKEN.test(shadowMatch[1]))
+        return true;
+    const ringMatch = /^ring-(.+)$/.exec(base);
+    if (ringMatch && COLOR_TOKEN.test(ringMatch[1]))
+        return true;
+    return false;
+}
 function baseUtility(raw) {
     return raw.slice(raw.lastIndexOf(":") + 1);
 }
@@ -42,6 +74,8 @@ function isReplacement(raw) {
         return false;
     if (NON_VISUAL_BASES.has(base) || NON_VISUAL_PATTERN.test(base))
         return false;
+    if (isColorOnlyShadowOrRing(base))
+        return false;
     return /^(ring|border|shadow|bg|outline)(-|$)/.test(base);
 }
 export function checkFocusIndicators(checks) {

package/package.json

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