Navigation through FancyTree using TAB Key

Finally back to Blog after a long time, so starting with a short one!

Recently I had to deal with a requirement to provide Tree like navigation menu, as I am very much familiar with DynaTree using FancyTree (DynaTree is apparently being retired) was a no brainer however the tree navigation had to be accessible i.e. users should be able to navigate through the tree using TAB and Arrow key and pressing ENTER on the tree node behaves like a click event.
FancyTree renders ULs and Lis and you can navigate through the tree using Arrow keys but using TAB was a problem also pressing the ENTER key on the Tree node had no effect, so here is a little extension to FancyTree which provides that functionality.

Extension basically Adds tabindex=0 to Tree node and captures ENTER key event to perform action on the node, I only needed to either expand/collapse the node or navigate to the Href.

Ah also first time using Git -:)

Accessible FancyTree Demo
Code @ Git Hub (Look into jquert.fancytree.Tabable.js)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s