JSF Using Tab and Space keys to activate a h:commandLink

Question

There're a lot of end-user web frameworks (Bootstrap being one of them) which make links look like buttons. However these two are not the same when it comes to keyboard navigation on a page: buttons can be pushed by Space, links will require pressing Enter to activate.

Given the fact that h:commandLink and h:commandButton are functionally the same on the server side, how can I make them to behave the same when using keyboard navigation? Which basically boils down to the question how to make h:commandLink to trigger the same action by both clicking the link and pressing the spacebar without rewriting .xhtml sources.

In my limited knowledge, possible options are employing event listeners or writing special tag wrappers or even a custom ResponseWriter to update each ClientBehaviorHolder in the tree. Any ideas?

Answer 1

My advice: do change the xhtml sources. Convert the links that look like a button to an actual button. This to keep things simple, and you have the option to still use command links (that look like links) if you want to. Don't try to work around the problem using JavaScript and annoy users that expect certain behavior when they press certain keys.

If you really can't change the xhtml and if you are OK with converting each command link to a command button, you could override the renderer for the command link component and render them as a button. If you are on Mojarra, you could use the following renderer in your faces-config.xml:

<render-kit>
  <renderer>
    <component-family>javax.faces.Command</component-family>
    <renderer-type>javax.faces.Link</renderer-type>
    <renderer-class>com.sun.faces.renderkit.html_basic.ButtonRenderer</renderer-class>
  </renderer>
</render-kit>

See also:

• Buttons and links keyboard triggers
• jQuery - Trigger click event on links with spacebar?
• JSF 2.0: How to override base renderers with custom ones?