Commit 97375112 by Greg Price

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

Improve forums nav accessibility
parents 717cf6ad 06b8da40
...@@ -5,6 +5,8 @@ These are notable changes in edx-platform. This is a rolling list of changes, ...@@ -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 in roughly chronological order, most recent first. Add your entries at or near
the top. Include a label indicating the component affected. 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 LMS: enhanced shib support, including detection of linked shib account
at login page and support for the ?next= GET parameter. at login page and support for the ?next= GET parameter.
......
...@@ -353,9 +353,13 @@ if Backbone? ...@@ -353,9 +353,13 @@ if Backbone?
@loadMorePages(event) @loadMorePages(event)
sortThreads: (event) -> sortThreads: (event) ->
@$(".sort-bar a").removeClass("active") activeSort = @$(".sort-bar a[class='active']")
$(event.target).addClass("active") activeSort.removeClass("active")
@sortBy = $(event.target).data("sort") activeSort.attr("aria-checked", "false")
newSort = $(event.target)
newSort.addClass("active")
newSort.attr("aria-checked", "true")
@sortBy = newSort.data("sort")
@displayedCollection.comparator = switch @sortBy @displayedCollection.comparator = switch @sortBy
when 'date' then @displayedCollection.sortByDateRecentFirst when 'date' then @displayedCollection.sortByDateRecentFirst
......
...@@ -12,7 +12,11 @@ ...@@ -12,7 +12,11 @@
<i class="icon icon-reorder"></i> <i class="icon icon-reorder"></i>
<span class="sr">${_("Discussion Topics")}</span> <span class="sr">${_("Discussion Topics")}</span>
</a> </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> </div>
<%include file="_filter_dropdown.html" /> <%include file="_filter_dropdown.html" />
<div class="search"> <div class="search">
...@@ -22,11 +26,11 @@ ...@@ -22,11 +26,11 @@
</div> </div>
</div> </div>
<div class="sort-bar"> <div class="sort-bar">
<span class="sort-label">${_("Sort by:")}</span> <span class="sort-label" id="sort-label">${_("Sort by:")}</span>
<ul> <ul role="radiogroup" aria-labelledby="sort-label">
<li><a href="#" class="active" data-sort="date">${_("date")}</a></li> <li><a href="#" role="radio" aria-checked="true" class="active" data-sort="date">${_("date")}</a></li>
<li><a href="#" data-sort="votes">${_("votes")}</a></li> <li><a href="#" role="radio" aria-checked="false" data-sort="votes">${_("votes")}</a></li>
<li><a href="#" data-sort="comments">${_("comments")}</a></li> <li><a href="#" role="radio" aria-checked="false" data-sort="comments">${_("comments")}</a></li>
</ul> </ul>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment