Skip to content

Commit

Permalink
TreeView: Implement arrow key navigation (#2331)
Browse files Browse the repository at this point in the history 
* 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 <ericwbailey@users.noreply.github.com>

* 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 <ericwbailey@users.noreply.github.com>
  • Loading branch information
@colebemis @ericwbailey
colebemis and ericwbailey committed Sep 20, 2022
1 parent 4a40085 commit 31b8804
Show file tree
Hide file tree
Showing 5 changed files with 944 additions and 88 deletions.
5 changes: 5 additions & 0 deletions .changeset/neat-squids-cheat.md
View file
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
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
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

0 comments on commit 31b8804

Please sign in to comment.