Improve accessibility of forums navigation elements

The home icon and discussion topic drop-down icon now have text that is
visible only to screen readers. The visual change between the icon and the
topic name with down-arrow is now achieved with the CSS visible property
instead of the opacity property, so only one at a time will be visible to
screen readers as well as visually.

lms/static/sass/_discussion.scss

@@ -753,12 +753,12 @@ body.discussion {
 
       &.is-open {
         width:60%;
-        .browse-topic-drop-btn span {
-          opacity: 1.0;
+        .browse-topic-drop-btn {
+          visibility: visible;
         }
 
         .browse-topic-drop-icon {
-          opacity: 0.0;
+          visibility: hidden;
         }
 
         &.is-dropped {
@@ -779,12 +779,6 @@ body.discussion {
           background-color: #616161;
         }
       }
-
-      &.is-dropped {
-        .browse-topic-drop-icon {
-          background-position: 0 -16px;
-        }
-      }
     }
 
     .search {
@@ -822,8 +816,8 @@ body.discussion {
       position: absolute;
       top: -1px;
       left: -1px;
-      z-index: 50;
       display: block;
+      visibility: hidden;
       overflow: hidden;
       width: 100%;
       height: 100%;
@@ -841,8 +835,6 @@ body.discussion {
         line-height: 58px;
         color: #333;
         text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
-        opacity: 0.0;
-        @include transition(opacity .2s linear 0s);
       }
       .drop-arrow {
         font-size: 16px;
@@ -857,8 +849,7 @@ body.discussion {
 
     .browse-topic-drop-icon {
       display: block;
-      z-index: 100;
-      opacity: 1.0;
+      visibility: visible;
       @include transition(none);  
     }
 

lms/templates/discussion/_thread_list_template.html

@@ -4,11 +4,13 @@
         <div class="home">
             <a href="#" class="home-icon">
                 <i class="icon icon-home"></i>
+                <span class="text-sr">${_("Discussion Home")}</span>
             </a>
         </div>
         <div class="browse is-open">
             <a href="#" class="browse-topic-drop-icon">
                 <i class="icon icon-reorder"></i>
+                <span class="text-sr">${_("Discussion Topics")}</span>
             </a>
             <a href="#" class="browse-topic-drop-btn"><span class="current-board">${_("Show All Discussions")}</span> <span class="drop-arrow">▾</span></a>
         </div>