Keyboards FTW

gistfile1.sass

a, button
  &:hover, &:focus
    color: orange
    
  
.profile-list-item
  &.selected
    background-color: $dark-gray

gistfile2.coffee

class SortableListObserver 
  constructor: ->
    $('body')
      .on('focus', '[data-behavior=sort-handle]', @_handleListItemFocus)
      .on('blur', '[data-behavior=sort-handle]', @_handleListItemBlur)
      .on('keydown', '[data-behavior=sort-handle]', @_handleListItemKeypress)
      .on('keydown', @_handleEscapeKey)
  
  _handleListItemFocus: (event) =>
    $(event.target).closest('li').addClass('selected')

  _handleListItemBlur: (event) =>
    $(event.target).closest('li').removeClass('selected')
    
  _handleListItemKeypress: (event) ->
    listItem = $(event.target).closest('li')

    switch event.which
      when App.Keys.ARROW_UP then @_handleArrows(event, listItem, listItem.index() - 1)
      when App.Keys.ARROW_DOWN then @_handleArrows(event, listItem, listItem.index() + 1)
    
  _handleEscapeKey: (event) ->
    if event.which is App.Keys.ESCAPE
      App.PageController.trigger('disableSorting', event)