make expanding explanation accessible LMS-11161

@talbs 
@singingwolfboy 

Previously, this expanding div wasn't accessible by tab and wouldn't toggle on enter. This address those two issues.

See https://openedx.atlassian.net/browse/LMS-11161 for the ticket
I’ll have to verify that this solution actually works for screen readers.
 The difficulty the user was experiencing might also be solved with some
ARIA markup.  I’ll checkout Adam’s branch to verify.

I’m a huge fan of using standards when they exist and polyfills when those
standards aren’t interoperably implemented (yet).  Have we considered using
the details/summary elements with a polyfill [1] for non-supporting
browsers?

[1] http://html5polyfill.com/#details


On Tue, Jul 29, 2014 at 4:47 PM, Adam <notifications@github.com> wrote:

> In common/templates/course_modes/choose.html:
>
> > @@ -18,10 +18,13 @@
> >  $(document).ready(function() {
> >    $('.expandable-area').slideUp();
> >    $('.is-expandable').addClass('is-ready');
> > -  $('.is-expandable .title-expand').click(
> function(e) {
> > +  $('.is-expandable .title-expand').on('click keypress', function(e) {
> > +    # trigger events on either clicking or pressing enter
> > +    if (e.which === 13 || e.type === 'click') {
>
> I like your way better.... I'm happy to plagiarize you, but why don't you
> file the PR :)
>
> —
> Reply to this email directly or view it on GitHub
> <https://github.com/edx/edx-platform/pull/4600/files#r15551196>.
>