Add labels to permission checkboxes for screen reader users (#5329, #5395)

- adds a fieldset around checkboxes with the same name
- add correct labels for object permissions table
- Ensure that image and document permissions labels display correctly, and ensure that labels for the dropdowns for document and image collections are not display:none
- Hide labels from sighted users in group edit / group add pages

CHANGELOG.txt

@@ -49,6 +49,7 @@ Changelog
  * Fix: Add a label to the modals’ “close” button for screen reader users (Helen Chapman, Katie Locke)
  * Fix: Ensure the 'add child page' button displays when focused (Helen Chapman, Katie Locke)
  * Fix: Remove tab order customisations in CMS admin (Jordan Bauer)
+ * Fix: Add labels to permission checkboxes for screen reader users (Helen Chapman, Katie Locke)
 
 
 2.5.1 (07.05.2019)

docs/releases/2.6.rst

@@ -63,6 +63,7 @@ Bug fixes
  * Added a label to the modals’ “close” button for screen reader users (Helen Chapman, Katie Locke)
  * Ensured the 'add child page' button displays when focused (Helen Chapman, Katie Locke)
  * Removed buggy tab order customisations in the CMS admin (Jordan Bauer)
+ * Added labels to permission checkboxes for screen reader users (Helen Chapman, Katie Locke)
 
 Upgrade considerations
 ======================

wagtail/admin/forms/collections.py

@@ -195,6 +195,17 @@ def collection_member_permission_formset_factory(
     if default_prefix is None:
         default_prefix = '%s_permissions' % model._meta.model_name
 
+    class PermissionMultipleChoiceField(forms.ModelMultipleChoiceField):
+        """
+        Allows the custom labels from ``permission_types`` to be applied to
+        permission checkboxes for the ``CollectionMemberPermissionsForm`` below
+        """
+        def label_from_instance(self, obj):
+            for codename, short_label, long_label in permission_types:
+                if codename == obj.codename:
+                    return long_label
+            return str(obj)
+
     class CollectionMemberPermissionsForm(forms.Form):
         """
         For a given model with CollectionMember behaviour,
@@ -204,7 +215,7 @@ def collection_member_permission_formset_factory(
         collection = forms.ModelChoiceField(
             queryset=Collection.objects.all().prefetch_related('group_permissions')
         )
-        permissions = forms.ModelMultipleChoiceField(
+        permissions = PermissionMultipleChoiceField(
             queryset=permission_queryset,
             required=False,
             widget=forms.CheckboxSelectMultiple

wagtail/admin/templates/wagtailadmin/permissions/includes/collection_member_permissions_form.html

@@ -6,7 +6,10 @@
 </td>
 
 {% for option in form.permissions %}
-    <td>{{ option.tag }}</td>
+    <td>
+        <label for="{{ option.id_for_label }}" class="visuallyhidden">{{ option.choice_label }}</label>
+        {{ option.tag }}
+    </td>
 {% endfor %}
 
 <td>

wagtail/admin/templates/wagtailadmin/shared/field.html

@@ -22,4 +22,4 @@
             </p>
         {% endif %}
     </div>
-</div>
+</div>

wagtail/users/static_src/wagtailusers/scss/groups_edit.scss

@@ -1,6 +1,8 @@
+@import '../../../../../client/scss/tools/mixins.general';
+
 .listing {
     .field label {
-        display: none;
+        @include visuallyhidden;
     }
 
     input,

wagtail/users/templates/wagtailusers/groups/edit.html

@@ -25,6 +25,7 @@
                 <li>
                     {% format_permissions permission_bound_field=form.permissions %}
                 </li>
+
                 {% for panel in permission_panels %}
                     <li>
                         {{ panel.as_admin_panel }}

wagtail/users/templates/wagtailusers/groups/includes/formatted_permissions.html

@@ -1,55 +1,67 @@
 {% load i18n %}
 
-<h2>{% trans "Object permissions" %}</h2>
-<table class="listing">
-    <col />
-    <col width="15%" />
-    <col width="15%" />
-    <col width="15%" />
-    <thead>
-        <tr>
-            <th>{% trans "Name" %}</th>
-            <th>{% trans "Add" %}</th>
-            <th>{% trans "Change" %}</th>
-            <th>{% trans "Delete" %}</th>
-        </tr>
-    </thead>
-    <tbody>
-        {% for content_perms_dict in object_perms %}
-        <tr>
-            <td class="title"><h3>{{ content_perms_dict.object|capfirst }}</h3></td>
-            <td>
-                {% if content_perms_dict.add %}{{ content_perms_dict.add.checkbox.tag }}{% endif %}
-            </td>
-            <td>
-                {% if content_perms_dict.change %}{{ content_perms_dict.change.checkbox.tag }}{% endif %}
-            </td>
-            <td>
-                {% if content_perms_dict.delete %}{{ content_perms_dict.delete.checkbox.tag }}{% endif %}
-            </td>
-        </tr>
-        {% endfor %}
-    </tbody>
-</table>
-
-<h2>{% trans "Other permissions" %}</h2>
-<table class="listing">
-    <col />
-    <col width="45%" />
-    <thead>
-        <tr>
-            <th>{% trans "Name" %}</th>
-            <th></th>
-        </tr>
-    </thead>
-    <tbody>
-        {% for perm_tuple in other_perms %}
+<fieldset>
+    <legend class="visuallyhidden">{% trans "Permissions" %}</legend>
+    <h2>{% trans "Object permissions" %}</h2>
+    <table class="listing">
+        <col />
+        <col width="15%" />
+        <col width="15%" />
+        <col width="15%" />
+        <thead>
             <tr>
-                <td class="title"><label for="{{ perm_tuple.1.id_for_label }}" class="plain-checkbox-label">{{ perm_tuple.0.name }}</label></td>
+                <th>{% trans "Name" %}</th>
+                <th>{% trans "Add" %}</th>
+                <th>{% trans "Change" %}</th>
+                <th>{% trans "Delete" %}</th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for content_perms_dict in object_perms %}
+            <tr>
+                <td class="title"><h3>{{ content_perms_dict.object|capfirst }}</h3></td>
                 <td>
-                    {{ perm_tuple.1.tag }}
+                    {% if content_perms_dict.add %}
+                        <label for="{{ content_perms_dict.add.checkbox.id_for_label }}" class="visuallyhidden">{{ content_perms_dict.add.perm.name }}</label>
+                        {{ content_perms_dict.add.checkbox.tag }}
+                    {% endif %}
+                </td>
+                <td>
+                    {% if content_perms_dict.change %}
+                        <label for="{{ content_perms_dict.change.checkbox.id_for_label }}" class="visuallyhidden">{{ content_perms_dict.change.perm.name }}</label>
+                        {{ content_perms_dict.change.checkbox.tag }}
+                    {% endif %}
+                </td>
+                <td>
+                    {% if content_perms_dict.delete %}
+                        <label for="{{ content_perms_dict.delete.checkbox.id_for_label }}" class="visuallyhidden">{{ content_perms_dict.delete.perm.name }}</label>
+                        {{ content_perms_dict.delete.checkbox.tag }}
+                    {% endif %}
                 </td>
             </tr>
-        {% endfor %}
-    </tbody>
-</table>
+            {% endfor %}
+        </tbody>
+    </table>
+
+    <h2>{% trans "Other permissions" %}</h2>
+    <table class="listing">
+        <col />
+        <col width="45%" />
+        <thead>
+            <tr>
+                <th>{% trans "Name" %}</th>
+                <th></th>
+            </tr>
+        </thead>
+        <tbody>
+            {% for perm_tuple in other_perms %}
+                <tr>
+                    <td class="title"><label for="{{ perm_tuple.1.id_for_label }}" class="plain-checkbox-label">{{ perm_tuple.0.name }}</label></td>
+                    <td>
+                        {{ perm_tuple.1.tag }}
+                    </td>
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</fieldset>

wagtail/users/templates/wagtailusers/groups/includes/page_permissions_form.html

@@ -6,7 +6,7 @@
 </td>
 
 {% for option in form.permission_types %}
-    <td>{{ option.tag }}</td>
+    <td><label for="{{ option.id_for_label }}" class="visuallyhidden">{{ option.choice_label }}</label>{{ option.tag }}</td>
 {% endfor %}
 
 <td>