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
+    // Toggle all checkboxes.
-    Array.from(document.getElementsByClassName('select-all'))
+    document
-        .forEach(t => t.onclick = selectAll);
+        .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"]')
+ * Toggle all descendant checkboxes of a target.
-        .forEach(t => t.checked=true);
+ *
+ * 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) {

bookwyrm/templates/import_status.html

@@ -5,7 +5,7 @@
 
 {% block title %}{% trans "Import Status" %}{% endblock %}
 
-{% block content %}
+{% block content %}{% spaceless %}
 <div class="block">
     <h1 class="title">{% trans "Import Status" %}</h1>
 
@@ -36,8 +36,15 @@
     {% if not job.retry %}
     <form name="retry" action="/import/{{ job.id }}" method="post">
         {% csrf_token %}
+
+        {% with failed_count=failed_items|length %}
+            <a class="skip-link" href="#select-all-failed-imports">
+                {% blocktrans %}Jump to the bottom of the list to select the {{ failed_count }} items which failed to import.{% endblocktrans %}
+            </a>
+        {% endwith %}
+
+        <fieldset id="failed-imports">
             <ul>
-            <fieldset>
             {% for item in failed_items %}
                 <li class="pb-1">
                     <input class="checkbox" type="checkbox" name="import_item" value="{{ item.id }}" id="import-item-{{ item.id }}">
@@ -51,15 +58,28 @@
                     </p>
                 </li>
             {% endfor %}
-            </fieldset>
             </ul>
-        <div class="block pt-1 select-all">
+        </fieldset>
-            <label class="label">
+
-                <input type="checkbox" class="checkbox">
+        <fieldset class="mt-3">
+            <a name="select-all-failed-imports"></a>
+
+            <label class="label is-inline mb-1">
+                <input
+                    id="toggle-all-checkboxes-failed-imports"
+                    class="checkbox"
+                    type="checkbox"
+                    data-action="toggle-all"
+                    data-target="failed-imports"
+                />
                 {% trans "Select all" %}
             </label>
-        </div>
+
-        <button class="button" type="submit">{% trans "Retry items" %}</button>
+            <button class="button is-block" type="submit">{% trans "Retry items" %}</button>
+        </fieldset>
+
+        <hr>
+
         {% else %}
         <ul>
             {% for item in failed_items %}
@@ -123,4 +143,4 @@
     </table>
 </div>
 </div>
-{% endblock %}
+{% endspaceless %}{% endblock %}

locale/fr_FR/LC_MESSAGES/django.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: 0.1.1\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2021-03-04 22:24+0000\n"
+"POT-Creation-Date: 2021-03-05 14:10+0000\n"
 "PO-Revision-Date: 2021-03-02 12:37+0100\n"
 "Last-Translator: Fabien Basmaison <contact@arkhi.org>\n"
 "Language-Team: Mouse Reeve <LL@li.org>\n"
@@ -613,37 +613,42 @@ msgstr "(Rechargez la page pour mettre à jour !"
 
 #: bookwyrm/templates/import_status.html:35
 msgid "Failed to load"
-msgstr "Le chargement a échoué"
+msgstr "Items non importés"
 
-#: bookwyrm/templates/import_status.html:59
+#: bookwyrm/templates/import_status.html:42
+#, python-format
+msgid "Jump to the bottom of the list to select the %(failed_count)s items which failed to import."
+msgstr "Sauter en bas de liste pour sélectionner les %(failed_count)s items n’ayant pu être importés."
+
+#: bookwyrm/templates/import_status.html:74
 msgid "Select all"
 msgstr "Tout sélectionner"
 
-#: bookwyrm/templates/import_status.html:62
+#: bookwyrm/templates/import_status.html:79
 msgid "Retry items"
-msgstr "Essayer d’importer les objets sélectionnés de nouveau"
+msgstr "Essayer d’importer les items sélectionnés de nouveau"
 
-#: bookwyrm/templates/import_status.html:84
+#: bookwyrm/templates/import_status.html:101
 msgid "Successfully imported"
 msgstr "Importation réussie"
 
-#: bookwyrm/templates/import_status.html:88
+#: bookwyrm/templates/import_status.html:105
 #: bookwyrm/templates/lists/curate.html:14
 msgid "Book"
 msgstr "Livre"
 
-#: bookwyrm/templates/import_status.html:91
+#: bookwyrm/templates/import_status.html:108
 #: bookwyrm/templates/snippets/create_status_form.html:10
 #: bookwyrm/templates/snippets/shelf.html:10
 msgid "Title"
 msgstr "Titre"
 
-#: bookwyrm/templates/import_status.html:94
+#: bookwyrm/templates/import_status.html:111
 #: bookwyrm/templates/snippets/shelf.html:11
 msgid "Author"
 msgstr "Auteur ou autrice"
 
-#: bookwyrm/templates/import_status.html:117
+#: bookwyrm/templates/import_status.html:134
 msgid "Imported"
 msgstr "Importé"