Substitute visible labels for placeholders in post submission form. Fix alignment.

TNL-5166

common/static/common/js/discussion/views/discussion_thread_edit_view.js

@@ -36,7 +36,7 @@
                 this.$('#' + formId + '-post-type-' + this.threadType).attr('checked', true);
                 // Only allow the topic field for course threads, as standalone threads
                 // cannot be moved.
-                if (this.context === 'course') {
+                if (this.isTabMode()) {
                     this.topicView = new DiscussionTopicMenuView({
                         topicId: this.topicId,
                         course_settings: this.course_settings

common/static/common/templates/discussion/new-post.underscore

@@ -20,13 +20,16 @@
     <% } %>
     <div class="post-field">
         <label class="field-label">
-            <span class="sr"><%- gettext("Title:") %></span>
-            <input aria-describedby="field_help_title" type="text" class="field-input js-post-title" name="title" placeholder="<%- gettext('Title') %>">
+            <span class="field-label-text"><%- gettext("Title:") %></span><input aria-describedby="field_help_title" type="text" class="js-post-title field-input" name="title">
         </label><span class="field-help" id="field_help_title">
             <%- gettext("Add a clear and descriptive title to encourage participation.") %>
         </span>
     </div>
-    <div class="post-field js-post-body editor" name="body" data-placeholder="<%- gettext('Enter your question or comment') %>"></div>
+
+    <div class="post-field">
+        <p class="sr-only field-help" id="new-post-editor-description"><%- gettext('Enter your question or comment.') %></p>
+        <div class="js-post-body editor" aria-describedby="new-post-editor-description" name="body"></div>
+    </div>
     <div class="post-options">
         <label class="post-option is-enabled">
             <input type="checkbox" name="follow" class="post-option-input js-follow" checked>

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

 <h1><%- gettext("Editing post") %></h1>
 <ul class="post-errors"></ul>
 <div class="forum-edit-post-form-wrapper"></div>
-<div class="form-row">
-  <label class="sr" for="edit-post-title"><%- gettext("Edit post title") %></label>
-  <input type="text" id="edit-post-title" class="edit-post-title" name="title" value="<%-title %>" placeholder="<%- gettext('Title') %>">
+<div class="post-field">
+    <label class="field-label">
+        <span class="field-label-text"><%- gettext("Title:") %></span><input aria-describedby="field_help_title" type="text" class="edit-post-title field-input" name="title" value="<%- title %>">
+    </label><span class="field-help" id="field_help_title">
+        <%- gettext("Add a clear and descriptive title to encourage participation.") %>
+    </span>
 </div>
-<div class="form-row">
-  <div class="edit-post-body" name="body"><%- body %></div>
+<div class="form-row post-field">
+    <p class="sr-only field-help" id="edit-post-editor-description"><%- gettext('Edit your post below.') %></p>
+    <div class="edit-post-body" aria-describedby="edit-post-editor-description" name="body"><%- body %></div>
 </div>
 <button type="submit" id="edit-post-submit" class="btn-brand submit post-update"><%- gettext("Update post") %></button>
 <button class="btn post-cancel"><%- gettext("Cancel") %></button>

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

@@ -3,7 +3,8 @@
         <span class="field-label-text">
             <% // Translators: This is the label for a control to select a forum post type %>
             <%- gettext("Post type:") %>
-        </span><fieldset class="field-input"><legend class="sr"><%- gettext("Post type:") %></legend>
+        </span><fieldset class="field-input">
+            <legend class="sr"><%- gettext("Post type:") %></legend>
             <input aria-describedby="field_help_post_type" type="radio" name="<%= form_id %>-post-type" class="post-type-input" id="<%= form_id %>-post-type-question" value="question">
             <label for="<%= form_id %>-post-type-question" class="post-type-label">
                 <span class="icon fa fa-question" aria-hidden="true"></span>

lms/static/sass/discussion/_discussion.scss

@@ -8,6 +8,7 @@ body.discussion {
     @include clearfix();
     box-sizing: border-box;
     width: 100%;
+    padding-top: 0;
 
     h1 {
       font-size: $forum-x-large-font-size;
@@ -19,14 +20,12 @@ body.discussion {
 
     .post-cancel {
       @include float(left);
-      margin: ($baseline/2) 0 0 ($baseline*0.75);
+      @include margin($baseline/2, 0, 0, $baseline*0.75);
     }
 
     .post-update {
       @include float(left);
       margin-top: ($baseline/2);
-      padding-bottom: ($baseline/10);
-      height: 37px;
 
       &:hover, &:focus {
         border-color: #222;
@@ -350,7 +349,6 @@ section.discussion {
 
 .new-post-article {
   display: none;
-  margin-top: $baseline;
 
   .inner-wrapper {
     max-width: 1180px;

lms/static/sass/discussion/_layouts.scss

@@ -31,4 +31,8 @@
 
 .discussion-column {
     min-height: 500px;
+
+    .new-post-article {
+        margin-top: -$baseline;
+    }
 }

lms/static/sass/discussion/views/_create-edit-post.scss

@@ -25,7 +25,9 @@
         width: 100%;
         vertical-align: top;
         border-width: 0;
-        padding: 0 ($baseline/2);
+        &:not([type="text"]) {
+          padding: 0;
+        }
       }
 
       .field-label-text {
@@ -49,6 +51,9 @@
       width: 50%;
       font-size: $forum-small-font-size;
 
+      &#new-post-editor-description {
+          @include padding-left(0);
+      }
     }
   }
 
@@ -100,6 +105,11 @@
     color: $gray-d3;
     font-weight: 600;
     line-height: 36px;
+    @include float(left);
+
+    &:last-of-type {
+      @include float(right);
+    }
 
     .icon {
       @include margin-right($baseline/4);