Assigning focus to the selected topic

TNL-2620

common/static/coffee/spec/discussion/view/discussion_thread_view_spec.coffee

@@ -158,6 +158,18 @@ describe "DiscussionThreadView", ->
                 expect($.ajax).not.toHaveBeenCalled()
                 expect(@view.$el.find(".responses li").length).toEqual(0)
 
+        describe "focus", ->
+            it "sends focus to the conversation when opened", ->
+                DiscussionViewSpecHelper.setNextResponseContent({resp_total: 0, children: []})
+                @view.render()
+                @view.expand()
+                waitsFor (->
+                    # This is the implementation of "toBeFocused". However, simply calling that method
+                    # with no wait seems to be flaky.
+                    article = @view.$el.find('.discussion-article')
+                    return article[0] == article[0].ownerDocument.activeElement
+                ), "conversation did not receive focus", 3000
+
         describe "expand/collapse", ->
             it "shows/hides appropriate content", ->
                 DiscussionViewSpecHelper.setNextResponseContent({resp_total: 0, children: []})

common/static/coffee/src/discussion/views/discussion_thread_view.coffee

@@ -162,6 +162,7 @@ if Backbone?
           )
           @trigger "thread:responses:rendered"
           @loadedResponses = true
+          @$el.find('.discussion-article[data-id="' + @model.id + '"]').focus() # Sends focus to the discussion once the thread loads
         error: (xhr, textStatus) =>
           return if textStatus == 'abort'
 

common/static/common/templates/discussion/thread.underscore

@@ -1,5 +1,5 @@
-<article class="discussion-article" data-id="<%- id %>">
-    <div class="thread-wrapper" tabindex="-1">
+<article class="discussion-article" data-id="<%- id %>" tabindex="-1">
+    <div class="thread-wrapper">
         <div class="forum-thread-main-wrapper">
             <div class="thread-content-wrapper"></div>
             <div class="post-extended-content">