search

joeldbirch / superfish

Superfish is a jQuery plugin that adds usability enhancements to existing multi-level drop-down menus.
Other
913 stars 314 forks source link

Close the current submenu by using escape #181

Closed operatorone closed 3 years ago

operatorone commented 5 years ago

Hi there, is there a way to close the current submenu by using the escape key. Or close the whole menu?

JustinSainton commented 3 years ago

đź‘Ť to this - it's an accessibility concern.

joeldbirch commented 3 years ago

The example page linked to from the docs’ second-to-last "Overview" dot point demonstrates a way of programmatically closing a submenu (sorry that link is a bit hidden away). You'll need to apply a similar method to an escape key handler.

koesper commented 3 years ago

Shouldnt this be default functionality? An a11y audit just brought this to my attention, that menus (that might overlap content) should be able to close with the 'esc' button. https://www.w3.org/TR/wai-aria-practices-1.1/examples/menu-button/menu-button-links.html

joeldbirch commented 3 years ago

You're right of course, it should have aria attributes built-in, in hindsight. I don't really use or recommend Superfish anymore as it's ready for retirement and I don't foresee working on it any further. I should put something to that affect on the README and docs site.

koesper commented 3 years ago

I completely understand, but since it is still used in so many active productive sites (a lot of wordpress themes use it, including the Genesis theming framework), it might still be worth doing a release with some accessibility improvements.

In our audit, the aria labels were fine (thanks to the Genesis theme), but the only red flag was the menu overlapping content, while not being closable with the Escape key.

This little piece of code fixes that, by listeling to the Escape key, and then closing my instance of the superfish menu.

// make menu closable with escape key document.onkeydown = function(evt) { evt = evt || window.event; var isEscape = false; if ("key" in evt) { isEscape = (evt.key === "Escape" || evt.key === "Esc"); } else { isEscape = (evt.keyCode === 27); } if (isEscape) { jQuery('ul.js-superfish').superfish('hide'); } };

(i tried with a simple $(document).on('keypress', ...), but that seemed to trigger on every key except Escape, so thats why I ended up with this vanilla javascript listener)