Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #12941 from justinribeiro/resolve-button-aria-expanded

Browse Source 
fix(a11y): resolve sidebar, find, toolbar missing aria-expanded and aria-controls state
This commit is contained in:
Tim van der Meij 2021-02-06 19:16:48 +01:00 committed by GitHub
commit d2a21a1171
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/pdf_find_bar.js
View File

@ -211,6 +211,7 @@ class PDFFindBar {
if (!this.opened) { if (!this.opened) {
this.opened = true; this.opened = true;
this.toggleButton.classList.add("toggled"); this.toggleButton.classList.add("toggled");
this.toggleButton.setAttribute("aria-expanded", "true");
this.bar.classList.remove("hidden"); this.bar.classList.remove("hidden");
} }
this.findField.select(); this.findField.select();
@ -225,6 +226,7 @@ class PDFFindBar {
} }
this.opened = false; this.opened = false;
this.toggleButton.classList.remove("toggled"); this.toggleButton.classList.remove("toggled");
this.toggleButton.setAttribute("aria-expanded", "false");
this.bar.classList.add("hidden"); this.bar.classList.add("hidden");
this.eventBus.dispatch("findbarclose", { source: this }); this.eventBus.dispatch("findbarclose", { source: this });

2
web/pdf_sidebar.js
View File

@ -264,6 +264,7 @@ class PDFSidebar {
} }
this.isOpen = true; this.isOpen = true;
this.toggleButton.classList.add("toggled"); this.toggleButton.classList.add("toggled");
this.toggleButton.setAttribute("aria-expanded", "true");
this.outerContainer.classList.add("sidebarMoving", "sidebarOpen"); this.outerContainer.classList.add("sidebarMoving", "sidebarOpen");
@ -282,6 +283,7 @@ class PDFSidebar {
} }
this.isOpen = false; this.isOpen = false;
this.toggleButton.classList.remove("toggled"); this.toggleButton.classList.remove("toggled");
this.toggleButton.setAttribute("aria-expanded", "false");
this.outerContainer.classList.add("sidebarMoving"); this.outerContainer.classList.add("sidebarMoving");
this.outerContainer.classList.remove("sidebarOpen"); this.outerContainer.classList.remove("sidebarOpen");

2
web/secondary_toolbar.js
View File

@ -308,6 +308,7 @@ class SecondaryToolbar {
this._setMaxHeight(); this._setMaxHeight();
this.toggleButton.classList.add("toggled"); this.toggleButton.classList.add("toggled");
this.toggleButton.setAttribute("aria-expanded", "true");
this.toolbar.classList.remove("hidden"); this.toolbar.classList.remove("hidden");
} }
@ -318,6 +319,7 @@ class SecondaryToolbar {
this.opened = false; this.opened = false;
this.toolbar.classList.add("hidden"); this.toolbar.classList.add("hidden");
this.toggleButton.classList.remove("toggled"); this.toggleButton.classList.remove("toggled");
this.toggleButton.setAttribute("aria-expanded", "false");
} }
toggle() { toggle() {

6
web/viewer.html
View File

@ -233,11 +233,11 @@ See https://github.com/adobe-type-tools/cmap-resources
<div id="toolbarContainer"> <div id="toolbarContainer">
<div id="toolbarViewer"> <div id="toolbarViewer">
<div id="toolbarViewerLeft"> <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> <span data-l10n-id="toggle_sidebar_label">Toggle Sidebar</span>
</button> </button>
<div class="toolbarButtonSpacer"></div> <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> <span data-l10n-id="findbar_label">Find</span>
</button> </button>
<div class="splitToolbarButton hiddenSmallView"> <div class="splitToolbarButton hiddenSmallView">
@ -274,7 +274,7 @@ See https://github.com/adobe-type-tools/cmap-resources
<div class="verticalToolbarSeparator hiddenSmallView"></div> <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> <span data-l10n-id="tools_label">Tools</span>
</button> </button>
</div> </div>