navigation tree with keyboard support

[bryany]

Hi, I'm using a p:tree as a navigation mechanism for my website. I have a group of (role) nodes which expand to show navigation links that the user can click on.

Code: Select all

          
                     <p:tree value="#{portalController.portalTree}" var="node" dynamic="false" style="padding-top: 5px">
                        <p:treeNode rendered="false"></p:treeNode>
                        <p:treeNode type="role" styleClass="folderStyle">
                            <h:outputText value="#{node['name']}" styleClass="nodeContent"/>
                        </p:treeNode>
                        <p:treeNode type="application" styleClass="documentStyle">
                            <h:outputLink value="#{node['url']}" target="_blank" style="text-decoration: none">
                                <h:outputText value="#{node['name']}" styleClass="nodeContent"/>
                            </h:outputLink>
                        </p:treeNode>
                    </p:tree>

The problem is that I need to be able to support use of the keyboard only (for Section 508 accessibility). Right now i'm able to select and expand nodes using the arrow keys, but nothing happens when I push enter (to open a link). Any ideas or suggestions?

[bryany]

Also, i've noticed that if selctionMode="single" the tree renders two different selectors. A dark blue selector which responds to mouse clicks and a light green (turquoise) selector which responds to the arrow keys.

The dark blue selector triggers the selection listener, but I'm not sure what the turquoise selector does. Any ideas?

[MarcelN]

Hi, could you please explain how to enable arrow key navigation in the tree?