ENH Add aria attrs to site tree

Author: emteknetnz

code/Controllers/CMSMain.php

@@ -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)),
             ];
         };

lang/en.yml

@@ -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_CHILD_PAGES_ROOT: 'Toggle child pages of top level'
     TOO_MANY_PAGES: 'Too many pages'
     TOO_MANY_RECORDS: 'Too many records'
     TREE_NO_TITLE: '(no title)'

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

@@ -1,15 +1,32 @@
 <% 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>
+    <ul id="subtree-0" role="group">
+        <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_CHILD_PAGES_ROOT 'Toggle child pages of top level' %>"
+        >&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">
         <% loop $children %><% include SilverStripe\\CMS\\Controllers\\CMSMain_TreeNode Controller=$Top.Controller %><% end_loop %>
     </ul>
 <% end_if %>

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

@@ -1,5 +1,31 @@
-<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="treeitem"
+    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 %>
+>
+    <% 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}"
+    ><ins class="jstree-icon font-icon-drag-handle">&nbsp;</ins>
         <span class="text">{$TreeTitle}</span>
     </a>
     $SubTree

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

@@ -10,6 +10,7 @@ $ExtraTreeTools
 		</a>
 
 		<div class="cms-tree <% if $TreeIsFiltered %>filtered-list<% end_if %>"
+			role="tree"
 			data-url-tree="$LinkWithSearch($Link('getsubtree')).ATT"
 			data-url-savetreenode="$Link('savetreenode').ATT"
 			data-url-updatetreenodes="$Link('updatetreenodes').ATT"
@@ -26,6 +27,7 @@ $ExtraTreeTools
     </div>
 <% else %>
     <div class="cms-tree flexbox-area-grow <% if $TreeIsFiltered %>filtered-list<% end_if %>"
+		role="tree"
 		data-url-tree="$LinkWithSearch($Link('getsubtree')).ATT"
 		data-url-savetreenode="$Link('savetreenode').ATT"
 		data-url-updatetreenodes="$Link('updatetreenodes').ATT"