diff --git a/bookwyrm/static/css/format.css b/bookwyrm/static/css/format.css index 9d4b3105..92e0d92c 100644 --- a/bookwyrm/static/css/format.css +++ b/bookwyrm/static/css/format.css @@ -156,3 +156,35 @@ content: "\e905"; right: 0; } + +/** + * Accessibility (a11y) + ============================================================================ */ + +/** + * Skip links + * + * @see https://webaim.org/styles/main.css + ---------------------------------------------------------------------------- */ +.skip-link { + position: absolute; + opacity: 0; + z-index: 100; + padding: 6px; + border: 1px solid white; + color: white; + background: #BF1722; + transition: opacity 1s ease-out; +} + +.skip-link:focus { + opacity: 1; + outline-color: transparent; + transition: opacity .1s ease-in; +} + +@media (prefers-reduced-motion: reduce) { + .skip-link { + transition-duration: 0.001ms !important; + } +} diff --git a/bookwyrm/static/js/shared.js b/bookwyrm/static/js/shared.js index 7d65ee03..65f0dd65 100644 --- a/bookwyrm/static/js/shared.js +++ b/bookwyrm/static/js/shared.js @@ -8,9 +8,12 @@ window.onload = function() { Array.from(document.getElementsByClassName('interaction')) .forEach(t => t.onsubmit = interact); - // select all - Array.from(document.getElementsByClassName('select-all')) - .forEach(t => t.onclick = selectAll); + // Toggle all checkboxes. + document + .querySelectorAll('[data-action="toggle-all"]') + .forEach(input => { + input.addEventListener('change', toggleAllCheckboxes); + }); // tab groups Array.from(document.getElementsByClassName('tab-group')) @@ -136,9 +139,20 @@ function interact(e) { .forEach(t => addRemoveClass(t, 'hidden', t.className.indexOf('hidden') == -1)); } -function selectAll(e) { - e.target.parentElement.parentElement.querySelectorAll('[type="checkbox"]') - .forEach(t => t.checked=true); +/** + * Toggle all descendant checkboxes of a target. + * + * Use `data-target="ID_OF_TARGET"` on the node being listened to. + * + * @param {Event} event - change Event + * @return {undefined} + */ +function toggleAllCheckboxes(event) { + const mainCheckbox = event.target; + + document + .querySelectorAll(`#${mainCheckbox.dataset.target} [type="checkbox"]`) + .forEach(checkbox => {checkbox.checked = mainCheckbox.checked;}); } function toggleMenu(e) { diff --git a/bookwyrm/templates/import_status.html b/bookwyrm/templates/import_status.html index b28187b0..3ee9c4a5 100644 --- a/bookwyrm/templates/import_status.html +++ b/bookwyrm/templates/import_status.html @@ -5,7 +5,7 @@ {% block title %}{% trans "Import Status" %}{% endblock %} -{% block content %} +{% block content %}{% spaceless %}