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:
Justin Ribeiro 2021-02-01 14:16:20 -08:00
parent c92011e093
commit 374da648dd
No known key found for this signature in database
GPG key ID: B746F0BC6AC423BA
4 changed files with 9 additions and 3 deletions

View file

@ -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() {