Merge pull request #19373 from edx/dsheraz/educator3605

EDUCATOR-3605 Adding Visible Labels for search and filter inputs

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>

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 {

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;
+    }
+
+  }
 }
+
+

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>