PDF Viewer update: Add aria-selected attributes in tab buttons.

Without this attribute, screen readers don't announce whether a tab is
currently selected.

Bug: 1123470
Change-Id: Ie88959bf1cd4fc68003fffa62fbebe57877b899f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2410496
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Auto-Submit: dpapad <dpapad@chromium.org>
Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Cr-Commit-Position: refs/heads/master@{#807511}

chrome/browser/resources/pdf/elements/viewer-pdf-sidenav.html

@@ -69,11 +69,13 @@
 <div id="icons" hidden$="[[!bookmarks.length]]">
   <div class$="button-wrapper [[thumbnailButtonClass_(thumbnailView_)]]">
     <cr-icon-button iron-icon="pdf:thumbnails" role="tab"
+        aria-selected$="[[getAriaSelectedThumbnails_(thumbnailView_)]]"
         title="$i18n{tooltipThumbnails}" on-click="onThumbnailClick_">
     </cr-icon-button>
   </div>
   <div class$="button-wrapper [[outlineButtonClass_(thumbnailView_)]]">
     <cr-icon-button iron-icon="pdf:doc-outline" role="tab"
+        aria-selected$="[[getAriaSelectedOutline_(thumbnailView_)]]"
         title="$i18n{tooltipDocumentOutline}" on-click="onOutlineClick_">
     </cr-icon-button>
   </div>

chrome/browser/resources/pdf/elements/viewer-pdf-sidenav.js

@@ -68,6 +68,22 @@ export class ViewerPdfSidenavElement extends PolymerElement {
   thumbnailButtonClass_() {
     return this.thumbnailView_ ? 'selected' : '';
   }
+
+  /**
+   * @return {string}
+   * @private
+   */
+  getAriaSelectedThumbnails_() {
+    return this.thumbnailView_ ? 'true' : 'false';
+  }
+
+  /**
+   * @return {string}
+   * @private
+   */
+  getAriaSelectedOutline_() {
+    return this.thumbnailView_ ? 'false' : 'true';
+  }
 }
 
 customElements.define(ViewerPdfSidenavElement.is, ViewerPdfSidenavElement);

chrome/test/data/pdf/viewer_pdf_sidenav_test.js

@@ -30,8 +30,8 @@ const tests = [
     ];
 
     const content = sidenav.shadowRoot.querySelector('#content');
-    const buttons = /** @type {!NodeList<!CrIconButtonElement>} */ (
-        sidenav.shadowRoot.querySelectorAll('cr-icon-button'));
+    const [thumbnailButton, outlineButton] =
+        sidenav.shadowRoot.querySelectorAll('cr-icon-button');
 
     const thumbnailBar =
         /** @type {!ViewerThumbnailBarElement} */ (
@@ -42,27 +42,34 @@ const tests = [
 
     // Sidebar starts on thumbnail view.
     chrome.test.assertTrue(
-        buttons[0].parentNode.classList.contains('selected'));
+        thumbnailButton.parentNode.classList.contains('selected'));
+    chrome.test.assertEq('true', thumbnailButton.getAttribute('aria-selected'));
     chrome.test.assertFalse(
-        buttons[1].parentNode.classList.contains('selected'));
+        outlineButton.parentNode.classList.contains('selected'));
+    chrome.test.assertEq('false', outlineButton.getAttribute('aria-selected'));
     chrome.test.assertFalse(thumbnailBar.hidden);
     chrome.test.assertTrue(outline.hidden);
 
     // Click on outline view.
-    buttons[1].click();
+    outlineButton.click();
     chrome.test.assertFalse(
-        buttons[0].parentNode.classList.contains('selected'));
+        thumbnailButton.parentNode.classList.contains('selected'));
+    chrome.test.assertEq(
+        'false', thumbnailButton.getAttribute('aria-selected'));
     chrome.test.assertTrue(
-        buttons[1].parentNode.classList.contains('selected'));
+        outlineButton.parentNode.classList.contains('selected'));
+    chrome.test.assertEq('true', outlineButton.getAttribute('aria-selected'));
     chrome.test.assertTrue(thumbnailBar.hidden);
     chrome.test.assertFalse(outline.hidden);
 
     // Return to thumbnail view.
-    buttons[0].click();
+    thumbnailButton.click();
     chrome.test.assertTrue(
-        buttons[0].parentNode.classList.contains('selected'));
+        thumbnailButton.parentNode.classList.contains('selected'));
+    chrome.test.assertEq('true', thumbnailButton.getAttribute('aria-selected'));
     chrome.test.assertFalse(
-        buttons[1].parentNode.classList.contains('selected'));
+        outlineButton.parentNode.classList.contains('selected'));
+    chrome.test.assertEq('false', outlineButton.getAttribute('aria-selected'));
     chrome.test.assertFalse(thumbnailBar.hidden);
     chrome.test.assertTrue(outline.hidden);