From 374da648dd5df2fa7616d06d4f46f97bdd892c13 Mon Sep 17 00:00:00 2001
From: Justin Ribeiro <justin@justinribeiro.com>
Date: Mon, 1 Feb 2021 14:16:20 -0800
Subject: [PATCH] fix(a11y): resolve sidebar, find, toolbar missing
 aria-expanded and aria-controls state

In testing, screen readers such as JAWS have trouble understanding the expanded state of the buttons that expand hidden menus due to lacking aria-expanded attribute. Also, given that the buttons do not contain the controlled/shown element, they should also define the aria-controls attribute with associated element id per https://www.w3.org/TR/wai-aria-1.1/#aria-expanded

This fixes adds these requirements for the sidebar, find, and secondary toolbar buttons.
---
 web/pdf_find_bar.js      | 2 ++
 web/pdf_sidebar.js       | 2 ++
 web/secondary_toolbar.js | 2 ++
 web/viewer.html          | 6 +++---
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/web/pdf_find_bar.js b/web/pdf_find_bar.js
index bd141bac0..79969f372 100644
--- a/web/pdf_find_bar.js
+++ b/web/pdf_find_bar.js
@@ -211,6 +211,7 @@ class PDFFindBar {
     if (!this.opened) {
       this.opened = true;
       this.toggleButton.classList.add("toggled");
+      this.toggleButton.setAttribute("aria-expanded", "true");
       this.bar.classList.remove("hidden");
     }
     this.findField.select();
@@ -225,6 +226,7 @@ class PDFFindBar {
     }
     this.opened = false;
     this.toggleButton.classList.remove("toggled");
+    this.toggleButton.setAttribute("aria-expanded", "false");
     this.bar.classList.add("hidden");
 
     this.eventBus.dispatch("findbarclose", { source: this });
diff --git a/web/pdf_sidebar.js b/web/pdf_sidebar.js
index f18b87a36..46f4c0675 100644
--- a/web/pdf_sidebar.js
+++ b/web/pdf_sidebar.js
@@ -264,6 +264,7 @@ class PDFSidebar {
     }
     this.isOpen = true;
     this.toggleButton.classList.add("toggled");
+    this.toggleButton.setAttribute("aria-expanded", "true");
 
     this.outerContainer.classList.add("sidebarMoving", "sidebarOpen");
 
@@ -282,6 +283,7 @@ class PDFSidebar {
     }
     this.isOpen = false;
     this.toggleButton.classList.remove("toggled");
+    this.toggleButton.setAttribute("aria-expanded", "false");
 
     this.outerContainer.classList.add("sidebarMoving");
     this.outerContainer.classList.remove("sidebarOpen");
diff --git a/web/secondary_toolbar.js b/web/secondary_toolbar.js
index edd002e94..532e2d274 100644
--- a/web/secondary_toolbar.js
+++ b/web/secondary_toolbar.js
@@ -308,6 +308,7 @@ class SecondaryToolbar {
     this._setMaxHeight();
 
     this.toggleButton.classList.add("toggled");
+    this.toggleButton.setAttribute("aria-expanded", "true");
     this.toolbar.classList.remove("hidden");
   }
 
@@ -318,6 +319,7 @@ class SecondaryToolbar {
     this.opened = false;
     this.toolbar.classList.add("hidden");
     this.toggleButton.classList.remove("toggled");
+    this.toggleButton.setAttribute("aria-expanded", "false");
   }
 
   toggle() {
diff --git a/web/viewer.html b/web/viewer.html
index 013896ab2..97249ee91 100644
--- a/web/viewer.html
+++ b/web/viewer.html
@@ -233,11 +233,11 @@ See https://github.com/adobe-type-tools/cmap-resources
           <div id="toolbarContainer">
             <div id="toolbarViewer">
               <div id="toolbarViewerLeft">
-                <button id="sidebarToggle" class="toolbarButton" title="Toggle Sidebar" tabindex="11" data-l10n-id="toggle_sidebar">
+                <button id="sidebarToggle" class="toolbarButton" title="Toggle Sidebar" tabindex="11" data-l10n-id="toggle_sidebar" aria-expanded="false" aria-controls="sidebarContainer">
                   <span data-l10n-id="toggle_sidebar_label">Toggle Sidebar</span>
                 </button>
                 <div class="toolbarButtonSpacer"></div>
-                <button id="viewFind" class="toolbarButton" title="Find in Document" tabindex="12" data-l10n-id="findbar">
+                <button id="viewFind" class="toolbarButton" title="Find in Document" tabindex="12" data-l10n-id="findbar" aria-expanded="false" aria-controls="findbar">
                   <span data-l10n-id="findbar_label">Find</span>
                 </button>
                 <div class="splitToolbarButton hiddenSmallView">
@@ -274,7 +274,7 @@ See https://github.com/adobe-type-tools/cmap-resources
 
                 <div class="verticalToolbarSeparator hiddenSmallView"></div>
 
-                <button id="secondaryToolbarToggle" class="toolbarButton" title="Tools" tabindex="36" data-l10n-id="tools">
+                <button id="secondaryToolbarToggle" class="toolbarButton" title="Tools" tabindex="36" data-l10n-id="tools" aria-expanded="false" aria-controls="secondaryToolbar">
                   <span data-l10n-id="tools_label">Tools</span>
                 </button>
               </div>