PDF Viewer Update: Add aria-label for thumbnails

Bug: 652400
Change-Id: I44b3f9561c3186f9c40d52201ad4ec30b3f9c6a4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2439433Reviewed-by: Lei Zhang <thestig@chromium.org>
Reviewed-by: dpapad <dpapad@chromium.org>
Commit-Queue: Daniel Hosseinian <dhoss@chromium.org>
Cr-Commit-Position: refs/heads/master@{#812452}

chrome/browser/pdf/pdf_extension_util.cc

@@ -63,6 +63,7 @@ void AddPdfViewerStrings(base::Value* dict) {
     {"passwordInvalid", IDS_PDF_PASSWORD_INVALID},
     {"passwordPrompt", IDS_PDF_NEED_PASSWORD},
     {"passwordSubmit", IDS_PDF_PASSWORD_SUBMIT},
+    {"thumbnailPageAriaLabel", IDS_PDF_THUMBNAIL_PAGE_ARIA_LABEL},
     {"tooltipDocumentOutline", IDS_PDF_TOOLTIP_DOCUMENT_OUTLINE},
     {"tooltipDownload", IDS_PDF_TOOLTIP_DOWNLOAD},
     {"tooltipPrint", IDS_PDF_TOOLTIP_PRINT},

chrome/browser/resources/pdf/elements/BUILD.gn

@@ -165,6 +165,7 @@ js_library("viewer-thumbnail-bar") {
     ":viewer-thumbnail",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/js:assert.m",
+    "//ui/webui/resources/js:load_time_data.m",
     "//ui/webui/resources/js/cr/ui:focus_outline_manager.m",
   ]
 }

chrome/browser/resources/pdf/elements/viewer-thumbnail-bar.html

@@ -19,7 +19,9 @@
 <div id="thumbnails">
   <template is="dom-repeat" items="[[pageNumbers_]]"
       on-dom-change="onDomChange_">
-    <viewer-thumbnail tabindex="0" clockwise-rotations="[[clockwiseRotations]]"
+    <viewer-thumbnail tabindex="0" role="button"
+        aria-label$="[[getAriaLabel_(item)]]"
+        clockwise-rotations="[[clockwiseRotations]]"
         is-active="[[isActivePage_(item, activePage)]]" page-number="[[item]]">
     </viewer-thumbnail>
   </template>

chrome/browser/resources/pdf/elements/viewer-thumbnail-bar.js

@@ -4,6 +4,7 @@
 
 import {assert} from 'chrome://resources/js/assert.m.js';
 import {FocusOutlineManager} from 'chrome://resources/js/cr/ui/focus_outline_manager.m.js';
+import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {ViewerThumbnailElement} from './viewer-thumbnail.js';
@@ -78,6 +79,15 @@ export class ViewerThumbnailBarElement extends PolymerElement {
     return Array.from({length: this.docLength}, (_, i) => i + 1);
   }
 
+  /**
+   * @param {number} pageNumber
+   * @return {string}
+   * @private
+   */
+  getAriaLabel_(pageNumber) {
+    return loadTimeData.getStringF('thumbnailPageAriaLabel', pageNumber);
+  }
+
   /**
    * @param {number} page
    * @return {boolean} Whether the page is the current page.

components/pdf_strings.grdp

@@ -92,6 +92,9 @@
       =1 {PDF document containing {COUNT} page}
       other {PDF document containing {COUNT} pages}}
     </message>
+    <message name="IDS_PDF_THUMBNAIL_PAGE_ARIA_LABEL" desc="aria-label describing a thumbnail by its corresponding PDF page number">
+      Thumbnail for page <ph name="THUMBNAIL_PAGE"><ex>1</ex>$1</ph>
+    </message>
     <if expr="chromeos">
       <message name="IDS_PDF_DISCARD_FORM_CHANGES" desc="Title for a dialog that informs the user that the changes they have made to a form will be lost if they continue">
         Discard changes?

components/pdf_strings_grdp/IDS_PDF_THUMBNAIL_PAGE_ARIA_LABEL.png.sha1

+7fd29acf0738221b3fc8258d7039552bbf7102eb
\ No newline at end of file