Add labels to snippet bulk edit checkboxes for screen reader users. Fix #5328 (#5463)

CHANGELOG.txt

@@ -12,6 +12,7 @@ Changelog
  * Fix: Changed StreamField group labels color so labels are visible (Catherine Farman)
  * Fix: Prevented images with a very wide aspect ratio from being displayed distorted in the rich text editor (Iman Syed)
  * Fix: Prevent exception when deleting a model with a protected One-to-one relationship (Neal Todd)
+ * Fix: Added labels to snippet bulk edit checkboxes for screen reader users (Martey Dodoo)
 
 
 2.6.1 (05.08.2019)

docs/releases/2.7.rst

@@ -30,6 +30,7 @@ Bug fixes
  * Changed StreamField group label color so labels are visible (Catherine Farman)
  * Prevented images with a very wide aspect ratio from being displayed distorted in the rich text editor (Iman Syed)
  * Prevent exception when deleting a model with a protected One-to-one relationship (Neal Todd)
+ * Added labels to snippet bulk edit checkboxes for screen reader users (Martey Dodoo)
 
 
 Upgrade considerations

wagtail/snippets/templates/wagtailsnippets/snippets/list.html

@@ -6,7 +6,12 @@
     <col width="16%" />
     <thead>
         <tr class="table-headers">
-            {% if can_delete_snippets %}<th><input type="checkbox" class="toggle-select-all"/></th>{% endif %}
+            {% if can_delete_snippets %}
+            <th>
+                <input type="checkbox" class="toggle-select-all" id="toggle-select-all-snippets" />
+                <label for="toggle-select-all-snippets" class="visuallyhidden">{% blocktrans with snippet_type_name_plural=model_opts.verbose_name_plural %}Select all {{ snippet_type_name_plural }}{% endblocktrans %}</label>
+            </th>
+        {% endif %}
             <th>{% trans "Title" %}</th>
         </tr>
     </thead>
@@ -14,7 +19,10 @@
         {% for snippet in items %}
             <tr id="snippet-row-{{ snippet.pk }}">
                 {% if can_delete_snippets %}
-                    <td class="select"><input type="checkbox" name="select_snippet" value="{{ snippet.pk }}" class="toggle-select-row"/></td>
+                    <td class="select">
+                        <input type="checkbox" name="select_snippet" id="select-snippet-{{ snippet.pk }}" value="{{ snippet.pk }}" class="toggle-select-row"/>
+                        <label for="select-snippet-{{ snippet.pk }}" class="visuallyhidden">{% blocktrans %}Select {{ snippet }}{% endblocktrans %}</label>
+                    </td>
                 {% endif %}
                 <td class="title">
                     {% if choosing %}