adobe-accessibility / Accessible-Mega-Menu

A demonstration of how to implement a keyboard and screen reader accessible mega menu as a jQuery plugin.
Apache License 2.0
605 stars 199 forks source link

openOnMouseover preventing scrolling out of open mega menu #70

Open wplit opened 3 years ago

wplit commented 3 years ago

Unsure if this is on purpose, but doesn't seem like an ideal UX. If the openOnMouseover is set to true, we can hover over the links to display the dropdown, but the downside is that if the dropdowns are quite large and the user tries to scroll down while the mega menu is still open, the browser will keep scrolling them back up to the mega menu with it still being focused.

Eg.. it should be visible in Chrome.

https://codepen.io/wplit/pen/QWvGZXZ

Video showing the issue.

https://www.loom.com/share/243ee7ec48c946eb940f409880b8fb5a

wplit commented 3 years ago

I had thought it was the browser just focusing and scrolling back to where the focus was, but actually the scrollTop to top is in the code.

Line 304..

if (pageScrollPosition > openPanelTopPosition) { $('html')[0].scrollTop = openPanelTopPosition; }

I'll test it without this code in case I'm missing anything obvious (and it's there for a reason I can't see), but I don't see how scrolling the user constantly back up as they scroll is ideal UX?

kimisgold commented 2 years ago

Seconded, I'm having the same issue in my usage.