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.
This commit is contained in:
parent
c92011e093
commit
374da648dd
@ -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 });
|
||||||
|
@ -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");
|
||||||
|
@ -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() {
|
||||||
|
@ -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>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user