From 3f29fe4fb0f3dac08c32880f60b11678b5bd0a1d Mon Sep 17 00:00:00 2001
From: David Baumgold <david@davidbaumgold.com>
Date: Tue, 29 Jul 2014 16:51:12 -0400
Subject: [PATCH 1/2] make expanding explanation accessible

LMS-11161
---
 common/templates/course_modes/choose.html | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/common/templates/course_modes/choose.html b/common/templates/course_modes/choose.html
index e608e7ae59..deec8f67a6 100644
--- a/common/templates/course_modes/choose.html
+++ b/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">

From 9b99213b022fb116d691624064b0bdc848b73fe5 Mon Sep 17 00:00:00 2001
From: David Baumgold <david@davidbaumgold.com>
Date: Wed, 30 Jul 2014 10:17:38 -0400
Subject: [PATCH 2/2] Toggle aria-expanded attribute

---
 common/templates/course_modes/choose.html | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/common/templates/course_modes/choose.html b/common/templates/course_modes/choose.html
index deec8f67a6..f4f8c6480c 100644
--- a/common/templates/course_modes/choose.html
+++ b/common/templates/course_modes/choose.html
@@ -18,7 +18,13 @@
 var expandCallback = function(event) {
   event.preventDefault();
   $(this).next('.expandable-area').slideToggle();
-  $(this).parent().toggleClass('is-expanded');
+  var title = $(this).parent();
+  title.toggleClass('is-expanded');
+  if (title.attr("aria-expanded") === "false") {
+    title.attr("aria-expanded", "true");
+  } else {
+    title.attr("aria-expanded", "false");
+  }
 }
 
 $(document).ready(function() {
@@ -111,7 +117,10 @@ $(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" 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>
+                <h5 class="title title-expand" tabindex="0" aria-expanded="false" role="link">
+                  <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">