Improve screen-reader labels for action links in page listing (#5274, #5380)

CHANGELOG.txt

@@ -29,6 +29,7 @@ Changelog
  * Add more contextual information for screen readers in the explorer menu’s links (Helen Chapman)
  * Added `process_child_object` and `exclude_fields` arguments to ``Page.copy()`` to make it easier for third-party apps to customise copy behavior (Karl Hobley)
  * Added `Page.with_content_json()`, allowing revision content loading behaviour to be customised on a per-model basis (Karl Hobley)
+ * Improve screen-reader labels for action links in page listing (Helen Chapman, Katie Locke)
  * Fix: ModelAdmin no longer fails when filtering over a foreign key relation (Jason Dilworth, Matt Westcott)
  * Fix: The Wagtail version number is now visible within the Settings menu (Kevin Howbrook)
  * Fix: Scaling images now rounds values to an integer so that images render without errors (Adrian Brunyate)

docs/releases/2.6.rst

@@ -43,6 +43,7 @@ We’ve also had a look at how controls are labeled across the UI for screen rea
 * Remove duplicate labels in image gallery and image choosers for screen reader users (Helen Chapman)
 * Added a label to the modals’ “close” button for screen reader users (Helen Chapman, Katie Locke)
 * Added labels to permission checkboxes for screen reader users (Helen Chapman, Katie Locke)
+* Improve screen-reader labels for action links in page listing (Helen Chapman, Katie Locke)
 
 Again, this is still a work in progress – if you are aware of other existing accessibility issues, please do `open an issue <https://github.com/wagtail/wagtail/issues?q=is%3Aopen+is%3Aissue+label%3AAccessibility>`_ if there isn’t one already.
 

wagtail/admin/templates/wagtailadmin/pages/listing/_button_with_dropdown.html

@@ -1,5 +1,5 @@
 <div {{ self.attrs }} class="c-dropdown  {% if is_parent %}t-inverted{% else %}t-default{% endif %}" data-dropdown>
-    <a href="javascript:void(0)" title="{{ title }}" class="c-dropdown__button  u-btn-current">
+    <a href="javascript:void(0)" aria-label="{{ title }}" class="c-dropdown__button  u-btn-current">
         {{ label }}
         <div data-dropdown-toggle class="o-icon c-dropdown__toggle  [ icon icon-arrow-down ]"></div>
     </a>
@@ -7,7 +7,7 @@
         <ul class="c-dropdown__menu u-toggle  u-arrow u-arrow--tl u-background">
         {% for button in buttons %}
             <li class="c-dropdown__item ">
-                <a href="{{ button.url }}" title="{{ button.attrs.title }}" class="u-link is-live {{ button.classes|join:' ' }}">
+                <a href="{{ button.url }}" aria-label="{{ button.attrs.title }}" class="u-link is-live {{ button.classes|join:' ' }}">
                     {{ button.label }}
                 </a>
             </li>

wagtail/admin/wagtail_hooks.py

@@ -103,21 +103,24 @@ def page_listing_buttons(page, page_perms, is_parent=False):
         yield PageListingButton(
             _('Edit'),
             reverse('wagtailadmin_pages:edit', args=[page.id]),
-            attrs={'title': _("Edit '{title}'").format(title=page.get_admin_display_title())},
+            attrs={'aria-label': _("Edit '{title}'").format(title=page.get_admin_display_title())},
             priority=10
         )
     if page.has_unpublished_changes:
         yield PageListingButton(
             _('View draft'),
             reverse('wagtailadmin_pages:view_draft', args=[page.id]),
-            attrs={'title': _("Preview draft version of '{title}'").format(title=page.get_admin_display_title()), 'target': '_blank', 'rel': 'noopener noreferrer'},
+            attrs={'aria-label': _("Preview draft version of '{title}'").format(title=page.get_admin_display_title()), 'target': '_blank', 'rel': 'noopener noreferrer'},
             priority=20
         )
     if page.live and page.url:
         yield PageListingButton(
             _('View live'),
             page.url,
-            attrs={'target': "_blank", 'rel': 'noopener noreferrer', 'title': _("View live version of '{title}'").format(title=page.get_admin_display_title())},
+            attrs={
+                'target': "_blank", 'rel': 'noopener noreferrer',
+                'aria-label': _("View live version of '{title}'").format(title=page.get_admin_display_title()),
+            },
             priority=30
         )
     if page_perms.can_add_subpage():
@@ -125,7 +128,9 @@ def page_listing_buttons(page, page_perms, is_parent=False):
             yield Button(
                 _('Add child page'),
                 reverse('wagtailadmin_pages:add_subpage', args=[page.id]),
-                attrs={'title': _("Add a child page to '{title}' ").format(title=page.get_admin_display_title())},
+                attrs={
+                    'aria-label': _("Add a child page to '{title}' ").format(title=page.get_admin_display_title()),
+                },
                 classes={'button', 'button-small', 'bicolor', 'icon', 'white', 'icon-plus'},
                 priority=40
             )
@@ -133,7 +138,7 @@ def page_listing_buttons(page, page_perms, is_parent=False):
             yield PageListingButton(
                 _('Add child page'),
                 reverse('wagtailadmin_pages:add_subpage', args=[page.id]),
-                attrs={'title': _("Add a child page to '{title}' ").format(title=page.get_admin_display_title())},
+                attrs={'aria-label': _("Add a child page to '{title}' ").format(title=page.get_admin_display_title())},
                 priority=40
             )