Skip to content

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

Open
charliechinhay wants to merge 1 commit into
devnithdev:mainfrom
charliechinhay:a11y/dialog-roles
Open

charliechinhay wants to merge 1 commit into
devnithdev:mainfrom
charliechinhay:a11y/dialog-roles

Conversation

@charliechinhay

Copy link
Copy Markdown

What this changes

Fixes #3.

The pop-ups on the printing page were plain divs, so a screen reader wasn't told that a pop-up had opened or what it was called.

Each of the 5 pop-ups in Source code/server/public/index.html now has role="dialog", aria-modal="true" and aria-labelledby pointing at its title:

Pop-up Title id
First visit ("What should we call you?") welcomeModalTitle (new)
"Print this?" printModalTitle (already there)
One page, large pvTitle (already there)
Your name nameModalTitle (new)
Ask for help helpModalTitle (new)

The attributes are on the .modal box, not on the .modal-overlay backdrop, so app.js didn't need any change: the overlay still shows and hides the pop-up, and clicking the backdrop still closes it. The "Print this?" title changes to "Print these N files?" and the large view's to "Page N", and aria-labelledby always reads the current text.

Test

New Source code/tests/t18-dialogs.js checks that every pop-up box on the page is marked as a dialog and that its aria-labelledby points at a title that exists. It counts the boxes against the overlays, so a pop-up added later without these attributes makes it fail. It's listed in tests/README.md and runs in build.yml.

node t18-dialogs.js        11 checks passed
node t15-page-view.js      13 checks passed
node t16-other-printer.js  29 checks passed

How I checked it

Screen reader: NVDA 2026.3 with Chrome 156.0.8078.80, Windows 11 Home.

  • All 5 pop-ups are announced as a dialog with their title.
  • Inside each pop-up, reading on with the arrow keys stops at the end of the pop-up and no longer goes on to the page behind it.
  • Before this change (same steps on main), NVDA said nothing about a dialog and read straight on into the page behind.
  • manage.html: checked: it has no pop-ups of its own, only the browser's confirm() boxes, which screen readers already announce.

Not in this pull request

  • Focus when a pop-up opens: the first-visit and name pop-ups already move focus inside, so NVDA announces them straight away. "Ask for help", "Print this?" and the large page view leave focus on the button behind, so the dialog is announced once you move into it. Moving focus in (and back on close) would be a separate change. I can open an issue for it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

1 participant