From 6ecbba7230e2c8505eb73e709434302781b23748 Mon Sep 17 00:00:00 2001
From: Greg Price <gprice@edx.org>
Date: Tue, 10 Sep 2013 14:21:17 -0400
Subject: [PATCH 1/2] 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              | 19 +++++--------------
 .../discussion/_thread_list_template.html     |  2 ++
 2 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss
index 9cb6708b8f..32cc9ecda3 100644
--- a/lms/static/sass/_discussion.scss
+++ b/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);  
     }
 
diff --git a/lms/templates/discussion/_thread_list_template.html b/lms/templates/discussion/_thread_list_template.html
index 4e5f48a575..9cceac0b24 100644
--- a/lms/templates/discussion/_thread_list_template.html
+++ b/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>

From f20333ef4e6269ec44b936126c5eae43df92c988 Mon Sep 17 00:00:00 2001
From: Greg Price <gprice@edx.org>
Date: Tue, 10 Sep 2013 14:46:54 -0400
Subject: [PATCH 2/2] Remove some cruft from forums SASS

---
 lms/static/sass/_discussion.scss | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss
index 32cc9ecda3..4a2d394dfc 100644
--- a/lms/static/sass/_discussion.scss
+++ b/lms/static/sass/_discussion.scss
@@ -824,11 +824,6 @@ body.discussion {
       border: 1px solid transparent;
       text-align: center;
 
-      .current-board {
-        white-space: normal;
-
-      }
-
       span {
         font-size: 14px;
         font-weight: 700;
@@ -836,12 +831,7 @@ body.discussion {
         color: #333;
         text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
       }
-      .drop-arrow {
-        font-size: 16px;
-      }
-      .drop-arrow {
-        font-size: 16px;
-      }
+
       .drop-arrow {
         font-size: 16px;
       }