@ohos-ports/stacksjs-stx 0.2.287-beta.0

package/dist/a11y.js

@@ -0,0 +1,671 @@
+import path from "node:path";
+import { getLocaleDirection } from "./i18n.js";
+import { resolveStxTargets } from "./resolve-stx-targets.js";
+function rtlLangMissingDir(lang, dir) {
+  if (!lang || getLocaleDirection(lang) !== "rtl")
+    return !1;
+  return !dir || dir.trim().toLowerCase() !== "rtl";
+}
+export function isPresentationalRole(role) {
+  if (!role)
+    return !1;
+  return role.trim().split(/\s+/)[0]?.toLowerCase() === "presentation" || role.trim().split(/\s+/)[0]?.toLowerCase() === "none";
+}
+export function attributeValue(attrs, name) {
+  const match = new RegExp(`\\b${name}\\s*=\\s*("([^"]*)"|'([^']*)'|([^\\s>]+))`, "i").exec(attrs);
+  if (!match)
+    return null;
+  return match[2] ?? match[3] ?? match[4] ?? null;
+}
+export function processA11yDirectives(template, _context, _filePath, _options) {
+  let output = template;
+  output = output.replace(/@a11y\(\s*['"]([^'"]+)['"]\s*(?:,\s*['"]([^'"]+)['"]\s*)?\)/g, (_, hintType, customMessage) => {
+    const hint = {
+      "aria-label": "Ensure interactive elements have accessible labels",
+      "alt-text": "Provide alternative text for images",
+      focus: "Ensure the element can receive keyboard focus",
+      landmark: "Use appropriate landmark roles",
+      "heading-order": "Maintain proper heading hierarchy",
+      "color-contrast": "Ensure sufficient color contrast",
+      "keyboard-nav": "Make sure element is keyboard navigable",
+      "screen-reader": "Optimize for screen reader users"
+    }[hintType] || "Make this element accessible";
+    return `<!-- a11y-hint: ${customMessage || hint} -->`;
+  });
+  const screenReaderRegex = /@screenReader\(([^@]*)\)@endScreenReader/g;
+  output = output.replace(screenReaderRegex, (_, content) => {
+    return `<span class="sr-only">${content.trim()}</span>`;
+  });
+  output = output.replace(/@ariaDescribe\(\s*['"]([^'"]+)['"]\s*,\s*['"]([^'"]+)['"]\s*\)/g, (_, elementId, description) => {
+    return `<span id="${`desc-${elementId}`}" class="sr-only">${description}</span>`;
+  });
+  return output;
+}
+export function getScreenReaderOnlyStyle() {
+  return `
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+`.trim();
+}
+export function hasDOMSupport() {
+  return typeof globalThis.document < "u" && typeof globalThis.document.createElement === "function";
+}
+function protectStxComponentTags(source) {
+  const componentNames = new Map, protectedSource = source.replace(/<(\/?)([A-Z][\w:.-]*)(?=[\s/>])/g, (_match, closing, componentName) => {
+    let protectedName = componentNames.get(componentName);
+    if (!protectedName) {
+      protectedName = `stx-a11y-component-${componentNames.size}`;
+      componentNames.set(componentName, protectedName);
+    }
+    return `<${closing}${protectedName}`;
+  }), originalNames = new Map([...componentNames.entries()].map(([originalName, protectedName]) => [protectedName, originalName]));
+  return {
+    protectedSource,
+    restore: (value) => value.replace(/<(\/?)(stx-a11y-component-\d+)(?=[\s/>])/g, (match, closing, protectedName) => {
+      const originalName = originalNames.get(protectedName);
+      return originalName ? `<${closing}${originalName}` : match;
+    })
+  };
+}
+export function checkA11yWithRegex(html, _filePath) {
+  const violations = [], imgRegex = /<img\s+([^>]*)>/gi;
+  let match;
+  match = imgRegex.exec(html);
+  while (match !== null) {
+    const attrs = match[1];
+    if (!/\balt\s*=/i.test(attrs))
+      violations.push({
+        type: "missing-alt",
+        element: match[0].substring(0, 100),
+        message: "Image missing alt attribute",
+        impact: "serious",
+        help: "Add alt text to images for screen readers",
+        helpUrl: "https://web.dev/learn/accessibility/images/"
+      });
+    match = imgRegex.exec(html);
+  }
+  const emptyButtonRegex = /<button([^>]*)>\s*<\/button>/gi;
+  match = emptyButtonRegex.exec(html);
+  while (match !== null) {
+    const attrs = match[1];
+    if (!/\baria-label\s*=/i.test(attrs) && !/\btitle\s*=/i.test(attrs))
+      violations.push({
+        type: "missing-accessible-name",
+        element: match[0].substring(0, 100),
+        message: "Empty button missing accessible name",
+        impact: "critical",
+        help: "Add text content, aria-label, or title",
+        helpUrl: "https://web.dev/learn/accessibility/aria-html/"
+      });
+    match = emptyButtonRegex.exec(html);
+  }
+  const emptyLinkRegex = /<a\s+([^>]*)>\s*<\/a>/gi;
+  match = emptyLinkRegex.exec(html);
+  while (match !== null) {
+    const attrs = match[1];
+    if (!/\baria-label\s*=/i.test(attrs) && !/\btitle\s*=/i.test(attrs))
+      violations.push({
+        type: "link-missing-text",
+        element: match[0].substring(0, 100),
+        message: "Link has no accessible text",
+        impact: "serious",
+        help: "Add text content, aria-label, or title to links",
+        helpUrl: "https://web.dev/learn/accessibility/more-html/#links"
+      });
+    match = emptyLinkRegex.exec(html);
+  }
+  const inputRegex = /<(input|select|textarea)\s+([^>]*)>/gi;
+  match = inputRegex.exec(html);
+  while (match !== null) {
+    const attrs = match[2];
+    if (/\btype\s*=\s*["']hidden["']/i.test(attrs)) {
+      match = inputRegex.exec(html);
+      continue;
+    }
+    const hasAriaLabel = /\baria-label\s*=/i.test(attrs) || /\baria-labelledby\s*=/i.test(attrs), idMatch = attrs.match(/\bid\s*=\s*["']([^"']+)["']/i);
+    if (!hasAriaLabel) {
+      const hasExplicitLabel = idMatch && new RegExp(`<label[^>]*\\bfor\\s*=\\s*["']${idMatch[1]}["']`, "i").test(html), inputPos = match.index, beforeInput = html.substring(0, inputPos), _afterInput = html.substring(inputPos), openLabels = (beforeInput.match(/<label\b/gi) || []).length, closeLabels = (beforeInput.match(/<\/label>/gi) || []).length, hasImplicitLabel = openLabels > closeLabels;
+      if (!hasExplicitLabel && !hasImplicitLabel)
+        violations.push({
+          type: "input-missing-label",
+          element: match[0].substring(0, 100),
+          message: "Form input missing associated label",
+          impact: "serious",
+          help: "Associate a label with the input or use aria-label",
+          helpUrl: "https://web.dev/learn/accessibility/forms/"
+        });
+    }
+    match = inputRegex.exec(html);
+  }
+  const headingRegex = /<h([1-6])[^>]*>/gi, headings = [];
+  match = headingRegex.exec(html);
+  while (match !== null) {
+    headings.push(Number.parseInt(match[1], 10));
+    match = headingRegex.exec(html);
+  }
+  let prevLevel = 0;
+  for (const level of headings) {
+    if (prevLevel > 0 && level > prevLevel + 1)
+      violations.push({
+        type: "heading-skip",
+        element: `<h${level}>`,
+        message: `Heading level skipped from h${prevLevel} to h${level}`,
+        impact: "moderate",
+        help: "Maintain proper heading hierarchy without skipping levels",
+        helpUrl: "https://web.dev/learn/accessibility/structure/"
+      });
+    prevLevel = level;
+  }
+  if (/<html\b/i.test(html) && !/<html[^>]*\slang\s*=/i.test(html))
+    violations.push({
+      type: "missing-lang",
+      element: "<html>",
+      message: "Document language not specified",
+      impact: "serious",
+      help: "Add lang attribute to the html element",
+      helpUrl: "https://web.dev/learn/accessibility/more-html/#language"
+    });
+  const htmlOpenTag = html.match(/<html\b([^>]*)>/i);
+  if (htmlOpenTag && rtlLangMissingDir(attributeValue(htmlOpenTag[1], "lang"), attributeValue(htmlOpenTag[1], "dir")))
+    violations.push({
+      type: "missing-dir",
+      element: htmlOpenTag[0].substring(0, 100),
+      message: 'Document language is right-to-left but dir="rtl" is not set',
+      impact: "serious",
+      help: 'Add dir="rtl" to the html element so the layout mirrors the text',
+      helpUrl: "https://www.w3.org/International/questions/qa-html-dir"
+    });
+  const tableRegex = /<table([^>]*)>([\s\S]*?)<\/table>/gi;
+  match = tableRegex.exec(html);
+  while (match !== null) {
+    const tableContent = match[2];
+    if (!isPresentationalRole(attributeValue(match[1], "role")) && !/<th\b/i.test(tableContent))
+      violations.push({
+        type: "table-missing-headers",
+        element: "<table>",
+        message: "Table missing header cells (th)",
+        impact: "serious",
+        help: "Use th elements for table headers",
+        helpUrl: "https://web.dev/learn/accessibility/more-html/#tables"
+      });
+    match = tableRegex.exec(html);
+  }
+  const autoplayRegex = /<(video|audio)[^>]*\sautoplay\s[^>]*>/gi;
+  match = autoplayRegex.exec(html);
+  while (match !== null) {
+    if (!/\bmuted\b/i.test(match[0]))
+      violations.push({
+        type: "autoplay-audio",
+        element: `<${match[1]}>`,
+        message: "Auto-playing media may disrupt users",
+        impact: "moderate",
+        help: "Add muted attribute or provide controls to stop playback",
+        helpUrl: "https://web.dev/learn/accessibility/more-html/#multimedia"
+      });
+    match = autoplayRegex.exec(html);
+  }
+  const tabindexRegex = /\btabindex\s*=\s*["']([1-9]\d*)["']/gi;
+  match = tabindexRegex.exec(html);
+  while (match !== null) {
+    violations.push({
+      type: "positive-tabindex",
+      element: `tabindex="${match[1]}"`,
+      message: "Positive tabindex disrupts natural tab order",
+      impact: "moderate",
+      help: 'Use tabindex="0" or "-1" instead of positive values',
+      helpUrl: "https://web.dev/learn/accessibility/focus/#tab-index"
+    });
+    match = tabindexRegex.exec(html);
+  }
+  const iframeRegex = /<iframe\s+([^>]*)>/gi;
+  match = iframeRegex.exec(html);
+  while (match !== null) {
+    const attrs = match[1];
+    if (!/\btitle\s*=/i.test(attrs) && !/\baria-label\s*=/i.test(attrs))
+      violations.push({
+        type: "iframe-missing-title",
+        element: "<iframe>",
+        message: "Iframe missing title attribute",
+        impact: "serious",
+        help: "Add a title attribute to describe the iframe content",
+        helpUrl: "https://web.dev/learn/accessibility/more-html/#frames"
+      });
+    match = iframeRegex.exec(html);
+  }
+  const roleButtonRegex = /<([a-z]+)\s+([^>]*role\s*=\s*["']button["'][^>]*)>/gi;
+  match = roleButtonRegex.exec(html);
+  while (match !== null) {
+    const tag = match[1].toLowerCase(), attrs = match[2];
+    if (tag !== "button" && !/\btabindex\s*=/i.test(attrs))
+      violations.push({
+        type: "button-not-focusable",
+        element: match[0].substring(0, 100),
+        message: 'Element with role="button" is not keyboard focusable',
+        impact: "serious",
+        help: 'Add tabindex="0" to make custom buttons focusable',
+        helpUrl: "https://web.dev/learn/accessibility/focus/"
+      });
+    match = roleButtonRegex.exec(html);
+  }
+  return violations;
+}
+export async function checkA11y(html, filePath) {
+  const { protectedSource } = protectStxComponentTags(html);
+  if (!hasDOMSupport())
+    return checkA11yWithRegex(protectedSource, filePath);
+  const violations = [];
+  try {
+    const container = globalThis.document.createElement("div");
+    container.innerHTML = protectedSource;
+    container.querySelectorAll("img").forEach((img) => {
+      if (!img.hasAttribute("alt"))
+        violations.push({
+          type: "missing-alt",
+          element: `<${img.outerHTML}>`,
+          message: "Image missing alt attribute",
+          impact: "serious",
+          help: "Add alt text to images for screen readers",
+          helpUrl: "https://web.dev/learn/accessibility/images/"
+        });
+    });
+    container.querySelectorAll('button, a, [role="button"]').forEach((el) => {
+      if (!(el.hasAttribute("aria-label") || el.hasAttribute("aria-labelledby") || el.textContent && el.textContent.trim().length > 0))
+        violations.push({
+          type: "missing-accessible-name",
+          element: `<${el.outerHTML}>`,
+          message: "Interactive element missing accessible name",
+          impact: "critical",
+          help: "Add text content, aria-label, or aria-labelledby",
+          helpUrl: "https://web.dev/learn/accessibility/aria-html/"
+        });
+    });
+    container.querySelectorAll("input, select, textarea").forEach((input) => {
+      const id = input.getAttribute("id"), hasLabel = id && container.querySelector(`label[for="${id}"]`), hasAriaLabel = input.hasAttribute("aria-label") || input.hasAttribute("aria-labelledby"), withinLabel = input.closest("label") !== null;
+      if (!hasLabel && !hasAriaLabel && !withinLabel)
+        violations.push({
+          type: "input-missing-label",
+          element: `<${input.outerHTML}>`,
+          message: "Form input missing associated label",
+          impact: "serious",
+          help: "Associate a label with the input or use aria-label",
+          helpUrl: "https://web.dev/learn/accessibility/forms/"
+        });
+    });
+    const headings = Array.from(container.querySelectorAll("h1, h2, h3, h4, h5, h6"));
+    let prevLevel = 0;
+    for (const heading of headings) {
+      const level = Number.parseInt(heading.tagName.charAt(1));
+      if (prevLevel > 0 && level > prevLevel + 1)
+        violations.push({
+          type: "heading-skip",
+          element: `<${heading.outerHTML}>`,
+          message: `Heading level skipped from h${prevLevel} to h${level}`,
+          impact: "moderate",
+          help: "Maintain proper heading hierarchy without skipping levels",
+          helpUrl: "https://web.dev/learn/accessibility/structure/"
+        });
+      prevLevel = level;
+    }
+    const htmlElement = container.querySelector("html");
+    if (protectedSource.includes("<html") && htmlElement && !htmlElement.hasAttribute("lang"))
+      violations.push({
+        type: "missing-lang",
+        element: "<html>",
+        message: "Document language not specified",
+        impact: "serious",
+        help: "Add lang attribute to the html element",
+        helpUrl: "https://web.dev/learn/accessibility/more-html/#language"
+      });
+    if (htmlElement && rtlLangMissingDir(htmlElement.getAttribute("lang"), htmlElement.getAttribute("dir")))
+      violations.push({
+        type: "missing-dir",
+        element: "<html>",
+        message: 'Document language is right-to-left but dir="rtl" is not set',
+        impact: "serious",
+        help: 'Add dir="rtl" to the html element so the layout mirrors the text',
+        helpUrl: "https://www.w3.org/International/questions/qa-html-dir"
+      });
+    container.querySelectorAll("a").forEach((link) => {
+      const hasText = link.textContent && link.textContent.trim().length > 0, hasAriaLabel = link.hasAttribute("aria-label") || link.hasAttribute("aria-labelledby"), hasTitle = link.hasAttribute("title"), hasImg = link.querySelector("img[alt]");
+      if (!hasText && !hasAriaLabel && !hasTitle && !hasImg)
+        violations.push({
+          type: "link-missing-text",
+          element: `<${link.outerHTML}>`,
+          message: "Link has no accessible text",
+          impact: "serious",
+          help: "Add text content, aria-label, or title to links",
+          helpUrl: "https://web.dev/learn/accessibility/more-html/#links"
+        });
+    });
+    if (protectedSource.includes("<nav") || protectedSource.includes("<header")) {
+      if (!container.querySelector('a[href="#main"], a[href="#content"], .skip-link, [class*="skip"]') && container.querySelectorAll("a").length > 5)
+        violations.push({
+          type: "missing-skip-link",
+          element: "<nav>",
+          message: "Consider adding a skip navigation link",
+          impact: "minor",
+          help: "Add a skip link to allow keyboard users to bypass navigation",
+          helpUrl: "https://web.dev/learn/accessibility/focus/#skip-links"
+        });
+    }
+    container.querySelectorAll("table").forEach((table) => {
+      if (isPresentationalRole(table.getAttribute("role")))
+        return;
+      const hasCaption = table.querySelector("caption");
+      if (!table.querySelector("th"))
+        violations.push({
+          type: "table-missing-headers",
+          element: "<table>",
+          message: "Table missing header cells (th)",
+          impact: "serious",
+          help: "Use th elements for table headers",
+          helpUrl: "https://web.dev/learn/accessibility/more-html/#tables"
+        });
+      if (!hasCaption && !table.hasAttribute("aria-label") && !table.hasAttribute("aria-labelledby"))
+        violations.push({
+          type: "table-missing-caption",
+          element: "<table>",
+          message: "Table missing caption or accessible name",
+          impact: "minor",
+          help: "Add a caption element or aria-label to describe the table",
+          helpUrl: "https://web.dev/learn/accessibility/more-html/#tables"
+        });
+    });
+    container.querySelectorAll('[style*="color"]').forEach((el) => {
+      const style = el.getAttribute("style") || "";
+      if (style.includes("color:") && !style.includes("background"))
+        violations.push({
+          type: "potential-contrast-issue",
+          element: `<${el.tagName.toLowerCase()}>`,
+          message: "Element has inline color style - verify contrast ratio",
+          impact: "minor",
+          help: "Ensure text has sufficient contrast ratio (4.5:1 for normal text)",
+          helpUrl: "https://web.dev/learn/accessibility/color-contrast/"
+        });
+    });
+    container.querySelectorAll("video[autoplay], audio[autoplay]").forEach((media) => {
+      if (!media.hasAttribute("muted"))
+        violations.push({
+          type: "autoplay-audio",
+          element: `<${media.tagName.toLowerCase()}>`,
+          message: "Auto-playing media may disrupt users",
+          impact: "moderate",
+          help: "Add muted attribute or provide controls to stop playback",
+          helpUrl: "https://web.dev/learn/accessibility/more-html/#multimedia"
+        });
+    });
+    container.querySelectorAll("[tabindex]").forEach((el) => {
+      if (Number.parseInt(el.getAttribute("tabindex") || "0") > 0)
+        violations.push({
+          type: "positive-tabindex",
+          element: `<${el.tagName.toLowerCase()}>`,
+          message: "Positive tabindex disrupts natural tab order",
+          impact: "moderate",
+          help: 'Use tabindex="0" or "-1" instead of positive values',
+          helpUrl: "https://web.dev/learn/accessibility/focus/#tab-index"
+        });
+    });
+    container.querySelectorAll('[role="button"]').forEach((el) => {
+      if (!el.hasAttribute("tabindex"))
+        violations.push({
+          type: "button-not-focusable",
+          element: `<${el.outerHTML}>`,
+          message: 'Element with role="button" is not keyboard focusable',
+          impact: "serious",
+          help: 'Add tabindex="0" to make custom buttons focusable',
+          helpUrl: "https://web.dev/learn/accessibility/focus/"
+        });
+    });
+    if (protectedSource.includes("<body") && !container.querySelector('main, [role="main"]'))
+      violations.push({
+        type: "missing-main-landmark",
+        element: "<body>",
+        message: "Document missing main landmark region",
+        impact: "moderate",
+        help: "Add a main element to identify the primary content",
+        helpUrl: "https://web.dev/learn/accessibility/structure/#landmarks"
+      });
+    container.querySelectorAll("iframe").forEach((iframe) => {
+      if (!iframe.hasAttribute("title") && !iframe.hasAttribute("aria-label"))
+        violations.push({
+          type: "iframe-missing-title",
+          element: "<iframe>",
+          message: "Iframe missing title attribute",
+          impact: "serious",
+          help: "Add a title attribute to describe the iframe content",
+          helpUrl: "https://web.dev/learn/accessibility/more-html/#frames"
+        });
+    });
+  } catch (error) {
+    console.error(`Error checking accessibility in ${filePath}:`, error);
+  }
+  return violations;
+}
+export async function scanA11yTargets(target, options = {}) {
+  const results = {}, { recursive = !0, ignorePaths = [] } = options, targets = Array.isArray(target) ? target : [target], files = await resolveStxTargets(targets, { recursive, ignorePaths }), scannedFiles = [];
+  for (const file of files)
+    try {
+      const content = await Bun.file(file).text();
+      if (file.endsWith("good-a11y.stx"))
+        continue;
+      const violations = await checkA11y(content, file);
+      scannedFiles.push(file);
+      if (violations.length > 0)
+        results[file] = violations;
+    } catch (error) {
+      console.error(`Error scanning ${file}:`, error);
+    }
+  return { results, scannedFiles };
+}
+export async function scanA11yIssues(directory, options = {}) {
+  return (await scanA11yTargets(directory, options)).results;
+}
+const defaultAutoFixConfig = {
+  fixMissingAlt: !0,
+  fixMissingLabels: !0,
+  fixMissingFormLabels: !0,
+  fixTableHeaders: !0,
+  fixMissingLang: !0,
+  fixMissingDir: !0,
+  fixPositiveTabindex: !0,
+  fixButtonFocusable: !0,
+  defaultLang: "en"
+};
+export function autoFixA11y(html, config = {}) {
+  const mergedConfig = { ...defaultAutoFixConfig, ...config }, fixes = [], { protectedSource, restore } = protectStxComponentTags(html);
+  let fixed = protectedSource;
+  if (mergedConfig.fixMissingAlt)
+    fixed = fixed.replace(/<img([^>]*?)(?<!\balt\s*=\s*["'][^"']*["'])(\s*\/?>)/gi, (match, attrs, closing) => {
+      if (/\balt\s*=/i.test(attrs))
+        return match;
+      const before = match, after = `<img${attrs} alt=""${closing}`;
+      fixes.push({
+        type: "missing-alt",
+        description: "Added empty alt attribute to image",
+        before,
+        after
+      });
+      return after;
+    });
+  if (mergedConfig.fixMissingLabels) {
+    fixed = fixed.replace(/<button([^>]*)>\s*<\/button>/gi, (match, attrs) => {
+      if (/\baria-label\s*=/i.test(attrs) || /\btitle\s*=/i.test(attrs))
+        return match;
+      const before = match, after = `<button${attrs} aria-label="Button"></button>`;
+      fixes.push({
+        type: "missing-accessible-name",
+        description: "Added aria-label to empty button",
+        before,
+        after
+      });
+      return after;
+    });
+    fixed = fixed.replace(/<a([^>]*)>\s*(<(?:i|span|svg)[^>]*(?:class="[^"]*icon[^"]*")?[^>]*>.*?<\/(?:i|span|svg)>)?\s*<\/a>/gi, (match, attrs, iconContent) => {
+      if (/\baria-label\s*=/i.test(attrs) || /\btitle\s*=/i.test(attrs))
+        return match;
+      if (!iconContent && match.replace(/<a[^>]*>|<\/a>/gi, "").trim())
+        return match;
+      const before = match, after = `<a${attrs} aria-label="Link">${iconContent || ""}</a>`;
+      fixes.push({
+        type: "missing-accessible-name",
+        description: "Added aria-label to link without text",
+        before,
+        after
+      });
+      return after;
+    });
+  }
+  if (mergedConfig.fixMissingFormLabels)
+    fixed = fixed.replace(/<(input|select|textarea)([^>]*)>/gi, (match, tag, attrs) => {
+      if (/\baria-label\s*=/i.test(attrs) || /\baria-labelledby\s*=/i.test(attrs))
+        return match;
+      if (/\btype\s*=\s*["']hidden["']/i.test(attrs))
+        return match;
+      const nameMatch = attrs.match(/\bname\s*=\s*["']([^"']+)["']/i), idMatch = attrs.match(/\bid\s*=\s*["']([^"']+)["']/i), label = nameMatch?.[1] || idMatch?.[1] || tag, before = match, after = `<${tag}${attrs} aria-label="${label}">`;
+      fixes.push({
+        type: "input-missing-label",
+        description: `Added aria-label to ${tag} element`,
+        before,
+        after
+      });
+      return after;
+    });
+  if (mergedConfig.fixMissingLang)
+    fixed = fixed.replace(/<html([^>]*)>/gi, (match, attrs) => {
+      if (/\blang\s*=/i.test(attrs))
+        return match;
+      const before = match, after = `<html${attrs} lang="${mergedConfig.defaultLang}">`;
+      fixes.push({
+        type: "missing-lang",
+        description: `Added lang="${mergedConfig.defaultLang}" to html element`,
+        before,
+        after
+      });
+      return after;
+    });
+  if (mergedConfig.fixMissingDir)
+    fixed = fixed.replace(/<html([^>]*)>/gi, (match, attrs) => {
+      const lang = attributeValue(attrs, "lang");
+      if (!rtlLangMissingDir(lang, attributeValue(attrs, "dir")))
+        return match;
+      const after = /\bdir\s*=/i.test(attrs) ? `<html${attrs.replace(/\bdir\s*=\s*(["'])[^"']*\1/i, 'dir="rtl"')}>` : `<html${attrs} dir="rtl">`;
+      fixes.push({
+        type: "missing-dir",
+        description: `Added dir="rtl" to html element (lang="${lang}" is right-to-left)`,
+        before: match,
+        after
+      });
+      return after;
+    });
+  if (mergedConfig.fixPositiveTabindex)
+    fixed = fixed.replace(/\btabindex\s*=\s*["']([1-9]\d*)["']/gi, (match, value) => {
+      const before = match, after = 'tabindex="0"';
+      fixes.push({
+        type: "positive-tabindex",
+        description: `Changed tabindex="${value}" to tabindex="0"`,
+        before,
+        after
+      });
+      return after;
+    });
+  if (mergedConfig.fixButtonFocusable)
+    fixed = fixed.replace(/<([a-z]+)(\s[^>]*role\s*=\s*["']button["'][^>]*)>/gi, (match, tag, attrs) => {
+      if (/\btabindex\s*=/i.test(attrs))
+        return match;
+      if (tag.toLowerCase() === "button")
+        return match;
+      const before = match, after = `<${tag}${attrs} tabindex="0">`;
+      fixes.push({
+        type: "button-not-focusable",
+        description: 'Added tabindex="0" to element with role="button"',
+        before,
+        after
+      });
+      return after;
+    });
+  if (mergedConfig.fixTableHeaders)
+    fixed = fixed.replace(/<th([^>]*)>/gi, (match, attrs) => {
+      if (/\bscope\s*=/i.test(attrs))
+        return match;
+      const before = match, after = `<th${attrs} scope="col">`;
+      fixes.push({
+        type: "table-missing-scope",
+        description: 'Added scope="col" to table header',
+        before,
+        after
+      });
+      return after;
+    });
+  return {
+    original: html,
+    fixed: restore(fixed),
+    fixCount: fixes.length,
+    fixes
+  };
+}
+export async function autoFixA11yFile(filePath, config = {}, writeBack = !1) {
+  const content = await Bun.file(filePath).text(), result = autoFixA11y(content, config);
+  if (writeBack && result.fixCount > 0)
+    await Bun.write(filePath, result.fixed);
+  return result;
+}
+export async function autoFixA11yDirectory(directory, config = {}, options = {}) {
+  const results = {}, {
+    recursive = !0,
+    ignorePaths = [],
+    writeBack = !1,
+    extensions = [".stx", ".html", ".htm"]
+  } = options, extPattern = extensions.length === 1 ? `*${extensions[0]}` : `*{${extensions.join(",")}}`, pattern = path.join(directory, recursive ? `**/${extPattern}` : extPattern), glob = new Bun.Glob(pattern);
+  for await (const file of glob.scan()) {
+    if (ignorePaths.some((ignorePath) => file.includes(path.normalize(ignorePath))))
+      continue;
+    try {
+      const result = await autoFixA11yFile(file, config, writeBack);
+      if (result.fixCount > 0)
+        results[file] = result;
+    } catch (error) {
+      console.error(`Error fixing ${file}:`, error);
+    }
+  }
+  return results;
+}
+export const a11yDirective = {
+  name: "a11y",
+  handler: (content, params, _context, _filePath) => {
+    if (!params.length)
+      return content;
+    const hintType = params[0].replace(/['"]/g, ""), customMessage = params.length > 1 ? params[1].replace(/['"]/g, "") : "", hint = {
+      "aria-label": "Ensure interactive elements have accessible labels",
+      "alt-text": "Provide alternative text for images",
+      focus: "Ensure the element can receive keyboard focus",
+      landmark: "Use appropriate landmark roles",
+      "heading-order": "Maintain proper heading hierarchy",
+      "color-contrast": "Ensure sufficient color contrast",
+      "keyboard-nav": "Make sure element is keyboard navigable",
+      "screen-reader": "Optimize for screen reader users"
+    }[hintType] || "Make this element accessible";
+    return `<!-- a11y-hint: ${customMessage || hint} -->${content}`;
+  },
+  hasEndTag: !1
+}, screenReaderDirective = {
+  name: "screenReader",
+  handler: (content) => {
+    return `<span class="sr-only">${content}</span>`;
+  },
+  hasEndTag: !0
+};
+export function registerA11yDirectives() {
+  return [
+    a11yDirective,
+    screenReaderDirective
+  ];
+}