tailwind-a11y 0.8.0 → 0.9.0

package/README.md

@@ -25,6 +25,7 @@ npm install --save-dev tailwind-a11y
 npx tailwind-a11y                              # scans **/*.{jsx,tsx}
 npx tailwind-a11y "src/**/*.tsx"               # custom glob
 npx tailwind-a11y --verbose                    # also reports what couldn't be checked, and why
+npx tailwind-a11y --strict                     # touch targets must meet WCAG 2.5.5 (AAA, 44x44px), not just 2.5.8 (AA, 24x24px)
 npx tailwind-a11y --config ./tw.config.cjs     # use a specific config instead of auto-detecting
 npx tailwind-a11y --version                    # print the installed version
 npx tailwind-a11y --help                       # usage and all options
@@ -53,7 +54,7 @@ Exits `1` on violations — safe to use as a CI gate.
 | Check | WCAG | Detects |
 |---|---|---|
 | Contrast | 1.4.3 (AA) | `text-*`/`bg-*` pairs below 4.5:1, same-element or direct-parent, including a text-side opacity modifier (`text-gray-400/50`) composited against the background; suggests the nearest passing shade |
-| Touch target | 2.5.8 (AA) | Interactive elements under 24×24px |
+| 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 |
 
 ## Scope

package/dist/cli.js

@@ -20,8 +20,10 @@ function formatViolation(v) {
             const base = `${v.line}: ${v.textClass} on ${v.bgClass} — ratio ${v.ratio.toFixed(2)}, needs ${v.required} (${v.level})`;
             return v.suggestion ? `${base}; try ${v.suggestion} (${v.suggestedRatio.toFixed(2)})` : base;
         }
-        case "touch-target":
-            return `${v.line}: <${v.tagName}> is ${v.widthPx}×${v.heightPx}px (${v.widthClass} ${v.heightClass}) — WCAG 2.5.8 requires >= 24×24px`;
+        case "touch-target": {
+            const sc = v.level === "AAA" ? "2.5.5" : "2.5.8";
+            return `${v.line}: <${v.tagName}> is ${v.widthPx}×${v.heightPx}px (${v.widthClass} ${v.heightClass}) — WCAG ${sc} requires >= ${v.required}×${v.required}px`;
+        }
         case "focus-indicator":
             return `${v.line}: <${v.tagName}> removes the focus outline (${v.removalClass}) with no visible replacement (focus:ring-*/border-*/shadow-*/bg-*/outline-*)`;
     }
@@ -40,7 +42,7 @@ function groupByFile(items) {
     return byFile;
 }
 async function main() {
-    const { help, version, verbose, config, configError: usageError, patterns } = parseArgs(process.argv.slice(2));
+    const { help, version, verbose, strict, config, configError: usageError, patterns } = parseArgs(process.argv.slice(2));
     if (help) {
         console.log(getHelpText());
         return;
@@ -77,7 +79,7 @@ async function main() {
         try {
             const code = readFileSync(absPath, "utf8");
             const contrastChecks = extractChecks(code, file);
-            violations.push(...checkContrast(contrastChecks, palette), ...checkTouchTargets(extractTouchTargetChecks(code, file, spacing)), ...checkFocusIndicators(extractFocusIndicatorChecks(code, file)));
+            violations.push(...checkContrast(contrastChecks, palette), ...checkTouchTargets(extractTouchTargetChecks(code, file, spacing), strict), ...checkFocusIndicators(extractFocusIndicatorChecks(code, file)));
             if (verbose) {
                 skips.push(...extractContrastSkips(code, file), ...checkContrastValueSkips(contrastChecks, palette), ...extractTouchTargetSkips(code, file, spacing));
             }

package/dist/cliArgs.d.ts

@@ -2,6 +2,7 @@ export interface ParsedArgs {
     help: boolean;
     version: boolean;
     verbose: boolean;
+    strict: boolean;
     config: string | null;
     configError: string | null;
     patterns: string[];

package/dist/cliArgs.js

@@ -9,6 +9,8 @@ Options:
   -v, --verbose      Also report what couldn't be checked, and why
   -V, --version      Print the version number
   -h, --help         Print this help message
+      --strict       Touch targets must meet WCAG 2.5.5 (AAA, 44x44px)
+                      instead of the default 2.5.8 (AA, 24x24px)
       --config <path>  Path to a tailwind.config.js/.cjs (v3) or a CSS
                         @theme file like app/globals.css (v4) to read
                         custom theme colors/spacing from (default:
@@ -18,6 +20,7 @@ Examples:
   tailwind-a11y                    Scan **/*.{jsx,tsx} from the current directory
   tailwind-a11y "src/**/*.tsx"     Scan a custom glob pattern
   tailwind-a11y --verbose          Also report skipped/unresolvable cases
+  tailwind-a11y --strict           Enforce the stricter 44x44px touch target minimum
   tailwind-a11y --config ./tailwind.config.cjs
 `;
 export function getHelpText() {
@@ -25,7 +28,7 @@ export function getHelpText() {
 }
 // -v/--verbose already existed before --version was added; -V (uppercase)
 // avoids colliding with it, matching a common CLI convention.
-const FLAGS = new Set(["--verbose", "-v", "--version", "-V", "--help", "-h"]);
+const FLAGS = new Set(["--verbose", "-v", "--version", "-V", "--help", "-h", "--strict"]);
 export function parseArgs(argv) {
     let config = null;
     let configError = null;
@@ -53,6 +56,7 @@ export function parseArgs(argv) {
         help: argv.includes("--help") || argv.includes("-h"),
         version: argv.includes("--version") || argv.includes("-V"),
         verbose: argv.includes("--verbose") || argv.includes("-v"),
+        strict: argv.includes("--strict"),
         config,
         configError,
         patterns,

package/dist/rules/checkTouchTarget.d.ts

@@ -8,5 +8,7 @@ export interface TouchTargetViolation {
     heightClass: string;
     widthPx: number;
     heightPx: number;
+    required: number;
+    level: "AA" | "AAA";
 }
-export declare function checkTouchTargets(checks: TouchTargetCheck[]): TouchTargetViolation[];
+export declare function checkTouchTargets(checks: TouchTargetCheck[], strict?: boolean): TouchTargetViolation[];

package/dist/rules/checkTouchTarget.js

@@ -1,8 +1,17 @@
 // WCAG 2.5.8 Target Size (Minimum), Level AA: interactive targets must be
 // at least 24x24 CSS pixels. "Minimum" is inclusive, so exactly 24x24 passes.
 const MIN_TARGET_PX = 24;
-export function checkTouchTargets(checks) {
+// WCAG 2.5.5 Target Size (Enhanced), Level AAA: 44x44 CSS pixels -- opt-in
+// via `strict`, not the default. Same "target in a sentence/text block"
+// exemption as 2.5.8 (verified against the W3C Understanding doc), so
+// extractTouchTargets.ts's isInlineInText() exemption logic applies
+// unchanged to both thresholds -- this file only changes which number is
+// compared against, not how targets are found or exempted.
+const MIN_TARGET_PX_STRICT = 44;
+export function checkTouchTargets(checks, strict = false) {
+    const required = strict ? MIN_TARGET_PX_STRICT : MIN_TARGET_PX;
+    const level = strict ? "AAA" : "AA";
     return checks
-        .filter((c) => c.widthPx < MIN_TARGET_PX || c.heightPx < MIN_TARGET_PX)
-        .map((c) => ({ type: "touch-target", ...c }));
+        .filter((c) => c.widthPx < required || c.heightPx < required)
+        .map((c) => ({ type: "touch-target", ...c, required, level }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailwind-a11y",
-  "version": "0.8.0",
+  "version": "0.9.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": {