Unexpected keyboard navigation experience with nested trees

[SaraLawrence]

Summary

Questioning the use of nested trees and the effect on keyboard only users. Also, wondering why slots are implemented at the tree-item level rather than at the tree level?

Actual Behavior

Keyboard only users expect to be able to navigate between nodes with the up and down arrow keys and also move into a group of children using the down arrow. It is confusing to have to first press right or left arrow in order to move up or down.

Also, screen reader support for trees is not consistent and implementing them as a series of trees when visually they appear to be one component, can be confusing for blind screen reader users.

Example: JAWS only recognizes two of the four patterns in the sample codepen:

Expected Behavior

• Expected behavior for tab is to move into the tree and out of the tree. With Calcite, tab moves to what visually appears to be the next "depth 1" item. This is confusing for screen reader users because they can't see the relationship that appears visually between "Grandfather" and "Great uncle".
• Ideally, if it's one cohesive unit visually and there are expected keyboard commands associated with the role, it should be presented to screen readers as one cohesive unit, i.e, one role="tree", and the commands should follow the pattern, with down-arrow and up-arrow always available.

All of the W3C and Deque examples use role="group" to contain child items, rather than nesting trees and the keyboard behavior is more straightforward.

• W3C tree file list pattern example (using computed properties) opens in a new window
• W3C tree file list pattern example (using declared properties) opens in a new window
• W3C tree navigation pattern example (with computed properties) opens in a new window
• W3C tree navigation pattern example (with declared properties) opens in a new window

Reproduction Sample

https://codepen.io/paulcp/pen/GRYjaoY

Reproduction Steps

1. Tab onto first tree-item "Grandfather"
2. Use right-arrow to expand
   • I would expect to use the down arrow to move down to Father at this point but right-arrow is required (In all the examples on W3C and Deque U, you can use either the right-arrow or the down-arrow at this point.)
3. Once focus is on "Father", expand
   • Once expanded, I would expect to use down-arrow to move to "Sister", but right-arrow is required.
   • Down-arrow is only available to move to items with no children and this does not follow the expected keyboard pattern for tree.
4. Set focus on "Sister"
   • As a screen reader user I would assume I need to use right-arrow again since that's the only key that enabled me to continue moving down the tree but now only down-arrow is available for that action.

Reproduction Version

1.2.0

Working W3C Example/Tutorial

See Expected Behavior

Relevant Info

Windows 10, Chrome, JAWS, NVDA

Regression?

No response

Priority impact

p3 - want for upcoming milestone

Esri team

ArcGIS Online

[geospatialem]

Per our Teams discussion, adding the needs more info label for additional repro steps to be added shortly.

[SaraLawrence]

@geospatialem Added more to reproduction steps

[geospatialem]

Thanks @SaraLawrence! Reorganized content a bit in the above description. Updates will be posted on next steps once triaged.

[geospatialem]

Research will be conducted in an upcoming milestone prior to assigning to developers.

[geospatialem]

Anticipated keyboard behavior (with and without AT active):

Tab method refactor (getRootTabIndex private method?):

• The first tree-item should be focusable with the tab key
• If tab is pressed while in the component, focus leaves the component

keyDownHandler keyboard event refactor:

• If a tree-item is expanded, the down arrow key should move to the next child element (and up arrow to the previous)
• Once within an expanded tree-item, all subsequent children should be accessed via the down arrow and up arrow keys
• Once the expanded children tree-items are accessed the up arrow and down arrow keys should be able to access other tree-items, included other expanded items.
• The Home key should bring the user to the first expanded tree-item
• The End key should bring the user to the last expanded tree-item

W3C example gif:

[geospatialem]

Reallocating the target to the August milestone for the development effort.

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified in 1.7.0-next.13 with the criteria above ☝🏻