@reticular/speakable 1.7.0 → 1.8.0

package/dist/storybook/dist/preview.js

@@ -67,6 +67,12 @@ var SUPPORTED_ROLES = [
   "meter",
   "progressbar",
   "status",
+  "switch",
+  "slider",
+  "spinbutton",
+  "tab",
+  "tablist",
+  "tabpanel",
   "document",
   "application",
   "separator"
@@ -366,7 +372,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 = [];
@@ -399,6 +408,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;
   }
@@ -802,6 +816,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);
@@ -811,6 +826,25 @@ 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);
 }
@@ -891,6 +925,30 @@ function buildAccessibilityTree(rootElement, sourceHash) {
   };
   return { model, warnings };
 }
+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;
@@ -927,7 +985,15 @@ function buildNodeRecursive(element, warnings) {
     element: w.element
   })));
   const focusInfo = extractFocusInfo(element);
-  const children = collectAccessibleChildren(element, 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;
+    }
+  }
+  assignImplicitSetPosition(children);
   const node = {
     role: roleResult.role,
     name: nameResult.name,
@@ -1424,8 +1490,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);
@@ -1454,6 +1557,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));
   }
@@ -1489,7 +1595,7 @@ function formatRoleVoiceOver(node) {
     case "list":
       return "list";
     case "listitem":
-      return "item";
+      return "";
     case "navigation":
       return "navigation";
     case "main":
@@ -1545,6 +1651,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":
@@ -1565,6 +1683,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");
     }
@@ -1573,10 +1695,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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reticular/speakable",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "CLI tool for analyzing HTML accessibility announcements",
   "type": "module",
   "main": "dist/index.js",
@@ -59,6 +59,9 @@
     "url": "https://github.com/R3TICULAR/AnnounceKit/issues"
   },
   "devDependencies": {
+    "@guidepup/guidepup": "^0.38.0",
+    "@guidepup/playwright": "^0.21.0",
+    "@playwright/test": "^1.64.1",
     "@storybook/addon-a11y": "^8.6.18",
     "@storybook/addon-essentials": "^8.6.14",
     "@storybook/html": "^8.6.18",
@@ -70,6 +73,7 @@
     "fast-check": "^3.15.0",
     "storybook": "^8.6.18",
     "tsup": "^8.5.0",
+    "tsx": "^4.23.15",
     "typescript": "^5.3.0",
     "vitest": "^3.1.0"
   },