1

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?

andbi
  • 4,426
  • 5
  • 45
  • 70

1 Answers1

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:

Jasper de Vries
  • 19,370
  • 6
  • 64
  • 102
  • Haven't tried it, but do you think it's safe to override renderer of a library like Primefaces or similar? Imo there might be some logic inside which will be lost in that case. – andbi May 31 '17 at 15:54
  • I've tried with the core JSF command link. That worked for me. If you are using a `p:commandLink` you should be able to replace its renderer with the one of `p:commandButton`. Haven't tried that specifically though. – Jasper de Vries May 31 '17 at 18:05