From 12773b8fb7d219c0890c87ed682e0a9ec6f9445c Mon Sep 17 00:00:00 2001
From: "charlie.chinchay" <hairolas123@hotmail.com>
Date: Sat, 7 Nov 2026 15:05:03 +0100
Subject: [PATCH] Tell screen readers when a pop-up opens on the printing page

---
 .github/workflows/build.yml          |  1 +
 Source code/server/public/index.html | 16 ++++++++--------
 Source code/tests/README.md          |  1 +
 Source code/tests/t18-dialogs.js     | 17 +++++++++++++++++
 4 files changed, 27 insertions(+), 8 deletions(-)
 create mode 100644 Source code/tests/t18-dialogs.js

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index a2143f8..fdecb93 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -43,6 +43,7 @@ jobs:
           node t15-page-view.js
           node t16-other-printer.js
           node t17-update-now.js
+          node t18-dialogs.js
 
   windows:
     name: Windows installer
diff --git a/Source code/server/public/index.html b/Source code/server/public/index.html
index 79df168..f12e78c 100644
--- a/Source code/server/public/index.html	
+++ b/Source code/server/public/index.html	
@@ -78,9 +78,9 @@ <h2>Printing now <span class="h2-note">&mdash; everyone</span></h2>
 
   <!-- First visit: who are you? (a label, not an account) -->
   <div id="welcomeModal" class="modal-overlay" hidden>
-    <div class="modal" style="max-width:400px">
+    <div class="modal" role="dialog" aria-modal="true" aria-labelledby="welcomeModalTitle" style="max-width:400px">
       <div class="welcome-body">
-        <h2>What should we call you?</h2>
+        <h2 id="welcomeModalTitle">What should we call you?</h2>
         <p>So people can tell whose printout is whose at the tray. No account, no password &mdash; just a name on the job.</p>
         <input id="welcomeName" type="text" aria-label="Your name" placeholder="e.g. Dev, or Front desk iPad" maxlength="40" autocomplete="off">
         <div style="margin-top:16px">
@@ -92,7 +92,7 @@ <h2>What should we call you?</h2>
 
   <!-- Drop a file (or print from another program): check it, then print -->
   <div id="printModal" class="modal-overlay" hidden>
-    <div class="modal print-modal">
+    <div class="modal print-modal" role="dialog" aria-modal="true" aria-labelledby="printModalTitle">
       <div class="modal-head">
         <h2 id="printModalTitle">Print this?</h2>
         <button class="icon-btn" id="closePrintModal" type="button" aria-label="Close">&times;</button>
@@ -155,7 +155,7 @@ <h2 id="printModalTitle">Print this?</h2>
 
   <!-- One page, large -->
   <div id="pageView" class="modal-overlay page-view" hidden>
-    <div class="modal pv-box">
+    <div class="modal pv-box" role="dialog" aria-modal="true" aria-labelledby="pvTitle">
       <div class="modal-head">
         <h2 id="pvTitle">Page 1</h2>
         <button class="icon-btn" id="pvClose" type="button" aria-label="Close">&times;</button>
@@ -171,9 +171,9 @@ <h2 id="pvTitle">Page 1</h2>
 
   <!-- Change your name -->
   <div id="nameModal" class="modal-overlay" hidden>
-    <div class="modal" style="max-width:400px">
+    <div class="modal" role="dialog" aria-modal="true" aria-labelledby="nameModalTitle" style="max-width:400px">
       <div class="modal-head">
-        <h2>Your name</h2>
+        <h2 id="nameModalTitle">Your name</h2>
         <button class="icon-btn" id="closeName" type="button" aria-label="Close">&times;</button>
       </div>
       <div class="modal-body">
@@ -190,9 +190,9 @@ <h2>Your name</h2>
 
   <!-- Ask for help -->
   <div id="helpModal" class="modal-overlay" hidden>
-    <div class="modal">
+    <div class="modal" role="dialog" aria-modal="true" aria-labelledby="helpModalTitle">
       <div class="modal-head">
-        <h2>Ask for help</h2>
+        <h2 id="helpModalTitle">Ask for help</h2>
         <button class="icon-btn" id="closeHelp" type="button" aria-label="Close">&times;</button>
       </div>
       <div class="modal-body">
diff --git a/Source code/tests/README.md b/Source code/tests/README.md
index ed6faf4..b5e90d7 100644
--- a/Source code/tests/README.md	
+++ b/Source code/tests/README.md	
@@ -21,6 +21,7 @@ websites (`fake-web.js`) on spare ports, so nothing else needs to be running.
     node t15-page-view.js    closing the large page preview frees its image; reopening the same page works
     node t16-other-printer.js  a job only moves to the same kind (inkjet/laser to each other if ticked), never because a computer dropped off
     node t17-update-now.js  "Update PrintBridge now" shows a message window saying what it found, never a terminal
+    node t18-dialogs.js  Every pop-up on the printing pages tells screen readers that it is a pop-up, and what it is called, using role="dialog" and aria-labelledby attributes.
 
 These run on Linux/macOS. The Windows-only parts (the Task Scheduler task,
 the installer) are covered by manual checks on Windows and Mac.
diff --git a/Source code/tests/t18-dialogs.js b/Source code/tests/t18-dialogs.js
new file mode 100644
index 0000000..7a62e3b
--- /dev/null
+++ b/Source code/tests/t18-dialogs.js	
@@ -0,0 +1,17 @@
+//Every pop-up on the printing pages tells screen readers that it is a pop-up, and what it is called, using role="dialog" and aria-labelledby attributes.
+
+const fs = require("fs"), path = require("path"), assert = require("assert");
+let n = 0; const ok = (c, m) => { assert(c, m); n++; console.log("ok -", m); }
+
+const page = fs.readFileSync(path.join(__dirname, "..", "server", "public", "index.html"), "utf8");
+const overlays = page.match(/class="modal-overlay/g) || [];
+const boxes = page.match(/<div class="modal[ "][^>]*>/g) || [];
+ok(boxes.length > 0 && boxes.length === overlays.length, "each of the" + overlays.length + " pop-ups has one box");
+for (const box of boxes) {
+    const title = (box.match(/aria-labelledby="([^"]+)"/) || [])[1];
+    ok(/role="dialog"/.test(box) && /aria-modal="true"/.test(box) && title, "pop-up is marked as a dialog with title: " + title);
+    ok(new RegExp('<h2 id="' + title + '"').test(page), "its title " + title + " is on the page");
+}
+
+console.log(n + " checks passed");
+process.exit(0);
\ No newline at end of file