-
Notifications
You must be signed in to change notification settings - Fork 842
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.
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
Recursive tree #2409
Recursive tree #2409
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Roughly, summing up all of my suggestions, it think the final HTML would look something like this (rough pseudo-code):
<nav aria-label="Foo">
<ul aria-label="Foo navigation">
<li><ButtonOrLink>Bar<ButtonOrLink></li>
<li>
<ButtonOrLink aria-controls={randomId} aria-expanded={isThisNodeExpanded}>Baz<ButtonOrLink>
<ul aria-label="Foo Baz navigation" id={randomId}>
// or, the label can be "Baz Foo navigation" if that seems more appropriate for the expected use case
<li><ButtonOrLink>qux</ButtonOrLink></li>
</ul>
</li>
</nav>
Again, if this is not actually a way for users to navigate around the site, many of these suggestions are probably only half-way or completely incorrect.
2913525
to
b20779f
Compare
b20779f
to
64afdea
Compare
The component fully supports keyboard navigation with left, right, up, down arrows, spacebar, and return. |
wip a11y example
This just occurred to me... can we rename this component to |
@daveyholler gonna pass you a PR for some quick design / interface changes. Nothing intense. FIgure it'll save you time so you can merge. |
EUI design patterns for tree
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM. Fun component. I'm gonna make a follow up issue to allow it to accept an href in certain situations. We can likely use this for the docs nav at some point.
Confirmed with @chandlerprall this is mergeable. |
Summary
Easily render recursive tree structures such as file systems or outlines.

Checklist