a11y-pilot 1.0.0

package/src/reporter.js

@@ -0,0 +1,281 @@
+import chalk from 'chalk';
+import gradientString from 'gradient-string';
+import logSymbols from 'log-symbols';
+import boxen from 'boxen';
+
+// ─── Color Palette ───────────────────────────────────────────────────────────
+const colors = {
+  error: chalk.red,
+  warning: chalk.yellow,
+  success: chalk.green,
+  info: chalk.cyan,
+  dim: chalk.dim,
+  bold: chalk.bold,
+  file: chalk.cyan.bold,
+  line: chalk.dim,
+  rule: chalk.magenta,
+  fix: chalk.green,
+  count: chalk.white.bold,
+};
+
+// Custom gradient for the banner
+const bannerGradient = gradientString('#00d4ff', '#7b2ff7', '#ff2d95');
+
+// ─── Banner ──────────────────────────────────────────────────────────────────
+
+const BANNER = `
+   __ _ __ __  __            _ __      __
+  / _\` /_ /_ \\/ /  ___  ___(_) /___  / /_
+ / /_| || || / _ \\/ _ \\/ / | / / _ \\/ __/
+ \\__,_|\\_,_/ / .__/\\___/_/  |_/_/\\___/\\__/
+             /_/
+`;
+
+/**
+ * Print the startup banner
+ */
+export function printBanner() {
+  console.log(bannerGradient(BANNER));
+  console.log(
+    chalk.dim('  v1.0.0 — AI-powered accessibility scanner')
+  );
+  console.log(
+    chalk.dim('  Powered by GitHub Copilot CLI ✦\n')
+  );
+}
+
+/**
+ * Print scanning progress
+ * @param {number} fileCount - Number of files to scan
+ */
+export function printScanStart(fileCount) {
+  console.log(
+    `  ${chalk.cyan('⟳')} Scanning ${colors.count(fileCount)} file${fileCount !== 1 ? 's' : ''}...\n`
+  );
+}
+
+/**
+ * Format and print issues for a single file
+ * @param {string} filePath - Relative file path
+ * @param {object[]} issues - Issues found in this file
+ */
+export function printFileIssues(filePath, issues) {
+  if (issues.length === 0) return;
+
+  console.log(`  ${colors.file(filePath)}`);
+
+  for (const issue of issues) {
+    const icon = issue.severity === 'error'
+      ? chalk.red('✖')
+      : chalk.yellow('⚠');
+
+    const lineNum = colors.line(`L${String(issue.line).padEnd(4)}`);
+    const ruleId = colors.rule(issue.ruleId.padEnd(16));
+    const message = issue.severity === 'error'
+      ? colors.error(issue.message)
+      : colors.warning(issue.message);
+
+    console.log(`    ${icon}  ${lineNum} ${ruleId} ${message}`);
+  }
+
+  console.log('');
+}
+
+/**
+ * Print the summary bar at the end
+ * @param {object} summary - {errors, warnings, files, totalFiles, fixable}
+ */
+export function printSummary(summary) {
+  const { errors, warnings, files, totalFiles } = summary;
+  const total = errors + warnings;
+
+  console.log(chalk.dim('  ' + '─'.repeat(65)));
+
+  if (total === 0) {
+    console.log('');
+    console.log(
+      boxen(
+        chalk.green.bold('✨ No accessibility issues found! ✨') +
+        '\n\n' +
+        chalk.dim(`Scanned ${totalFiles} file${totalFiles !== 1 ? 's' : ''} — all clear!`),
+        {
+          padding: 1,
+          margin: { left: 2 },
+          borderColor: 'green',
+          borderStyle: 'round',
+        }
+      )
+    );
+    return;
+  }
+
+  const parts = [];
+  if (errors > 0) parts.push(colors.error(`${errors} error${errors !== 1 ? 's' : ''}`));
+  if (warnings > 0) parts.push(colors.warning(`${warnings} warning${warnings !== 1 ? 's' : ''}`));
+
+  console.log('');
+  console.log(
+    `  ${logSymbols.error} Found ${colors.count(total)} issue${total !== 1 ? 's' : ''} ` +
+    `(${parts.join(', ')}) ` +
+    `in ${colors.count(files)} file${files !== 1 ? 's' : ''} ` +
+    colors.dim(`(${totalFiles} scanned)`)
+  );
+  console.log('');
+}
+
+/**
+ * Print the fix prompt for a single issue (used with --fix flag)
+ * @param {string} filePath
+ * @param {object} issue
+ */
+export function printFixPrompt(filePath, issue) {
+  const icon = issue.severity === 'error' ? chalk.red('✖') : chalk.yellow('⚠');
+
+  console.log(`  ${colors.file(filePath)}:${issue.line}  ${colors.rule(issue.ruleId)}`);
+  console.log(`  ${icon} ${issue.message}`);
+  console.log('');
+  const prompt = `In file "${filePath}" at line ${issue.line}, fix this accessibility issue: ${issue.message}. ${issue.copilotPrompt} Only modify the minimum code necessary.`;
+  console.log(
+    boxen(
+      chalk.cyan('copilot ') + chalk.dim('"') +
+      chalk.white(prompt) +
+      chalk.dim('"'),
+      {
+        padding: { left: 1, right: 1, top: 0, bottom: 0 },
+        margin: { left: 2 },
+        borderColor: 'cyan',
+        borderStyle: 'round',
+        title: '💡 Copilot CLI Fix',
+        titleAlignment: 'left',
+      }
+    )
+  );
+  console.log('');
+}
+
+/**
+ * Print auto-fix progress
+ * @param {string} filePath
+ * @param {object} issue
+ * @param {'start'|'success'|'error'} status
+ * @param {string} [errorMsg]
+ */
+export function printAutoFixStatus(filePath, issue, status, errorMsg) {
+  const prefix = `  ${colors.file(filePath)}:${issue.line}`;
+
+  switch (status) {
+    case 'start':
+      console.log(`  ${chalk.cyan('⟳')} Fixing ${colors.rule(issue.ruleId)} in ${colors.file(filePath)}:${issue.line}...`);
+      break;
+    case 'success':
+      console.log(`  ${chalk.green('✔')} Fixed ${colors.rule(issue.ruleId)} in ${colors.file(filePath)}:${issue.line}`);
+      break;
+    case 'error':
+      console.log(`  ${chalk.red('✘')} Failed to fix ${colors.rule(issue.ruleId)} in ${colors.file(filePath)}:${issue.line}`);
+      if (errorMsg) {
+        console.log(`    ${colors.dim(errorMsg)}`);
+      }
+      break;
+  }
+}
+
+/**
+ * Print auto-fix summary
+ * @param {number} fixed
+ * @param {number} failed
+ * @param {number} total
+ */
+export function printAutoFixSummary(fixed, failed, total) {
+  console.log('');
+  console.log(chalk.dim('  ' + '─'.repeat(65)));
+  console.log('');
+
+  if (failed === 0) {
+    console.log(
+      boxen(
+        chalk.green.bold(`✨ All ${fixed} issue${fixed !== 1 ? 's' : ''} fixed with Copilot CLI! ✨`) +
+        '\n\n' +
+        chalk.dim('Review the changes and commit when satisfied.'),
+        {
+          padding: 1,
+          margin: { left: 2 },
+          borderColor: 'green',
+          borderStyle: 'round',
+        }
+      )
+    );
+  } else {
+    console.log(
+      `  ${chalk.green('✔')} ${colors.count(fixed)} fixed  ` +
+      `${chalk.red('✘')} ${colors.count(failed)} failed  ` +
+      colors.dim(`(${total} total)`)
+    );
+  }
+  console.log('');
+}
+
+/**
+ * Print the rules list
+ * @param {object[]} rules
+ */
+export function printRulesList(rules) {
+  printBanner();
+  console.log(chalk.bold('  Available Rules:\n'));
+
+  for (const rule of rules) {
+    const severityBadge = rule.severity === 'error'
+      ? chalk.bgRed.white.bold(` ${rule.severity.toUpperCase()} `)
+      : chalk.bgYellow.black.bold(` ${rule.severity.toUpperCase()} `);
+
+    console.log(`  ${colors.rule(rule.id.padEnd(18))} ${severityBadge}`);
+    console.log(`  ${chalk.white(rule.description)}`);
+    console.log(`  ${colors.dim(`WCAG ${rule.wcag} — ${rule.impact}`)}`);
+    console.log(`  ${colors.dim(rule.url)}`);
+    console.log('');
+  }
+}
+
+/**
+ * Print a JSON report
+ * @param {object} report
+ */
+export function printJSON(report) {
+  console.log(JSON.stringify(report, null, 2));
+}
+
+/**
+ * Print error message
+ * @param {string} message
+ */
+export function printError(message) {
+  console.error(`\n  ${logSymbols.error} ${chalk.red(message)}\n`);
+}
+
+/**
+ * Print info message
+ * @param {string} message
+ */
+export function printInfo(message) {
+  console.log(`  ${logSymbols.info} ${chalk.cyan(message)}`);
+}
+
+/**
+ * Print the copilot bridge header
+ */
+export function printCopilotBridgeHeader() {
+  console.log('');
+  console.log(
+    boxen(
+      bannerGradient.multiline('  🤖 Copilot CLI Auto-Fix Mode  ') +
+      '\n' +
+      chalk.dim('  Invoking GitHub Copilot CLI to fix accessibility issues...'),
+      {
+        padding: { left: 1, right: 1, top: 0, bottom: 0 },
+        margin: { left: 2 },
+        borderColor: 'cyan',
+        borderStyle: 'double',
+      }
+    )
+  );
+  console.log('');
+}

package/src/rules/anchor-content.js

@@ -0,0 +1,46 @@
+/**
+ * Rule: anchor-content
+ * Anchor links must have discernible text.
+ * WCAG 2.4.4 — Link Purpose in Context (Level A)
+ * WCAG 4.1.2 — Name, Role, Value (Level A)
+ */
+export default {
+  id: 'anchor-content',
+  description: '<a> elements must have text content or aria-label',
+  severity: 'error',
+  wcag: '2.4.4, 4.1.2',
+  impact: 'Screen readers announce "link" without a name, making navigation impossible',
+  url: 'https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html',
+
+  check(element) {
+    if (element.name !== 'a') return null;
+    if (element.hasAttributes['...spread']) return null;
+
+    // Must have href to be a link (otherwise it might be an anchor target)
+    const hasHref = 'href' in element.attributes;
+    if (!hasHref) return null;
+
+    const hasAriaLabel = 'aria-label' in element.attributes || 'ariaLabel' in element.attributes;
+    const hasAriaLabelledBy = 'aria-labelledby' in element.attributes || 'ariaLabelledby' in element.attributes;
+    const hasTitle = 'title' in element.attributes;
+    const hasText = element.hasTextChildren;
+    const hasAriaHidden = element.attributes['aria-hidden'] === 'true' || element.attributes['ariaHidden'] === 'true';
+
+    // Skip if aria-hidden (intentionally hidden from screen readers)
+    if (hasAriaHidden) return null;
+
+    if (!hasAriaLabel && !hasAriaLabelledBy && !hasTitle && !hasText) {
+      return {
+        ruleId: this.id,
+        severity: this.severity,
+        message: '<a> element has no accessible name (no text content, aria-label, or title)',
+        line: element.line,
+        sourceLine: element.sourceLine,
+        fix: 'Add text content inside the link, or add an aria-label attribute describing the link destination',
+        copilotPrompt: `Look at line ${element.line}. There is an <a> (anchor/link) element without any accessible text. Screen readers will announce it as just "link" with no context. Add an aria-label attribute that describes where the link goes or what it does. If it wraps an image, make sure the image has appropriate alt text. If it's an icon link, add aria-label like "Open in new tab" or "Go to homepage".`,
+      };
+    }
+
+    return null;
+  },
+};

package/src/rules/button-content.js

@@ -0,0 +1,37 @@
+/**
+ * Rule: button-content
+ * Buttons must have discernible text for screen readers.
+ * WCAG 4.1.2 — Name, Role, Value (Level A)
+ */
+export default {
+  id: 'button-content',
+  description: '<button> elements must have text content or aria-label',
+  severity: 'error',
+  wcag: '4.1.2',
+  impact: 'Screen readers announce the button without a name, making it impossible to understand its purpose',
+  url: 'https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html',
+
+  check(element) {
+    if (element.name !== 'button') return null;
+    if (element.hasAttributes['...spread']) return null;
+
+    const hasAriaLabel = 'aria-label' in element.attributes || 'ariaLabel' in element.attributes;
+    const hasAriaLabelledBy = 'aria-labelledby' in element.attributes || 'ariaLabelledby' in element.attributes;
+    const hasTitle = 'title' in element.attributes;
+    const hasText = element.hasTextChildren;
+
+    if (!hasAriaLabel && !hasAriaLabelledBy && !hasTitle && !hasText) {
+      return {
+        ruleId: this.id,
+        severity: this.severity,
+        message: '<button> has no accessible name (no text content, aria-label, or title)',
+        line: element.line,
+        sourceLine: element.sourceLine,
+        fix: 'Add text content inside the button, or add an aria-label attribute',
+        copilotPrompt: `Look at line ${element.line}. There is a <button> element with no accessible name — it has no text content, no aria-label, and no title attribute. Add an appropriate aria-label based on the button's purpose (look at its onClick handler, icon, or surrounding context for clues). If the button contains an icon, add aria-label describing the action.`,
+      };
+    }
+
+    return null;
+  },
+};

package/src/rules/form-label.js

@@ -0,0 +1,47 @@
+/**
+ * Rule: form-label
+ * Form inputs must have associated labels.
+ * WCAG 1.3.1 — Info and Relationships (Level A)
+ * WCAG 4.1.2 — Name, Role, Value (Level A)
+ */
+export default {
+  id: 'form-label',
+  description: 'Form inputs must have an associated <label>, aria-label, or aria-labelledby',
+  severity: 'error',
+  wcag: '1.3.1, 4.1.2',
+  impact: 'Screen reader users cannot determine the purpose of the input field',
+  url: 'https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html',
+
+  check(element) {
+    const inputTypes = ['input', 'select', 'textarea'];
+    if (!inputTypes.includes(element.name)) return null;
+    if (element.hasAttributes['...spread']) return null;
+
+    // Hidden inputs don't need labels
+    const type = element.attributes['type'] || '';
+    if (type === 'hidden' || type === 'submit' || type === 'button' || type === 'reset') return null;
+
+    const hasAriaLabel = 'aria-label' in element.attributes || 'ariaLabel' in element.attributes;
+    const hasAriaLabelledBy = 'aria-labelledby' in element.attributes || 'ariaLabelledby' in element.attributes;
+    const hasId = 'id' in element.attributes; // might be referenced by a <label for="...">
+    const hasTitle = 'title' in element.attributes;
+    const hasPlaceholder = 'placeholder' in element.attributes;
+
+    // We can't verify label-for association statically across elements easily,
+    // so we check for inline labelling mechanisms
+    if (!hasAriaLabel && !hasAriaLabelledBy && !hasTitle) {
+      // Placeholder alone is not sufficient
+      return {
+        ruleId: this.id,
+        severity: this.severity,
+        message: `<${element.rawName}> has no accessible label (missing aria-label, aria-labelledby, or title)${hasPlaceholder ? '. Note: placeholder is NOT a substitute for a label' : ''}`,
+        line: element.line,
+        sourceLine: element.sourceLine,
+        fix: 'Add aria-label="Description" to the input, or wrap it with a <label> element',
+        copilotPrompt: `Look at line ${element.line}. There is a <${element.rawName}> element without an accessible label. Add an appropriate aria-label attribute based on the context (look at nearby text, placeholder, or variable names for clues about the field's purpose). If there is a placeholder, the aria-label should match or expand on it. Alternatively, add a visible <label> element associated via htmlFor/id.`,
+      };
+    }
+
+    return null;
+  },
+};

package/src/rules/heading-order.js

@@ -0,0 +1,51 @@
+/**
+ * Rule: heading-order
+ * Heading levels should not skip (e.g., h1 → h3 without h2).
+ * WCAG 1.3.1 — Info and Relationships (Level A)
+ *
+ * This rule is special — it operates on ALL headings in a file, not individual elements.
+ */
+export default {
+  id: 'heading-order',
+  description: 'Heading levels should increase sequentially without skipping',
+  severity: 'warning',
+  wcag: '1.3.1',
+  impact: 'Screen reader users rely on heading hierarchy to navigate and understand page structure',
+  url: 'https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html',
+
+  /**
+   * This rule doesn't check individual elements — it uses checkFile instead.
+   */
+  check() {
+    return null;
+  },
+
+  /**
+   * Check heading order across an entire file
+   * @param {object[]} headings - Array of {level, line, sourceLine}
+   * @returns {object[]} Array of issues
+   */
+  checkHeadings(headings) {
+    if (headings.length === 0) return [];
+
+    const issues = [];
+    let prevLevel = 0;
+
+    for (const heading of headings) {
+      if (prevLevel > 0 && heading.level > prevLevel + 1) {
+        issues.push({
+          ruleId: this.id,
+          severity: this.severity,
+          message: `Heading level skipped: <h${prevLevel}> → <h${heading.level}> (missing <h${prevLevel + 1}>)`,
+          line: heading.line,
+          sourceLine: heading.sourceLine,
+          fix: `Change this to <h${prevLevel + 1}> or add the missing heading levels`,
+          copilotPrompt: `Look at line ${heading.line}. The heading level jumps from h${prevLevel} to h${heading.level}, skipping h${prevLevel + 1}. This breaks the document outline for screen reader users. Adjust the heading level to h${prevLevel + 1} to maintain a proper heading hierarchy. Check the surrounding headings in the file to ensure the entire heading structure is sequential.`,
+        });
+      }
+      prevLevel = heading.level;
+    }
+
+    return issues;
+  },
+};

package/src/rules/img-alt.js

@@ -0,0 +1,40 @@
+/**
+ * Rule: img-alt
+ * Images must have an alt attribute for screen readers.
+ * WCAG 1.1.1 — Non-text Content (Level A)
+ */
+export default {
+  id: 'img-alt',
+  description: '<img> elements must have an alt attribute',
+  severity: 'error',
+  wcag: '1.1.1',
+  impact: 'Screen readers cannot describe the image to visually impaired users',
+  url: 'https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html',
+
+  /**
+   * @param {object} element - Parsed element info
+   * @returns {object|null} Issue object or null
+   */
+  check(element) {
+    if (element.name !== 'img') return null;
+
+    // Skip if spread attributes (might contain alt)
+    if (element.hasAttributes['...spread']) return null;
+
+    const hasAlt = 'alt' in element.attributes;
+
+    if (!hasAlt) {
+      return {
+        ruleId: this.id,
+        severity: this.severity,
+        message: '<img> is missing the `alt` attribute',
+        line: element.line,
+        sourceLine: element.sourceLine,
+        fix: 'Add alt="descriptive text" or alt="" if the image is decorative',
+        copilotPrompt: `Look at line ${element.line}. There is an <img> tag without an alt attribute. Add a descriptive alt attribute based on the surrounding context. If the image appears to be decorative (like an icon next to text), use alt="". Make sure the alt text is meaningful and concise.`,
+      };
+    }
+
+    return null;
+  },
+};

package/src/rules/index.js

@@ -0,0 +1,43 @@
+import imgAlt from './img-alt.js';
+import buttonContent from './button-content.js';
+import noDivButton from './no-div-button.js';
+import formLabel from './form-label.js';
+import headingOrder from './heading-order.js';
+import anchorContent from './anchor-content.js';
+import noAutofocus from './no-autofocus.js';
+import semanticNav from './semantic-nav.js';
+
+/**
+ * All available a11y rules.
+ * Each rule exports: id, description, severity, check(element), and optional file-level checks.
+ */
+export const allRules = [
+  imgAlt,
+  buttonContent,
+  noDivButton,
+  formLabel,
+  headingOrder,
+  anchorContent,
+  noAutofocus,
+  semanticNav,
+];
+
+/**
+ * Get rules filtered by IDs
+ * @param {string[]|null} ruleIds - Rule IDs to include. null = all rules.
+ * @returns {object[]}
+ */
+export function getRules(ruleIds = null) {
+  if (!ruleIds) return allRules;
+  const ids = new Set(ruleIds);
+  return allRules.filter(r => ids.has(r.id));
+}
+
+/**
+ * Get a single rule by ID
+ * @param {string} id
+ * @returns {object|undefined}
+ */
+export function getRule(id) {
+  return allRules.find(r => r.id === id);
+}

package/src/rules/no-autofocus.js

@@ -0,0 +1,32 @@
+/**
+ * Rule: no-autofocus
+ * Avoid using autoFocus — it disrupts screen readers and keyboard users.
+ * WCAG 3.2.1 — On Focus (Level A)
+ */
+export default {
+  id: 'no-autofocus',
+  description: 'Avoid using autoFocus attribute — it disrupts screen readers and keyboard navigation',
+  severity: 'warning',
+  wcag: '3.2.1',
+  impact: 'autoFocus moves focus unexpectedly, disorienting screen reader users and disrupting keyboard navigation flow',
+  url: 'https://www.w3.org/WAI/WCAG21/Understanding/on-focus.html',
+
+  check(element) {
+    const hasAutoFocus = 'autoFocus' in element.attributes ||
+                         'autofocus' in element.attributes ||
+                         'autoFocus' in element.hasAttributes ||
+                         'autofocus' in element.hasAttributes;
+
+    if (!hasAutoFocus) return null;
+
+    return {
+      ruleId: this.id,
+      severity: this.severity,
+      message: `<${element.rawName}> uses autoFocus which disrupts screen reader and keyboard navigation`,
+      line: element.line,
+      sourceLine: element.sourceLine,
+      fix: 'Remove the autoFocus attribute. If focus management is needed, use a ref with useEffect for controlled focus.',
+      copilotPrompt: `Look at line ${element.line}. The <${element.rawName}> element uses autoFocus which is an accessibility anti-pattern — it disrupts screen reader announcements and confuses keyboard-only users who expect focus to start at the top of the page. Remove the autoFocus attribute. If you need to manage focus (e.g., in a modal or after navigation), replace it with a React ref and useEffect to focus the element after mount, with a comment explaining why focus management is needed.`,
+    };
+  },
+};

package/src/rules/no-div-button.js

@@ -0,0 +1,54 @@
+/**
+ * Rule: no-div-button
+ * Interactive elements should use semantic HTML, not divs/spans with click handlers.
+ * WCAG 4.1.2 — Name, Role, Value (Level A)
+ * WCAG 2.1.1 — Keyboard (Level A)
+ */
+export default {
+  id: 'no-div-button',
+  description: 'Non-interactive elements (<div>, <span>) with click handlers should use <button> or <a>',
+  severity: 'error',
+  wcag: '4.1.2, 2.1.1',
+  impact: 'Keyboard users cannot interact with div/span elements. Screen readers do not announce them as interactive.',
+  url: 'https://www.w3.org/WAI/WCAG21/Understanding/keyboard.html',
+
+  check(element) {
+    const nonInteractive = ['div', 'span', 'section', 'article', 'li', 'td'];
+    if (!nonInteractive.includes(element.name)) return null;
+    if (element.hasAttributes['...spread']) return null;
+
+    // Check for click handler (JSX: onClick, HTML: onclick)
+    const hasClick = 'onClick' in element.attributes ||
+                     'onclick' in element.attributes ||
+                     'onKeyDown' in element.attributes ||
+                     'onkeydown' in element.attributes ||
+                     'onKeyUp' in element.attributes ||
+                     'onkeyup' in element.attributes ||
+                     'onKeyPress' in element.attributes ||
+                     'onkeypress' in element.attributes;
+
+    if (!hasClick) return null;
+
+    const hasRole = 'role' in element.attributes;
+    const hasTabIndex = 'tabIndex' in element.attributes || 'tabindex' in element.attributes;
+
+    // Issue if has click but missing role AND tabIndex
+    if (!hasRole || !hasTabIndex) {
+      const missing = [];
+      if (!hasRole) missing.push('role');
+      if (!hasTabIndex) missing.push('tabIndex');
+
+      return {
+        ruleId: this.id,
+        severity: this.severity,
+        message: `<${element.rawName}> has a click handler but is missing ${missing.join(' and ')}. Use a <button> instead.`,
+        line: element.line,
+        sourceLine: element.sourceLine,
+        fix: `Replace this <${element.rawName}> with a <button> element, or add role="button" and tabIndex={0}`,
+        copilotPrompt: `Look at line ${element.line}. There is a <${element.rawName}> element with a click handler (onClick) but it is not keyboard-accessible. This is a serious accessibility violation. Replace the <${element.rawName}> with a <button> element. Move the onClick to the button. Remove any role or tabIndex attributes — native buttons handle this automatically. Make sure to preserve the styling by adding className or style if needed. If the element is meant to navigate, use <a> instead.`,
+      };
+    }
+
+    return null;
+  },
+};