stimeo-ui 0.2.0 → 0.3.0

package/dist/inspector/cli.js

@@ -267,12 +267,17 @@ var DIAGNOSTIC_CODES = [
   "unknown-action-method",
   "orphan-target",
   "missing-required-target",
+  "missing-conditional-target",
   "missing-aria",
   "invalid-aria-value",
   "keyboard-inaccessible",
   "unresolved-idref",
   "managed-aria",
   "composition-mismatch",
+  "missing-companion",
+  "undeclared-target",
+  "cardinality-violation",
+  "forbidden-aria",
   "unknown-ignore-code"
 ];
 
@@ -290,6 +295,14 @@ function checkSource(source, manifest) {
     if (valueStart === void 0 || valueEnd === void 0) return false;
     return erbRanges.some(([start, end]) => start < valueEnd && end > valueStart);
   };
+  const conditionHolds = (scope, identifier, when) => {
+    if (!when) return true;
+    const hostAttr = scope.attrs.find(
+      (a) => a.name === `data-${identifier}-${dasherize(when.value)}-value`
+    );
+    if (hostAttr && isDynamicValue(hostAttr)) return null;
+    return when.equals.includes(hostAttr ? hostAttr.value.trim() : when.default);
+  };
   const suppressed = (node, code) => {
     if (code === "unknown-ignore-code") return false;
     let current = node;
@@ -337,7 +350,40 @@ function checkSource(source, manifest) {
     if (found) found.push(el);
     else byName.set(target, [el]);
   };
+  const contentHolds = (scope, identifier, element, condition) => {
+    if (!condition) return true;
+    const nodes = targetNodes.get(scope)?.get(identifier)?.get(condition.target) ?? [];
+    let held = 0;
+    for (const node of nodes) if (isWithin(node, element)) held += 1;
+    if (condition.min !== void 0 && held < condition.min) return false;
+    if (condition.max !== void 0 && held > condition.max) return false;
+    return true;
+  };
+  const elementHolds = (element, condition) => !condition?.exceptTags.includes(element.tag);
+  const roleTally = /* @__PURE__ */ new Map();
+  const focusableRoleTally = /* @__PURE__ */ new Map();
+  const documentHolds = (condition) => {
+    if (condition === void 0) return false;
+    const tally = condition.focusable ? focusableRoleTally : roleTally;
+    return (tally.get(condition.role) ?? 0) >= condition.atLeast;
+  };
+  const declarationAttrs = /* @__PURE__ */ new Set();
+  for (const controller of Object.values(known)) {
+    for (const rule of controller.targetDeclarations) declarationAttrs.add(rule.attr);
+  }
+  const declarationCandidates = [];
   walk(tree, (node) => {
+    if (declarationAttrs.size > 0 && node.attrs.some((a) => declarationAttrs.has(a.name))) {
+      declarationCandidates.push(node);
+    }
+    const roleAttr = node.attrs.find((a) => a.name === "role");
+    if (roleAttr && !isDynamicValue(roleAttr)) {
+      const role = roleAttr.value.trim();
+      roleTally.set(role, (roleTally.get(role) ?? 0) + 1);
+      if (isFocusable(node, "tab")) {
+        focusableRoleTally.set(role, (focusableRoleTally.get(role) ?? 0) + 1);
+      }
+    }
     for (const attr of node.attrs) {
       if (attr.name === IGNORE_ATTR) {
         for (const token of attr.value.split(/\s+/).filter((t) => t.length > 0)) {
@@ -416,7 +462,7 @@ function checkSource(source, manifest) {
           );
           continue;
         }
-        const targetName = attr.value.trim();
+        const targetName = isDynamicValue(attr) ? "" : attr.value.trim();
         if (targetName.length > 0 && !controller.targets.includes(targetName)) {
           const best = nearestName(targetName, controller.targets);
           report(
@@ -520,13 +566,36 @@ function checkSource(source, manifest) {
       }
     }
   }
+  for (const { node, identifier } of scopes) {
+    const controller = known[identifier];
+    if (!controller) continue;
+    const present = presence.get(node)?.get(identifier) ?? /* @__PURE__ */ new Set();
+    for (const rule of controller.conditionalTargets) {
+      if (!present.has(rule.whenPresent)) continue;
+      const missing = rule.require.filter((target) => !present.has(target));
+      if (missing.length === 0) continue;
+      report(
+        node,
+        "missing-conditional-target",
+        "error",
+        `"${identifier}" has a "${rule.whenPresent}" target, which also requires ${list(missing)}.`,
+        node,
+        rule.suggestion
+      );
+    }
+  }
   for (const { node, identifier } of scopes) {
     const controller = known[identifier];
     if (!controller) continue;
     for (const req of controller.a11y) {
+      if (conditionHolds(node, identifier, req.when) !== true) continue;
       const elements = req.target === "" ? [node] : targetNodes.get(node)?.get(identifier)?.get(req.target) ?? [];
+      if (req.whenDocument && !documentHolds(req.whenDocument)) continue;
+      const severity = documentHolds(req.escalateWhen) ? "error" : req.severity ?? "error";
       for (const el of elements) {
-        checkA11y(report, el, identifier, req);
+        if (!contentHolds(node, identifier, el, req.whenContains)) continue;
+        if (!elementHolds(el, req.whenElement)) continue;
+        checkA11y(report, el, identifier, req, severity);
       }
     }
   }
@@ -573,6 +642,32 @@ function checkSource(source, manifest) {
       }
     }
   }
+  for (const { node, identifier } of scopes) {
+    const controller = known[identifier];
+    if (!controller) continue;
+    for (const rule of controller.forbiddenAria) {
+      const elements = rule.target === "" ? [node] : targetNodes.get(node)?.get(identifier)?.get(rule.target) ?? [];
+      const where = rule.target === "" ? "scope element" : `"${rule.target}" target`;
+      for (const el of elements) {
+        if (!contentHolds(node, identifier, el, rule.whenContains)) continue;
+        for (const name of rule.attrs) {
+          const attr = el.attrs.find((a) => a.name === name);
+          if (!attr) continue;
+          if (rule.values && (isDynamicValue(attr) || !rule.values.includes(attr.value.trim()))) {
+            continue;
+          }
+          report(
+            el,
+            "forbidden-aria",
+            "warning",
+            `${name} on the ${where} of "${identifier}" contradicts the markup around it.`,
+            attr,
+            rule.suggestion
+          );
+        }
+      }
+    }
+  }
   for (const { node, identifier } of scopes) {
     const controller = known[identifier];
     if (!controller) continue;
@@ -581,14 +676,7 @@ function checkSource(source, manifest) {
       const elements = rule.target === "" ? [node] : targeted ?? (rule.fallbackToScope ? [node] : []);
       const where = rule.target === "" || !targeted ? "scope element" : `"${rule.target}" target`;
       const when = rule.when;
-      if (when) {
-        const hostAttr = node.attrs.find(
-          (a) => a.name === `data-${identifier}-${dasherize(when.value)}-value`
-        );
-        if (hostAttr && isDynamicValue(hostAttr)) continue;
-        const hostEffective = hostAttr ? hostAttr.value.trim() : when.default;
-        if (!when.equals.includes(hostEffective)) continue;
-      }
+      if (conditionHolds(node, identifier, when) !== true) continue;
       const hostContext = when ? ` (${when.value} ${list(when.equals)})` : "";
       for (const el of elements) {
         const declared = el.attrs.find((a) => a.name === "data-controller");
@@ -624,6 +712,113 @@ function checkSource(source, manifest) {
       }
     }
   }
+  for (const { node, identifier } of scopes) {
+    const controller = known[identifier];
+    if (!controller) continue;
+    for (const rule of controller.companions) {
+      const elements = rule.target === "" ? [node] : targetNodes.get(node)?.get(identifier)?.get(rule.target) ?? [];
+      const where = rule.target === "" ? "scope element" : `"${rule.target}" target`;
+      for (const el of elements) {
+        const declared = el.attrs.find((a) => a.name === "data-controller");
+        if (declared && isDynamicValue(declared)) continue;
+        if (declared && controllerIdentifiers(declared.value).includes(rule.controller)) continue;
+        report(
+          el,
+          "missing-companion",
+          "error",
+          `The ${where} of "${identifier}" must also declare "${rule.controller}" in data-controller.`,
+          declared ?? el,
+          rule.suggestion,
+          // Appending to an existing list is unambiguous; creating the
+          // attribute from nothing is an insertion the anchor cannot express.
+          declared ? valueFix(
+            declared,
+            `${declared.value.trim()} ${rule.controller}`.trim(),
+            `Add "${rule.controller}" to data-controller`
+          ) : void 0
+        );
+      }
+    }
+  }
+  for (const { node, identifier } of scopes) {
+    const controller = known[identifier];
+    if (!controller) continue;
+    if (controller.targetDeclarations.length === 0) continue;
+    const targetAttrName = `data-${identifier}-target`;
+    for (const rule of controller.targetDeclarations) {
+      for (const el of declarationCandidates) {
+        const marker = el.attrs.find((a) => a.name === rule.attr);
+        if (!marker || isDynamicValue(marker)) continue;
+        const value = marker.value.trim();
+        if (value.length === 0) continue;
+        if (rule.values && !rule.values.includes(value)) continue;
+        if (findOwner(el, identifier) !== node) continue;
+        const declaredAs = el.attrs.find((a) => a.name === targetAttrName);
+        if (declaredAs && !isDynamicValue(declaredAs) && declaredAs.value.trim() === rule.target) {
+          continue;
+        }
+        if (declaredAs && isDynamicValue(declaredAs)) continue;
+        report(
+          el,
+          "undeclared-target",
+          "error",
+          `${rule.attr}="${value}" inside "${identifier}" is not declared as its "${rule.target}" target, so the controller never manages it.`,
+          marker,
+          rule.suggestion
+        );
+      }
+    }
+  }
+  for (const { node, identifier } of scopes) {
+    const controller = known[identifier];
+    if (!controller) continue;
+    for (const rule of controller.cardinality) {
+      if (conditionHolds(node, identifier, rule.when) !== true) continue;
+      const byName = targetNodes.get(node)?.get(identifier);
+      const counted = byName?.get(rule.target) ?? [];
+      const containers = rule.within === "" ? [node] : byName?.get(rule.within) ?? [];
+      const what = describeCounted(rule.target, rule.attr, rule.values);
+      const where = rule.within === "" ? "controller scope" : `"${rule.within}" target`;
+      for (const container of containers) {
+        const matched = [];
+        for (const el of counted) {
+          if (!isWithin(el, container)) continue;
+          if (rule.attr === void 0) {
+            matched.push({ el, at: el });
+            continue;
+          }
+          const attr = el.attrs.find((a) => a.name === rule.attr);
+          if (!attr) continue;
+          if (rule.values && (isDynamicValue(attr) || !rule.values.includes(attr.value.trim()))) {
+            continue;
+          }
+          matched.push({ el, at: attr });
+        }
+        if (rule.max !== void 0 && matched.length > rule.max) {
+          for (const { el, at } of matched.slice(rule.max)) {
+            report(
+              el,
+              "cardinality-violation",
+              "error",
+              `"${identifier}" allows at most ${rule.max} ${what} per ${where}, but found ${matched.length}.`,
+              at,
+              rule.suggestion
+            );
+          }
+        }
+        if (rule.min !== void 0 && matched.length < rule.min) {
+          report(
+            container,
+            "cardinality-violation",
+            "error",
+            `"${identifier}" requires at least ${rule.min} ${what} per ${where}, but found ${matched.length}.`,
+            container,
+            rule.suggestion
+          );
+        }
+      }
+    }
+  }
   const ids = /* @__PURE__ */ new Set();
   walk(tree, (node) => {
     const id = node.attrs.find((a) => a.name === "id");
@@ -661,7 +856,7 @@ function checkSource(source, manifest) {
   diagnostics.sort((a, b) => a.line - b.line || a.column - b.column);
   return diagnostics;
 }
-function checkA11y(report, el, identifier, req) {
+function checkA11y(report, el, identifier, req, severity) {
   const groups = [
     { attrs: req.attrs, values: req.values },
     ...req.or ?? []
@@ -690,11 +885,12 @@ function checkA11y(report, el, identifier, req) {
     }
   }
   if (!anyPresent) {
+    const verb = severity === "warning" ? "recommends" : "requires";
     report(
       el,
       "missing-aria",
-      "error",
-      `"${identifier}" requires ${describeAttrs([...allowedByAttr.keys()])} on its ${where}.`,
+      severity,
+      `"${identifier}" ${verb} ${describeAttrs([...allowedByAttr.keys()])} on its ${where}.`,
       el,
       req.suggestion
     );
@@ -713,6 +909,19 @@ function checkA11y(report, el, identifier, req) {
     );
   }
 }
+function isWithin(node, container) {
+  let current = node;
+  while (current) {
+    if (current === container) return true;
+    current = current.parent;
+  }
+  return false;
+}
+function describeCounted(target, attr, values) {
+  if (attr === void 0) return `"${target}" targets`;
+  const constrained = values && values.length > 0 ? ` set to ${list(values)}` : "";
+  return `"${target}" targets with ${attr}${constrained}`;
+}
 var NATIVE_FOCUSABLE_TAGS = /* @__PURE__ */ new Set(["button", "select", "textarea", "summary"]);
 function isNativelyFocusable(el) {
   if (NATIVE_FOCUSABLE_TAGS.has(el.tag)) return true;
@@ -866,10 +1075,15 @@ var CONTROLLER_ARRAY_FIELDS = [
   "actions",
   "events",
   "requiredTargets",
+  "conditionalTargets",
   "a11y",
   "keyboard",
   "managedAria",
-  "compositions"
+  "compositions",
+  "companions",
+  "targetDeclarations",
+  "cardinality",
+  "forbiddenAria"
 ];
 function isCompatibleManifest(value) {
   if (typeof value !== "object" || value === null || Array.isArray(value)) return false;