Links and keyboard focus

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?

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.

Lose the <div>, it doesn't serve any good purpose there. (Most single-child elements don't)

Use a class on your link

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

and make that a block element in your CSS

a.greenButton {
  display: block;
  background-color: #9F6;
  …
}

According to W3C:

Elements that may receive focus should be navigated by user agents according to the following rules:

• Those elements that support the tabindex attribute and assign a positive value to it are navigated first. Navigation proceeds from the element with the lowest tabindex value to the element with the highest value. Values need not be sequential nor must they begin with any particular value. Elements that have identical tabindex values should be navigated in the order they appear in the character stream.
• Those elements that do not support the tabindex attribute or support it and assign it a value of "0" are navigated next. These elements are navigated in the order they appear in the character stream.
• Elements that are disabled do not participate in the tabbing order.

So perhaps disable the tabindex assignments and let the browser use the second method?

<%= link_to "Back", :back, :class => 'greenButton', :style => 'display: block;' %>