alphagov/spotlight — pull request #140 by annapowellsmith (2014-01-13 18:41:54+00:00)
Title: Make "more info" sections accessible, using <details> tag

Pivotal story: https://www.pivotaltracker.com/s/projects/911874/stories/61977978

Changes as follows:

* Update HTML and CSS to use HTML5 tags
* Update module tests
* Add a shim for older browsers, from http://mathiasbynens.be/notes/html5-details-jquery
* Add tests for the shim

Points to note:

* I've tested this in Chrome and Safari (which support the

tag) and in Firefox and Opera (which don't). It also needs testing on IE9, IE8 and below, and on touch devices - I currently don't have a good way to do this locally.
* I considered replacing the `.related-pages` sections with this too, but these are visible for screen readers, so it isn't a must-have. It might be nice since it would mean we could get rid of a lot of JavaScript popover code, but it's a little fiddly, for various reasons.
* There's no longer a good way to test the visibility of the popovers following a click, since the tag makes no explicit CSS changes. I tried using tests like `expect(ul.css('height')).not.toBe('0px');`: these work in the browser, but not from the grunt command line.