@matthesketh/utopia-compiler 0.3.1 → 0.5.0

package/dist/index.cjs

@@ -21,6 +21,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   SFCParseError: () => SFCParseError,
+  checkA11y: () => checkA11y,
   compile: () => compile,
   compileStyle: () => compileStyle,
   compileTemplate: () => compileTemplate,
@@ -31,16 +32,19 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/parser.ts
+var BLOCK_RE = /<(template|script|style|test)([\s][^>]*)?\s*>/g;
+var ATTR_RE = /([a-zA-Z_][\w-]*)\s*(?:=\s*(?:"([^"]*)"|'([^']*)'|(\S+)))?/g;
 function parse(source, filename = "anonymous.utopia") {
   const descriptor = {
     template: null,
     script: null,
     style: null,
+    test: null,
     filename
   };
-  const blockRe = /<(template|script|style)([\s][^>]*)?\s*>/g;
+  BLOCK_RE.lastIndex = 0;
   let match;
-  while ((match = blockRe.exec(source)) !== null) {
+  while ((match = BLOCK_RE.exec(source)) !== null) {
     const tagName = match[1];
     const attrString = match[2] || "";
     const openTagStart = match.index;
@@ -71,11 +75,10 @@ function parse(source, filename = "anonymous.utopia") {
       );
     }
     descriptor[tagName] = block;
-    blockRe.lastIndex = blockEnd;
+    BLOCK_RE.lastIndex = blockEnd;
   }
   return descriptor;
 }
-var ATTR_RE = /([a-zA-Z_][\w-]*)\s*(?:=\s*(?:"([^"]*)"|'([^']*)'|(\S+)))?/g;
 function parseAttributes(raw) {
   const attrs = {};
   let m;
@@ -112,6 +115,16 @@ var SFCParseError = class extends Error {
 };
 
 // src/template-compiler.ts
+var TAG_NAME_CHAR_RE = /[a-zA-Z0-9\-_]/;
+var ATTR_NAME_CHAR_RE = /[a-zA-Z0-9\-_:@.]/;
+var ATTR_VALUE_END_RE = /[\s/>]/;
+var WHITESPACE_RE = /\s/;
+var TAG_START_CHAR_RE = /[a-zA-Z]/;
+var U_FOR_EXPR_RE = /^\s*(?:\(\s*(\w+)\s*(?:,\s*(\w+)\s*)?\)|(\w+))\s+in\s+(.+)$/;
+var COMPONENT_TAG_RE = /^[A-Z][a-zA-Z0-9_$]*$/;
+var BACKSLASH_RE = /\\/g;
+var SINGLE_QUOTE_RE = /'/g;
+var HTML_ENTITY_RE = /&(?:#(\d+)|#x([0-9a-fA-F]+)|(\w+));/g;
 function compileTemplate(template, options = {}) {
   const ast = parseTemplate(template);
   return generate(ast, options);
@@ -293,7 +306,7 @@ var TemplateParser = class {
   // ---- Low-level helpers --------------------------------------------------
   readTagName() {
     const start = this.pos;
-    while (this.pos < this.source.length && /[a-zA-Z0-9\-_]/.test(this.source[this.pos])) {
+    while (this.pos < this.source.length && TAG_NAME_CHAR_RE.test(this.source[this.pos])) {
       this.pos++;
     }
     const name = this.source.slice(start, this.pos);
@@ -302,7 +315,7 @@ var TemplateParser = class {
   }
   readAttributeName() {
     const start = this.pos;
-    while (this.pos < this.source.length && /[a-zA-Z0-9\-_:@.]/.test(this.source[this.pos])) {
+    while (this.pos < this.source.length && ATTR_NAME_CHAR_RE.test(this.source[this.pos])) {
       this.pos++;
     }
     return this.source.slice(start, this.pos);
@@ -319,13 +332,13 @@ var TemplateParser = class {
       return value;
     }
     const start = this.pos;
-    while (this.pos < this.source.length && !/[\s/>]/.test(this.source[this.pos])) {
+    while (this.pos < this.source.length && !ATTR_VALUE_END_RE.test(this.source[this.pos])) {
       this.pos++;
     }
     return this.source.slice(start, this.pos);
   }
   skipWhitespace() {
-    while (this.pos < this.source.length && /\s/.test(this.source[this.pos])) {
+    while (this.pos < this.source.length && WHITESPACE_RE.test(this.source[this.pos])) {
       this.pos++;
     }
   }
@@ -335,7 +348,7 @@ var TemplateParser = class {
   /** Returns true when the char after `<` looks like the start of a tag name. */
   peekTagStart() {
     const next = this.source[this.pos + 1];
-    return next !== void 0 && /[a-zA-Z]/.test(next);
+    return next !== void 0 && TAG_START_CHAR_RE.test(next);
   }
   expect(str) {
     if (!this.lookingAt(str)) {
@@ -405,7 +418,7 @@ function classifyDirective(name, value) {
   return null;
 }
 function isDirectiveKind(s) {
-  return s === "on" || s === "bind" || s === "if" || s === "else" || s === "for" || s === "model";
+  return s === "on" || s === "bind" || s === "if" || s === "else" || s === "else-if" || s === "for" || s === "model";
 }
 var CodeGenerator = class {
   constructor(options) {
@@ -496,7 +509,8 @@ ${fnBody}
       }
     }
     for (const dir of node.directives) {
-      if (dir.kind === "if" || dir.kind === "else" || dir.kind === "for") continue;
+      if (dir.kind === "if" || dir.kind === "else" || dir.kind === "else-if" || dir.kind === "for")
+        continue;
       this.genDirective(elVar, dir, scope);
     }
     this.genChildren(elVar, node.children, scope);
@@ -582,7 +596,7 @@ ${fnBody}
     this.emit(`addEventListener(${elVar}, 'input', (e) => ${signalRef}.set(e.target.value))`);
   }
   // ---- Structural: u-if ---------------------------------------------------
-  genIf(node, dir, scope, elseNode) {
+  genIf(node, dir, scope, elseIfChain, elseNode) {
     this.helpers.add("createIf");
     const anchorVar = this.freshVar();
     this.helpers.add("createComment");
@@ -590,7 +604,7 @@ ${fnBody}
     const condition = this.resolveExpression(dir.expression, scope);
     const strippedNode = {
       ...node,
-      directives: node.directives.filter((d) => d.kind !== "if")
+      directives: node.directives.filter((d) => d.kind !== "if" && d.kind !== "else-if")
     };
     const trueFnVar = this.freshVar();
     const savedCode = this.code;
@@ -605,7 +619,29 @@ ${fnBody}
     this.emit(`  return ${innerVar}`);
     this.emit(`}`);
     let elseArg = "";
-    if (elseNode) {
+    if (elseIfChain && elseIfChain.length > 0) {
+      const firstElseIf = elseIfChain[0];
+      const remainingElseIfs = elseIfChain.slice(1);
+      const falseFnVar = this.freshVar();
+      const savedCode2 = this.code;
+      this.code = [];
+      const nestedAnchor = this.genIf(
+        firstElseIf.node,
+        firstElseIf.dir,
+        scope,
+        remainingElseIfs.length > 0 ? remainingElseIfs : void 0,
+        elseNode
+      );
+      const nestedLines = [...this.code];
+      this.code = savedCode2;
+      this.emit(`const ${falseFnVar} = () => {`);
+      for (const line of nestedLines) {
+        this.emit(`  ${line}`);
+      }
+      this.emit(`  return ${nestedAnchor}`);
+      this.emit(`}`);
+      elseArg = `, ${falseFnVar}`;
+    } else if (elseNode) {
       const falseFnVar = this.freshVar();
       const strippedElse = {
         ...elseNode,
@@ -633,9 +669,7 @@ ${fnBody}
     const anchorVar = this.freshVar();
     this.helpers.add("createComment");
     this.emit(`const ${anchorVar} = createComment('u-for')`);
-    const forMatch = dir.expression.match(
-      /^\s*(?:\(\s*(\w+)\s*(?:,\s*(\w+)\s*)?\)|(\w+))\s+in\s+(.+)$/
-    );
+    const forMatch = dir.expression.match(U_FOR_EXPR_RE);
     if (!forMatch) {
       throw new Error(`Invalid u-for expression: "${dir.expression}"`);
     }
@@ -671,7 +705,7 @@ ${fnBody}
     this.emitOrDefer(`createFor(${anchorVar}, () => ${listExpr}, ${renderFnVar}${keyArg})`);
     return anchorVar;
   }
-  // ---- Children processing (handles u-if / u-else pairing) ----------------
+  // ---- Children processing (handles u-if / u-else-if / u-else pairing) ----
   genChildren(parentVar, children, scope) {
     this.deferredCallsStack.push([]);
     let i = 0;
@@ -680,24 +714,39 @@ ${fnBody}
       if (child.type === 1 /* Element */) {
         const ifDir = child.directives.find((d) => d.kind === "if");
         if (ifDir) {
+          const elseIfChain = [];
           let elseNode;
           let skipTo = i + 1;
           for (let j = i + 1; j < children.length; j++) {
             const next = children[j];
             if (next.type === 2 /* Text */ && !next.content.trim()) continue;
-            if (next.type === 1 /* Element */ && next.directives.some((d) => d.kind === "else")) {
-              elseNode = next;
-              skipTo = j + 1;
+            if (next.type === 1 /* Element */) {
+              const elseIfDir = next.directives.find((d) => d.kind === "else-if");
+              if (elseIfDir) {
+                elseIfChain.push({ node: next, dir: elseIfDir });
+                skipTo = j + 1;
+                continue;
+              }
+              if (next.directives.some((d) => d.kind === "else")) {
+                elseNode = next;
+                skipTo = j + 1;
+              }
             }
             break;
           }
-          const childVar2 = this.genIf(child, ifDir, scope, elseNode);
+          const childVar2 = this.genIf(
+            child,
+            ifDir,
+            scope,
+            elseIfChain.length > 0 ? elseIfChain : void 0,
+            elseNode
+          );
           this.helpers.add("appendChild");
           this.emit(`appendChild(${parentVar}, ${childVar2})`);
           i = skipTo;
           continue;
         }
-        if (child.directives.some((d) => d.kind === "else")) {
+        if (child.directives.some((d) => d.kind === "else" || d.kind === "else-if")) {
           i++;
           continue;
         }
@@ -823,10 +872,10 @@ ${fnBody}
   }
 };
 function isComponentTag(tag) {
-  return /^[A-Z][a-zA-Z0-9_$]*$/.test(tag);
+  return COMPONENT_TAG_RE.test(tag);
 }
 function escapeStr(s) {
-  return s.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
+  return s.replace(BACKSLASH_RE, "\\\\").replace(SINGLE_QUOTE_RE, "\\'");
 }
 var ENTITY_MAP = {
   "&amp;": "&",
@@ -855,7 +904,8 @@ var ENTITY_MAP = {
   "&divide;": "\xF7"
 };
 function decodeEntities(text) {
-  return text.replace(/&(?:#(\d+)|#x([0-9a-fA-F]+)|(\w+));/g, (match, dec, hex, named) => {
+  HTML_ENTITY_RE.lastIndex = 0;
+  return text.replace(HTML_ENTITY_RE, (match, dec, hex, named) => {
     if (dec) {
       const code = parseInt(dec, 10);
       if (code >= 0 && code <= 1114111) {
@@ -888,6 +938,9 @@ function generate(ast, options) {
 }
 
 // src/style-compiler.ts
+var WHITESPACE_RE2 = /\s/;
+var KEYFRAMES_RE = /^@(?:-\w+-)?keyframes\b/;
+var PSEUDO_SELECTOR_RE = /(?:::?[\w-]+(?:\([^)]*\))?)+$/;
 function compileStyle(options) {
   const { source, filename, scoped, scopeId: overrideScopeId } = options;
   if (!scoped) {
@@ -908,7 +961,7 @@ function scopeSelectors(css, scopeId) {
   const result = [];
   let pos = 0;
   while (pos < css.length) {
-    if (/\s/.test(css[pos])) {
+    if (WHITESPACE_RE2.test(css[pos])) {
       result.push(css[pos]);
       pos++;
       continue;
@@ -957,7 +1010,7 @@ function consumeAtRule(css, pos, scopeId) {
     return { text: css.slice(start), end: css.length };
   }
   const header = css.slice(start, headerEnd);
-  const isKeyframes = /^@(?:-\w+-)?keyframes\b/.test(header.trim());
+  const isKeyframes = KEYFRAMES_RE.test(header.trim());
   depth = 1;
   let bodyStart = headerEnd + 1;
   let bodyEnd = headerEnd + 1;
@@ -1000,8 +1053,7 @@ function consumeRuleSet(css, pos, scopeId) {
 function scopeSingleSelector(selector, scopeId) {
   if (!selector) return selector;
   const attr = `[${scopeId}]`;
-  const pseudoRe = /(?:::?[\w-]+(?:\([^)]*\))?)+$/;
-  const pseudoMatch = selector.match(pseudoRe);
+  const pseudoMatch = selector.match(PSEUDO_SELECTOR_RE);
   if (pseudoMatch) {
     const beforePseudo = selector.slice(0, pseudoMatch.index);
     return `${beforePseudo}${attr}${pseudoMatch[0]}`;
@@ -1009,6 +1061,256 @@ function scopeSingleSelector(selector, scopeId) {
   return `${selector}${attr}`;
 }
 
+// src/a11y.ts
+var HEADING_LEVEL_RE = /^h([1-6])$/;
+var VALID_ARIA_ROLES = /* @__PURE__ */ new Set([
+  "alert",
+  "alertdialog",
+  "application",
+  "article",
+  "banner",
+  "button",
+  "cell",
+  "checkbox",
+  "columnheader",
+  "combobox",
+  "complementary",
+  "contentinfo",
+  "definition",
+  "dialog",
+  "directory",
+  "document",
+  "feed",
+  "figure",
+  "form",
+  "grid",
+  "gridcell",
+  "group",
+  "heading",
+  "img",
+  "link",
+  "list",
+  "listbox",
+  "listitem",
+  "log",
+  "main",
+  "marquee",
+  "math",
+  "menu",
+  "menubar",
+  "menuitem",
+  "menuitemcheckbox",
+  "menuitemradio",
+  "meter",
+  "navigation",
+  "none",
+  "note",
+  "option",
+  "presentation",
+  "progressbar",
+  "radio",
+  "radiogroup",
+  "region",
+  "row",
+  "rowgroup",
+  "rowheader",
+  "scrollbar",
+  "search",
+  "searchbox",
+  "separator",
+  "slider",
+  "spinbutton",
+  "status",
+  "switch",
+  "tab",
+  "table",
+  "tablist",
+  "tabpanel",
+  "term",
+  "textbox",
+  "timer",
+  "toolbar",
+  "tooltip",
+  "tree",
+  "treegrid",
+  "treeitem"
+]);
+var INTERACTIVE_ELEMENTS = /* @__PURE__ */ new Set([
+  "a",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "details",
+  "summary"
+]);
+function getAttr(node, name) {
+  return node.attrs.find((a) => a.name === name);
+}
+function hasAttr(node, name) {
+  return node.attrs.some((a) => a.name === name);
+}
+function hasDirective(node, kind, arg) {
+  return node.directives.some((d) => d.kind === kind && (arg === void 0 || d.arg === arg));
+}
+function hasBoundAttr(node, name) {
+  return node.directives.some((d) => d.kind === "bind" && d.arg === name);
+}
+function hasTextContent(node) {
+  return node.children.some(
+    (c) => c.type === 2 /* Text */ && c.content.trim() !== "" || c.type === 3 /* Interpolation */
+  );
+}
+var rules = {
+  "img-alt"(node, warnings) {
+    if (node.tag !== "img") return;
+    if (hasAttr(node, "alt") || hasBoundAttr(node, "alt")) return;
+    if (hasAttr(node, "aria-label") || hasAttr(node, "aria-labelledby")) return;
+    const role = getAttr(node, "role");
+    if (role && (role.value === "presentation" || role.value === "none")) return;
+    warnings.push({
+      rule: "img-alt",
+      message: "<img> element must have an alt attribute",
+      tag: node.tag
+    });
+  },
+  "click-keyboard"(node, warnings) {
+    const hasClick = hasDirective(node, "on", "click");
+    if (!hasClick) return;
+    if (INTERACTIVE_ELEMENTS.has(node.tag)) return;
+    const hasKeyboard = hasDirective(node, "on", "keydown") || hasDirective(node, "on", "keyup") || hasDirective(node, "on", "keypress");
+    const role = getAttr(node, "role");
+    const hasInteractiveRole = role && (role.value === "button" || role.value === "link");
+    if (!hasKeyboard && !hasInteractiveRole) {
+      warnings.push({
+        rule: "click-keyboard",
+        message: `<${node.tag}> with @click handler should also have a keyboard event handler or role="button"`,
+        tag: node.tag
+      });
+    }
+    if (!hasAttr(node, "tabindex") && !hasBoundAttr(node, "tabindex")) {
+      warnings.push({
+        rule: "click-keyboard",
+        message: `<${node.tag}> with @click handler should have tabindex="0" for keyboard accessibility`,
+        tag: node.tag
+      });
+    }
+  },
+  "anchor-content"(node, warnings) {
+    if (node.tag !== "a") return;
+    if (hasTextContent(node)) return;
+    if (hasAttr(node, "aria-label") || hasAttr(node, "aria-labelledby")) return;
+    const hasChildElements = node.children.some((c) => c.type === 1 /* Element */);
+    if (hasChildElements) return;
+    warnings.push({
+      rule: "anchor-content",
+      message: "<a> element must have content, aria-label, or aria-labelledby",
+      tag: node.tag
+    });
+  },
+  "form-label"(node, warnings) {
+    const formElements = /* @__PURE__ */ new Set(["input", "select", "textarea"]);
+    if (!formElements.has(node.tag)) return;
+    const type = getAttr(node, "type");
+    if (type && type.value === "hidden") return;
+    if (hasAttr(node, "aria-label") || hasAttr(node, "aria-labelledby")) return;
+    if (hasAttr(node, "id")) return;
+    if (hasAttr(node, "title")) return;
+    warnings.push({
+      rule: "form-label",
+      message: `<${node.tag}> should have an id (with matching <label>), aria-label, or aria-labelledby`,
+      tag: node.tag
+    });
+  },
+  "no-distracting"(node, warnings) {
+    if (node.tag === "marquee" || node.tag === "blink") {
+      warnings.push({
+        rule: "no-distracting",
+        message: `<${node.tag}> is distracting and inaccessible \u2014 do not use`,
+        tag: node.tag
+      });
+    }
+  },
+  "heading-order"(node, warnings, ctx) {
+    const match = node.tag.match(HEADING_LEVEL_RE);
+    if (!match) return;
+    const level = parseInt(match[1], 10);
+    if (ctx.lastHeadingLevel > 0 && level > ctx.lastHeadingLevel + 1) {
+      warnings.push({
+        rule: "heading-order",
+        message: `Heading level <${node.tag}> skips from <h${ctx.lastHeadingLevel}> \u2014 headings should not skip levels`,
+        tag: node.tag
+      });
+    }
+    ctx.lastHeadingLevel = level;
+  },
+  "aria-role"(node, warnings) {
+    const role = getAttr(node, "role");
+    if (!role || !role.value) return;
+    if (!VALID_ARIA_ROLES.has(role.value)) {
+      warnings.push({
+        rule: "aria-role",
+        message: `Invalid ARIA role "${role.value}" on <${node.tag}>`,
+        tag: node.tag
+      });
+    }
+  },
+  "no-positive-tabindex"(node, warnings) {
+    const tabindex = getAttr(node, "tabindex");
+    if (!tabindex || !tabindex.value) return;
+    const val = parseInt(tabindex.value, 10);
+    if (!isNaN(val) && val > 0) {
+      warnings.push({
+        rule: "no-positive-tabindex",
+        message: `Avoid positive tabindex="${tabindex.value}" \u2014 it disrupts natural tab order`,
+        tag: node.tag
+      });
+    }
+  },
+  "media-captions"(node, warnings) {
+    if (node.tag !== "video" && node.tag !== "audio") return;
+    const hasTrack = node.children.some(
+      (c) => c.type === 1 /* Element */ && c.tag === "track"
+    );
+    if (hasTrack) return;
+    if (hasAttr(node, "aria-label") || hasAttr(node, "aria-labelledby")) return;
+    warnings.push({
+      rule: "media-captions",
+      message: `<${node.tag}> should have a <track> element for captions`,
+      tag: node.tag
+    });
+  },
+  "anchor-valid"(node, warnings) {
+    if (node.tag !== "a") return;
+    if (hasAttr(node, "href") || hasBoundAttr(node, "href")) return;
+    const role = getAttr(node, "role");
+    if (role && role.value === "button") return;
+    warnings.push({
+      rule: "anchor-valid",
+      message: "<a> element should have an href attribute",
+      tag: node.tag
+    });
+  }
+};
+function walkNodes(nodes, enabledRules, warnings, ctx) {
+  for (const node of nodes) {
+    if (node.type === 1 /* Element */) {
+      for (const rule of enabledRules) {
+        rule(node, warnings, ctx);
+      }
+      walkNodes(node.children, enabledRules, warnings, ctx);
+    }
+  }
+}
+function checkA11y(ast, options) {
+  const disabled = new Set(options?.disable ?? []);
+  const enabledRules = Object.entries(rules).filter(([id]) => !disabled.has(id)).map(([, fn]) => fn);
+  const warnings = [];
+  const ctx = { lastHeadingLevel: 0 };
+  walkNodes(ast, enabledRules, warnings, ctx);
+  return warnings;
+}
+
 // src/index.ts
 function compile(source, options = {}) {
   const filename = options.filename ?? "anonymous.utopia";
@@ -1027,11 +1329,16 @@ function compile(source, options = {}) {
     scopeId = styleResult.scopeId;
   }
   let renderModule = "";
+  let a11yWarnings = [];
   if (descriptor.template) {
     const templateResult = compileTemplate(descriptor.template.content, {
       scopeId: scopeId ?? void 0
     });
     renderModule = templateResult.code;
+    if (options.a11y !== false) {
+      const ast = parseTemplate(descriptor.template.content);
+      a11yWarnings = checkA11y(ast, options.a11y ?? void 0);
+    }
   }
   const { imports, body } = splitModuleParts(renderModule);
   const scriptContent = descriptor.script?.content ?? "";
@@ -1047,7 +1354,7 @@ function compile(source, options = {}) {
   }
   parts.push("export default { render: __render }");
   const code = parts.join("\n\n") + "\n";
-  return { code, css };
+  return { code, css, a11y: a11yWarnings };
 }
 function splitModuleParts(moduleCode) {
   const idx = moduleCode.indexOf("\n\n");
@@ -1061,6 +1368,7 @@ function splitModuleParts(moduleCode) {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   SFCParseError,
+  checkA11y,
   compile,
   compileStyle,
   compileTemplate,

package/dist/index.d.cts

@@ -14,6 +14,7 @@ interface SFCDescriptor {
     template: SFCBlock | null;
     script: SFCBlock | null;
     style: SFCBlock | null;
+    test: SFCBlock | null;
     filename: string;
 }
 /**
@@ -84,7 +85,7 @@ interface Directive {
     expression: string;
     modifiers: string[];
 }
-type DirectiveKind = 'on' | 'bind' | 'if' | 'else' | 'for' | 'model';
+type DirectiveKind = 'on' | 'bind' | 'if' | 'else' | 'else-if' | 'for' | 'model';
 /** Exported for testing — parse a template string into an AST. */
 declare function parseTemplate(source: string): TemplateNode[];
 
@@ -119,11 +120,38 @@ declare function compileStyle(options: StyleCompileOptions): StyleCompileResult;
  */
 declare function generateScopeId(filename: string): string;
 
+interface A11yWarning {
+    /** Rule ID (e.g. 'img-alt'). */
+    rule: string;
+    /** Human-readable message. */
+    message: string;
+    /** The element tag that triggered the warning. */
+    tag: string;
+}
+interface A11yOptions {
+    /** Rules to disable (by rule ID). */
+    disable?: string[];
+}
+/**
+ * Check a parsed template AST for accessibility issues.
+ *
+ * Returns an array of warnings. An empty array means no issues found.
+ *
+ * ```ts
+ * const ast = parseTemplate('<img src="photo.jpg">');
+ * const warnings = checkA11y(ast);
+ * // [{ rule: 'img-alt', message: '...', tag: 'img' }]
+ * ```
+ */
+declare function checkA11y(ast: TemplateNode[], options?: A11yOptions): A11yWarning[];
+
 interface CompileOptions {
     /** Filename for error messages and scope-id generation. */
     filename?: string;
     /** Override the scope ID for testing. */
     scopeId?: string;
+    /** Accessibility checking options. Pass false to disable entirely. */
+    a11y?: A11yOptions | false;
 }
 interface CompileResult {
     /** The compiled JavaScript module source. */
@@ -132,6 +160,8 @@ interface CompileResult {
     css: string;
     /** Source map (reserved for future use). */
     map?: unknown;
+    /** Accessibility warnings from template analysis. */
+    a11y: A11yWarning[];
 }
 /**
  * Compile a `.utopia` single-file component source string.
@@ -153,4 +183,4 @@ interface CompileResult {
  */
 declare function compile(source: string, options?: CompileOptions): CompileResult;
 
-export { type CompileOptions, type CompileResult, type SFCBlock, type SFCDescriptor, SFCParseError, type StyleCompileOptions, type StyleCompileResult, type TemplateCompileOptions, type TemplateCompileResult, compile, compileStyle, compileTemplate, generateScopeId, parse, parseTemplate };
+export { type A11yOptions, type A11yWarning, type CompileOptions, type CompileResult, type SFCBlock, type SFCDescriptor, SFCParseError, type StyleCompileOptions, type StyleCompileResult, type TemplateCompileOptions, type TemplateCompileResult, checkA11y, compile, compileStyle, compileTemplate, generateScopeId, parse, parseTemplate };

package/dist/index.d.ts

@@ -14,6 +14,7 @@ interface SFCDescriptor {
     template: SFCBlock | null;
     script: SFCBlock | null;
     style: SFCBlock | null;
+    test: SFCBlock | null;
     filename: string;
 }
 /**
@@ -84,7 +85,7 @@ interface Directive {
     expression: string;
     modifiers: string[];
 }
-type DirectiveKind = 'on' | 'bind' | 'if' | 'else' | 'for' | 'model';
+type DirectiveKind = 'on' | 'bind' | 'if' | 'else' | 'else-if' | 'for' | 'model';
 /** Exported for testing — parse a template string into an AST. */
 declare function parseTemplate(source: string): TemplateNode[];
 
@@ -119,11 +120,38 @@ declare function compileStyle(options: StyleCompileOptions): StyleCompileResult;
  */
 declare function generateScopeId(filename: string): string;
 
+interface A11yWarning {
+    /** Rule ID (e.g. 'img-alt'). */
+    rule: string;
+    /** Human-readable message. */
+    message: string;
+    /** The element tag that triggered the warning. */
+    tag: string;
+}
+interface A11yOptions {
+    /** Rules to disable (by rule ID). */
+    disable?: string[];
+}
+/**
+ * Check a parsed template AST for accessibility issues.
+ *
+ * Returns an array of warnings. An empty array means no issues found.
+ *
+ * ```ts
+ * const ast = parseTemplate('<img src="photo.jpg">');
+ * const warnings = checkA11y(ast);
+ * // [{ rule: 'img-alt', message: '...', tag: 'img' }]
+ * ```
+ */
+declare function checkA11y(ast: TemplateNode[], options?: A11yOptions): A11yWarning[];
+
 interface CompileOptions {
     /** Filename for error messages and scope-id generation. */
     filename?: string;
     /** Override the scope ID for testing. */
     scopeId?: string;
+    /** Accessibility checking options. Pass false to disable entirely. */
+    a11y?: A11yOptions | false;
 }
 interface CompileResult {
     /** The compiled JavaScript module source. */
@@ -132,6 +160,8 @@ interface CompileResult {
     css: string;
     /** Source map (reserved for future use). */
     map?: unknown;
+    /** Accessibility warnings from template analysis. */
+    a11y: A11yWarning[];
 }
 /**
  * Compile a `.utopia` single-file component source string.
@@ -153,4 +183,4 @@ interface CompileResult {
  */
 declare function compile(source: string, options?: CompileOptions): CompileResult;
 
-export { type CompileOptions, type CompileResult, type SFCBlock, type SFCDescriptor, SFCParseError, type StyleCompileOptions, type StyleCompileResult, type TemplateCompileOptions, type TemplateCompileResult, compile, compileStyle, compileTemplate, generateScopeId, parse, parseTemplate };
+export { type A11yOptions, type A11yWarning, type CompileOptions, type CompileResult, type SFCBlock, type SFCDescriptor, SFCParseError, type StyleCompileOptions, type StyleCompileResult, type TemplateCompileOptions, type TemplateCompileResult, checkA11y, compile, compileStyle, compileTemplate, generateScopeId, parse, parseTemplate };

package/dist/index.js

@@ -1,14 +1,17 @@
 // src/parser.ts
+var BLOCK_RE = /<(template|script|style|test)([\s][^>]*)?\s*>/g;
+var ATTR_RE = /([a-zA-Z_][\w-]*)\s*(?:=\s*(?:"([^"]*)"|'([^']*)'|(\S+)))?/g;
 function parse(source, filename = "anonymous.utopia") {
   const descriptor = {
     template: null,
     script: null,
     style: null,
+    test: null,
     filename
   };
-  const blockRe = /<(template|script|style)([\s][^>]*)?\s*>/g;
+  BLOCK_RE.lastIndex = 0;
   let match;
-  while ((match = blockRe.exec(source)) !== null) {
+  while ((match = BLOCK_RE.exec(source)) !== null) {
     const tagName = match[1];
     const attrString = match[2] || "";
     const openTagStart = match.index;
@@ -39,11 +42,10 @@ function parse(source, filename = "anonymous.utopia") {
       );
     }
     descriptor[tagName] = block;
-    blockRe.lastIndex = blockEnd;
+    BLOCK_RE.lastIndex = blockEnd;
   }
   return descriptor;
 }
-var ATTR_RE = /([a-zA-Z_][\w-]*)\s*(?:=\s*(?:"([^"]*)"|'([^']*)'|(\S+)))?/g;
 function parseAttributes(raw) {
   const attrs = {};
   let m;
@@ -80,6 +82,16 @@ var SFCParseError = class extends Error {
 };
 
 // src/template-compiler.ts
+var TAG_NAME_CHAR_RE = /[a-zA-Z0-9\-_]/;
+var ATTR_NAME_CHAR_RE = /[a-zA-Z0-9\-_:@.]/;
+var ATTR_VALUE_END_RE = /[\s/>]/;
+var WHITESPACE_RE = /\s/;
+var TAG_START_CHAR_RE = /[a-zA-Z]/;
+var U_FOR_EXPR_RE = /^\s*(?:\(\s*(\w+)\s*(?:,\s*(\w+)\s*)?\)|(\w+))\s+in\s+(.+)$/;
+var COMPONENT_TAG_RE = /^[A-Z][a-zA-Z0-9_$]*$/;
+var BACKSLASH_RE = /\\/g;
+var SINGLE_QUOTE_RE = /'/g;
+var HTML_ENTITY_RE = /&(?:#(\d+)|#x([0-9a-fA-F]+)|(\w+));/g;
 function compileTemplate(template, options = {}) {
   const ast = parseTemplate(template);
   return generate(ast, options);
@@ -261,7 +273,7 @@ var TemplateParser = class {
   // ---- Low-level helpers --------------------------------------------------
   readTagName() {
     const start = this.pos;
-    while (this.pos < this.source.length && /[a-zA-Z0-9\-_]/.test(this.source[this.pos])) {
+    while (this.pos < this.source.length && TAG_NAME_CHAR_RE.test(this.source[this.pos])) {
       this.pos++;
     }
     const name = this.source.slice(start, this.pos);
@@ -270,7 +282,7 @@ var TemplateParser = class {
   }
   readAttributeName() {
     const start = this.pos;
-    while (this.pos < this.source.length && /[a-zA-Z0-9\-_:@.]/.test(this.source[this.pos])) {
+    while (this.pos < this.source.length && ATTR_NAME_CHAR_RE.test(this.source[this.pos])) {
       this.pos++;
     }
     return this.source.slice(start, this.pos);
@@ -287,13 +299,13 @@ var TemplateParser = class {
       return value;
     }
     const start = this.pos;
-    while (this.pos < this.source.length && !/[\s/>]/.test(this.source[this.pos])) {
+    while (this.pos < this.source.length && !ATTR_VALUE_END_RE.test(this.source[this.pos])) {
       this.pos++;
     }
     return this.source.slice(start, this.pos);
   }
   skipWhitespace() {
-    while (this.pos < this.source.length && /\s/.test(this.source[this.pos])) {
+    while (this.pos < this.source.length && WHITESPACE_RE.test(this.source[this.pos])) {
       this.pos++;
     }
   }
@@ -303,7 +315,7 @@ var TemplateParser = class {
   /** Returns true when the char after `<` looks like the start of a tag name. */
   peekTagStart() {
     const next = this.source[this.pos + 1];
-    return next !== void 0 && /[a-zA-Z]/.test(next);
+    return next !== void 0 && TAG_START_CHAR_RE.test(next);
   }
   expect(str) {
     if (!this.lookingAt(str)) {
@@ -373,7 +385,7 @@ function classifyDirective(name, value) {
   return null;
 }
 function isDirectiveKind(s) {
-  return s === "on" || s === "bind" || s === "if" || s === "else" || s === "for" || s === "model";
+  return s === "on" || s === "bind" || s === "if" || s === "else" || s === "else-if" || s === "for" || s === "model";
 }
 var CodeGenerator = class {
   constructor(options) {
@@ -464,7 +476,8 @@ ${fnBody}
       }
     }
     for (const dir of node.directives) {
-      if (dir.kind === "if" || dir.kind === "else" || dir.kind === "for") continue;
+      if (dir.kind === "if" || dir.kind === "else" || dir.kind === "else-if" || dir.kind === "for")
+        continue;
       this.genDirective(elVar, dir, scope);
     }
     this.genChildren(elVar, node.children, scope);
@@ -550,7 +563,7 @@ ${fnBody}
     this.emit(`addEventListener(${elVar}, 'input', (e) => ${signalRef}.set(e.target.value))`);
   }
   // ---- Structural: u-if ---------------------------------------------------
-  genIf(node, dir, scope, elseNode) {
+  genIf(node, dir, scope, elseIfChain, elseNode) {
     this.helpers.add("createIf");
     const anchorVar = this.freshVar();
     this.helpers.add("createComment");
@@ -558,7 +571,7 @@ ${fnBody}
     const condition = this.resolveExpression(dir.expression, scope);
     const strippedNode = {
       ...node,
-      directives: node.directives.filter((d) => d.kind !== "if")
+      directives: node.directives.filter((d) => d.kind !== "if" && d.kind !== "else-if")
     };
     const trueFnVar = this.freshVar();
     const savedCode = this.code;
@@ -573,7 +586,29 @@ ${fnBody}
     this.emit(`  return ${innerVar}`);
     this.emit(`}`);
     let elseArg = "";
-    if (elseNode) {
+    if (elseIfChain && elseIfChain.length > 0) {
+      const firstElseIf = elseIfChain[0];
+      const remainingElseIfs = elseIfChain.slice(1);
+      const falseFnVar = this.freshVar();
+      const savedCode2 = this.code;
+      this.code = [];
+      const nestedAnchor = this.genIf(
+        firstElseIf.node,
+        firstElseIf.dir,
+        scope,
+        remainingElseIfs.length > 0 ? remainingElseIfs : void 0,
+        elseNode
+      );
+      const nestedLines = [...this.code];
+      this.code = savedCode2;
+      this.emit(`const ${falseFnVar} = () => {`);
+      for (const line of nestedLines) {
+        this.emit(`  ${line}`);
+      }
+      this.emit(`  return ${nestedAnchor}`);
+      this.emit(`}`);
+      elseArg = `, ${falseFnVar}`;
+    } else if (elseNode) {
       const falseFnVar = this.freshVar();
       const strippedElse = {
         ...elseNode,
@@ -601,9 +636,7 @@ ${fnBody}
     const anchorVar = this.freshVar();
     this.helpers.add("createComment");
     this.emit(`const ${anchorVar} = createComment('u-for')`);
-    const forMatch = dir.expression.match(
-      /^\s*(?:\(\s*(\w+)\s*(?:,\s*(\w+)\s*)?\)|(\w+))\s+in\s+(.+)$/
-    );
+    const forMatch = dir.expression.match(U_FOR_EXPR_RE);
     if (!forMatch) {
       throw new Error(`Invalid u-for expression: "${dir.expression}"`);
     }
@@ -639,7 +672,7 @@ ${fnBody}
     this.emitOrDefer(`createFor(${anchorVar}, () => ${listExpr}, ${renderFnVar}${keyArg})`);
     return anchorVar;
   }
-  // ---- Children processing (handles u-if / u-else pairing) ----------------
+  // ---- Children processing (handles u-if / u-else-if / u-else pairing) ----
   genChildren(parentVar, children, scope) {
     this.deferredCallsStack.push([]);
     let i = 0;
@@ -648,24 +681,39 @@ ${fnBody}
       if (child.type === 1 /* Element */) {
         const ifDir = child.directives.find((d) => d.kind === "if");
         if (ifDir) {
+          const elseIfChain = [];
           let elseNode;
           let skipTo = i + 1;
           for (let j = i + 1; j < children.length; j++) {
             const next = children[j];
             if (next.type === 2 /* Text */ && !next.content.trim()) continue;
-            if (next.type === 1 /* Element */ && next.directives.some((d) => d.kind === "else")) {
-              elseNode = next;
-              skipTo = j + 1;
+            if (next.type === 1 /* Element */) {
+              const elseIfDir = next.directives.find((d) => d.kind === "else-if");
+              if (elseIfDir) {
+                elseIfChain.push({ node: next, dir: elseIfDir });
+                skipTo = j + 1;
+                continue;
+              }
+              if (next.directives.some((d) => d.kind === "else")) {
+                elseNode = next;
+                skipTo = j + 1;
+              }
             }
             break;
           }
-          const childVar2 = this.genIf(child, ifDir, scope, elseNode);
+          const childVar2 = this.genIf(
+            child,
+            ifDir,
+            scope,
+            elseIfChain.length > 0 ? elseIfChain : void 0,
+            elseNode
+          );
           this.helpers.add("appendChild");
           this.emit(`appendChild(${parentVar}, ${childVar2})`);
           i = skipTo;
           continue;
         }
-        if (child.directives.some((d) => d.kind === "else")) {
+        if (child.directives.some((d) => d.kind === "else" || d.kind === "else-if")) {
           i++;
           continue;
         }
@@ -791,10 +839,10 @@ ${fnBody}
   }
 };
 function isComponentTag(tag) {
-  return /^[A-Z][a-zA-Z0-9_$]*$/.test(tag);
+  return COMPONENT_TAG_RE.test(tag);
 }
 function escapeStr(s) {
-  return s.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
+  return s.replace(BACKSLASH_RE, "\\\\").replace(SINGLE_QUOTE_RE, "\\'");
 }
 var ENTITY_MAP = {
   "&amp;": "&",
@@ -823,7 +871,8 @@ var ENTITY_MAP = {
   "&divide;": "\xF7"
 };
 function decodeEntities(text) {
-  return text.replace(/&(?:#(\d+)|#x([0-9a-fA-F]+)|(\w+));/g, (match, dec, hex, named) => {
+  HTML_ENTITY_RE.lastIndex = 0;
+  return text.replace(HTML_ENTITY_RE, (match, dec, hex, named) => {
     if (dec) {
       const code = parseInt(dec, 10);
       if (code >= 0 && code <= 1114111) {
@@ -856,6 +905,9 @@ function generate(ast, options) {
 }
 
 // src/style-compiler.ts
+var WHITESPACE_RE2 = /\s/;
+var KEYFRAMES_RE = /^@(?:-\w+-)?keyframes\b/;
+var PSEUDO_SELECTOR_RE = /(?:::?[\w-]+(?:\([^)]*\))?)+$/;
 function compileStyle(options) {
   const { source, filename, scoped, scopeId: overrideScopeId } = options;
   if (!scoped) {
@@ -876,7 +928,7 @@ function scopeSelectors(css, scopeId) {
   const result = [];
   let pos = 0;
   while (pos < css.length) {
-    if (/\s/.test(css[pos])) {
+    if (WHITESPACE_RE2.test(css[pos])) {
       result.push(css[pos]);
       pos++;
       continue;
@@ -925,7 +977,7 @@ function consumeAtRule(css, pos, scopeId) {
     return { text: css.slice(start), end: css.length };
   }
   const header = css.slice(start, headerEnd);
-  const isKeyframes = /^@(?:-\w+-)?keyframes\b/.test(header.trim());
+  const isKeyframes = KEYFRAMES_RE.test(header.trim());
   depth = 1;
   let bodyStart = headerEnd + 1;
   let bodyEnd = headerEnd + 1;
@@ -968,8 +1020,7 @@ function consumeRuleSet(css, pos, scopeId) {
 function scopeSingleSelector(selector, scopeId) {
   if (!selector) return selector;
   const attr = `[${scopeId}]`;
-  const pseudoRe = /(?:::?[\w-]+(?:\([^)]*\))?)+$/;
-  const pseudoMatch = selector.match(pseudoRe);
+  const pseudoMatch = selector.match(PSEUDO_SELECTOR_RE);
   if (pseudoMatch) {
     const beforePseudo = selector.slice(0, pseudoMatch.index);
     return `${beforePseudo}${attr}${pseudoMatch[0]}`;
@@ -977,6 +1028,256 @@ function scopeSingleSelector(selector, scopeId) {
   return `${selector}${attr}`;
 }
 
+// src/a11y.ts
+var HEADING_LEVEL_RE = /^h([1-6])$/;
+var VALID_ARIA_ROLES = /* @__PURE__ */ new Set([
+  "alert",
+  "alertdialog",
+  "application",
+  "article",
+  "banner",
+  "button",
+  "cell",
+  "checkbox",
+  "columnheader",
+  "combobox",
+  "complementary",
+  "contentinfo",
+  "definition",
+  "dialog",
+  "directory",
+  "document",
+  "feed",
+  "figure",
+  "form",
+  "grid",
+  "gridcell",
+  "group",
+  "heading",
+  "img",
+  "link",
+  "list",
+  "listbox",
+  "listitem",
+  "log",
+  "main",
+  "marquee",
+  "math",
+  "menu",
+  "menubar",
+  "menuitem",
+  "menuitemcheckbox",
+  "menuitemradio",
+  "meter",
+  "navigation",
+  "none",
+  "note",
+  "option",
+  "presentation",
+  "progressbar",
+  "radio",
+  "radiogroup",
+  "region",
+  "row",
+  "rowgroup",
+  "rowheader",
+  "scrollbar",
+  "search",
+  "searchbox",
+  "separator",
+  "slider",
+  "spinbutton",
+  "status",
+  "switch",
+  "tab",
+  "table",
+  "tablist",
+  "tabpanel",
+  "term",
+  "textbox",
+  "timer",
+  "toolbar",
+  "tooltip",
+  "tree",
+  "treegrid",
+  "treeitem"
+]);
+var INTERACTIVE_ELEMENTS = /* @__PURE__ */ new Set([
+  "a",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "details",
+  "summary"
+]);
+function getAttr(node, name) {
+  return node.attrs.find((a) => a.name === name);
+}
+function hasAttr(node, name) {
+  return node.attrs.some((a) => a.name === name);
+}
+function hasDirective(node, kind, arg) {
+  return node.directives.some((d) => d.kind === kind && (arg === void 0 || d.arg === arg));
+}
+function hasBoundAttr(node, name) {
+  return node.directives.some((d) => d.kind === "bind" && d.arg === name);
+}
+function hasTextContent(node) {
+  return node.children.some(
+    (c) => c.type === 2 /* Text */ && c.content.trim() !== "" || c.type === 3 /* Interpolation */
+  );
+}
+var rules = {
+  "img-alt"(node, warnings) {
+    if (node.tag !== "img") return;
+    if (hasAttr(node, "alt") || hasBoundAttr(node, "alt")) return;
+    if (hasAttr(node, "aria-label") || hasAttr(node, "aria-labelledby")) return;
+    const role = getAttr(node, "role");
+    if (role && (role.value === "presentation" || role.value === "none")) return;
+    warnings.push({
+      rule: "img-alt",
+      message: "<img> element must have an alt attribute",
+      tag: node.tag
+    });
+  },
+  "click-keyboard"(node, warnings) {
+    const hasClick = hasDirective(node, "on", "click");
+    if (!hasClick) return;
+    if (INTERACTIVE_ELEMENTS.has(node.tag)) return;
+    const hasKeyboard = hasDirective(node, "on", "keydown") || hasDirective(node, "on", "keyup") || hasDirective(node, "on", "keypress");
+    const role = getAttr(node, "role");
+    const hasInteractiveRole = role && (role.value === "button" || role.value === "link");
+    if (!hasKeyboard && !hasInteractiveRole) {
+      warnings.push({
+        rule: "click-keyboard",
+        message: `<${node.tag}> with @click handler should also have a keyboard event handler or role="button"`,
+        tag: node.tag
+      });
+    }
+    if (!hasAttr(node, "tabindex") && !hasBoundAttr(node, "tabindex")) {
+      warnings.push({
+        rule: "click-keyboard",
+        message: `<${node.tag}> with @click handler should have tabindex="0" for keyboard accessibility`,
+        tag: node.tag
+      });
+    }
+  },
+  "anchor-content"(node, warnings) {
+    if (node.tag !== "a") return;
+    if (hasTextContent(node)) return;
+    if (hasAttr(node, "aria-label") || hasAttr(node, "aria-labelledby")) return;
+    const hasChildElements = node.children.some((c) => c.type === 1 /* Element */);
+    if (hasChildElements) return;
+    warnings.push({
+      rule: "anchor-content",
+      message: "<a> element must have content, aria-label, or aria-labelledby",
+      tag: node.tag
+    });
+  },
+  "form-label"(node, warnings) {
+    const formElements = /* @__PURE__ */ new Set(["input", "select", "textarea"]);
+    if (!formElements.has(node.tag)) return;
+    const type = getAttr(node, "type");
+    if (type && type.value === "hidden") return;
+    if (hasAttr(node, "aria-label") || hasAttr(node, "aria-labelledby")) return;
+    if (hasAttr(node, "id")) return;
+    if (hasAttr(node, "title")) return;
+    warnings.push({
+      rule: "form-label",
+      message: `<${node.tag}> should have an id (with matching <label>), aria-label, or aria-labelledby`,
+      tag: node.tag
+    });
+  },
+  "no-distracting"(node, warnings) {
+    if (node.tag === "marquee" || node.tag === "blink") {
+      warnings.push({
+        rule: "no-distracting",
+        message: `<${node.tag}> is distracting and inaccessible \u2014 do not use`,
+        tag: node.tag
+      });
+    }
+  },
+  "heading-order"(node, warnings, ctx) {
+    const match = node.tag.match(HEADING_LEVEL_RE);
+    if (!match) return;
+    const level = parseInt(match[1], 10);
+    if (ctx.lastHeadingLevel > 0 && level > ctx.lastHeadingLevel + 1) {
+      warnings.push({
+        rule: "heading-order",
+        message: `Heading level <${node.tag}> skips from <h${ctx.lastHeadingLevel}> \u2014 headings should not skip levels`,
+        tag: node.tag
+      });
+    }
+    ctx.lastHeadingLevel = level;
+  },
+  "aria-role"(node, warnings) {
+    const role = getAttr(node, "role");
+    if (!role || !role.value) return;
+    if (!VALID_ARIA_ROLES.has(role.value)) {
+      warnings.push({
+        rule: "aria-role",
+        message: `Invalid ARIA role "${role.value}" on <${node.tag}>`,
+        tag: node.tag
+      });
+    }
+  },
+  "no-positive-tabindex"(node, warnings) {
+    const tabindex = getAttr(node, "tabindex");
+    if (!tabindex || !tabindex.value) return;
+    const val = parseInt(tabindex.value, 10);
+    if (!isNaN(val) && val > 0) {
+      warnings.push({
+        rule: "no-positive-tabindex",
+        message: `Avoid positive tabindex="${tabindex.value}" \u2014 it disrupts natural tab order`,
+        tag: node.tag
+      });
+    }
+  },
+  "media-captions"(node, warnings) {
+    if (node.tag !== "video" && node.tag !== "audio") return;
+    const hasTrack = node.children.some(
+      (c) => c.type === 1 /* Element */ && c.tag === "track"
+    );
+    if (hasTrack) return;
+    if (hasAttr(node, "aria-label") || hasAttr(node, "aria-labelledby")) return;
+    warnings.push({
+      rule: "media-captions",
+      message: `<${node.tag}> should have a <track> element for captions`,
+      tag: node.tag
+    });
+  },
+  "anchor-valid"(node, warnings) {
+    if (node.tag !== "a") return;
+    if (hasAttr(node, "href") || hasBoundAttr(node, "href")) return;
+    const role = getAttr(node, "role");
+    if (role && role.value === "button") return;
+    warnings.push({
+      rule: "anchor-valid",
+      message: "<a> element should have an href attribute",
+      tag: node.tag
+    });
+  }
+};
+function walkNodes(nodes, enabledRules, warnings, ctx) {
+  for (const node of nodes) {
+    if (node.type === 1 /* Element */) {
+      for (const rule of enabledRules) {
+        rule(node, warnings, ctx);
+      }
+      walkNodes(node.children, enabledRules, warnings, ctx);
+    }
+  }
+}
+function checkA11y(ast, options) {
+  const disabled = new Set(options?.disable ?? []);
+  const enabledRules = Object.entries(rules).filter(([id]) => !disabled.has(id)).map(([, fn]) => fn);
+  const warnings = [];
+  const ctx = { lastHeadingLevel: 0 };
+  walkNodes(ast, enabledRules, warnings, ctx);
+  return warnings;
+}
+
 // src/index.ts
 function compile(source, options = {}) {
   const filename = options.filename ?? "anonymous.utopia";
@@ -995,11 +1296,16 @@ function compile(source, options = {}) {
     scopeId = styleResult.scopeId;
   }
   let renderModule = "";
+  let a11yWarnings = [];
   if (descriptor.template) {
     const templateResult = compileTemplate(descriptor.template.content, {
       scopeId: scopeId ?? void 0
     });
     renderModule = templateResult.code;
+    if (options.a11y !== false) {
+      const ast = parseTemplate(descriptor.template.content);
+      a11yWarnings = checkA11y(ast, options.a11y ?? void 0);
+    }
   }
   const { imports, body } = splitModuleParts(renderModule);
   const scriptContent = descriptor.script?.content ?? "";
@@ -1015,7 +1321,7 @@ function compile(source, options = {}) {
   }
   parts.push("export default { render: __render }");
   const code = parts.join("\n\n") + "\n";
-  return { code, css };
+  return { code, css, a11y: a11yWarnings };
 }
 function splitModuleParts(moduleCode) {
   const idx = moduleCode.indexOf("\n\n");
@@ -1028,6 +1334,7 @@ function splitModuleParts(moduleCode) {
 }
 export {
   SFCParseError,
+  checkA11y,
   compile,
   compileStyle,
   compileTemplate,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matthesketh/utopia-compiler",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "description": "Compiler for .utopia single-file components",
   "type": "module",
   "license": "MIT",
@@ -39,7 +39,7 @@
     "dist"
   ],
   "dependencies": {
-    "@matthesketh/utopia-core": "0.3.1"
+    "@matthesketh/utopia-core": "0.5.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts",