suggest_fix

Generate AI-powered code patches to fix accessibility and UX issues. This is the key remediation tool that provides actionable fixes with confidence scores.

Description

The suggest_fix tool analyzes a finding and generates a code patch that resolves the issue. It returns a search/replace pattern that can be applied to your source code.

Parameters

Response

Confidence Levels

Example Conversations

Single Fix

suggest_fix({
  finding_id: "fnd_xyz789",
  audit_id: "aud_abc123"
})

Fix with Source Context

Providing file content improves patch accuracy:

suggest_fix({
  finding_id: "fnd_xyz789",
  audit_id: "aud_abc123",
  file_content: "// Your Button.tsx content...",
  file_path: "src/components/Button.tsx"
})

Batch Fixes

suggest_fix({
  audit_id: "aud_abc123",
  finding_ids: ["fnd_001", "fnd_002", "fnd_003"]
})

Returns an array of patches.

Natural Language Request

Claude will identify the relevant finding and call suggest_fix automatically.

Applying Patches

Manual Application

1. Find the search string in your code
2. Replace with the replace string
3. Verify the change works

Search/Replace Pattern

The patch uses a literal search/replace model:

// Original (search)
<button onClick={handleSubmit}>
  <Icon name="check" />
</button>

// Fixed (replace)
<button onClick={handleSubmit} aria-label="Submit form">
  <Icon name="check" />
</button>

Editor Integration

Most editors support find/replace:

• VS Code: Ctrl/Cmd + H
• Cursor: Ctrl/Cmd + H
• Vim: :%s/search/replace/g

Example Patches

Button Accessibility

// Search
<button onClick={handleClick}>
  <TrashIcon />
</button>

// Replace
<button onClick={handleClick} aria-label="Delete item">
  <TrashIcon />
</button>

Confidence: HIGH (92%) Explanation: Icon-only buttons need aria-label for screen readers.

Color Contrast

/* Search */
.hero-text {
  color: #999999;
}

/* Replace */
.hero-text {
  color: #595959;
}

Confidence: HIGH (88%) Explanation: Changed color to meet 4.5:1 contrast ratio.

Missing Form Label

// Search
<input
  type="email"
  placeholder="Enter your email"
/>

// Replace
<label>
  <span className="sr-only">Email address</span>
  <input
    type="email"
    placeholder="Enter your email"
  />
</label>

Confidence: MEDIUM (72%) Explanation: Added programmatic label association. Review the sr-only class implementation.

When needs_human_review is True

The needs_human_review flag indicates:

• Complex changes affecting multiple elements
• Changes that might affect functionality
• Framework-specific patterns that need verification
• Low confidence fixes

When true, carefully review:

1. The suggested change makes sense
2. It doesn't break existing functionality
3. It follows your project's patterns

Verification

After applying a fix:

1. Run the hint: Use the verification_hint (e.g., test with screen reader)
2. Re-audit: Run audit_url again to confirm the issue is resolved
3. Test functionality: Ensure the element still works correctly

Workflow

Complete fix workflow:

1. audit_url → Get audit ID
2. get_findings → Find issues
3. explain_finding → Understand (optional)
4. suggest_fix → Get patch
5. Apply patch manually or use generate_pr
6. audit_url → Verify fix worked

Related

• explain_finding - Understand before fixing
• get_findings - Get finding IDs
• Tools Reference - All available tools
• SDK: Audits - Programmatic approach