Add more contextual information for screen readers in the explorer menu’s links (#5335, #5386)

CHANGELOG.txt

@@ -26,6 +26,7 @@ Changelog
  * Improved heading structure for screen reader users navigating the CMS admin (Beth Menzies, Helen Chapman)
  * Updated group edit view to expose the Permission object for each checkbox (George Hickman)
  * Improve performance of Pages for Moderation panel (Fidel Ramos)
+ * Add more contextual information for screen readers in the explorer menu’s links (Helen Chapman)
  * 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)

client/src/components/Explorer/ExplorerItem.js

@@ -11,14 +11,6 @@ const childrenIcon = (
   <Icon name="folder-inverse" />
 );
 
-const editIcon = (
-  <Icon name="edit" title={STRINGS.EDIT} />
-);
-
-const nextIcon = (
-  <Icon name="arrow-right" title={STRINGS.SEE_CHILDREN} />
-);
-
 /**
  * One menu item in the page explorer, with different available actions
  * and information depending on the metadata of the page.
@@ -47,7 +39,7 @@ const ExplorerItem = ({ item, onClick }) => {
         href={`${ADMIN_URLS.PAGES}${id}/edit/`}
         className="c-explorer__item__action c-explorer__item__action--small"
       >
-        {editIcon}
+        <Icon name="edit" title={STRINGS.EDIT_PAGE.replace('{title}', title)} />
       </Button>
       {hasChildren ? (
         <Button
@@ -55,7 +47,7 @@ const ExplorerItem = ({ item, onClick }) => {
           onClick={onClick}
           href={`${ADMIN_URLS.PAGES}${id}/`}
         >
-          {nextIcon}
+          <Icon name="arrow-right" title={STRINGS.VIEW_CHILD_PAGES_OF_PAGE.replace('{title}', title)} />
         </Button>
       ) : null}
     </div>

client/src/components/Explorer/__snapshots__/ExplorerItem.test.js.snap

@@ -38,7 +38,7 @@ exports[`ExplorerItem children 1`] = `
     <Icon
       className={null}
       name="edit"
-      title="Edit"
+      title="Edit 'test'"
     />
   </Button>
   <Button
@@ -54,7 +54,7 @@ exports[`ExplorerItem children 1`] = `
     <Icon
       className={null}
       name="arrow-right"
-      title="See children"
+      title="View child pages of 'test'"
     />
   </Button>
 </div>
@@ -93,7 +93,7 @@ exports[`ExplorerItem renders 1`] = `
     <Icon
       className={null}
       name="edit"
-      title="Edit"
+      title="Edit 'test'"
     />
   </Button>
 </div>
@@ -150,7 +150,7 @@ exports[`ExplorerItem should show a publication status if not live 1`] = `
     <Icon
       className={null}
       name="edit"
-      title="Edit"
+      title="Edit 'test'"
     />
   </Button>
   <Button
@@ -166,7 +166,7 @@ exports[`ExplorerItem should show a publication status if not live 1`] = `
     <Icon
       className={null}
       name="arrow-right"
-      title="See children"
+      title="View child pages of 'test'"
     />
   </Button>
 </div>
@@ -223,7 +223,7 @@ exports[`ExplorerItem should show a publication status with unpublished changes
     <Icon
       className={null}
       name="edit"
-      title="Edit"
+      title="Edit 'test'"
     />
   </Button>
   <Button
@@ -239,7 +239,7 @@ exports[`ExplorerItem should show a publication status with unpublished changes
     <Icon
       className={null}
       name="arrow-right"
-      title="See children"
+      title="View child pages of 'test'"
     />
   </Button>
 </div>

client/tests/stubs.js

@@ -20,14 +20,12 @@ global.wagtailConfig = {
     SHORT_DATE_FORMAT: 'DD/MM/YYYY',
   },
   STRINGS: {
-    EDIT: 'Edit',
     DELETE: 'Delete',
     PAGE: 'Page',
     PAGES: 'Pages',
     LOADING: 'Loading…',
     NO_RESULTS: 'No results',
     SERVER_ERROR: 'Server Error',
-    SEE_CHILDREN: 'See children',
     SEE_ALL: 'See all',
     CLOSE_EXPLORER: 'Close explorer',
     ALT_TEXT: 'Alt text',
@@ -44,6 +42,8 @@ global.wagtailConfig = {
     BROKEN_LINK: 'Broken link',
     MISSING_DOCUMENT: 'Missing document',
     CLOSE: 'Close',
+    EDIT_PAGE: 'Edit \'{title}\'',
+    VIEW_CHILD_PAGES_OF_PAGE: 'View child pages of \'{title}\'',
   },
 };
 

docs/releases/2.6.rst

@@ -35,6 +35,7 @@ Other features
  * Improved heading structure for screen reader users navigating the CMS admin (Beth Menzies, Helen Chapman)
  * Update group edit view to expose the ``Permission`` object for each checkbox (George Hickman)
  * Improve performance of Pages for Moderation panel (Fidel Ramos)
+ * Add more contextual information for screen readers in the explorer menu’s links (Helen Chapman)
 
 
 Bug fixes

wagtail/admin/templates/wagtailadmin/admin_base.html

@@ -28,14 +28,12 @@
             };
 
             wagtailConfig.STRINGS = {
-                EDIT: "{% trans 'Edit' %}",
                 DELETE: "{% trans 'Delete' %}",
                 PAGE: "{% trans 'Page' %}",
                 PAGES: "{% trans 'Pages' %}",
                 LOADING: "{% trans 'Loading…' %}",
                 NO_RESULTS: "{% trans 'No results' %}",
                 SERVER_ERROR: "{% trans 'Server Error' %}",
-                SEE_CHILDREN: "{% trans 'See children' %}",
                 SEE_ALL: "{% trans 'See all' %}",
                 CLOSE_EXPLORER: "{% trans 'Close explorer' %}",
                 ALT_TEXT: "{% trans 'Alt text' %}",
@@ -52,6 +50,8 @@
                 BROKEN_LINK: "{% trans 'Broken link' %}",
                 MISSING_DOCUMENT: "{% trans 'Missing document' %}",
                 CLOSE: "{% trans 'Close' %}",
+                EDIT_PAGE: "{% trans 'Edit \'{title}\'' %}",
+                VIEW_CHILD_PAGES_OF_PAGE: "{% trans 'View child pages of \'{title}\'' %}",
 
                 MONTHS: [
                     "{% trans 'January' %}",