@stacksjs/stx 0.2.125 → 0.2.127

package/dist/a11y.js

@@ -41,6 +41,23 @@ export function getScreenReaderOnlyStyle() {
 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;
+    })
+  };
+}
 function checkA11yWithRegex(html, _filePath) {
   const violations = [], imgRegex = /<img\s+([^>]*)>/gi;
   let match;
@@ -214,12 +231,13 @@ function checkA11yWithRegex(html, _filePath) {
   return violations;
 }
 export async function checkA11y(html, filePath) {
+  const { protectedSource } = protectStxComponentTags(html);
   if (!hasDOMSupport())
-    return checkA11yWithRegex(html, filePath);
+    return checkA11yWithRegex(protectedSource, filePath);
   const violations = [];
   try {
     const container = globalThis.document.createElement("div");
-    container.innerHTML = html;
+    container.innerHTML = protectedSource;
     container.querySelectorAll("img").forEach((img) => {
       if (!img.hasAttribute("alt"))
         violations.push({
@@ -270,7 +288,7 @@ export async function checkA11y(html, filePath) {
       prevLevel = level;
     }
     const htmlElement = container.querySelector("html");
-    if (html.includes("<html") && htmlElement && !htmlElement.hasAttribute("lang"))
+    if (protectedSource.includes("<html") && htmlElement && !htmlElement.hasAttribute("lang"))
       violations.push({
         type: "missing-lang",
         element: "<html>",
@@ -291,7 +309,7 @@ export async function checkA11y(html, filePath) {
           helpUrl: "https://web.dev/learn/accessibility/more-html/#links"
         });
     });
-    if (html.includes("<nav") || html.includes("<header")) {
+    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",
@@ -368,7 +386,7 @@ export async function checkA11y(html, filePath) {
           helpUrl: "https://web.dev/learn/accessibility/focus/"
         });
     });
-    if (html.includes("<body") && !container.querySelector('main, [role="main"]'))
+    if (protectedSource.includes("<body") && !container.querySelector('main, [role="main"]'))
       violations.push({
         type: "missing-main-landmark",
         element: "<body>",
@@ -422,8 +440,8 @@ const defaultAutoFixConfig = {
   defaultLang: "en"
 };
 export function autoFixA11y(html, config = {}) {
-  const mergedConfig = { ...defaultAutoFixConfig, ...config }, fixes = [];
-  let fixed = html;
+  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))
@@ -534,7 +552,7 @@ export function autoFixA11y(html, config = {}) {
     });
   return {
     original: html,
-    fixed,
+    fixed: restore(fixed),
     fixCount: fixes.length,
     fixes
   };