Merge pull request #1101 from edx/gprice/forum-a11y

Improve forums nav accessibility

CHANGELOG.rst

@@ -5,6 +5,8 @@ These are notable changes in edx-platform.  This is a rolling list of changes,
 in roughly chronological order, most recent first.  Add your entries at or near
 the top.  Include a label indicating the component affected.
 
+LMS: Improved accessibility of parts of forum navigation sidebar
+
 LMS: enhanced shib support, including detection of linked shib account
 at login page and support for the ?next= GET parameter.
 

common/static/coffee/src/discussion/views/discussion_thread_list_view.coffee

@@ -353,9 +353,13 @@ if Backbone?
       @loadMorePages(event)
 
     sortThreads: (event) ->
-      @$(".sort-bar a").removeClass("active")
-      $(event.target).addClass("active")
-      @sortBy = $(event.target).data("sort")
+      activeSort = @$(".sort-bar a[class='active']")
+      activeSort.removeClass("active")
+      activeSort.attr("aria-checked", "false")
+      newSort = $(event.target)
+      newSort.addClass("active")
+      newSort.attr("aria-checked", "true")
+      @sortBy = newSort.data("sort")
 
       @displayedCollection.comparator = switch @sortBy
         when 'date' then @displayedCollection.sortByDateRecentFirst

lms/templates/discussion/_thread_list_template.html

@@ -12,7 +12,11 @@
                 <i class="icon icon-reorder"></i>
                 <span class="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>
+            <a href="#" class="browse-topic-drop-btn" aria-haspopup="true" aria-owns="browse-topic-drop-menu">
+                <span class="sr">${_("Discussion topics; current selection is: ")}</span>
+                <span class="current-board">${_("Show All Discussions")}</span>
+                <span class="drop-arrow" aria-hidden="true">▾</span>
+            </a>
         </div>
         <%include file="_filter_dropdown.html" />
         <div class="search">
@@ -22,11 +26,11 @@
         </div>
     </div>
     <div class="sort-bar">
-        <span class="sort-label">${_("Sort by:")}</span>
-        <ul>
-            <li><a href="#" class="active" data-sort="date">${_("date")}</a></li>
-            <li><a href="#" data-sort="votes">${_("votes")}</a></li>
-            <li><a href="#" data-sort="comments">${_("comments")}</a></li>
+        <span class="sort-label" id="sort-label">${_("Sort by:")}</span>
+        <ul role="radiogroup" aria-labelledby="sort-label">
+            <li><a href="#" role="radio" aria-checked="true" class="active" data-sort="date">${_("date")}</a></li>
+            <li><a href="#" role="radio" aria-checked="false" data-sort="votes">${_("votes")}</a></li>
+            <li><a href="#" role="radio" aria-checked="false" data-sort="comments">${_("comments")}</a></li>
         </ul>