Left nav tree has a number of bugs and challenges

[mbgower]

Left nav tree challenges: Brief description

There appear to be some implementation bugs, which are leading to inconsistent behaviour.
In addition, there are basic design challenges which make it difficult for a user to know how to operate by keyboard, regardless of whether the bugs existed.

Detailed description

Implementation bugs.

1. On launch, the left navigation does not initially behave the same way it does on subsequent focus. Initially when launching https://gatsby.carbondesignsystem.com/getting-started/ it appears that every exposed node in the left nav that is not itself an expandable section takes focus. (Focus stops at Getting started twice, Demo, Gallery and Contributions; if you expand a section and refresh the page, all of the nodes in that expanded section will now also take focus)
   Once focus has left the left nav once, when it regains focus (via Shift+tab), it typically is behaving more as expected, with the entire tree taking only one tabstop (the expected behaviour). I wouldn't say it is behaving consistently, but it is much more predictable.
   recording showing the inconsistent behaviour

2. A horizontal rule appears to indicate the end of the tree; the last three elements in the left nav (Github, Carbon, Configuration guide) are not reachable by arrow keys. This division is 'okay' from the tree perspective, but why aren't these items themselves in the tab order immediately after the tree (failure of 2.1.1)? It would be worth understanding why you do not want them as additional nodes in the tree.

Implementation considerations

The following do not appear to be bugs (they behave consistently); however they are signficant problems from an accessibility perspective:

1. The choice of an accordion for the branch nodes is somewhat novel. It is not the typical appearance of a tree, which more conventionally has either a small +/- symbol indicating branch states, or a left-aligned chevron that toggles between right and down (as shown in screen shots below)
2. A primary issue with using something that looks like an accordion is that one expects it to operate like an accordion -- which expands/collapses with the Enter and Space keys. Those keys do nothing here. Instead left/right arrow keys expand/collapse. That is simply not an intuitive interaction. As well, one does not normally arrow from an accordion to its child content.
3. With the left-aligned chevron in the above image, users are much more likely to understand that the right arrow will go into a node. You may be trying to preserve space, but I would advocate you adopt this more established indictor.
4. That said, Enter (and probably Space) should still toggle the state of the branch, regardless of appearance.

What did you expect to happen? What happened instead? What would you like to see changed?

What browser are you working in?

Steps to reproduce the issue

1. navigate to https://gatsby.carbondesignsystem.com/getting-started/
2. Press Tab until focus goes to the left nav
3. Continue to press Tab, noting multiple elements in the left nav receive focus
4. Continue to press Tab until focus leaves the left nav
5. Shift+Tab to return to the left nav. It will typically now take a single tab stop, with navigation between nodes happening with arrow keys (desireable)

Additional information

Two examples of typical visual elements in a tree:

See https://www.w3.org/WAI/ARIA/apg/patterns/treeview/examples/treeview-navigation/ for an example of a navigation tree and information on expected keyboard interaction

[elycheea]

@mbgower We separated out the horizontal rule into a separate bug, however, it does affect the regular left nav and the tree nav version of it.

[mbgower]

I should also have mentioned the existing styling and guidance for Tree view in Carbon, which supports t what I've written above
https://carbondesignsystem.com/components/tree-view/usage/

[matthewgallo]

Thanks @mbgower for the detailed notes on this! We've refined this work a bit more, let us know if we missed anything.

Refinement notes:

• We need a design opinion on whether the tree nav chevrons should rotate 180 degrees (fully flipped) or just 90 degrees.
• Should resource links be focusable?

Acceptance criteria:

• Tree nav should contain only one tab stop, when focus is within the tree nav, navigation can be made via arrow keys
• Once focus is returned to the tree, the last focused item gets focus back (not the first)