yul/bookwyrm-mastodon
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: modify tabbed interfaces to support keyboard accessibility (fixes #526)

Browse Source
This commit is contained in:
Ned Zimmerman
2021-02-27 11:47:03 -04:00
parent 7ed63bacc9
commit 9580bec154
6 changed files with 334 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
bookwyrm/static/js/shared.js
View File

@ -12,10 +12,6 @@ window.onload = function() {
Array.from(document.getElementsByClassName('select-all'))
.forEach(t => t.onclick = selectAll);
// toggle between tabs
Array.from(document.getElementsByClassName('tab-change'))
.forEach(t => t.onclick = tabChange);
// handle aria settings on menus
Array.from(document.getElementsByClassName('pulldown-menu'))
.forEach(t => t.onclick = toggleMenu);
@ -131,23 +127,6 @@ function selectAll(e) {
.forEach(t => t.checked=true);
}
function tabChange(e) {
var el = e.currentTarget;
var parentElement = el.closest('[role="tablist"]');
parentElement.querySelectorAll('[aria-selected="true"]')
.forEach(t => t.setAttribute("aria-selected", false));
el.setAttribute("aria-selected", true);
parentElement.querySelectorAll('li')
.forEach(t => removeClass(t, 'is-active'));
addClass(el, 'is-active');
var tabId = el.getAttribute('data-tab');
Array.from(document.getElementsByClassName(el.getAttribute('data-category')))
.forEach(t => addRemoveClass(t, 'hidden', t.id != tabId));
}
function toggleMenu(e) {
var el = e.currentTarget;
var expanded = el.getAttribute('aria-expanded') == 'false';