Closed SaraLawrence closed 10 months ago
Per our Teams discussion, adding the needs more info
label for additional repro steps to be added shortly.
@geospatialem Added more to reproduction steps
Thanks @SaraLawrence! Reorganized content a bit in the above description. Updates will be posted on next steps once triaged.
Research will be conducted in an upcoming milestone prior to assigning to developers.
Anticipated keyboard behavior (with and without AT active):
Tab
method refactor (getRootTabIndex
private method?):tree-item
should be focusable with the tab
keytab
is pressed while in the component, focus leaves the componentkeyDownHandler
keyboard event refactor:tree-item
is expanded, the down arrow
key should move to the next child element (and up arrow
to the previous)tree-item
, all subsequent children should be accessed via the down arrow
and up arrow
keystree-items
are accessed the up arrow
and down arrow
keys should be able to access other tree-items
, included other expanded items.Home
key should bring the user to the first expanded tree-item
End
key should bring the user to the last expanded tree-item
W3C example gif:
Reallocating the target to the August milestone for the development effort.
Installed and assigned for verification.
Verified in 1.7.0-next.13
with the criteria above ☝🏻
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
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".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.Reproduction Sample
https://codepen.io/paulcp/pen/GRYjaoY
Reproduction Steps
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