Indicate active status more clearly for people

with vision impairments

* bold text when active
* add in some extra text for screen readers

LMS-1306

lms/static/sass/course/wiki/_wiki.scss

@@ -277,6 +277,7 @@ section.wiki {
       &.active {
         a {
           color: $link-color;
+          font-weight: bold;
 
           .icon-view,
           .icon-home {

lms/templates/wiki/includes/article_menu.html

@@ -9,6 +9,7 @@
   <a href="${reverse('wiki:get', kwargs={'article_id' : article.id, 'path' : urlpath.path})}">
     <span class="icon-home icon"></span>
     View
+    ${"<span class='sr'>(active)</span>" if selected_tab == "view" else ""}
   </a>
 </li>
 
@@ -17,6 +18,7 @@
     <a href="${reverse('wiki:edit', kwargs={'article_id' : article.id, 'path' : urlpath.path})}">
       <span class="icon-edit icon"></span>
       Edit
+    ${"<span class='sr'>(active)</span>" if selected_tab == "edit" else ""}
     </a>
   </li>
 %endif
@@ -25,6 +27,7 @@
   <a href="${reverse('wiki:history', kwargs={'article_id' : article.id, 'path' : urlpath.path})}">
     <span class="icon-changes icon"></span>
     Changes
+    ${"<span class='sr'>(active)</span>" if selected_tab == "history" else ""}
   </a>
 </li>
 
@@ -34,6 +37,7 @@
       <a href="${reverse('wiki:plugin', kwargs={'slug' : plugin.slug, 'article_id' : article.id, 'path' : urlpath.path}) }">
         <span class="${plugin.article_tab[1]} icon"></span>
         ${plugin.article_tab[0]}
+    ${"<span class='sr'>(active)</span>" if selected_tab == plugin.slug else ""}
       </a>
     </li>
   %endif
@@ -49,6 +53,7 @@ ${_("This should be enabled for all non-anonymous users once the notifications a
   <a href="${reverse('wiki:settings', kwargs={'article_id' : article.id, 'path' : urlpath.path})}">
     <span class="icon-settings icon"></span>
     ${_("Settings")}
+    ${"<span class='sr'>(active)</span>" if selected_tab == "settings" else ""}
   </a>
 </li>
 %endif