           <hr />}
       </div>
       <div style={textAlign: 'center'}>
-        <button type="button" className="minor-button" onClick={@props.onCancel}>Cancel</button>
+        <button type="button" autoFocus={not hasFocus} className="minor-button" onClick={@props.onCancel}>Cancel</button>
         {' '}
         <button type="button" className="standard-button" disabled={not @checkFilledIn()} onClick={@handleIdentification}>
           <strong>Identify</strong>

    canIdentify = answerProvided.every (answer) -> answer is true

  render: ->
    choice = @props.task.choices[@props.choiceID]
    <div className="survey-task-choice">
      {unless choice.images.length is 0
        <ImageFlipper images={@props.task.images[filename] for filename in choice.images} />}
      <div className="survey-task-choice-content">
        <div className="survey-task-choice-label">{choice.label}</div>

                isFocused = @state.focusedAnswer is "#{questionID}/#{answerID}"
                <span key={answerID}>
                  <label className="survey-task-choice-answer" data-checked={isChecked || null} data-focused={isFocused || null}>
                    <input
                      ref={questionID}
                      name={questionID}
                      type={inputType}
                      autoFocus={not hasFocus and i is 0}
                      checked={isChecked}
                      onChange={@handleAnswer.bind this, questionID, answerID}
                      onFocus={@handleFocus.bind this, questionID, answerID}
                      onBlur={@handleFocus.bind this, null, null}
                    />
                    {answer.label}
                  </label>
                  {' '}
                  {hasFocus=true}
                </span>}
            </div>}

