ENH Add aria attrs to site tree

Author: emteknetnz

client/dist/js/bundle.js

@@ -183,6 +183,14 @@ $.entwine('ss.tree', function($) {
     }
   });
 
+  // Add role="tree" to the root level <ul> for accessibility
+  // This needs to be done with JS as jstree will override any attributes set server-side
+  $('.cms-tree > ul').entwine({
+    onmatch: function() {
+      this.attr('role', 'tree');
+    }
+  });
+
   // Scroll tree down to context of the current page, if it isn't
   // already visible
   $('.cms-tree a.jstree-clicked').entwine({

client/src/legacy/CMSMain.Tree.js

@@ -593,6 +593,13 @@ protected function getTreeNodeCustomisations()
                         'title' => $node->Title,
                     ]
                 ),
+                'ToggleTitle' => _t(
+                    CMSMain::class . '.TOGGLE_CHILD_PAGES',
+                    'Toggle child pages of {title}',
+                    [
+                        'title' => $node->Title,
+                    ]
+                ),
                 'TreeTitle' => DBHTMLText::create()->setValue($this->getRecordTreeMarkup($node)),
             ];
         };

code/Controllers/CMSMain.php

@@ -88,6 +88,8 @@ en:
     SAVEDRAFT: Save
     SEARCHRESULTS: 'Search results'
     SHOW_AS_LIST: 'show as list'
+    TOGGLE_CHILD_PAGES: 'Toggle child pages of {title}'
+    TOGGLE_SITE_TREE: 'Toggle site tree'
     TOO_MANY_PAGES: 'Too many pages'
     TOO_MANY_RECORDS: 'Too many records'
     TREE_NO_TITLE: '(no title)'

lang/en.yml

@@ -1,15 +1,38 @@
 <% if not $node.IsInDB %><%-- Only render root node if it's the true root --%>
-    <ul><li id="record-0" data-id="0" class="Root nodelete"><ins class="jstree-icon font-icon-right-dir" tabindex="0">&nbsp;</ins><strong>$rootTitle</strong>
+    <%-- This <ul> will have any attributes set here overrideen by JS in jstree
+         CMSMain.Tree.js will set this <ul> to have tree="role"
+    --%>
+    <ul>
+        <li id="record-0"
+            data-id="0"
+            class="Root nodelete"
+            role="treeitem"
+            aria-level="1"
+            <%-- aria-expanded value is handled via JS --%>
+            aria-expanded="false"
+        ><ins class="jstree-icon font-icon-right-dir"
+              role="button"
+              tabindex="0"
+              aria-controls="subtree-0"
+              aria-label="<%t SilverStripe\CMS\Controllers\CMSMain.TOGGLE_SITE_TREE 'Toggle site tree' %>"
+        >&nbsp;</ins><strong>$rootTitle</strong>
 <% end_if %>
 <% if $limited %>
     <ul><li class="readonly">
         <span class="item">
             <%t SilverStripe\\CMS\\Controllers\\CMSMain.TOO_MANY_RECORDS 'Too many records' %>
-            (<a href="{$listViewLink.ATT}" class="subtree-list-link" data-id="$node.ID" data-pjax-target="Content"><%t SilverStripe\\CMS\\Controllers\\CMSMain.SHOW_AS_LIST 'show as list' %></a>)
+            (<a href="{$listViewLink.ATT}"
+                class="subtree-list-link"
+                data-id="$node.ID"
+                data-pjax-target="Content"
+            ><%t SilverStripe\\CMS\\Controllers\\CMSMain.SHOW_AS_LIST 'show as list' %></a>)
         </span>
     </li></ul>
 <% else_if $children %>
-    <ul>
+    <ul id="subtree-{$node.ID}"
+        role="group"
+        <% if $node.Title %>aria-label="{$node.Title.ATT}"<% end_if %>
+    >
         <% loop $children %><% include SilverStripe\\CMS\\Controllers\\CMSMain_TreeNode Controller=$Top.Controller %><% end_loop %>
     </ul>
 <% end_if %>

templates/SilverStripe/CMS/Controllers/Includes/CMSMain_SubTree.ss

@@ -1,5 +1,33 @@
-<li id="record-{$node.ID}" data-id="{$node.ID}" data-recordtype="{$node.ClassName}" class="$markingClasses $extraClass"><ins class="jstree-icon font-icon-right-dir" tabindex="0">&nbsp;</ins>
-    <a href="{$Controller.LinkRecordEdit($node.ID).ATT}" title="{$Title.ATT}"><ins class="jstree-icon font-icon-drag-handle">&nbsp;</ins>
+<li id="record-{$node.ID}"
+    data-id="{$node.ID}"
+    data-recordtype="{$node.ClassName}"
+    class="$markingClasses $extraClass"
+    role="none"
+>
+    <% if $children.count %>
+        <ins class="jstree-icon font-icon-right-dir"
+        role="button"
+        tabindex="0"
+        aria-controls="subtree-{$node.ID}"
+        aria-label="{$ToggleTitle.ATT}"
+        >&nbsp;</ins>
+    <% else %>
+        <%-- jstree will add an icon here regardless, so add one that has aria-hidden
+             Note we can't use use display:none!important here as it breaks the layout
+        --%>
+        <ins class="jstree-icon" aria-hidden="true"></ins>
+    <% end_if %>
+    <a href="{$Controller.LinkRecordEdit($node.ID).ATT}"
+       title="{$Title.ATT}"
+       role="treeitem"
+       aria-owns="subtree-{$node.ID}"
+       aria-level="$level"
+       <%-- $children is an ArrayList, so no extra DB query is triggered here --%>
+       <% if $children.count %>
+           <%-- aria-expanded value is handled via JS --%>
+           aria-expanded="false"
+       <% end_if %>
+    ><ins class="jstree-icon font-icon-drag-handle">&nbsp;</ins>
         <span class="text">{$TreeTitle}</span>
     </a>
     $SubTree