At first glance this seems to be caused by our assignment of tabindex 0 to the container div of every component. This makes it focusable. Either don't set tabindex or move tabindex to first focusable element of component?

The relevant ARIA specifications indicate that the top-level container for the component should have tabIndex='0':

From http://codetalks.org/wiki/index.php/Docs/Keyboard_navigable_JS_widgets:

--------------
Simple controls
To make simple widgets tab navigable, use tabindex="0" on the <div> or <span> representing it. Here's an example of a span-based checkbox using this technique.

Grouping controls
For grouping widgets – such as menus, tab panels, grids, or tree views – the parent element should be in the tab order (tabindex="0"), and each descendent choice/tab/cell/row should be removed from the tab order (tabindex="-1"). An onkeydown event that watches for arrow keys can then use element.focus() to set the focus on the appropriate descendent widget and style it so that it appears focused. Here's an example of a WAI-ARIA tree view using this technique.

Disabled controls
When a custom control becomes disabled, remove it from the tab order by setting tabindex="-1". Note that disabled items within a grouped widget (such as menu items in a menu) should remain navigable using arrow keys.

Just found out that slider doesn't assign tabindex to the root div, as we originally agreed on. If it did, it would have the same problem. See video at http://screencast.com/t/2azceCu8WfM.

It has pushed the tabindex to a child span, similar to my suggestion in the earlier comment.

Fixed in ICE-6669.