diff --git a/l10n/en-US/viewer.properties b/l10n/en-US/viewer.properties index 2dd7751aa..93dc4e313 100644 --- a/l10n/en-US/viewer.properties +++ b/l10n/en-US/viewer.properties @@ -148,6 +148,8 @@ thumbs_label=Thumbnails findbar.title=Find in Document findbar_label=Find +# LOCALIZATION NOTE (page_canvas): "{{page}}" will be replaced by the page number. +page_canvas=Page {{page}} # Thumbnails panel item (tooltip and alt text for images) # LOCALIZATION NOTE (thumb_page_title): "{{page}}" will be replaced by the page # number. diff --git a/l10n/sv-SE/viewer.properties b/l10n/sv-SE/viewer.properties index b1b60bd40..3d2f0cf43 100644 --- a/l10n/sv-SE/viewer.properties +++ b/l10n/sv-SE/viewer.properties @@ -148,6 +148,8 @@ thumbs_label=Miniatyrer findbar.title=Sök i dokument findbar_label=Sök +# LOCALIZATION NOTE (page_canvas): "{{page}}" will be replaced by the page number. +page_canvas=Sida {{page}} # Thumbnails panel item (tooltip and alt text for images) # LOCALIZATION NOTE (thumb_page_title): "{{page}}" will be replaced by the page # number. diff --git a/web/pdf_page_view.js b/web/pdf_page_view.js index 319d59977..856f5bb4c 100644 --- a/web/pdf_page_view.js +++ b/web/pdf_page_view.js @@ -559,7 +559,11 @@ class PDFPageView { const viewport = this.viewport; const canvas = document.createElement("canvas"); - canvas.id = this.renderingId; + this.l10n + .get("page_canvas", { page: this.id }, "Page {{page}}") + .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. diff --git a/web/pdf_thumbnail_view.js b/web/pdf_thumbnail_view.js index 5d8c9ae1f..6ab9be758 100644 --- a/web/pdf_thumbnail_view.js +++ b/web/pdf_thumbnail_view.js @@ -125,11 +125,9 @@ class PDFThumbnailView { const anchor = document.createElement("a"); anchor.href = linkService.getAnchorUrl("#page=" + id); - this.l10n - .get("thumb_page_title", { page: id }, "Page {{page}}") - .then(msg => { - anchor.title = msg; - }); + this._thumbPageTitle.then(msg => { + anchor.title = msg; + }); anchor.onclick = function() { linkService.page = id; return false; @@ -258,38 +256,23 @@ class PDFThumbnailView { if (this.renderingState !== RenderingStates.FINISHED) { return; } - const id = this.renderingId; const className = "thumbnailImage"; if (this.disableCanvasToImageConversion) { - this.canvas.id = id; this.canvas.className = className; - this.l10n - .get( - "thumb_page_canvas", - { page: this.pageId }, - "Thumbnail of Page {{page}}" - ) - .then(msg => { - this.canvas.setAttribute("aria-label", msg); - }); + this._thumbPageCanvas.then(msg => { + this.canvas.setAttribute("aria-label", msg); + }); this.div.setAttribute("data-loaded", true); this.ring.appendChild(this.canvas); return; } const image = document.createElement("img"); - image.id = id; image.className = className; - this.l10n - .get( - "thumb_page_canvas", - { page: this.pageId }, - "Thumbnail of Page {{page}}" - ) - .then(msg => { - image.setAttribute("aria-label", msg); - }); + this._thumbPageCanvas.then(msg => { + image.setAttribute("aria-label", msg); + }); image.style.width = this.canvasWidth + "px"; image.style.height = this.canvasHeight + "px"; @@ -455,8 +438,20 @@ class PDFThumbnailView { this._convertCanvasToImage(); } - get pageId() { - return this.pageLabel !== null ? this.pageLabel : this.id; + get _thumbPageTitle() { + return this.l10n.get( + "thumb_page_title", + { page: this.pageLabel !== null ? this.pageLabel : this.id }, + "Page {{page}}" + ); + } + + get _thumbPageCanvas() { + return this.l10n.get( + "thumb_page_canvas", + { page: this.pageLabel !== null ? this.pageLabel : this.id }, + "Thumbnail of Page {{page}}" + ); } /** @@ -465,29 +460,21 @@ class PDFThumbnailView { setPageLabel(label) { this.pageLabel = typeof label === "string" ? label : null; - this.l10n - .get("thumb_page_title", { page: this.pageId }, "Page {{page}}") - .then(msg => { - this.anchor.title = msg; - }); + this._thumbPageTitle.then(msg => { + this.anchor.title = msg; + }); if (this.renderingState !== RenderingStates.FINISHED) { return; } - this.l10n - .get( - "thumb_page_canvas", - { page: this.pageId }, - "Thumbnail of Page {{page}}" - ) - .then(ariaLabel => { - if (this.image) { - this.image.setAttribute("aria-label", ariaLabel); - } else if (this.disableCanvasToImageConversion && this.canvas) { - this.canvas.setAttribute("aria-label", ariaLabel); - } - }); + this._thumbPageCanvas.then(msg => { + if (this.image) { + this.image.setAttribute("aria-label", msg); + } else if (this.disableCanvasToImageConversion && this.canvas) { + this.canvas.setAttribute("aria-label", msg); + } + }); } static cleanup() {