From 3244fc0d67a6bbcf5520fd30fb2d6950ee7e6b2c Mon Sep 17 00:00:00 2001
From: Sofiya Semenova <ssemenova@edx.org>
Date: Mon, 20 Nov 2017 14:47:28 -0500
Subject: [PATCH] Educator 1560 - Clean up labelling in the Discussion Add Post
 form

---
 .../discussion/thread-type.underscore         | 52 +++++++++----------
 .../templates/discussion/topic.underscore     | 18 +++----
 .../discussion/views/_create-edit-post.scss   |  3 +-
 3 files changed, 35 insertions(+), 38 deletions(-)

diff --git a/common/static/common/templates/discussion/thread-type.underscore b/common/static/common/templates/discussion/thread-type.underscore
index 7e6c3a19b8..b3c505859d 100644
--- a/common/static/common/templates/discussion/thread-type.underscore
+++ b/common/static/common/templates/discussion/thread-type.underscore
@@ -1,32 +1,30 @@
 <div class="post-field">
-    <label class="field-label">
+<fieldset>
+    <legend class="field-label">
         <span class="field-label-text">
             <% // Translators: This is the label for a control to select a forum post type %>
             <%- gettext("Post type") %>
         </span>
-        <div class="field-help" id="field_help_post_type">
-            <%- gettext("Questions raise issues that need answers. Discussions share ideas and start conversations. (Required)") %>
-        </div>
-        <div class="field-label">
-            <fieldset class="field-input">
-                <legend class="sr"><%- gettext("Post type") %></legend>
-                <label for="<%= form_id %>-post-type-question" class="post-type-label">
-                    <input aria-describedby="field_help_post_type" type="radio" name="<%= form_id %>-post-type" class="field-input input-radio" id="<%= form_id %>-post-type-question" value="question">
-                    <span class="field-input-label">
-                        <span class="icon fa fa-question" aria-hidden="true"></span>
-                        <% // Translators: This is a forum post type %>
-                        <%- gettext("Question") %>
-                    </span>
-                </label>
-                <label for="<%= form_id %>-post-type-discussion" class="post-type-label">
-                    <input aria-describedby="field_help_post_type" type="radio" name="<%= form_id %>-post-type" class="field-input input-radio" id="<%= form_id %>-post-type-discussion" value="discussion" checked>
-                    <span class="field-input-label">
-                        <span class="icon fa fa-comments" aria-hidden="true"></span>
-                        <% // Translators: This is a forum post type %>
-                        <%- gettext("Discussion") %>
-                    </span>
-                </label>
-            </fieldset>
-        </div>
-    </label>
-</div>
+    </legend>
+    <div class="field-help" id="field_help_post_type">
+        <%- gettext("Questions raise issues that need answers. Discussions share ideas and start conversations. (Required)") %>
+    </div>
+    <div class="field-label">
+        <label for="<%= form_id %>-post-type-question" class="post-type-label">
+            <input aria-describedby="field_help_post_type" type="radio" name="<%= form_id %>-post-type" class="field-input input-radio" id="<%= form_id %>-post-type-question" value="question">
+            <span class="field-input-label">
+                <span class="icon fa fa-question" aria-hidden="true"></span>
+                <% // Translators: This is a forum post type %>
+                <%- gettext("Question") %>
+            </span>
+        </label>
+        <label for="<%= form_id %>-post-type-discussion" class="post-type-label">
+            <input aria-describedby="field_help_post_type" type="radio" name="<%= form_id %>-post-type" class="field-input input-radio" id="<%= form_id %>-post-type-discussion" value="discussion" checked>
+            <span class="field-input-label">
+                <span class="icon fa fa-comments" aria-hidden="true"></span>
+                <% // Translators: This is a forum post type %>
+                <%- gettext("Discussion") %>
+            </span>
+        </label>
+    </div>
+</fieldset>
diff --git a/common/static/common/templates/discussion/topic.underscore b/common/static/common/templates/discussion/topic.underscore
index 1ea118fd44..7a92973e6d 100644
--- a/common/static/common/templates/discussion/topic.underscore
+++ b/common/static/common/templates/discussion/topic.underscore
@@ -1,13 +1,13 @@
-<label class="field-label">
-    <span class="field-label-text">
+<div class="field-label">
+    <label for="topic" class="field-label-text">
         <%- gettext("Topic area") %>
-    </span>
+    </label>
     <div class="field-help" id="field_help_topic_area">
         <%- gettext("Add your post to a relevant topic to help others find it. (Required)") %>
     </div>
-    <div class="field-input">
-        <select class="post-topic field-input" aria-describedby="field_help_topic_area wrapper-visibility-message" required>
-            <%= edx.HtmlUtils.ensureHtml(topics_html) %>
-        </select>
-    </div>
-</label>
+</div>
+<div class="field-input">
+    <select id="topic" class="post-topic field-input" aria-describedby="field_help_topic_area wrapper-visibility-message" required>
+        <%= edx.HtmlUtils.ensureHtml(topics_html) %>
+    </select>
+</div>
diff --git a/lms/static/sass/discussion/views/_create-edit-post.scss b/lms/static/sass/discussion/views/_create-edit-post.scss
index bfa45b85b9..2b6e7354bf 100644
--- a/lms/static/sass/discussion/views/_create-edit-post.scss
+++ b/lms/static/sass/discussion/views/_create-edit-post.scss
@@ -47,7 +47,6 @@
       }
 
       .field-label-text {
-        margin: $baseline 0 0 0;
         display: block;
       }
 
@@ -67,7 +66,7 @@
       line-height: 1.5;
 
       &#field_help_post_type {
-        @include margin($baseline / 2, 0, $baseline * 0.75, 0);
+        @include margin($baseline / 4, 0, $baseline * 0.75, 0);
       }
 
       &#new-post-editor-description {