@tangle-network/ui 11.16.3 → 11.16.5

package/src/chat/chat-message.tsx

@@ -75,12 +75,12 @@ export function ChatMessage({
         )}
       >
         {isUser ? (
-          <div className="whitespace-pre-wrap text-[var(--font-size-base)] leading-[var(--line-height-base)]">
+          <div className="whitespace-pre-wrap text-[length:var(--font-size-base)] leading-[var(--line-height-base)]">
             {content}
           </div>
         ) : (
           <>
-            {content && <Markdown className="tangle-prose text-[var(--font-size-base)] leading-[var(--line-height-base)]">{content}</Markdown>}
+            {content && <Markdown className="tangle-prose text-[length:var(--font-size-base)] leading-[var(--line-height-base)]">{content}</Markdown>}
             {isStreaming && (
               <span className="ml-0.5 inline-block h-4 w-2 animate-pulse rounded-sm bg-[var(--brand-cool)] align-text-bottom" />
             )}

package/src/chat/thinking-indicator.tsx

@@ -25,7 +25,7 @@ export function ThinkingIndicator({ className }: ThinkingIndicatorProps) {
         <span className="h-[var(--indicator-dot-size)] w-[var(--indicator-dot-size)] animate-bounce rounded-full bg-[var(--brand-glow)]" style={{ animationDelay: "300ms" }} />
       </div>
       {elapsed > 3 && (
-        <span className="text-[var(--font-size-xs)] tabular-nums text-muted-foreground">
+        <span className="text-[length:var(--font-size-xs)] tabular-nums text-muted-foreground">
           {elapsed}s
         </span>
       )}

package/src/chat/user-message.tsx

@@ -37,12 +37,12 @@ function UserBubble({ text, timestamp, actions }: {
           {timestamp ? (
             <span
               data-user-message-time=""
-              className="pointer-events-none absolute right-full top-1/2 mr-3 -translate-y-1/2 whitespace-nowrap text-[var(--font-size-xs)] text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100"
+              className="pointer-events-none absolute right-full top-1/2 mr-3 -translate-y-1/2 whitespace-nowrap text-[length:var(--font-size-xs)] text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100"
             >
               {formatTime(timestamp)}
             </span>
           ) : null}
-          <div className="break-words whitespace-pre-wrap text-[var(--font-size-base)] leading-[1.5]">
+          <div className="break-words whitespace-pre-wrap text-[length:var(--font-size-base)] leading-[1.5]">
             {text}
           </div>
         </div>

package/src/markdown/code-block.tsx

@@ -9,7 +9,7 @@ import {
 } from "react";
 import type SyntaxHighlighter from "react-syntax-highlighter";
 import { Check, Copy } from "lucide-react";
-import { focusRing } from "../lib/focus";
+import { focusRing, focusRingInset } from "../lib/focus";
 import { cn } from "../lib/utils";
 
 // Leave variables unresolved: the browser resolves them on each token span,
@@ -118,6 +118,17 @@ export const CodeBlock = memo(
       overflowX: "auto" as const,
     };
     const codeTagProps = { style: { fontFamily: "var(--font-mono, 'JetBrains Mono', ui-monospace, monospace)" } };
+    // A long line scrolls the block sideways, which a keyboard reaches only if
+    // the block takes focus (axe scrollable-region-focusable). A label on a bare
+    // <pre> is prohibited ARIA, so the block is a named region, as the terminal
+    // output regions are.
+    const scrollRegion = {
+      tabIndex: 0,
+      role: "region",
+      "aria-label": headerLabel ? `${headerLabel} code` : "Code",
+      // Inset: the rounded, overflow-clipped card would cut an outer ring.
+      className: focusRingInset,
+    } as const;
 
     return (
       <div
@@ -151,11 +162,12 @@ export const CodeBlock = memo(
             customStyle={customStyle}
             codeTagProps={codeTagProps}
             wrapLines={false}
+            {...scrollRegion}
           >
             {code}
           </Highlighter>
         ) : (
-          <pre style={{ ...syntaxTheme.hljs, ...customStyle }}>
+          <pre {...scrollRegion} style={{ ...syntaxTheme.hljs, ...customStyle }}>
             <code style={{ ...codeTagProps.style, whiteSpace: "pre" }}>{code}</code>
           </pre>
         )}