From bf99e15707d5ec5a9c45ac772daece1ed7cd1e40 Mon Sep 17 00:00:00 2001
From: DawoudSheraz <dawoud.sheraz@arbisoft.com>
Date: Wed, 5 Dec 2018 16:13:16 +0500
Subject: [PATCH] EDUCATOR-3605 Adding Visible Labels for search and filter
 inputs on discussion page

---
 .../discussion/templates/search.underscore    |  2 +-
 .../sass/discussion/elements/_navigation.scss |  2 +-
 lms/static/sass/discussion/views/_search.scss | 25 +++++++++++++++++++
 .../discussion/_filter_dropdown.html          |  4 +--
 4 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/lms/djangoapps/discussion/static/discussion/templates/search.underscore b/lms/djangoapps/discussion/static/discussion/templates/search.underscore
index d7e724cce9..74dc7bbfd8 100644
--- a/lms/djangoapps/discussion/static/discussion/templates/search.underscore
+++ b/lms/djangoapps/discussion/static/discussion/templates/search.underscore
@@ -1,4 +1,3 @@
-<label class="field-label sr-only" for="search" id="search-hint"><%- gettext("Search all posts") %></label>
 <input
     class="field-input form-control input-text search-input"
     type="search"
@@ -6,4 +5,5 @@
     id="search"
     placeholder="<%- gettext("Search all posts") %>"
 />
+<label class="field-label" for="search" id="search-hint" aria-label='<%- gettext("Search all posts") %>'><%- gettext("Search all posts") %></label>
 <button class="btn btn-outline-primary btn-small search-button" type="button"><%- gettext("Search") %></button>
diff --git a/lms/static/sass/discussion/elements/_navigation.scss b/lms/static/sass/discussion/elements/_navigation.scss
index 8388374fe4..f440915d36 100644
--- a/lms/static/sass/discussion/elements/_navigation.scss
+++ b/lms/static/sass/discussion/elements/_navigation.scss
@@ -33,7 +33,7 @@
   font-size: $forum-small-font-size;
   position: absolute;
   margin-top: -6px;
-  top: 50%;
+  top: 75%;
 }
 
 .forum-nav-browse-filter-input {
diff --git a/lms/static/sass/discussion/views/_search.scss b/lms/static/sass/discussion/views/_search.scss
index a7a36c5c1f..65660bc34d 100644
--- a/lms/static/sass/discussion/views/_search.scss
+++ b/lms/static/sass/discussion/views/_search.scss
@@ -1,6 +1,7 @@
 .forum-search {
   display: flex;
   margin-top: $baseline;
+  position: relative;
 
   .search-input {
     width: input-width(short);
@@ -15,4 +16,28 @@
 
     margin-top: 0;
   }
+
+  > label {
+    position: absolute;
+    display: block;
+    color: #495057;
+    transition: all .1s ease-in-out;
+    padding-left: 10px;
+    padding-top: 10px;
+
+  }
+
+  input::placeholder {
+    color: transparent;
+  }
+
+  input:not(:placeholder-shown) {
+    & ~ label {
+      padding-top: .15rem;
+      font-size: 10px;
+    }
+
+  }
 }
+
+
diff --git a/lms/templates/discussion/_filter_dropdown.html b/lms/templates/discussion/_filter_dropdown.html
index 12ca7d8f2e..03fcfffc4c 100644
--- a/lms/templates/discussion/_filter_dropdown.html
+++ b/lms/templates/discussion/_filter_dropdown.html
@@ -52,8 +52,8 @@ from openedx.core.djangolib.markup import HTML
 
 <div class="forum-nav-browse-menu-wrapper" style="display: none" aria-label="${_("Discussion topics list")}">
     <form class="forum-nav-browse-filter" autocomplete="off">
-        <label for="forum-nav-browse-filter-input" aria-label='${_("Filter Topics")}'>
-            <span class="sr">${_("Filter Topics")}</span>
+        <label for="forum-nav-browse-filter-input" aria-label='${_("Filter Topics")}' class="field-label">
+            <span class="field-label-text">${_("Filter Topics")}</span>
             <input type="text" id="forum-nav-browse-filter-input" role="combobox" aria-expanded="true" aria-owns="discussion_topics_listbox" aria-autocomplete="list" class="forum-nav-browse-filter-input" placeholder="${_("filter topics")}">
             <span class="icon fa fa-filter" aria-hidden="true"></span>
         </label>