Improve accessibility of forum nav sort buttons

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 forum navigation sort buttons
+
 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

@@ -22,11 +22,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>