a11y imporvements to wiki/history.html

LMS-1309

lms/templates/wiki/history.html

@@ -8,14 +8,39 @@
 
 {% addtoblock "js" %}
 <script type="text/javascript" src="{{ STATIC_URL }}wiki/js/diffview.js"></script>
-<script type="text/javascript" src="{{ STATIC_URL }}wiki/js/diff.js"></script>
 <script type="text/javascript">
-  $(document).ready(
-    function() {
-      $('.accordion input[disabled!="disabled"][type="radio"]').first().attr('checked', 'true');
-      // Fix modal heights
-      // $('.modal-body').css('height', $(window).height()*0.70 + 'px');
-      // $('.modal').css('max-height', $(window).height() + 'px');      
+
+    $( document ).ready(function() {
+        $('.accordion input[disabled!="disabled"][type="radio"]').first().attr('checked', 'true');
+
+        $('a.accordion-toggle').click(function(event) {
+            event.preventDefault();
+            var diffUrl = $(event.target).attr('href');
+            var accordionBody = $(this).parentsUntil('.accordion').find('.accordion-body');
+
+            jsonWrapper(diffUrl, function (data) {
+                if (!accordionBody.find('.diff-container tbody').length > 0) {
+                    accordionBody.parentsUntil('.accordion').find('.progress').show(0 , function() {
+                        tbody = pydifferviewer.as_tbody({differ_output: data.diff});
+                        accordionBody.find('.diff-container table').append(tbody);
+                        if (data.other_changes) {
+                            for (var i=0; i < data.other_changes.length; i++) {
+                                accordionBody.find('dl').append($('<dt>'+data.other_changes[i][0]+'</dt>' +
+                                                                  '<dd>'+data.other_changes[i][1]+'</dd>'  ));
+                            }
+                        }
+                        accordionBody.parentsUntil('.accordion').find('.progress').detach();
+                        accordionBody.removeClass('collapse');
+                        accordionBody.focus();
+                    });
+                } else {
+                    accordionBody.toggleClass('collapse');
+                    if (!accordionBody.hasClass('collapse')) {
+                        accordionBody.focus();
+                    }
+                }
+            });
+        });
     });
 </script>
 {% endaddtoblock %}
@@ -62,7 +87,7 @@
       <div class="accordion" id="accordion{{ revision.revision_number }}">
         <div class="accordion-group">
           <div class="accordion-heading">
-            <a class="accordion-toggle" style="float: left;" href="#collapse{{ revision.revision_number }}" onclick="get_diff_json('{% url 'wiki:diff' revision.id %}', $('#collapse{{ revision.revision_number }}'))">
+            <a class="accordion-toggle" style="float: left;" href="{% url 'wiki:diff' revision.id %}">
               <span class="icon-plus"></span>
               {% include "wiki/includes/revision_info.html" with current_revision=article.current_revision %}
               <div style="color: #CCC;">
@@ -95,7 +120,7 @@
             </div>
             <div style="clear: both"></div>
           </div>
-          <div id="collapse{{ revision.revision_number }}" class="accordion-body collapse">
+          <div id="collapse{{ revision.revision_number }}" class="accordion-body collapse" tabindex="0">
             <div class="accordion-inner diff-container" style="padding: 0;">
               <dl class="dl-horizontal">
                 <dt>{% trans "Auto log:" %}</dt>
@@ -104,9 +129,9 @@
               <table class="table table-condensed" style="margin: 0; border-collapse: collapse;">
                 <thead>
                   <tr>
-                    <th class="linenumber">{% if revision.previous_revision %}#{{revision.previous_revision.revision_number}}{% endif %}</th>
-                    <th class="linenumber">#{{revision.revision_number}}</th>
-                    <th>{% trans "Change" %}</th>
+                    <th scope="col" class="linenumber">{% if revision.previous_revision %}#{{revision.previous_revision.revision_number}}{% endif %}</th>
+                    <th scope="col" class="linenumber">#{{revision.revision_number}}</th>
+                    <th scope="col">{% trans "Change" %}</th>
                   </tr>
                 </thead>
               </table>