574 adding keyboard accessibility to the facet expanders #585
Conversation
| @@ -31,6 +31,13 @@ Blacklight.do_facet_expand_contract_behavior = function() { | |||
| $(this).toggleClass('twiddle-open'); | |||
| $(f_content).slideToggle(); | |||
| }); | |||
| $('h3', f_content.parent()).keypress(function(e){ | |||
| if (e.keyCode == 13) { | |||
There was a problem hiding this comment.
Could you add a comment about what keycode 13 is (enter, I assume?)?
There was a problem hiding this comment.
I believe we were able to accomplish this in SearchWorks by putting an anchor inside the h3 and then adding the click event to both the h3 and the anchor so if the anchor has focus the enter key will automatically be able to expand/collapse the facet as that mimics a click.
There was a problem hiding this comment.
Makes sense to me.. And, presumably, works without javascript?
There was a problem hiding this comment.
Oh, I like that. It's cleaner and addresses a weird bug we fought with semi-successfully on Opera, and requires no tabindex or role. Tested in O, FF, S, IE.
(W/JS off the facets just auto expand, which is probably correct behaviour, at least from my NoScript-using perspective.)
… have a keypress handler & puts the element in the tabindex. Modifying the JS to activate on a rather than h3
…ed; adding back js on the h5 for styled blocks of header
|
Huh. I'm going to redo this against an updated master; other things HAVE changed. Grr argh. |
Bug #574 :
Adding a tab index and a button role to the h3 that constitutes the expandable facet header to enable keyboard navigation. Using the role button rather than link because the W3C recommends that if it doesn't change focus or page -- http://www.w3.org/TR/wai-aria/roles#link
Adding a keypress handler for pressing "enter" on that header, as well as a click handler.