From 666e9630441660a1ddcb90eab77b9f79b8e74c00 Mon Sep 17 00:00:00 2001
From: Robert Knight <robert@microbit.org>
Date: Fri, 20 Feb 2026 11:56:26 +0000
Subject: [PATCH] Use paragraphs in connection dialog to improve screen reader
 output

With <br /> VoiceOver outputs empty "group" several times.
---
 webapp/src/webusb.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/webapp/src/webusb.tsx b/webapp/src/webusb.tsx
index 69654b7fccaa..0dcf6f6fd6ef 100644
--- a/webapp/src/webusb.tsx
+++ b/webapp/src/webusb.tsx
@@ -180,13 +180,15 @@ function showPickWebUSBDeviceDialogAsync(confirmAsync: ConfirmAsync, showDownloa
                 <div className="ui">
                     <div className="content">
                         <div className="description">
-                            {lf("Press the Pair button below.")}
-                            <br />
-                            <br />
-                            {lf("A window will appear in the top of your browser.")}
-                            <br />
-                            <br />
-                            {lf("Select the {0} device and click Connect.", boardName)}
+                            <p>
+                                {lf("Press the Pair button below.")}
+                            </p>
+                            <p>
+                                {lf("A window will appear in the top of your browser.")}
+                            </p>
+                            <p>
+                                {lf("Select the {0} device and click Connect.", boardName)}
+                            </p>
                         </div>
                     </div>
                 </div>