@tangle-network/ui 11.16.1 → 11.16.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tangle-network/ui
 
+## 11.16.2
+
+### Patch Changes
+
+- 74e6dfb: `CommandPreview` output regions are keyboard-focusable and labelled (stdout, stderr, error), so a long output that scrolls inside the block can be scrolled without a pointer (WCAG 2.1.1; axe `scrollable-region-focusable`).
+
 ## 11.16.1
 
 ### Patch Changes

package/dist/tool-previews/command-preview.js

@@ -171,16 +171,21 @@ const CommandPreview = memo(({ part, defaultExpanded = false, className }) => {
 			className: "border-t border-white/10",
 			children: [
 				output.stdout ? /* @__PURE__ */ jsx("pre", {
-					className: "max-h-80 overflow-auto whitespace-pre-wrap break-all px-3 py-2 leading-relaxed",
+					tabIndex: 0,
+					"aria-label": "stdout",
+					className: cn("max-h-80 overflow-auto whitespace-pre-wrap break-all px-3 py-2 leading-relaxed", focusRing),
 					children: output.stdout
 				}) : null,
 				output.stderr ? /* @__PURE__ */ jsx("pre", {
+					tabIndex: 0,
 					"aria-label": "stderr",
-					className: "max-h-80 overflow-auto whitespace-pre-wrap break-all border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]",
+					className: cn("max-h-80 overflow-auto whitespace-pre-wrap break-all border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]", focusRing),
 					children: output.stderr
 				}) : null,
 				errorText ? /* @__PURE__ */ jsx("pre", {
-					className: "max-h-80 overflow-auto whitespace-pre-wrap break-all border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]",
+					tabIndex: 0,
+					"aria-label": "error",
+					className: cn("max-h-80 overflow-auto whitespace-pre-wrap break-all border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]", focusRing),
 					children: errorText
 				}) : null
 			]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.16.1",
+  "version": "11.16.2",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

package/src/tool-previews/command-preview.tsx

@@ -235,20 +235,38 @@ export const CommandPreview = memo(
         {expanded && hasBody ? (
           <div id={bodyId} className="border-t border-white/10">
             {output.stdout ? (
-              <pre className="max-h-80 overflow-auto whitespace-pre-wrap break-all px-3 py-2 leading-relaxed">
+              <pre
+                tabIndex={0}
+                aria-label="stdout"
+                className={cn(
+                  "max-h-80 overflow-auto whitespace-pre-wrap break-all px-3 py-2 leading-relaxed",
+                  focusRing,
+                )}
+              >
                 {output.stdout}
               </pre>
             ) : null}
             {output.stderr ? (
               <pre
+                tabIndex={0}
                 aria-label="stderr"
-                className="max-h-80 overflow-auto whitespace-pre-wrap break-all border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]"
+                className={cn(
+                  "max-h-80 overflow-auto whitespace-pre-wrap break-all border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]",
+                  focusRing,
+                )}
               >
                 {output.stderr}
               </pre>
             ) : null}
             {errorText ? (
-              <pre className="max-h-80 overflow-auto whitespace-pre-wrap break-all border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]">
+              <pre
+                tabIndex={0}
+                aria-label="error"
+                className={cn(
+                  "max-h-80 overflow-auto whitespace-pre-wrap break-all border-t border-white/10 px-3 py-2 leading-relaxed text-[var(--surface-danger-text)]",
+                  focusRing,
+                )}
+              >
                 {errorText}
               </pre>
             ) : null}