Dom Traversal to Automate Keyboard Focus - Spatial Navigation
- by Steve
I'm going to start with a little background that will hopefully help my question make more sense.
I am developing an application for a television.  The concept is simple and basically works by overlaying a browser over the video plane of the TV. Now being a TV, there is no mouse or additional pointing device.  All interaction is done through a remote control.  Therefore, the user needs to be able to visually tell which element they are currently focused upon.  To indicate that an element is focused, I currently append a colored transparent image over the element to indicate focus.   
Now, when a user hits the arrow keys, I need to respond by focusing on the correct elements according to the key pressed.  So, if the down arrow is pressed I need to focus on the next focusable element in the DOM tree (which may be a child or sibling), and if they hit the up arrow, I need to respond to the previous element.  This would essentially simulate spatial navigation within a browser.
I am currently setting an attribute (focusable=true) on any DOM elements that should be able to receive focus.  What I would like to do is determine the previous or next focusable element (i.e. attribute focusable=true) and apply focus to the element.
I was hoping to traverse the DOM tree to determine the next and previously focusable elements, but I am not sure how to perform this in JQuery, or in general.  
I was leaning towards trying to use the JQuery tree travesal methods like next(), prev(), etc. What approach would you take to solve this type of issue?
Thanks