@reticular/speakable 1.2.0 → 1.4.0

package/dist/mcp.js

@@ -1656,6 +1656,236 @@ function formatStatesVoiceOver(node) {
   return states.join(", ");
 }
 
+// src/renderer/narrator-renderer.ts
+function renderNarrator(model, colorize) {
+  const c = createColors(colorize ?? false);
+  const announcements = [];
+  renderNodeNarrator(model.root, announcements, c);
+  return announcements.join("\n");
+}
+function renderNodeNarrator(node, announcements, c) {
+  const announcement = formatNodeNarrator(node, c);
+  if (announcement) {
+    announcements.push(announcement);
+  }
+  for (const child of node.children) {
+    if (child.name && child.name === node.name && node.children.length === 1) {
+      for (const grandchild of child.children) {
+        renderNodeNarrator(grandchild, announcements, c);
+      }
+      continue;
+    }
+    renderNodeNarrator(child, announcements, c);
+  }
+}
+function formatNodeNarrator(node, c) {
+  const parts = [];
+  const roleFirst = shouldAnnounceRoleFirst2(node.role);
+  if (roleFirst) {
+    const roleText = formatRoleNarrator(node);
+    if (roleText) {
+      parts.push(c.roleName(roleText));
+    }
+    if (node.name) {
+      parts.push(c.elementName(node.name));
+    }
+  } else {
+    if (node.name) {
+      parts.push(c.elementName(node.name));
+    }
+    const roleText = formatRoleNarrator(node);
+    if (roleText) {
+      parts.push(c.roleName(roleText));
+    }
+  }
+  const stateText = formatStatesNarrator(node);
+  if (stateText) {
+    parts.push(c.stateName(stateText));
+  }
+  if (node.value) {
+    const valueText = node.value.text || String(node.value.current);
+    if (valueText) {
+      parts.push(valueText);
+    }
+  }
+  if (node.description) {
+    parts.push(c.description(node.description));
+  }
+  return parts.join(", ");
+}
+function shouldAnnounceRoleFirst2(role) {
+  const roleFirstRoles = [
+    "link",
+    "heading",
+    "navigation",
+    "main",
+    "banner",
+    "contentinfo",
+    "complementary",
+    "region",
+    "form",
+    "search",
+    "blockquote",
+    "figure",
+    "dialog",
+    "group",
+    "document"
+  ];
+  return roleFirstRoles.includes(role);
+}
+function formatRoleNarrator(node) {
+  const role = node.role;
+  switch (role) {
+    case "button":
+      return "button";
+    case "link":
+      return "link";
+    case "heading":
+      if (node.state.level) {
+        return `Heading level ${node.state.level}`;
+      }
+      return "Heading";
+    case "textbox":
+      return "edit";
+    case "checkbox":
+      return "check box";
+    case "radio":
+      return "radio button";
+    case "combobox":
+      return "combo box";
+    case "listbox":
+      return "list box";
+    case "option":
+      return "option";
+    case "list":
+      return "list";
+    case "listitem":
+      return "list item";
+    case "navigation":
+      return "navigation";
+    case "main":
+      return "main";
+    case "banner":
+      return "banner";
+    case "contentinfo":
+      return "content info";
+    case "complementary":
+      return "complementary";
+    case "form":
+      return "form";
+    case "search":
+      return "search";
+    case "region":
+      return "region";
+    case "img":
+      return "image";
+    case "article":
+      return "article";
+    case "generic":
+      return "";
+    case "staticText":
+    case "paragraph":
+    case "cell":
+    case "term":
+    case "definition":
+    case "caption":
+      return "";
+    case "blockquote":
+      return "block quote";
+    case "code":
+      return "code";
+    case "table": {
+      const rows = node.children.filter((c) => c.role === "row");
+      const rowCount = rows.length;
+      const colCount = rows.length > 0 ? rows[0].children.length : 0;
+      return `table, ${rowCount} rows, ${colCount} columns`;
+    }
+    case "row":
+      return "row";
+    case "columnheader":
+      return "column header";
+    case "rowheader":
+      return "row header";
+    case "figure":
+      return "figure";
+    case "dialog":
+      return "dialog";
+    case "meter":
+      return "meter";
+    case "progressbar":
+      return "progress bar";
+    case "status":
+      return "status";
+    case "group":
+      return node.name ? "group" : "";
+    case "document":
+      return "document";
+    case "application":
+      return "application";
+    case "separator":
+      return "separator";
+    default:
+      return role;
+  }
+}
+function formatStatesNarrator(node) {
+  const states = [];
+  if (node.state.expanded !== void 0) {
+    states.push(node.state.expanded ? "expanded" : "collapsed");
+  }
+  if (node.state.checked !== void 0) {
+    if (node.state.checked === "mixed") {
+      states.push("partially selected");
+    } else {
+      states.push(node.state.checked ? "checked" : "unchecked");
+    }
+  }
+  if (node.state.pressed !== void 0) {
+    if (node.state.pressed === "mixed") {
+      states.push("partially pressed");
+    } else {
+      states.push(node.state.pressed ? "pressed" : "not pressed");
+    }
+  }
+  if (node.state.selected !== void 0) {
+    states.push(node.state.selected ? "selected" : "not selected");
+  }
+  if (node.state.disabled) {
+    states.push("disabled");
+  }
+  if (node.state.invalid) {
+    states.push("invalid");
+  }
+  if (node.state.required) {
+    states.push("required");
+  }
+  if (node.state.readonly) {
+    states.push("read only");
+  }
+  if (node.state.busy) {
+    states.push("busy");
+  }
+  if (node.state.current) {
+    if (node.state.current === "page") {
+      states.push("current page");
+    } else if (node.state.current === "step") {
+      states.push("current step");
+    } else if (node.state.current === "location") {
+      states.push("current location");
+    } else if (node.state.current === "date") {
+      states.push("current date");
+    } else if (node.state.current === "time") {
+      states.push("current time");
+    } else if (node.state.current === "true") {
+      states.push("current");
+    }
+  }
+  if (node.state.grabbed !== void 0) {
+    states.push(node.state.grabbed ? "grabbed" : "not grabbed");
+  }
+  return states.join(", ");
+}
+
 // src/renderer/audit-renderer.ts
 function renderAuditReport(model, colorize) {
   const report = generateAuditReport(model);
@@ -2193,7 +2423,10 @@ function renderOutput(model, screenReader) {
       renderJAWS(model),
       "",
       "--- VoiceOver ---",
-      renderVoiceOver(model)
+      renderVoiceOver(model),
+      "",
+      "--- Narrator ---",
+      renderNarrator(model)
     ].join("\n");
   }
   switch (screenReader) {
@@ -2203,6 +2436,8 @@ function renderOutput(model, screenReader) {
       return renderJAWS(model);
     case "voiceover":
       return renderVoiceOver(model);
+    case "narrator":
+      return renderNarrator(model);
   }
 }
 function analyzeHTML(html, screenReader, selector) {
@@ -2213,14 +2448,16 @@ function analyzeHTML(html, screenReader, selector) {
   }
   const warnings = parseWarnings.map((w) => w.message);
   if (selector) {
-    const { models, warnings: treeWarnings2 } = buildAccessibilityTreeWithSelector(body, selector);
-    warnings.push(...treeWarnings2.map((w) => w.message));
-    const outputs = models.map((m, i) => {
-      const prefix = models.length > 1 ? `=== Element ${i + 1} ===
+    const results = buildAccessibilityTreeWithSelector(body, selector);
+    for (const r of results) {
+      warnings.push(...r.warnings.map((w) => w.message));
+    }
+    const outputs = results.map((r, i) => {
+      const prefix = results.length > 1 ? `=== Element ${i + 1} ===
 ` : "";
-      return prefix + renderOutput(m, screenReader);
+      return prefix + renderOutput(r.model, screenReader);
     });
-    return { output: outputs.join("\n\n"), warnings, model: models[0] || null };
+    return { output: outputs.join("\n\n"), warnings, model: results[0]?.model || null };
   }
   const { model, warnings: treeWarnings } = buildAccessibilityTree(body);
   warnings.push(...treeWarnings.map((w) => w.message));
@@ -2232,10 +2469,10 @@ var server = new McpServer({
 });
 server.tool(
   "analyze_html",
-  "Predict how screen readers (NVDA, JAWS, VoiceOver) will announce HTML content. Returns the predicted speech output line by line.",
+  "Predict how screen readers (NVDA, JAWS, VoiceOver, Narrator) will announce HTML content. Returns the predicted speech output line by line.",
   {
     html: z.string().describe("The HTML content to analyze"),
-    screen_reader: z.enum(["nvda", "jaws", "voiceover", "all"]).default("all").describe("Which screen reader to simulate (default: all)"),
+    screen_reader: z.enum(["nvda", "jaws", "voiceover", "narrator", "all"]).default("all").describe("Which screen reader to simulate (default: all)"),
     selector: z.string().optional().describe("Optional CSS selector to focus analysis on specific elements")
   },
   async ({ html, screen_reader, selector }) => {
@@ -2276,14 +2513,16 @@ server.tool(
       let model;
       const warnings = parseWarnings.map((w) => w.message);
       if (selector) {
-        const { models, warnings: treeWarnings } = buildAccessibilityTreeWithSelector(body, selector);
-        warnings.push(...treeWarnings.map((w) => w.message));
-        if (models.length === 0) {
+        const results = buildAccessibilityTreeWithSelector(body, selector);
+        for (const r of results) {
+          warnings.push(...r.warnings.map((w) => w.message));
+        }
+        if (results.length === 0) {
           return {
             content: [{ type: "text", text: `No elements found matching selector: ${selector}` }]
           };
         }
-        model = models[0];
+        model = results[0].model;
       } else {
         const result = buildAccessibilityTree(body);
         warnings.push(...result.warnings.map((w) => w.message));
@@ -2326,20 +2565,20 @@ server.tool(
       let beforeModel;
       let afterModel;
       if (selector) {
-        const beforeResult = buildAccessibilityTreeWithSelector(beforeDoc.document.body, selector);
-        const afterResult = buildAccessibilityTreeWithSelector(afterDoc.document.body, selector);
-        if (beforeResult.models.length === 0 || afterResult.models.length === 0) {
+        const beforeResults = buildAccessibilityTreeWithSelector(beforeDoc.document.body, selector);
+        const afterResults = buildAccessibilityTreeWithSelector(afterDoc.document.body, selector);
+        if (beforeResults.length === 0 || afterResults.length === 0) {
           return {
             content: [{ type: "text", text: `No elements found matching selector: ${selector}` }]
           };
         }
-        beforeModel = beforeResult.models[0];
-        afterModel = afterResult.models[0];
+        beforeModel = beforeResults[0].model;
+        afterModel = afterResults[0].model;
       } else {
         beforeModel = buildAccessibilityTree(beforeDoc.document.body).model;
         afterModel = buildAccessibilityTree(afterDoc.document.body).model;
       }
-      const diff = diffAccessibilityTrees(beforeModel, afterModel);
+      const diff = diffAccessibilityTrees(beforeModel.root, afterModel.root);
       if (diff.changes.length === 0) {
         return {
           content: [{ type: "text", text: "No accessibility changes detected between the two versions." }]