@matthesketh/utopia-compiler 0.3.1 → 0.4.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,
@@ -405,7 +406,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 +497,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 +584,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 +592,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 +607,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,
@@ -671,7 +695,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 +704,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;
         }
@@ -1009,6 +1048,255 @@ function scopeSingleSelector(selector, scopeId) {
   return `${selector}${attr}`;
 }
 
+// src/a11y.ts
+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(/^h([1-6])$/);
+    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 +1315,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 +1340,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 +1354,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

@@ -84,7 +84,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 +119,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 +159,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 +182,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

@@ -84,7 +84,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 +119,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 +159,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 +182,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

@@ -373,7 +373,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 +464,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 +551,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 +559,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 +574,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,
@@ -639,7 +662,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 +671,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;
         }
@@ -977,6 +1015,255 @@ function scopeSingleSelector(selector, scopeId) {
   return `${selector}${attr}`;
 }
 
+// src/a11y.ts
+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(/^h([1-6])$/);
+    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 +1282,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 +1307,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 +1320,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.4.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.4.0"
   },
   "scripts": {
     "build": "tsup src/index.ts --format esm,cjs --dts",