@reticular/speakable 1.7.0 → 1.8.0

package/dist/index.d.ts

@@ -16,7 +16,7 @@ interface ModelVersion {
  * Accessible role following ARIA specification.
  * V1 supports common interactive and structural roles.
  */
-type AccessibleRole = 'button' | 'link' | 'heading' | 'textbox' | 'checkbox' | 'radio' | 'combobox' | 'listbox' | 'option' | 'list' | 'listitem' | 'article' | 'generic' | 'navigation' | 'main' | 'banner' | 'contentinfo' | 'region' | 'img' | 'complementary' | 'form' | 'search' | 'paragraph' | 'blockquote' | 'code' | 'staticText' | 'table' | 'row' | 'cell' | 'columnheader' | 'rowheader' | 'term' | 'definition' | 'figure' | 'caption' | 'group' | 'dialog' | 'meter' | 'progressbar' | 'status' | 'document' | 'application' | 'separator';
+type AccessibleRole = 'button' | 'link' | 'heading' | 'textbox' | 'checkbox' | 'radio' | 'combobox' | 'listbox' | 'option' | 'list' | 'listitem' | 'article' | 'generic' | 'navigation' | 'main' | 'banner' | 'contentinfo' | 'region' | 'img' | 'complementary' | 'form' | 'search' | 'paragraph' | 'blockquote' | 'code' | 'staticText' | 'table' | 'row' | 'cell' | 'columnheader' | 'rowheader' | 'term' | 'definition' | 'figure' | 'caption' | 'group' | 'dialog' | 'meter' | 'progressbar' | 'status' | 'switch' | 'slider' | 'spinbutton' | 'tab' | 'tablist' | 'tabpanel' | 'document' | 'application' | 'separator';
 /**
  * Accessible states and properties.
  * Only includes properties relevant to the element's role.

package/dist/index.js

@@ -48,6 +48,12 @@ var SUPPORTED_ROLES = [
   "meter",
   "progressbar",
   "status",
+  "switch",
+  "slider",
+  "spinbutton",
+  "tab",
+  "tablist",
+  "tabpanel",
   "document",
   "application",
   "separator"
@@ -968,8 +974,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);
@@ -998,6 +1041,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));
   }
@@ -1033,7 +1079,7 @@ function formatRoleVoiceOver(node) {
     case "list":
       return "list";
     case "listitem":
-      return "item";
+      return "";
     case "navigation":
       return "navigation";
     case "main":
@@ -1089,6 +1135,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":
@@ -1109,6 +1167,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");
     }
@@ -1117,10 +1179,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) {
@@ -2069,7 +2131,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 = [];
@@ -2102,6 +2167,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;
   }
@@ -2511,6 +2581,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);
@@ -2520,6 +2591,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);
 }
@@ -2625,6 +2715,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;
@@ -2661,7 +2775,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,