Skip to content

TreeView: Implement arrow key navigation #2331

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 46 commits into from
Sep 20, 2022
Merged

TreeView: Implement arrow key navigation #2331

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
46 commits
Select commit Hold shift + click to select a range
91203b8
Add TreeView docs
colebemis Sep 2, 2022
d425776
Update TreeView props
colebemis Sep 2, 2022
6523985
Scaffold treeview markup
colebemis Sep 2, 2022
30bbae4
Add TreeView to drafts
colebemis Sep 2, 2022
15dc5b2
Add comment
colebemis Sep 2, 2022
46fd1d5
Track item levels
colebemis Sep 2, 2022
a980f76
Add TreeView stories
colebemis Sep 8, 2022
9961985
Update TreeView docs
colebemis Sep 8, 2022
945c58c
Update TreeView markup
colebemis Sep 8, 2022
5b03f71
Create curly-birds-argue.md
colebemis Sep 8, 2022
4072099
Merge branch 'main' into treeview-markup
colebemis Sep 8, 2022
109f05e
Fix examples
colebemis Sep 9, 2022
49303b0
Update src/TreeView/TreeView.tsx
colebemis Sep 9, 2022
cbebf14
Update docs/content/TreeView.mdx
colebemis Sep 9, 2022
b3a3096
Add some tests
colebemis Sep 9, 2022
2b666bd
Implement arrow key navigation
colebemis Sep 12, 2022
df5444b
Fix arrow left
colebemis Sep 12, 2022
ba2166a
Set up aria-activedescendant
colebemis Sep 13, 2022
3437e11
Display focus ring on active descendant
colebemis Sep 13, 2022
d6002e3
Use arrow key to change active descendant
colebemis Sep 14, 2022
769715b
Handle expand/collapse with arrow keys
colebemis Sep 14, 2022
c4bc882
Merge branch 'main' into treeview-arrow-keys
colebemis Sep 14, 2022
bbec34b
Fix lint error
colebemis Sep 14, 2022
e22679d
Add up and down arrow key test
colebemis Sep 14, 2022
dbece82
Prevent default when moving focus with arrow keys
colebemis Sep 14, 2022
2f58284
Open links in same tab by default
colebemis Sep 14, 2022
2ad9f73
Add test for right arrow key expand
colebemis Sep 15, 2022
0065cfa
Add defaultExpanded prop
colebemis Sep 15, 2022
d41f319
Test left arrow key collapse
colebemis Sep 15, 2022
515a9fc
Reorganize tests
colebemis Sep 15, 2022
f99388b
Create neat-squids-cheat.md
colebemis Sep 15, 2022
b165dcf
Add more tests
colebemis Sep 15, 2022
96ac6d8
Implement home and end key behavior
colebemis Sep 15, 2022
311c27f
Merge branch 'treeview-arrow-keys' of github.com:primer/react into tr…
colebemis Sep 15, 2022
1325ca4
Update active descendant on click
colebemis Sep 15, 2022
c0c1745
Remove focus state
colebemis Sep 15, 2022
8303416
Remove focus state from context
colebemis Sep 15, 2022
9106046
Test enter and space keys
colebemis Sep 15, 2022
847053d
Update focus style
colebemis Sep 15, 2022
e949bc6
Merge branch 'main' into treeview-arrow-keys
colebemis Sep 16, 2022
79d0ccc
Remove Space key behavior
colebemis Sep 16, 2022
e1dcac4
Merge branch 'treeview-arrow-keys' of github.com:primer/react into tr…
colebemis Sep 16, 2022
d1f2945
Wrap test cases with themeprovider
colebemis Sep 16, 2022
13473b2
Add test for link item
colebemis Sep 16, 2022
b9b4415
Update urls
colebemis Sep 19, 2022
574d2c8
Merge branch 'main' into treeview-arrow-keys
colebemis Sep 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/neat-squids-cheat.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/react": patch
---

Adds support for arrow key navigation of a TreeView using `aria-activedescendant`
1 change: 1 addition & 0 deletions docs/content/TreeView.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@ description: A hierarchical list of items where nested items can be expanded and

<PropsTable>
<PropsTableRow name="children" type="React.ReactNode" required />
<PropsTableRow name="defaultExpanded" type="boolean" description="Whether the item is expanded by default." />
<PropsTableRow
name="onSelect"
type="(event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void"
Expand Down
30 changes: 15 additions & 15 deletions src/TreeView/TreeView.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,31 +15,31 @@ export const FileTreeWithDirectoryLinks: Story = () => (
<Box p={3}>
<nav aria-label="File navigation">
<TreeView aria-label="File navigation">
<TreeView.LinkItem href="#">
<TreeView.LinkItem href="#src">
src
<TreeView.SubTree>
<TreeView.LinkItem href="#">Avatar.tsx</TreeView.LinkItem>
<TreeView.LinkItem href="#">
<TreeView.LinkItem href="#avatar-tsx">Avatar.tsx</TreeView.LinkItem>
<TreeView.LinkItem href="#button">
Button
<TreeView.SubTree>
<TreeView.LinkItem href="#">Button.tsx</TreeView.LinkItem>
<TreeView.LinkItem href="#">Button.test.tsx</TreeView.LinkItem>
<TreeView.LinkItem href="#button-tsx">Button.tsx</TreeView.LinkItem>
<TreeView.LinkItem href="#button-test-tsx">Button.test.tsx</TreeView.LinkItem>
</TreeView.SubTree>
</TreeView.LinkItem>
</TreeView.SubTree>
</TreeView.LinkItem>
<TreeView.LinkItem
href="#"
href="#public"
// eslint-disable-next-line no-console
onToggle={isExpanded => console.log(`${isExpanded ? 'Expanded' : 'Collapsed'} "public" folder `)}
>
public
<TreeView.SubTree>
<TreeView.LinkItem href="#">index.html</TreeView.LinkItem>
<TreeView.LinkItem href="#">favicon.ico</TreeView.LinkItem>
<TreeView.LinkItem href="#index-html">index.html</TreeView.LinkItem>
<TreeView.LinkItem href="#favicon-ico">favicon.ico</TreeView.LinkItem>
</TreeView.SubTree>
</TreeView.LinkItem>
<TreeView.LinkItem href="#">package.json</TreeView.LinkItem>
<TreeView.LinkItem href="#package-json">package.json</TreeView.LinkItem>
</TreeView>
</nav>
</Box>
Expand All @@ -52,12 +52,12 @@ export const FileTreeWithoutDirectoryLinks: Story = () => (
<TreeView.Item>
src
<TreeView.SubTree>
<TreeView.LinkItem href="#">Avatar.tsx</TreeView.LinkItem>
<TreeView.LinkItem href="#avatar-tsx">Avatar.tsx</TreeView.LinkItem>
<TreeView.Item>
Button
<TreeView.SubTree>
<TreeView.LinkItem href="#">Button.tsx</TreeView.LinkItem>
<TreeView.LinkItem href="#">Button.test.tsx</TreeView.LinkItem>
<TreeView.LinkItem href="#button-tsx">Button.tsx</TreeView.LinkItem>
<TreeView.LinkItem href="#button-test-tsx">Button.test.tsx</TreeView.LinkItem>
</TreeView.SubTree>
</TreeView.Item>
</TreeView.SubTree>
Expand All @@ -68,11 +68,11 @@ export const FileTreeWithoutDirectoryLinks: Story = () => (
>
public
<TreeView.SubTree>
<TreeView.LinkItem href="#">index.html</TreeView.LinkItem>
<TreeView.LinkItem href="#">favicon.ico</TreeView.LinkItem>
<TreeView.LinkItem href="#index-html">index.html</TreeView.LinkItem>
<TreeView.LinkItem href="#favicon-ico">favicon.ico</TreeView.LinkItem>
</TreeView.SubTree>
</TreeView.Item>
<TreeView.LinkItem href="#">package.json</TreeView.LinkItem>
<TreeView.LinkItem href="#package-json">package.json</TreeView.LinkItem>
</TreeView>
</nav>
</Box>
Expand Down
Loading