fix keyboarding behavior for right and left arrow keys in Tree View #5899
Conversation
chrisdholt
requested review from
janechu,
nicholasrice and
EisenbergEffect
as code owners
chrisdholt
force-pushed
the
users/chhol/fix-left-arrow-key-behavior-tree-item
branch
from
b8da96f to
f169ace
Compare
| if ( | ||
| item instanceof TreeItem && | ||
| item.childItemLength() > 0 && | ||
| item.expanded | ||
| ) { |
There was a problem hiding this comment.
Left arrow on an open parent node closes the node without moving focus.
| } else if ( | ||
| item instanceof TreeItem && | ||
| item.parentElement instanceof TreeItem | ||
| ) { | ||
| TreeItem.focusItem(item.parentElement); | ||
| } |
There was a problem hiding this comment.
Left arrow on either a child node or a closed node moves focus to its parent (if one exists).
| if ( | ||
| item instanceof TreeItem && | ||
| item.childItemLength() > 0 && | ||
| !item.expanded | ||
| ) { | ||
| item.expanded = true; |
There was a problem hiding this comment.
Right arrow on a closed node expands the node without moving focus.
| } else if (item instanceof TreeItem && item.childItemLength() > 0) { | ||
| this.focusNextNode(1, e.target as TreeItem); |
There was a problem hiding this comment.
Right arrow on expanded parent node focus its first child node.
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://purple-ocean-0b7ce3410-5899.centralus.azurestaticapps.net |
2 similar comments
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://purple-ocean-0b7ce3410-5899.centralus.azurestaticapps.net |
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://purple-ocean-0b7ce3410-5899.centralus.azurestaticapps.net |
chrisdholt
added
the
fast-components:final
|
|
chrisdholt
deleted the
users/chhol/fix-left-arrow-key-behavior-tree-item
branch
…5899) * fix keyboarding behavior for right and left arrow keys in Tree View * Change files
Pull Request
📖 Description
This PR fixes the left and right arrow behaviors to match those enumerated in the ARIA Authoring Practices document.
Right Arrow behavior:
Left Arrow behavior:
🎫 Issues
fixes #5630
👩💻 Reviewer Notes
If you pull down, test and run fast-components, you should see the behavior above for tree items.
📑 Test Plan
There are no test for keyboarding behavior currently - we need to add this (ideally w/ playwright)
✅ Checklist
General
$ yarn changeComponent-specific
⏭ Next Steps