@diegovelasquezweb/a11y-engine 0.11.52 → 0.11.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@diegovelasquezweb/a11y-engine",
-  "version": "0.11.52",
+  "version": "0.11.54",
   "description": "WCAG 2.2 accessibility audit engine — scanner, analyzer, and report builders",
   "type": "module",
   "license": "MIT",
@@ -32,6 +32,9 @@
     "CHANGELOG.md",
     "LICENSE"
   ],
+  "scripts": {
+    "test": "vitest run"
+  },
   "dependencies": {
     "@axe-core/playwright": "^4.11.1",
     "axe-core": "^4.11.1",
@@ -41,7 +44,5 @@
   "devDependencies": {
     "vitest": "^4.0.18"
   },
-  "scripts": {
-    "test": "vitest run"
-  }
-}
+  "packageManager": "pnpm@10.22.0+sha512.bf049efe995b28f527fd2b41ae0474ce29186f7edcb3bf545087bd61fbbebb2bf75362d1307fda09c2d288e1e499787ac12d4fcb617a974718a6051f2eee741c"
+}

package/src/fixes/apply-finding-fix.mjs

@@ -150,7 +150,7 @@ function getPatternCandidateFile(projectDir, finding) {
   return { abs, rel: finding.file, content };
 }
 
-function buildPatternAiInput({ finding, candidate, projectHints }) {
+function buildPatternAiInput({ finding, candidate, cssFiles = [], projectHints }) {
   // Extract the exact line(s) containing the pattern match so Claude has an
   // unambiguous search anchor instead of inferring it from the full file.
   const fileLines = candidate.content.split("\n");
@@ -224,7 +224,10 @@ function buildPatternAiInput({ finding, candidate, projectHints }) {
       fixDescription: finding.fix_description || "",
       fixCode: finding.fix_code || "",
     },
-    files: [{ filePath: candidate.rel, content: candidate.content.slice(0, 12000) }],
+    files: [
+      { filePath: candidate.rel, content: candidate.content.slice(0, 12000) },
+      ...cssFiles.map((f) => ({ filePath: f.rel, content: f.content.slice(0, 12000) })),
+    ],
     ...(projectHints ? { projectContext: projectHints } : {}),
   };
 }
@@ -465,16 +468,32 @@ function detectStylingSystem(aiInput) {
   return "inline";
 }
 
+export function buildStyleInstruction(stylingSystem) {
+  if (stylingSystem === "tailwind") {
+    return (
+      "This project uses Tailwind CSS. Apply style fixes as Tailwind utility classes in the HTML/JSX file — do not write raw CSS. " +
+      "For inline style attributes that suppress focus (e.g. style=\"outline: none\"): remove outline: none from the style attribute and add focus-visible: Tailwind utility classes (e.g. focus-visible:outline-2 focus-visible:outline-offset-2) directly on the element instead."
+    );
+  }
+  if (stylingSystem === "css") {
+    return (
+      "CSS/SCSS files are available in the files array. Prefer fixing visual issues (touch targets, color contrast) in the CSS/SCSS file using proper selectors. " +
+      "For violations in a CSS/SCSS file: add or update the rule there directly. " +
+      "For violations in an inline HTML style attribute (e.g. style=\"outline: none\"): make TWO changes — " +
+      "(1) remove outline: none / outline: 0 from the HTML style attribute, " +
+      "(2) add a :focus-visible rule in the CSS/SCSS file targeting the element."
+    );
+  }
+  return (
+    "No CSS file was provided. Remove outline: none or outline: 0 from the style attribute entirely and rely on the browser default focus indicator. " +
+    "Do not add new CSS files."
+  );
+}
+
 async function callClaudeForPatch({ apiKey, model, aiInput, remediationPath }) {
   const remediationContext = extractRemediationContext(remediationPath);
   const stylingSystem = detectStylingSystem(aiInput);
-
-  const styleInstruction =
-    stylingSystem === "tailwind"
-      ? "This project uses Tailwind CSS. Apply style fixes as Tailwind utility classes in the HTML/JSX file — do not write raw CSS."
-      : stylingSystem === "css"
-      ? "CSS/SCSS files are available in the files array. Prefer fixing visual issues (touch targets, color contrast, focus outlines) in the CSS/SCSS file using proper selectors rather than inline styles."
-      : "No CSS file was provided. Apply style fixes using inline style attributes in the HTML file.";
+  const styleInstruction = buildStyleInstruction(stylingSystem);
 
   const system = [
     "You are an accessibility fix engine.",
@@ -666,8 +685,15 @@ export async function applyFindingFix(input) {
       });
     }
 
-    const aiInput = buildPatternAiInput({ finding, candidate, projectHints });
-    const candidateSet = new Set([candidate.rel]);
+    const allProjectFiles = listFilesRecursive(projectDir).map((abs) => ({
+      abs,
+      rel: path.relative(projectDir, abs),
+      content: fs.readFileSync(abs, "utf8"),
+    }));
+    const cssFiles = allProjectFiles.filter((f) => /\.(css|scss|sass)$/.test(f.rel));
+
+    const aiInput = buildPatternAiInput({ finding, candidate, cssFiles, projectHints });
+    const candidateSet = new Set([candidate.rel, ...cssFiles.map((f) => f.rel)]);
 
     let patchOutput = null;
     let claudeUsage = { input_tokens: 0, output_tokens: 0 };