From 56f3f22d81ba1b80f6ba9ea44c0c5127acd5b5de Mon Sep 17 00:00:00 2001
From: Robert Knight <robert@microbit.org>
Date: Mon, 17 Aug 2026 14:06:35 +0100
Subject: [PATCH 1/2] Add underlines to links in prose

Bumps ui and ui-patterns to 0.2.0. The ui library includes a new
link recipe underlined by default with a standalone variation
which are used in this PR.
---
 package-lock.json                             | 19 ++++++++++---------
 package.json                                  |  4 ++--
 src/common/use-action-feedback.tsx            |  1 -
 src/documentation/common/DocString.tsx        |  9 ++++++++-
 .../ideas/IdeasDocumentation.tsx              |  1 +
 src/documentation/search/SearchResultList.tsx |  1 +
 src/editor/ModuleOverlay.tsx                  |  3 ++-
 src/serial/TracebackLink.tsx                  |  8 +++++++-
 8 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a65d29f95..b3ba4149e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,12 +17,13 @@
         "@codemirror/view": "^6.26.3",
         "@microbit/microbit-connection": "^1.0.0",
         "@microbit/microbit-fs": "^0.10.0",
-        "@microbit/ui": "^0.1.1",
-        "@microbit/ui-patterns": "^0.1.1",
+        "@microbit/ui": "^0.2.0",
+        "@microbit/ui-patterns": "^0.2.0",
         "@sanity/block-content-to-react": "^3.0.0",
         "@sanity/image-url": "^1.0.1",
         "@testing-library/jest-dom": "^5.14.1",
         "@testing-library/react": "^14.0.0",
+        "@testing-library/user-event": "^14.4.3",
         "@types/lodash.debounce": "^4.0.6",
         "@types/lodash.sortby": "^4.7.6",
         "@types/lunr": "^2.3.4",
@@ -3276,9 +3277,9 @@
       }
     },
     "node_modules/@microbit/ui": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/@microbit/ui/-/ui-0.1.1.tgz",
-      "integrity": "sha512-m/idP+sg58HLZOk6LiJknaQxVYNShXOxh9RLVnXVE+G1TYrRAwuLg17131YARve3DJV9mga3U9n/Mcr+nK6SNQ==",
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@microbit/ui/-/ui-0.2.0.tgz",
+      "integrity": "sha512-LOSUj/466E9grrMyEE+IgLx0aDWsL40gJ9TYoltRvBZtos7nc1PTteAFhAcV2yBwVOtoeIpFz821wDoFtrIuiw==",
       "license": "MIT",
       "peerDependencies": {
         "@pandacss/dev": "^1.11.4",
@@ -3290,15 +3291,15 @@
       }
     },
     "node_modules/@microbit/ui-patterns": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/@microbit/ui-patterns/-/ui-patterns-0.1.1.tgz",
-      "integrity": "sha512-xxi8fxvzE5Jx1v+dvPZEID3EDfM7oOeG09fxPb+AqxQto6dJiDyr+DLeJrUQPxm3D/sDhmEqk2aOCsBjF68AKQ==",
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@microbit/ui-patterns/-/ui-patterns-0.2.0.tgz",
+      "integrity": "sha512-7xjvW/daJtr+23XvuScLXLP6+1DPROaRppie3rNZ96MOQciCxlfL0Ld6ZXpolH1WLYIPXHMLTL78nDYpgW1QtA==",
       "license": "MIT",
       "dependencies": {
         "@formatjs/intl-localematcher": "^0.8.0"
       },
       "peerDependencies": {
-        "@microbit/ui": "^0.1.0",
+        "@microbit/ui": "^0.2.0",
         "@pandacss/dev": "^1.11.4",
         "react": "^18.3.1",
         "react-icons": "^4.12.0 || ^5.0.0",
diff --git a/package.json b/package.json
index d1ab9ab5d..e1d133340 100644
--- a/package.json
+++ b/package.json
@@ -21,8 +21,8 @@
     "@codemirror/view": "^6.26.3",
     "@microbit/microbit-connection": "^1.0.0",
     "@microbit/microbit-fs": "^0.10.0",
-    "@microbit/ui": "^0.1.1",
-    "@microbit/ui-patterns": "^0.1.1",
+    "@microbit/ui": "^0.2.0",
+    "@microbit/ui-patterns": "^0.2.0",
     "@sanity/block-content-to-react": "^3.0.0",
     "@sanity/image-url": "^1.0.1",
     "@testing-library/jest-dom": "^5.14.1",
diff --git a/src/common/use-action-feedback.tsx b/src/common/use-action-feedback.tsx
index 2b04a004f..32722f5c9 100644
--- a/src/common/use-action-feedback.tsx
+++ b/src/common/use-action-feedback.tsx
@@ -97,7 +97,6 @@ export class ActionFeedback {
                   href={deployment.supportLink}
                   target="_blank"
                   rel="noopener"
-                  textDecoration="underline"
                 >
                   {chunks}
                 </MaybeLink>
diff --git a/src/documentation/common/DocString.tsx b/src/documentation/common/DocString.tsx
index 09b856f5f..f94108543 100644
--- a/src/documentation/common/DocString.tsx
+++ b/src/documentation/common/DocString.tsx
@@ -3,11 +3,18 @@
  *
  * SPDX-License-Identifier: MIT
  */
+import { css, cx } from "@microbit/ui";
 import React from "react";
 import { styled } from "styled-system/jsx";
 import { SystemStyleObject } from "styled-system/types";
 import { renderMarkdown } from "../../editor/codemirror/language-server/documentation";
 
+// Docstring links (autolinked URLs in the type stubs) must be marked by more
+// than colour. Scoped here so the CodeMirror popups' anchors stay bare.
+const underlineLinksClass = css({
+  "& a": { textDecoration: "underline" },
+});
+
 export interface DocStringProps {
   value: string;
   /** Use span inside phrasing content (e.g. a heading subtitle). */
@@ -21,7 +28,7 @@ const DocString = React.memo(
     const Component = as === "span" ? styled.span : styled.div;
     return (
       <Component
-        className="docs-spacing docs-code"
+        className={cx("docs-spacing docs-code", underlineLinksClass)}
         dangerouslySetInnerHTML={html}
         css={cssProp}
       />
diff --git a/src/documentation/ideas/IdeasDocumentation.tsx b/src/documentation/ideas/IdeasDocumentation.tsx
index 44a3045e0..6502f6fca 100644
--- a/src/documentation/ideas/IdeasDocumentation.tsx
+++ b/src/documentation/ideas/IdeasDocumentation.tsx
@@ -176,6 +176,7 @@ const ActiveLevel = ({
           values={{
             link: (chunks: ReactNode) => (
               <Link
+                variant="standalone"
                 color="brand.500"
                 href={microbitOrgMiciProjectsUrl(languageId)}
                 target="_blank"
diff --git a/src/documentation/search/SearchResultList.tsx b/src/documentation/search/SearchResultList.tsx
index 6dc7e1383..4314f5385 100644
--- a/src/documentation/search/SearchResultList.tsx
+++ b/src/documentation/search/SearchResultList.tsx
@@ -66,6 +66,7 @@ const SearchResultItem = ({
   return (
     <Stack pl="3px" pr="3px">
       <Link
+        variant="standalone"
         bgColor={viewedResults.includes(id) ? "#efedf5" : "unset"}
         borderRadius="md"
         href={url}
diff --git a/src/editor/ModuleOverlay.tsx b/src/editor/ModuleOverlay.tsx
index 60e6036bd..c192cff0b 100644
--- a/src/editor/ModuleOverlay.tsx
+++ b/src/editor/ModuleOverlay.tsx
@@ -97,7 +97,8 @@ const ModuleOverlay = ({ moduleData }: ModuleOverlayProps) => {
               link: (chunks: ReactNode) => (
                 <Button
                   variant="link"
-                  css={{ color: "brand.500" }}
+                  // In prose, so marked by more than colour.
+                  css={{ color: "brand.500", textDecoration: "underline" }}
                   onPress={handleShowSettings}
                 >
                   {chunks}
diff --git a/src/serial/TracebackLink.tsx b/src/serial/TracebackLink.tsx
index a5c07035c..962706b2f 100644
--- a/src/serial/TracebackLink.tsx
+++ b/src/serial/TracebackLink.tsx
@@ -33,7 +33,13 @@ const TracebackLink = ({ traceback, children }: TracebackLinkProps) => {
     [setSelection, traceback]
   );
   return (
-    <Link data-testid="traceback-link" onClick={handleClick}>
+    // Standalone: only the location span (see MaybeTracebackLink) is
+    // underlined, not the error text sharing the click target.
+    <Link
+      variant="standalone"
+      data-testid="traceback-link"
+      onClick={handleClick}
+    >
       {children}
     </Link>
   );

From 25366e89de87b13263e83c0eab2a9ffa718ce368 Mon Sep 17 00:00:00 2001
From: Robert Knight <robert@microbit.org>
Date: Fri, 21 Aug 2026 13:14:08 +0100
Subject: [PATCH 2/2] Update snapshots

---
 src/documentation/common/DocString.test.tsx            | 2 +-
 src/documentation/common/DocumentationContent.test.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/documentation/common/DocString.test.tsx b/src/documentation/common/DocString.test.tsx
index 63b7c3d86..0e34e27f7 100644
--- a/src/documentation/common/DocString.test.tsx
+++ b/src/documentation/common/DocString.test.tsx
@@ -12,7 +12,7 @@ describe("DocString", () => {
       "```python\ntestLib.Validator.read_write_prop (property)\n```\n---\nThe read-write property.";
     const view = render(<DocString value={markdown} />);
     expect(view.baseElement.innerHTML).toMatchInlineSnapshot(`
-      "<div><div class="docs-spacing docs-code"><pre><code class="language-python">testLib.Validator.read_write_prop (property)
+      "<div><div class="docs-spacing docs-code [&amp;_a]:td_underline"><pre><code class="language-python">testLib.Validator.read_write_prop (property)
       </code></pre>
       <hr>
       <p>The read-write property.</p>
diff --git a/src/documentation/common/DocumentationContent.test.tsx b/src/documentation/common/DocumentationContent.test.tsx
index 83fa5dbe6..906054d77 100644
--- a/src/documentation/common/DocumentationContent.test.tsx
+++ b/src/documentation/common/DocumentationContent.test.tsx
@@ -41,7 +41,7 @@ describe("DocumentationContent", () => {
     ];
     const view = render(<DocumentationContent blocks={content} />);
     expect(view.container.innerHTML).toMatchInlineSnapshot(
-      `"<div class="d_flex flex-d_column gap_3 mt_3"><p><a href="https://www.bbc.co.uk/bitesize/guides/zscvxfr/revision/4" target="_blank" rel="nofollow noopener" class="cursor_pointer td_none ring_none trs-prop_background-color,_border-color,_color,_fill,_stroke,_opacity,_box-shadow,_transform trs-dur_normal hover:td_underline focusVisible:focus-ring_outline c_brand.600">Read more about ASCII<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="w_1em h_1em d_inline-block lh_1em flex-sh_0 fill_currentColor va_middle mb_0.333em ml_1" focusable="false" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z"></path></svg></a>.</p></div>"`
+      `"<div class="d_flex flex-d_column gap_3 mt_3"><p><a href="https://www.bbc.co.uk/bitesize/guides/zscvxfr/revision/4" target="_blank" rel="nofollow noopener" class="link c_brand.600">Read more about ASCII<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class="w_1em h_1em d_inline-block lh_1em flex-sh_0 fill_currentColor va_middle mb_0.333em ml_1" focusable="false" aria-hidden="true" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M10 6V8H5V19H16V14H18V20C18 20.5523 17.5523 21 17 21H4C3.44772 21 3 20.5523 3 20V7C3 6.44772 3.44772 6 4 6H10ZM21 3V11H19L18.9999 6.413L11.2071 14.2071L9.79289 12.7929L17.5849 5H13V3H21Z"></path></svg></a>.</p></div>"`
     );
   });