Fix toggling all checkboxes of failed imports:

- Rename classes and function to something more descriptive.
- Listen to the element checked status instead of a click on a non‑focusable element.
- Use specific DOM targets instead of relying on the DOM ancestor tree.
- Add a skip‑link to the end of the list and avoid tabbing through all failed items.
- Update related i18n strings in French.
- Avoid having the label on the whole width to prevent accidental click.
- Move `fieldset` out of `ul`.

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;
+    }
+}

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