Skip to content

Tell screen readers when a pop-up opens on the printing page #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
charliechinhay wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Tell screen readers when a pop-up opens on the printing page #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .github/workflows/build.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
16 changes: 8 additions & 8 deletions Source code/server/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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">
Expand All @@ -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">
Expand Down
1 change: 1 addition & 0 deletions Source code/tests/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
17 changes: 17 additions & 0 deletions Source code/tests/t18-dialogs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);