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

…5380)
wagtail · Jun 20, 2019 · 28cdf9c · 28cdf9c
1 parent af415c7
commit 28cdf9c
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 7 deletions.
diff --git a/CHANGELOG.txt b/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)

diff --git a/docs/releases/2.6.rst b/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.
 

diff --git a/wagtail/admin/templates/wagtailadmin/pages/listing/_button_with_dropdown.html b/wagtail/admin/templates/wagtailadmin/pages/listing/_button_with_dropdown.html
@@ -1,13 +1,13 @@
 <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>
     <div class="t-dark">
         <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>

diff --git a/wagtail/admin/wagtail_hooks.py b/wagtail/admin/wagtail_hooks.py
@@ -103,37 +103,42 @@ 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():
         if is_parent:
             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
             )
         else:
             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
             )