TreeView Navigation Link - Keyboard Accessibility

[gracepark]

Description

Hi there,

I'm on the Docs team here at GitHub, and we're currently using the TreeView Component for navigation links with Next.js in a similar way to this example.

We are using our own NextJS Link Component with TreeView. This has been working great for our use case except for the fact that it's not keyboard accessible. On keyboard press Enter, it does not route to the href as expected as when you click.

The TreeView component has been a great for our sidebar in terms of usability and design and we'd love if it could be keyboard accessible with navigation links.

Steps to reproduce

Given the Next.js example, swap out Link with an a tag:

function TreeLinkItem({id, href, children}) {
 const router = useRouter()
 const isCurrent = typeof href === 'string' ? router.asPath === href : router.pathname === href.pathname
 return (
 <a href={href}>
 <TreeView.Item id={id} aria-current={isCurrent ? 'page' : false} current={isCurrent}>
 {children}
 </TreeView.Item>
 </a>
 )
}

Use tab to focus on the TreeView item and press Enter on your keyboard.
Press Enter and you will not be routed.

Version

v35.2.0

Browser

Chrome

[ericwbailey]

Hey @gracepark. I'm afraid TreeView is not an appropriate component to use for this kind of UI.

While it may visually look like what you need for the design on the surface level, it has really specific interaction patterns and expectations for assistive technology on the code level. We have some guidance on this for the component documentation, but unfortunately it is still in the process of being merged.

Modifying the TreeView to accommodate the behavior you're requesting would endanger its primary use case, which is listing and taking action on a hierarchical list of files (think the sidebar in your code editor, or Windows' file explorer). This would consequently lead to accessibility issues.

The pattern you've linked to looks like a NavList. I would recommend exploring using that component instead, if possible.

Tagging @owenniblock, @joshblack, and @colebemis for visibility.

[gracepark]

@ericwbailey - Unfortunately, NavList is not a possibility for us because NavList only supports one level of nesting. We need sometimes up to 3-4 levels of nesting. Would it be possible to add additional nesting capabilities to NavList?

[ericwbailey]

Hey @gracepark, thanks for your patience here. Would you be able to attend the Primer Patterns + API Working Session next week on Tuesday, May 2nd at 2pm ET?

This meeting is where we could discuss your use case in more detail and figure how how to extend the NavList component to accommodate it. If not, could I trouble you for a list of criteria I could bring up for you as talking points?

[heiskr]

Hey @ericwbailey, the change we would need to NavList would be that we need to support up to 4 levels of navigation. Most of the site only goes to 3 levels, but in a few cases it goes to 4 levels. The other item would be an accessibility review of the NavList component.