TODO: docs maybe??

see https://discord.com/channels/1388415325036609617/1458088018232479824/1484195713347879012

cmd/pkgserver/ui/static/test.scss

@@ -44,24 +44,24 @@ details.test-node {
          * [3]: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/summary#changing_the_summarys_icon
          */
         color: var(--fg);
-        content: url("/static/success-closed.svg");
+        content: url("/static/success-closed.svg") / "success";
     }
     &.success[open] > summary::marker {
-        content: url("/static/success-open.svg");
+        content: url("/static/success-open.svg") / "success";
     }
     &.failure > summary::marker {
         color: red;
-        content: url("/static/failure-closed.svg");
+        content: url("/static/failure-closed.svg") / "failure";
     }
     &.failure[open] > summary::marker {
-        content: url("/static/failure-open.svg");
+        content: url("/static/failure-open.svg") / "failure";
     }
     &.skip > summary::marker {
         color: blue;
-        content: url("/static/skip-closed.svg");
+        content: url("/static/skip-closed.svg") / "skip";
     }
     &.skip[open] > summary::marker {
-        content: url("/static/skip-open.svg");
+        content: url("/static/skip-open.svg") / "skip";
     }
 }
 

cmd/pkgserver/ui/static/test.ts

@@ -293,20 +293,25 @@ export class DOMReporter implements Reporter {
 
         let parent = document.getElementById("root");
         for (const node of path) {
-            let child = null;
+            let child: HTMLDetailsElement;
+            let summary: HTMLElement;
             outer: for (const d of parent.children) {
+                if (!(d instanceof HTMLDetailsElement)) continue;
                 for (const s of d.children) {
                     if (!(s instanceof HTMLElement)) continue;
                     if (!(s.tagName === "SUMMARY" && s.innerText === node)) continue;
                     child = d;
+                    summary = s;
                     break outer;
                 }
             }
-            if (child === null) {
+            if (!child) {
                 child = document.createElement("details");
                 child.className = "test-node";
-                const summary = document.createElement("summary");
+                child.ariaRoleDescription = "test";
+                summary = document.createElement("summary");
                 summary.appendChild(document.createTextNode(node));
+                summary.ariaRoleDescription = "test name";
                 child.appendChild(summary);
                 parent.appendChild(child);
             }
@@ -317,17 +322,18 @@ export class DOMReporter implements Reporter {
                 child.classList.add("failure");
                 child.classList.remove("skip");
                 child.classList.remove("success");
+                summary.setAttribute("aria-labelledby", "failure-description");
                 break;
             case "skip":
                 if (child.classList.contains("failure")) break;
                 child.classList.add("skip");
                 child.classList.remove("success");
+                summary.setAttribute("aria-labelledby", "skip-description");
                 break;
             case "success":
-                if (!(child.classList.contains("failure") ||
-                      child.classList.contains("skip"))) {
-                    child.classList.add("success")
-                }
+                if (child.classList.contains("failure") || child.classList.contains("skip")) break;
+                child.classList.add("success");
+                summary.setAttribute("aria-labelledby", "success-description");
                 break;
             }
 

cmd/pkgserver/ui/test.html

@@ -15,6 +15,10 @@
     failed<span id="skip-counter-text" class="hidden">, <span id="skip-counter">0</span> skipped</span>.
 </p>
 
+<p hidden id="success-description">Successful test</p>
+<p hidden id="failure-description">Failed test</p>
+<p hidden id="skip-description">Partially or fully skipped test</p>
+
 <div id="root">
 </div>