@nkootstra/block-kit 0.3.0 → 0.3.1

package/dist/index.js

@@ -9872,6 +9872,24 @@ function DotIcon({ status }) {
 		children: /* @__PURE__ */ jsx("path", { d: "M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0" })
 	});
 }
+/** How a status reads aloud. The icons are hidden from assistive technology, so this stands in. */
+const STATUS_LABELS = {
+	complete: "complete",
+	in_progress: "in progress",
+	pending: "pending",
+	error: "failed"
+};
+/**
+* A status as text that only screen readers get, set after a title (", in progress"), so a toggle
+* or task header is announced with the state its icon shows. An unknown status says nothing.
+*/
+function StatusText({ status }) {
+	const label = STATUS_LABELS[status];
+	return label ? /* @__PURE__ */ jsx("span", {
+		className: "sbk-visually-hidden",
+		children: `, ${label}`
+	}) : null;
+}
 /** The glyph on a toggle bar (the plan's or a task_card's): check, warning or spinner. */
 function StatusIcon({ status }) {
 	if (status === "complete") return /* @__PURE__ */ jsx(CheckCircleIcon, {});
@@ -9898,7 +9916,8 @@ function aggregateStatus(statuses) {
 /**
 * One step of the plan. As in Slack, a thin line joins each step's icon to the next, its details
 * start open, and the title is a button that hides and shows them instantly; a task with nothing
-* to reveal gets a disabled header and no caret.
+* to reveal gets the same header as plain text, with no caret. The status, shown as an icon, is
+* also in the header as text for screen readers.
 */
 function TaskRow({ task }) {
 	const [open, setOpen] = useState(true);
@@ -9919,21 +9938,28 @@ function TaskRow({ task }) {
 			]
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "sbk-plan__task-content",
-			children: [/* @__PURE__ */ jsxs("button", {
+			children: [expandable ? /* @__PURE__ */ jsxs("button", {
 				type: "button",
 				className: "sbk-plan__task-header",
 				"aria-expanded": open,
-				"aria-disabled": expandable ? void 0 : true,
-				onClick: () => {
-					if (expandable) setOpen((value) => !value);
-				},
+				onClick: () => setOpen((value) => !value),
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "sbk-plan__task-title",
+						children: task.title
+					}),
+					/* @__PURE__ */ jsx(StatusText, { status: task.status }),
+					/* @__PURE__ */ jsx("span", {
+						className: "sbk-plan__task-caret",
+						children: /* @__PURE__ */ jsx(CaretIcon, { direction: open ? "down" : "right" })
+					})
+				]
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: "sbk-plan__task-header",
 				children: [/* @__PURE__ */ jsx("span", {
 					className: "sbk-plan__task-title",
 					children: task.title
-				}), expandable ? /* @__PURE__ */ jsx("span", {
-					className: "sbk-plan__task-caret",
-					children: /* @__PURE__ */ jsx(CaretIcon, { direction: open ? "down" : "right" })
-				}) : null]
+				}), /* @__PURE__ */ jsx(StatusText, { status: task.status })]
 			}), open && expandable ? /* @__PURE__ */ jsxs("div", {
 				className: "sbk-plan__task-body",
 				children: [
@@ -9982,6 +10008,7 @@ function Plan({ block }) {
 						className: "sbk-plan__pill-title",
 						children: block.title
 					}),
+					/* @__PURE__ */ jsx(StatusText, { status }),
 					/* @__PURE__ */ jsx("span", {
 						className: "sbk-plan__pill-chevron",
 						children: /* @__PURE__ */ jsx(CaretIcon, { direction: expanded ? "down" : "right" })
@@ -10395,33 +10422,35 @@ function TaskCard({ block }) {
 	const [expanded, setExpanded] = useState(false);
 	const sources = Array.isArray(block.sources) ? block.sources : [];
 	const expandable = Boolean(block.details || block.output || sources.length > 0);
+	const pillContent = /* @__PURE__ */ jsxs("span", {
+		className: "sbk-task-card__pill-content",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "sbk-task-card__pill-icon",
+				children: /* @__PURE__ */ jsx(StatusIcon, { status: block.status })
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "sbk-task-card__pill-title",
+				children: block.title
+			}),
+			/* @__PURE__ */ jsx(StatusText, { status: block.status }),
+			expandable ? /* @__PURE__ */ jsx("span", {
+				className: "sbk-task-card__pill-chevron",
+				children: /* @__PURE__ */ jsx(CaretIcon, { direction: expanded ? "down" : "right" })
+			}) : null
+		]
+	});
 	return /* @__PURE__ */ jsxs("div", {
 		className: "sbk-task-card",
-		children: [/* @__PURE__ */ jsx("button", {
+		children: [expandable ? /* @__PURE__ */ jsx("button", {
 			type: "button",
 			className: "sbk-task-card__pill",
 			"aria-expanded": expanded,
-			"aria-disabled": expandable ? void 0 : true,
-			onClick: () => {
-				if (expandable) setExpanded((value) => !value);
-			},
-			children: /* @__PURE__ */ jsxs("span", {
-				className: "sbk-task-card__pill-content",
-				children: [
-					/* @__PURE__ */ jsx("span", {
-						className: "sbk-task-card__pill-icon",
-						children: /* @__PURE__ */ jsx(StatusIcon, { status: block.status })
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "sbk-task-card__pill-title",
-						children: block.title
-					}),
-					expandable ? /* @__PURE__ */ jsx("span", {
-						className: "sbk-task-card__pill-chevron",
-						children: /* @__PURE__ */ jsx(CaretIcon, { direction: expanded ? "down" : "right" })
-					}) : null
-				]
-			})
+			onClick: () => setExpanded((value) => !value),
+			children: pillContent
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "sbk-task-card__pill",
+			children: pillContent
 		}), /* @__PURE__ */ jsx(Collapse, {
 			open: expanded,
 			children: /* @__PURE__ */ jsxs("div", {