Merge pull request #921 from edx/gprice/forum-nav-accessibility

Improve forums nav accessibility

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,34 +816,22 @@ body.discussion {
       position: absolute;
       top: -1px;
       left: -1px;
-      z-index: 50;
       display: block;
+      visibility: hidden;
       overflow: hidden;
       width: 100%;
       height: 100%;
       border: 1px solid transparent;
       text-align: center;
 
-      .current-board {
-        white-space: normal;
-
-      }
-
       span {
         font-size: 14px;
         font-weight: 700;
         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;
-      }
-      .drop-arrow {
-        font-size: 16px;
       }
+
       .drop-arrow {
         font-size: 16px;
       }
@@ -857,8 +839,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>