make expanding explanation accessible

LMS-11161

common/templates/course_modes/choose.html

@@ -15,13 +15,21 @@
 <%block name="js_extra">
 <script type="text/javascript">
 
+var expandCallback = function(event) {
+  event.preventDefault();
+  $(this).next('.expandable-area').slideToggle();
+  $(this).parent().toggleClass('is-expanded');
+}
+
 $(document).ready(function() {
   $('.expandable-area').slideUp();
   $('.is-expandable').addClass('is-ready');
-  $('.is-expandable .title-expand').click(function(e) {
-      e.preventDefault();
-      $(this).next('.expandable-area').slideToggle();
-      $(this).parent().toggleClass('is-expanded');
+
+  $('.is-expandable .title-expand').click(expandCallback);
+  $('.is-expandable .title-expand').keypress(function(e) {
+    if (e.which == 13) {  // only activate on pressing enter
+      expandCallback.call(this, e); // make sure that we bind `this` correctly
+    }
   });
 
   $('#contribution-other-amt').focus(function() {
@@ -103,7 +111,7 @@ $(document).ready(function() {
               <%include file="_contribution.html" args="suggested_prices=suggested_prices, currency=currency, chosen_price=chosen_price, min_price=min_price"/>
 
               <div class="help-tip is-expandable">
-                <h5 class="title title-expand"><i class="icon-caret-down expandable-icon"></i> ${_("Why do I have to pay? What if I want a free honor code certificate?")}</h5>
+                <h5 class="title title-expand" tabindex="0"><i class="icon-caret-down expandable-icon"></i> ${_("Why do I have to pay? What if I want a free honor code certificate?")}</h5>
 
                 <div class="copy expandable-area">
                   <dl class="list-faq">