Merge pull request #14476 from edx/alisan/post-add-response-focus-TNL-6170

Discussion thread bring focus to response list after submitting a response or comment

common/static/common/js/discussion/views/discussion_thread_view.js

@@ -62,9 +62,7 @@
 
             DiscussionThreadView.prototype.events = {
                 'click .discussion-submit-post': 'submitComment',
-                'click .add-response-btn': 'scrollToAddResponse',
-                'click .forum-thread-expand': 'expand',
-                'click .forum-thread-collapse': 'collapse'
+                'click .add-response-btn': 'scrollToAddResponse'
             };
 
             DiscussionThreadView.prototype.$ = function(selector) {
@@ -165,45 +163,6 @@
                 }
             });
 
-            DiscussionThreadView.prototype.expand = function(event) {
-                if (event) {
-                    event.preventDefault();
-                }
-                this.$el.addClass('expanded');
-                this.$el.find('.post-body').text(this.model.get('body'));
-                this.showView.convertMath();
-                this.$el.find('.forum-thread-expand').hide();
-                this.$el.find('.forum-thread-collapse').show();
-                this.$el.find('.post-extended-content').show();
-                if (!this.loadedResponses) {
-                    return this.loadInitialResponses();
-                }
-            };
-
-            DiscussionThreadView.prototype.collapse = function(event) {
-                if (event) {
-                    event.preventDefault();
-                }
-                this.$el.removeClass('expanded');
-                this.$el.find('.post-body').text(this.getAbbreviatedBody());
-                this.showView.convertMath();
-                this.$el.find('.forum-thread-expand').show();
-                this.$el.find('.forum-thread-collapse').hide();
-                return this.$el.find('.post-extended-content').hide();
-            };
-
-            DiscussionThreadView.prototype.getAbbreviatedBody = function() {
-                var abbreviated, cached;
-                cached = this.model.get('abbreviatedBody');
-                if (cached) {
-                    return cached;
-                } else {
-                    abbreviated = DiscussionUtil.abbreviateString(this.model.get('body'), 140);
-                    this.model.set('abbreviatedBody', abbreviated);
-                    return abbreviated;
-                }
-            };
-
             DiscussionThreadView.prototype.cleanup = function() {
                 // jQuery.ajax after 1.5 returns a jqXHR which doesn't implement .abort
                 // but I don't feel confident enough about what's going on here to remove this code
@@ -346,7 +305,10 @@
                 view.on('comment:endorse', this.endorseThread);
                 view.render();
                 this.$el.find(listSelector).append(view.el);
-                return view.afterInsert();
+                view.afterInsert();
+                if (options.focusAddedResponse) {
+                    this.focusToTheAddedResponse(view.el);
+                }
             };
 
             DiscussionThreadView.prototype.renderAddResponseButton = function() {
@@ -394,7 +356,9 @@
                     user_id: window.user.get('id')
                 });
                 comment.set('thread', this.model.get('thread'));
-                this.renderResponseToList(comment, '.js-response-list');
+                this.renderResponseToList(comment, '.js-response-list', {
+                    focusAddedResponse: true
+                });
                 this.model.addComment();
                 this.renderAddResponseButton();
                 return DiscussionUtil.safeAjax({
@@ -412,6 +376,10 @@
                 });
             };
 
+            DiscussionThreadView.prototype.focusToTheAddedResponse = function(list) {
+                return $(list).attr('tabindex', '-1').focus();
+            };
+
             DiscussionThreadView.prototype.edit = function() {
                 this.createEditView();
                 return this.renderEditView();

common/static/common/js/discussion/views/thread_response_view.js

@@ -174,6 +174,7 @@
                     return self.showCommentForm();
                 });
                 this.commentViews.push(view);
+                this.focusToTheCommentResponse(view.$el.closest('.forum-response'));
                 return view;
             };
 
@@ -213,6 +214,10 @@
                 });
             };
 
+            ThreadResponseView.prototype.focusToTheCommentResponse = function(list) {
+                return $(list).attr('tabindex', '-1').focus();
+            };
+
             ThreadResponseView.prototype._delete = function(event) {
                 var $elem, url;
                 event.preventDefault();

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

@@ -27,6 +27,7 @@
             $.ajax.calls.reset();
             return jasmine.clock().uninstall();
         });
+
         renderWithContent = function(view, content) {
             $.ajax.and.callFake(function(params) {
                 params.success(createAjaxResponseJson(content, false), 'success');
@@ -182,6 +183,7 @@
                     el: $('#fixture-element'),
                     course_settings: DiscussionSpecHelper.createTestCourseSettings()
                 });
+                spyOn($.fn, 'focus');
             });
             describe('responses', function() {
                 it('can post a first response', function() {
@@ -189,8 +191,9 @@
                     postResponse(this.view, 1);
                     expect(this.view.$('.forum-response').length).toBe(1);
                     expect(this.view.$('.post-actions-list').find('.action-edit').parent('.is-hidden').length).toBe(1);
-                    return expect(this.view.$('.response-actions-list').find('.action-edit')
+                    expect(this.view.$('.response-actions-list').find('.action-edit')
                         .parent().not('.is-hidden').length).toBe(1);
+                    expect(document.activeElement === this.view.$('.forum-response')[0]);
                 });
                 it('can post a second response', function() {
                     renderWithTestResponses(this.view, 1);
@@ -201,8 +204,9 @@
                     postResponse(this.view, 2);
                     expect(this.view.$('.forum-response').length).toBe(2);
                     expect(this.view.$('.post-actions-list').find('.action-edit').parent('.is-hidden').length).toBe(1);
-                    return expect(this.view.$('.response-actions-list').find('.action-edit').parent()
+                    expect(this.view.$('.response-actions-list').find('.action-edit').parent()
                         .not('.is-hidden').length).toBe(2);
+                    expect(document.activeElement === this.view.$('.forum-response')[0]);
                 });
             });
             describe('response count and pagination', function() {

common/static/common/js/spec/discussion/view/thread_response_view_spec.js

@@ -53,6 +53,13 @@
                 return checkCommentForm(false);
             });
         });
+        describe('submitComment', function() {
+            it('focus should be in response container after a new comment is posted', function() {
+                this.view.render();
+                expect(this.view.$('.comments')).toBeVisible();
+                expect(document.activeElement === this.view.$('.forum-response')[0]);
+            });
+        });
         describe('renderComments', function() {
             it('hides "show comments" link if collapseComments is not set', function() {
                 this.view.render();

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

@@ -5,7 +5,7 @@
     <label class="field-label">
         <span class="field-label-text"><%- gettext("Title") %></span>
         <div class="field-help" id="field_help_title">
-            <%- gettext("Add a clear and descriptive title to encourage participation.") %>
+            <%- gettext("Add a clear and descriptive title to encourage participation. (Required)") %>
         </div>
         <input aria-describedby="field_help_title" type="text" class="edit-post-title field-input" name="title" value="<%- title %>">
     </label>

lms/static/sass/discussion/_mixins.scss

@@ -44,16 +44,13 @@
   @include border-radius(0, 0, $forum-border-radius, $forum-border-radius);
   box-sizing: border-box;
   border: 1px solid $forum-color-border;
-  border-top: none;
   width: 100%;
   background: $forum-color-background-light;
-  box-shadow: 0 1px 3px $shadow-l1 inset;
 }
 
 @mixin discussion-new-post-wmd-preview-container {
   @include discussion-wmd-preview-container;
   border-color: $forum-color-border;
-  box-shadow: 0 1px 3px $shadow-d1 inset;
 }
 
 @mixin discussion-wmd-preview-label {

lms/static/sass/discussion/elements/_editor.scss

@@ -22,6 +22,11 @@
 
 .wmd-preview-container {
   @include discussion-new-post-wmd-preview-container;
+
+  .discussion-board &,
+  .discussion-user-profile-board & {
+    margin-top: -($baseline / 4);
+  }
 }
 
 .wmd-preview-label {