From 362be760e3af10de9f5361c0342cfb88336cd153 Mon Sep 17 00:00:00 2001
From: Jonas Jenwald <jonas.jenwald@gmail.com>
Date: Thu, 11 May 2023 11:48:51 +0200
Subject: [PATCH 1/2] Reduce some duplication when toggling "expanded" buttons
in the viewer toolbars
This is very similar to PR 16281, but for buttons that use the "aria-expanded" attribute.
---
web/pdf_find_bar.js | 9 +++------
web/pdf_sidebar.js | 7 +++----
web/secondary_toolbar.js | 9 +++------
web/ui_utils.js | 8 ++++++++
4 files changed, 17 insertions(+), 16 deletions(-)
diff --git a/web/pdf_find_bar.js b/web/pdf_find_bar.js
index 7134fa5e3..193d0a944 100644
--- a/web/pdf_find_bar.js
+++ b/web/pdf_find_bar.js
@@ -14,6 +14,7 @@
*/
import { FindState } from "./pdf_find_controller.js";
+import { toggleExpandedBtn } from "./ui_utils.js";
const MATCHES_COUNT_LIMIT = 1000;
@@ -173,9 +174,7 @@ class PDFFindBar {
open() {
if (!this.opened) {
this.opened = true;
- this.toggleButton.classList.add("toggled");
- this.toggleButton.setAttribute("aria-expanded", "true");
- this.bar.classList.remove("hidden");
+ toggleExpandedBtn(this.toggleButton, true, this.bar);
}
this.findField.select();
this.findField.focus();
@@ -188,9 +187,7 @@ class PDFFindBar {
return;
}
this.opened = false;
- this.toggleButton.classList.remove("toggled");
- this.toggleButton.setAttribute("aria-expanded", "false");
- this.bar.classList.add("hidden");
+ toggleExpandedBtn(this.toggleButton, false, this.bar);
this.eventBus.dispatch("findbarclose", { source: this });
}
diff --git a/web/pdf_sidebar.js b/web/pdf_sidebar.js
index cc9126b93..3dd99fd4f 100644
--- a/web/pdf_sidebar.js
+++ b/web/pdf_sidebar.js
@@ -18,6 +18,7 @@ import {
RenderingStates,
SidebarView,
toggleCheckedBtn,
+ toggleExpandedBtn,
} from "./ui_utils.js";
const UI_NOTIFICATION_CLASS = "pdfSidebarNotification";
@@ -238,8 +239,7 @@ class PDFSidebar {
return;
}
this.isOpen = true;
- this.toggleButton.classList.add("toggled");
- this.toggleButton.setAttribute("aria-expanded", "true");
+ toggleExpandedBtn(this.toggleButton, true);
this.outerContainer.classList.add("sidebarMoving", "sidebarOpen");
@@ -257,8 +257,7 @@ class PDFSidebar {
return;
}
this.isOpen = false;
- this.toggleButton.classList.remove("toggled");
- this.toggleButton.setAttribute("aria-expanded", "false");
+ toggleExpandedBtn(this.toggleButton, false);
this.outerContainer.classList.add("sidebarMoving");
this.outerContainer.classList.remove("sidebarOpen");
diff --git a/web/secondary_toolbar.js b/web/secondary_toolbar.js
index c3484d8e6..ece13bb51 100644
--- a/web/secondary_toolbar.js
+++ b/web/secondary_toolbar.js
@@ -18,6 +18,7 @@ import {
ScrollMode,
SpreadMode,
toggleCheckedBtn,
+ toggleExpandedBtn,
} from "./ui_utils.js";
import { PagesCountLimit } from "./pdf_viewer.js";
@@ -292,9 +293,7 @@ class SecondaryToolbar {
return;
}
this.opened = true;
- this.toggleButton.classList.add("toggled");
- this.toggleButton.setAttribute("aria-expanded", "true");
- this.toolbar.classList.remove("hidden");
+ toggleExpandedBtn(this.toggleButton, true, this.toolbar);
}
close() {
@@ -302,9 +301,7 @@ class SecondaryToolbar {
return;
}
this.opened = false;
- this.toolbar.classList.add("hidden");
- this.toggleButton.classList.remove("toggled");
- this.toggleButton.setAttribute("aria-expanded", "false");
+ toggleExpandedBtn(this.toggleButton, false, this.toolbar);
}
toggle() {
diff --git a/web/ui_utils.js b/web/ui_utils.js
index b557ee82a..e0f4e979b 100644
--- a/web/ui_utils.js
+++ b/web/ui_utils.js
@@ -851,6 +851,13 @@ function toggleCheckedBtn(button, toggle, view = null) {
view?.classList.toggle("hidden", !toggle);
}
+function toggleExpandedBtn(button, toggle, view = null) {
+ button.classList.toggle("toggled", toggle);
+ button.setAttribute("aria-expanded", toggle);
+
+ view?.classList.toggle("hidden", !toggle);
+}
+
export {
animationStarted,
apiPageLayoutToViewerModes,
@@ -891,6 +898,7 @@ export {
SpreadMode,
TextLayerMode,
toggleCheckedBtn,
+ toggleExpandedBtn,
UNKNOWN_SCALE,
VERTICAL_PADDING,
watchScroll,
From 0305b04e267c6de74fef946ab99a2781f13a03e3 Mon Sep 17 00:00:00 2001
From: Jonas Jenwald <jonas.jenwald@gmail.com>
Date: Thu, 11 May 2023 11:55:18 +0200
Subject: [PATCH 2/2] Add the "aria-controls" attribute to the editor-toolbar
buttons
Similar to other toolbar/secondaryToolbar buttons that open toolbars or dialogs, it seems reasonable to use "aria-controls" for the editor-toolbar buttons as well.
---
web/viewer.html | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/web/viewer.html b/web/viewer.html
index 4845807c3..afee3100d 100644
--- a/web/viewer.html
+++ b/web/viewer.html
@@ -332,10 +332,10 @@ See https://github.com/adobe-type-tools/cmap-resources
<div class="verticalToolbarSeparator hiddenMediumView"></div>
<div id="editorModeButtons" class="splitToolbarButton toggled" role="radiogroup">
- <button id="editorFreeText" class="toolbarButton" disabled="disabled" title="Text" role="radio" aria-checked="false" tabindex="34" data-l10n-id="editor_free_text2">
+ <button id="editorFreeText" class="toolbarButton" disabled="disabled" title="Text" role="radio" aria-checked="false" aria-controls="editorFreeTextParamsToolbar" tabindex="34" data-l10n-id="editor_free_text2">
<span data-l10n-id="editor_free_text2_label">Text</span>
</button>
- <button id="editorInk" class="toolbarButton" disabled="disabled" title="Draw" role="radio" aria-checked="false" tabindex="35" data-l10n-id="editor_ink2">
+ <button id="editorInk" class="toolbarButton" disabled="disabled" title="Draw" role="radio" aria-checked="false" aria-controls="editorInkParamsToolbar" tabindex="35" data-l10n-id="editor_ink2">
<span data-l10n-id="editor_ink2_label">Draw</span>
</button>
</div>