Question

This question is about keyboard focus for various kinds of links.

Link inside div – a simple link like below can be accessed by keyboard tabindex, but there’s a gap between the div and the link so the mouse can hover over the div without setting off the link’s :hover event.

<div class="greenButton">
  <%= link_to "Back", :back %>
</div>

Div inside link – the code below keeps :hover events together (and in general the styled link behaves how I would expect) but the keyboard doesn’t get to it through tabindex.

<%= link_to :back do %>
  <div class="greenButton">Back</div>
<% end %>

How can I get both the better formatting of the bottom situation with a tabindex?

Note: the manual tabindex declaration is not a good option because this is code that will be used for multiple pages where there are different numbers of elements. Is there a Rails-y way to do this?

Answer 1

Generally, block-level elements may contain inline elements and other
block-level elements. Generally, inline elements may contain only data
and other inline elements. Inherent in this structural distinction is
the idea that block elements create “larger” structures than inline
elements.

Source

In other words: you shouldn’t put a block element like div inside an inline element like a. I recommend losing the div and just style the a element:

<%= link_to "Back", :back, :class => 'greenButton' %>

If this isn’t feasible, you could try replacing the div with a span and see if the tabindex gets picked up.