fix: balloon message clipping on the result page

closes #6016

2 files changed, 14 insertions, 12 deletions

diff --git a/frontend/src/html/pages/test.html b/frontend/src/html/pages/test.html
index 4ee65c653..c83dbadde 100644
--- a/frontend/src/html/pages/test.html
+++ b/frontend/src/html/pages/test.html
@@ -242,7 +242,7 @@
           <div class="top">characters</div>
           <div
             class="bottom"
-            aria-label="correct, incorrect, extra, and missed"
+            aria-label="correct&NewLine;incorrect&NewLine;extra&NewLine;missed"
             data-balloon-break=""
             data-balloon-pos="up"
           >
diff --git a/frontend/src/ts/test/result.ts b/frontend/src/ts/test/result.ts
index 5166315f9..14836ddc1 100644
--- a/frontend/src/ts/test/result.ts
+++ b/frontend/src/ts/test/result.ts
@@ -268,7 +268,7 @@ function updateWpmAndAcc(): void {
 
     $("#result .stats .acc .bottom").attr(
       "aria-label",
-      `${TestInput.accuracy.correct} correct / ${TestInput.accuracy.incorrect} incorrect`
+      `${TestInput.accuracy.correct} correct\n${TestInput.accuracy.incorrect} incorrect`
     );
   } else {
     //not showing decimal places
@@ -287,16 +287,18 @@ function updateWpmAndAcc(): void {
     $("#result .stats .wpm .bottom").attr("aria-label", wpmHover);
     $("#result .stats .raw .bottom").attr("aria-label", rawWpmHover);
 
-    $("#result .stats .acc .bottom").attr(
-      "aria-label",
-      `${
-        result.acc === 100
-          ? "100"
-          : Format.percentage(result.acc, { showDecimalPlaces: true })
-      } (${TestInput.accuracy.correct} correct / ${
-        TestInput.accuracy.incorrect
-      } incorrect)`
-    );
+    $("#result .stats .acc .bottom")
+      .attr(
+        "aria-label",
+        `${
+          result.acc === 100
+            ? "100%"
+            : Format.percentage(result.acc, { showDecimalPlaces: true })
+        }\n${TestInput.accuracy.correct} correct\n${
+          TestInput.accuracy.incorrect
+        } incorrect`
+      )
+      .attr("data-balloon-break", "");
   }
 }