Accessibility: Add aria attributes to site tree

[emteknetnz]

Split from - silverstripe/silverstripe-cms#3101

WAI-ARIA Tree View Pattern

The CMS page site tree lacks aria attributes

Context

The site tree in /admin/pages/ had almost no keyboard interactivity even though there were various functions possible with mouse interaction.

The relevant keyboard interaction will have been added through the "related" issues below, but screen readers probably don't give necessary hints to blind users.

Proposed ARIA-attributes

Main Container

• The main container should have role="tree". This tells screen readers that the element contains a hierarchical structure.

Pages

• Each page item within the tree should have role="treeitem".
• To indicate nesting levels, use aria-level (e.g., aria-level="1" for top-level pages, aria-level="2" for their children).
• For pages with nested children, use aria-expanded="false" when the list is collapsed and aria-expanded="true" when it's open.

Expand/Collapse Arrow

• Icons controlling the expand/collapse action should have a dynamic and descriptive aria-label, such as "Toggle child pages".

Mouse Drag-and-Drop

• The page being dragged should have aria-grabbed="true" while in motion.
• The invisible drop zones where the page can be inserted should have aria-dropeffect="move".
• aria-grabbed and aria-dropeffect are both deprecated in ARIA 1.1 and instead the current recommendation is to provide a non-dragging alternative i.e. "keyboard move mode" - https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html

Notes

• The <ins> elements with tabindex="0" added in ENH Add tabindex to tree icon silverstripe-cms#3116 will need an appropriate role added

Related

• Accessibility: Decorative icons should not be read by screen readers #1957
• Accessibility: Can't perform some actions in sitetree with keyboard-only silverstripe-cms#3101
• Accessibility: Move pages with keyboard silverstripe-cms#3115

Acceptance criteria

• Screen readers give sensible instructions and labels where appropriate
  • Whether nested tree is expanded or not, and how to expand/collapse it
  • Instructions for updating the sort order (if that hasn't been implemented yet, move this part to a separate card and block it on Accessibility: Move pages with keyboard silverstripe-cms#3115)
• Icons related to the above actions are not read out (i.e. linked issue above)

Kitchen-sink CI

• https://github.com/creative-commoners/recipe-kitchen-sink/actions/runs/23723682711
  ^ behat failure is existing

PRs

• ENH Add aria attrs to site tree silverstripe-framework#11863
• ENH Add aria attrs to site tree silverstripe-cms#3120
• ENH Set aria-expanded attr on toggle #2016
• DOC Add changelog for site tree aria attrs developer-docs#827

[GuySartorelli]

The ins element that was added to the tab index in silverstripe/silverstripe-cms#3116 needs an appropriate role or perhaps should be replaced with a semantic button HTML element.