ENH Make site tree a tab-island

[emteknetnz]

Issue #3135

[GuySartorelli]

Works locally, but:

1. Please use an appropriate HTML landmark element as the parent of the island (most likely nav)
2. If we're following wcag patterns, when we tab to the tree and a page is open, we should be at that page in the tree (see https://www.w3.org/WAI/ARIA/apg/patterns/treeview/examples/treeview-navigation/)

[emteknetnz]

If we're following wcag patterns, when we tab to the tree and a page is open, we should be at that page in the tree

The underlying library (jstree) we're using is veeery old, brittle, and makes development hard. This recommendation would involve adding state management to the site tree

If we wish to do this, at this point I'm thinking we're best off pausing accessibility on the site tree specifically and just rebuilding the site tree in react, which needs to happen at some point.

Thoughts on that?

[GuySartorelli]

The state should already be managed with a aria-current="page" attribute, assuming the state you mean is knowing which item to focus on when tabbing to the tree.

[emteknetnz]

aria-current is being used on the tree right now

There's still a lot of work to do to get the site tree accessible

• dynamic tab index (this card)
• aria attributes
• use sematic html
• move pages with keyboard < this is complex

Given the work remaining, I think we should just rebuild the site tree in react at this point

[GuySartorelli]

I think that may be more difficult than you expect - the markup is at least partially done through explicit PHP methods which expect to return markup that updates the tree. Anyone customising those methods should expect their customisations to affect the tree markup.

Maybe lets discuss offline and report back here with a decision.

[emteknetnz]

Chatted offline, agreed that while it's not ideal, it's acceptable from a backwards compatibility perspective if rebuild in react and make that default, and we retain the old API and functionality which can be used instead of the new react version via config.