Skip to content

Commit 31b8804

Browse files
colebemisericwbailey
colebemis
and
ericwbailey
authored
TreeView: Implement arrow key navigation (#2331)
* Add TreeView docs * Update TreeView props * Scaffold treeview markup * Add TreeView to drafts * Add comment * Track item levels * Add TreeView stories * Update TreeView docs * Update TreeView markup * Create curly-birds-argue.md * Fix examples * Update src/TreeView/TreeView.tsx * Update docs/content/TreeView.mdx * Add some tests * Implement arrow key navigation * Fix arrow left * Set up aria-activedescendant Co-authored-by: Eric Bailey <[email protected]> * Display focus ring on active descendant * Use arrow key to change active descendant * Handle expand/collapse with arrow keys * Fix lint error * Add up and down arrow key test * Prevent default when moving focus with arrow keys * Open links in same tab by default * Add test for right arrow key expand * Add defaultExpanded prop * Test left arrow key collapse * Reorganize tests * Create neat-squids-cheat.md * Add more tests * Implement home and end key behavior * Update active descendant on click * Remove focus state * Remove focus state from context * Test enter and space keys * Update focus style * Remove Space key behavior * Wrap test cases with themeprovider * Add test for link item * Update urls Co-authored-by: Eric Bailey <[email protected]>
1 parent 4a40085 commit 31b8804

File tree

5 files changed

+944
-88
lines changed

5 files changed

+944
-88
lines changed

‎.changeset/neat-squids-cheat.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/react": patch
3+
---
4+
5+
Adds support for arrow key navigation of a TreeView using `aria-activedescendant`

‎docs/content/TreeView.mdx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ description: A hierarchical list of items where nested items can be expanded and
8080

8181
<PropsTable>
8282
<PropsTableRow name="children" type="React.ReactNode" required />
83+
<PropsTableRow name="defaultExpanded" type="boolean" description="Whether the item is expanded by default." />
8384
<PropsTableRow
8485
name="onSelect"
8586
type="(event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void"

‎src/TreeView/TreeView.stories.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15,31 +15,31 @@ export const FileTreeWithDirectoryLinks: Story = () => (
1515
<Box p={3}>
1616
<nav aria-label="File navigation">
1717
<TreeView aria-label="File navigation">
18-
<TreeView.LinkItem href="#">
18+
<TreeView.LinkItem href="#src">
1919
src
2020
<TreeView.SubTree>
21-
<TreeView.LinkItem href="#">Avatar.tsx</TreeView.LinkItem>
22-
<TreeView.LinkItem href="#">
21+
<TreeView.LinkItem href="#avatar-tsx">Avatar.tsx</TreeView.LinkItem>
22+
<TreeView.LinkItem href="#button">
2323
Button
2424
<TreeView.SubTree>
25-
<TreeView.LinkItem href="#">Button.tsx</TreeView.LinkItem>
26-
<TreeView.LinkItem href="#">Button.test.tsx</TreeView.LinkItem>
25+
<TreeView.LinkItem href="#button-tsx">Button.tsx</TreeView.LinkItem>
26+
<TreeView.LinkItem href="#button-test-tsx">Button.test.tsx</TreeView.LinkItem>
2727
</TreeView.SubTree>
2828
</TreeView.LinkItem>
2929
</TreeView.SubTree>
3030
</TreeView.LinkItem>
3131
<TreeView.LinkItem
32-
href="#"
32+
href="#public"
3333
// eslint-disable-next-line no-console
3434
onToggle={isExpanded => console.log(`${isExpanded ? 'Expanded' : 'Collapsed'} "public" folder `)}
3535
>
3636
public
3737
<TreeView.SubTree>
38-
<TreeView.LinkItem href="#">index.html</TreeView.LinkItem>
39-
<TreeView.LinkItem href="#">favicon.ico</TreeView.LinkItem>
38+
<TreeView.LinkItem href="#index-html">index.html</TreeView.LinkItem>
39+
<TreeView.LinkItem href="#favicon-ico">favicon.ico</TreeView.LinkItem>
4040
</TreeView.SubTree>
4141
</TreeView.LinkItem>
42-
<TreeView.LinkItem href="#">package.json</TreeView.LinkItem>
42+
<TreeView.LinkItem href="#package-json">package.json</TreeView.LinkItem>
4343
</TreeView>
4444
</nav>
4545
</Box>
@@ -52,12 +52,12 @@ export const FileTreeWithoutDirectoryLinks: Story = () => (
5252
<TreeView.Item>
5353
src
5454
<TreeView.SubTree>
55-
<TreeView.LinkItem href="#">Avatar.tsx</TreeView.LinkItem>
55+
<TreeView.LinkItem href="#avatar-tsx">Avatar.tsx</TreeView.LinkItem>
5656
<TreeView.Item>
5757
Button
5858
<TreeView.SubTree>
59-
<TreeView.LinkItem href="#">Button.tsx</TreeView.LinkItem>
60-
<TreeView.LinkItem href="#">Button.test.tsx</TreeView.LinkItem>
59+
<TreeView.LinkItem href="#button-tsx">Button.tsx</TreeView.LinkItem>
60+
<TreeView.LinkItem href="#button-test-tsx">Button.test.tsx</TreeView.LinkItem>
6161
</TreeView.SubTree>
6262
</TreeView.Item>
6363
</TreeView.SubTree>
@@ -68,11 +68,11 @@ export const FileTreeWithoutDirectoryLinks: Story = () => (
6868
>
6969
public
7070
<TreeView.SubTree>
71-
<TreeView.LinkItem href="#">index.html</TreeView.LinkItem>
72-
<TreeView.LinkItem href="#">favicon.ico</TreeView.LinkItem>
71+
<TreeView.LinkItem href="#index-html">index.html</TreeView.LinkItem>
72+
<TreeView.LinkItem href="#favicon-ico">favicon.ico</TreeView.LinkItem>
7373
</TreeView.SubTree>
7474
</TreeView.Item>
75-
<TreeView.LinkItem href="#">package.json</TreeView.LinkItem>
75+
<TreeView.LinkItem href="#package-json">package.json</TreeView.LinkItem>
7676
</TreeView>
7777
</nav>
7878
</Box>

0 commit comments

Comments
 (0)