@reticular/speakable 1.6.0 → 1.8.0

package/dist/mcp.js

@@ -301,6 +301,12 @@ var SUPPORTED_ROLES = [
   "meter",
   "progressbar",
   "status",
+  "switch",
+  "slider",
+  "spinbutton",
+  "tab",
+  "tablist",
+  "tabpanel",
   "document",
   "application",
   "separator"
@@ -397,7 +403,10 @@ var INPUT_TYPE_ROLE_MAP = {
   "search": "textbox",
   "tel": "textbox",
   "url": "textbox",
-  "number": "textbox"
+  // Per ARIA, <input type="number"> has an implicit role of spinbutton
+  // (VoiceOver announces it as "stepper").
+  "number": "spinbutton",
+  "range": "slider"
 };
 function computeRole(element) {
   const warnings = [];
@@ -430,6 +439,11 @@ function computeImplicitRole(element, _warnings) {
   if (tagName === "input") {
     return computeInputRole(element);
   }
+  if (tagName === "select") {
+    const multiple = element.hasAttribute("multiple");
+    const size = parseInt(element.getAttribute("size") || "0", 10);
+    return multiple || size > 1 ? "listbox" : "combobox";
+  }
   if (tagName === "a") {
     return element.hasAttribute("href") ? "link" : null;
   }
@@ -839,6 +853,7 @@ function processChildNode(node, children, warnings) {
   if (node.nodeType === 1) {
     const element = node;
     if (isHidden(element)) return;
+    if (isConsumedLabel(element)) return;
     if (!isAccessible(element)) {
       const grandchildren = collectChildrenFromRolelessElement(element, warnings);
       children.push(...grandchildren);
@@ -848,18 +863,74 @@ function processChildNode(node, children, warnings) {
     if (childNode) children.push(childNode);
   }
 }
+function isConsumedLabel(element) {
+  if (element.tagName.toLowerCase() !== "label") return false;
+  const forId = element.getAttribute("for");
+  if (forId) {
+    const doc = element.ownerDocument;
+    const target = doc?.getElementById(forId);
+    if (target && isLabelableControl(target)) return true;
+  }
+  const wrapped = element.querySelector("input, select, textarea, button, meter, progress");
+  if (wrapped && isLabelableControl(wrapped)) return true;
+  return false;
+}
+function isLabelableControl(element) {
+  const tag = element.tagName.toLowerCase();
+  if (tag === "input") {
+    return (element.getAttribute("type") || "text").toLowerCase() !== "hidden";
+  }
+  return tag === "select" || tag === "textarea" || tag === "button" || tag === "meter" || tag === "progress";
+}
 function collectChildrenFromRolelessElement(element, warnings) {
+  return collectAccessibleChildren(element, warnings);
+}
+function collectAccessibleChildren(element, warnings) {
   const children = [];
   if (element.shadowRoot) {
     for (const child of Array.from(element.shadowRoot.childNodes)) {
-      processChildNode(child, children, warnings);
+      processShadowNode(child, children, warnings);
     }
+    return children;
+  }
+  if (element.localName && element.localName.includes("-") && element.childNodes.length === 0) {
+    warnings.push({
+      message: `Custom element <${element.localName}> has no accessible children and may have a closed shadow root; its content could not be analyzed.`,
+      element
+    });
   }
   for (const child of Array.from(element.childNodes)) {
     processChildNode(child, children, warnings);
   }
   return children;
 }
+function processShadowNode(node, children, warnings) {
+  if (node.nodeType === 1) {
+    const element = node;
+    if (element.localName === "slot") {
+      const slot = element;
+      let assigned = [];
+      if (typeof slot.assignedNodes === "function") {
+        try {
+          assigned = Array.from(slot.assignedNodes({ flatten: true }));
+        } catch {
+          assigned = [];
+        }
+      }
+      if (assigned.length > 0) {
+        for (const assignedNode of assigned) {
+          processChildNode(assignedNode, children, warnings);
+        }
+      } else {
+        for (const child of Array.from(slot.childNodes)) {
+          processShadowNode(child, children, warnings);
+        }
+      }
+      return;
+    }
+  }
+  processChildNode(node, children, warnings);
+}
 function buildAccessibilityTree(rootElement, sourceHash) {
   const warnings = [];
   if (isHidden(rootElement)) {
@@ -916,6 +987,30 @@ function buildAccessibilityTreeWithSelector(rootElement, selector, sourceHash) {
   }
   return results;
 }
+var SET_MEMBER_ROLES = /* @__PURE__ */ new Set([
+  "radio",
+  "option",
+  "listitem",
+  "tab"
+]);
+function assignImplicitSetPosition(children) {
+  const totals = /* @__PURE__ */ new Map();
+  for (const child of children) {
+    if (SET_MEMBER_ROLES.has(child.role)) {
+      totals.set(child.role, (totals.get(child.role) ?? 0) + 1);
+    }
+  }
+  const seen = /* @__PURE__ */ new Map();
+  for (const child of children) {
+    if (!SET_MEMBER_ROLES.has(child.role)) continue;
+    const total = totals.get(child.role);
+    if (total < 2) continue;
+    const pos = (seen.get(child.role) ?? 0) + 1;
+    seen.set(child.role, pos);
+    if (child.state.posinset === void 0) child.state.posinset = pos;
+    if (child.state.setsize === void 0) child.state.setsize = total;
+  }
+}
 function buildNodeRecursive(element, warnings) {
   if (isHidden(element)) {
     return null;
@@ -952,15 +1047,15 @@ function buildNodeRecursive(element, warnings) {
     element: w.element
   })));
   const focusInfo = extractFocusInfo(element);
-  const children = [];
-  if (element.shadowRoot) {
-    for (const child of Array.from(element.shadowRoot.childNodes)) {
-      processChildNode(child, children, warnings);
+  let children = collectAccessibleChildren(element, warnings);
+  const isNativeSelect = element.tagName.toLowerCase() === "select";
+  if (isNativeSelect && roleResult.role === "combobox") {
+    children = [];
+    if (stateResult.state.expanded === void 0) {
+      stateResult.state.expanded = false;
     }
   }
-  for (const child of Array.from(element.childNodes)) {
-    processChildNode(child, children, warnings);
-  }
+  assignImplicitSetPosition(children);
   const node = {
     role: roleResult.role,
     name: nameResult.name,
@@ -973,15 +1068,7 @@ function buildNodeRecursive(element, warnings) {
   return node;
 }
 function createGenericContainer(rootElement, warnings) {
-  const children = [];
-  if (rootElement.shadowRoot) {
-    for (const child of Array.from(rootElement.shadowRoot.childNodes)) {
-      processChildNode(child, children, warnings);
-    }
-  }
-  for (const child of Array.from(rootElement.childNodes)) {
-    processChildNode(child, children, warnings);
-  }
+  const children = collectAccessibleChildren(rootElement, warnings);
   return {
     role: "generic",
     name: "",
@@ -1465,8 +1552,45 @@ function renderNodeVoiceOver(node, announcements, c) {
     renderNodeVoiceOver(child, announcements, c);
   }
 }
+function isValueFirstWidget(role) {
+  return role === "slider" || role === "spinbutton" || role === "combobox";
+}
+function isValueBeforeRoleWidget(role) {
+  return role === "progressbar" || role === "meter";
+}
+function isSilentContainerVoiceOver(node) {
+  if (node.role !== "list" && node.role !== "status") return false;
+  if (node.name) return false;
+  return node.children.length > 0;
+}
 function formatNodeVoiceOver(node, c) {
+  if (isSilentContainerVoiceOver(node)) {
+    return "";
+  }
   const parts = [];
+  const valueFirst = isValueFirstWidget(node.role) && node.value !== void 0;
+  if (valueFirst) {
+    const valueText = node.value.text || String(node.value.current);
+    if (valueText) parts.push(valueText);
+    if (node.name) parts.push(c.elementName(node.name));
+    const roleText = formatRoleVoiceOver(node);
+    if (roleText) parts.push(c.roleName(roleText));
+    const stateText2 = formatStatesVoiceOver(node);
+    if (stateText2) parts.push(c.stateName(stateText2));
+    if (node.description) parts.push(c.description(node.description));
+    return parts.join(", ");
+  }
+  if (isValueBeforeRoleWidget(node.role) && node.value !== void 0) {
+    if (node.name) parts.push(c.elementName(node.name));
+    const valueText = node.value.text || String(node.value.current);
+    if (valueText) parts.push(valueText);
+    const roleText = formatRoleVoiceOver(node);
+    if (roleText) parts.push(c.roleName(roleText));
+    const stateText2 = formatStatesVoiceOver(node);
+    if (stateText2) parts.push(c.stateName(stateText2));
+    if (node.description) parts.push(c.description(node.description));
+    return parts.join(", ");
+  }
   const roleFirst = shouldAnnounceRoleFirst(node.role);
   if (roleFirst) {
     const roleText = formatRoleVoiceOver(node);
@@ -1495,6 +1619,9 @@ function formatNodeVoiceOver(node, c) {
       parts.push(valueText);
     }
   }
+  if (node.state.posinset !== void 0 && node.state.setsize !== void 0) {
+    parts.push(`${node.state.posinset} of ${node.state.setsize}`);
+  }
   if (node.description) {
     parts.push(c.description(node.description));
   }
@@ -1530,7 +1657,7 @@ function formatRoleVoiceOver(node) {
     case "list":
       return "list";
     case "listitem":
-      return "item";
+      return "";
     case "navigation":
       return "navigation";
     case "main":
@@ -1586,6 +1713,18 @@ function formatRoleVoiceOver(node) {
       return "progress indicator";
     case "status":
       return "status";
+    case "switch":
+      return "switch";
+    case "slider":
+      return "slider";
+    case "spinbutton":
+      return "stepper";
+    case "tab":
+      return "tab";
+    case "tablist":
+      return node.name ? "tab group" : "tab group";
+    case "tabpanel":
+      return "tab panel";
     case "group":
       return node.name ? "group" : "";
     case "document":
@@ -1606,6 +1745,10 @@ function formatStatesVoiceOver(node) {
   if (node.state.checked !== void 0) {
     if (node.state.checked === "mixed") {
       states.push("mixed");
+    } else if (node.role === "switch") {
+      states.push(node.state.checked ? "on" : "off");
+    } else if (node.role === "radio") {
+      if (node.state.checked) states.push("selected");
     } else {
       states.push(node.state.checked ? "checked" : "unchecked");
     }
@@ -1614,10 +1757,10 @@ function formatStatesVoiceOver(node) {
     if (node.state.pressed === "mixed") {
       states.push("mixed");
     } else {
-      states.push(node.state.pressed ? "pressed" : "not pressed");
+      states.push(node.state.pressed ? "selected" : "unselected");
     }
   }
-  if (node.state.selected !== void 0) {
+  if (node.state.selected !== void 0 && node.role !== "tab") {
     states.push(node.state.selected ? "selected" : "unselected");
   }
   if (node.state.disabled) {