From 9fb0f3b0dac3a3c572b3cffada45ecdc1a2eee8e Mon Sep 17 00:00:00 2001
From: Brendan Dahl <brendan.dahl@gmail.com>
Date: Thu, 18 Mar 2021 16:10:54 -0700
Subject: [PATCH] Add landmark region and aria-label for each page.

Allows screen readers to jump landmarks and announce
the page. Since landmarks must have content, I also added
aria labels for the loading images.
---
 l10n/en-US/viewer.properties |  5 +++--
 web/l10n_utils.js            |  3 ++-
 web/pdf_page_view.js         | 11 ++++++++---
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/l10n/en-US/viewer.properties b/l10n/en-US/viewer.properties
index c8953dc78..5fe094b76 100644
--- a/l10n/en-US/viewer.properties
+++ b/l10n/en-US/viewer.properties
@@ -149,8 +149,8 @@ findbar.title=Find in Document
 findbar_label=Find
 
 additional_layers=Additional Layers
-# LOCALIZATION NOTE (page_canvas): "{{page}}" will be replaced by the page number.
-page_canvas=Page {{page}}
+# LOCALIZATION NOTE (page_landmark): "{{page}}" will be replaced by the page number.
+page_landmark=Page {{page}}
 # Thumbnails panel item (tooltip and alt text for images)
 # LOCALIZATION NOTE (thumb_page_title): "{{page}}" will be replaced by the page
 # number.
@@ -223,6 +223,7 @@ page_scale_actual=Actual Size
 page_scale_percent={{scale}}%
 
 # Loading indicator messages
+loading=Loading…
 loading_error=An error occurred while loading the PDF.
 invalid_file_error=Invalid or corrupted PDF file.
 missing_file_error=Missing PDF file.
diff --git a/web/l10n_utils.js b/web/l10n_utils.js
index 117cd4175..04e8a549d 100644
--- a/web/l10n_utils.js
+++ b/web/l10n_utils.js
@@ -45,7 +45,7 @@ const DEFAULT_L10N_STRINGS = {
     "Toggle Sidebar (document contains outline/attachments/layers)",
 
   additional_layers: "Additional Layers",
-  page_canvas: "Page {{page}}",
+  page_landmark: "Page {{page}}",
   thumb_page_title: "Page {{page}}",
   thumb_page_canvas: "Thumbnail of Page {{page}}",
 
@@ -70,6 +70,7 @@ const DEFAULT_L10N_STRINGS = {
   page_scale_actual: "Actual Size",
   page_scale_percent: "{{scale}}%",
 
+  loading: "Loading…",
   loading_error: "An error occurred while loading the PDF.",
   invalid_file_error: "Invalid or corrupted PDF file.",
   missing_file_error: "Missing PDF file.",
diff --git a/web/pdf_page_view.js b/web/pdf_page_view.js
index 49dc21d47..23ce482b1 100644
--- a/web/pdf_page_view.js
+++ b/web/pdf_page_view.js
@@ -122,6 +122,10 @@ class PDFPageView {
     div.style.width = Math.floor(this.viewport.width) + "px";
     div.style.height = Math.floor(this.viewport.height) + "px";
     div.setAttribute("data-page-number", this.id);
+    div.setAttribute("role", "region");
+    this.l10n.get("page_landmark", { page: this.id }).then(msg => {
+      div.setAttribute("aria-label", msg);
+    });
     this.div = div;
 
     container.appendChild(div);
@@ -233,6 +237,10 @@ class PDFPageView {
 
     this.loadingIconDiv = document.createElement("div");
     this.loadingIconDiv.className = "loadingIcon";
+    this.loadingIconDiv.setAttribute("role", "img");
+    this.l10n.get("loading").then(msg => {
+      this.loadingIconDiv?.setAttribute("aria-label", msg);
+    });
     div.appendChild(this.loadingIconDiv);
   }
 
@@ -576,9 +584,6 @@ class PDFPageView {
 
     const viewport = this.viewport;
     const canvas = document.createElement("canvas");
-    this.l10n.get("page_canvas", { page: this.id }).then(msg => {
-      canvas.setAttribute("aria-label", msg);
-    });
 
     // Keep the canvas hidden until the first draw callback, or until drawing
     // is complete when `!this.renderingQueue`, to prevent black flickering.