From 374da648dd5df2fa7616d06d4f46f97bdd892c13 Mon Sep 17 00:00:00 2001 From: Justin Ribeiro 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
-
-
@@ -274,7 +274,7 @@ See https://github.com/adobe-type-tools/cmap-resources
-