search

NickDJM / accessible-menu

A JavaScript library to help you generate WAI-ARIA accessible menus in the DOM.
ISC License
38 stars 8 forks source link

Bug: Hoverable menus do not work as expected on desktops with touch support #161

Closed NickDJM closed 1 year ago

NickDJM commented 2 years ago

Summary

When you have a menu set to allow hover (either on or dynamic) and you are interacting with it on a desktop using a touch screen (such as a laptop's touch screen) the menu's open/close immediately on first touch and then work as expected.

Steps to reproduce

  1. Set up a menu using the full menu provided in the test files.
  2. Enable hover on the menu
  3. Open with a desktop browser that has a touch compatibility (ChromeOS tablet or Laptop with touch screen for instance)
  4. Attempt to open dropdowns

You will see the dropdown opens and closes immediately. Touching it again opens the menu properly.

Expected Behaviour

Tapping the dropdown should just open the menu, it shouldn't require a double touch.

Screenshots

accessible-menu-toggle-issue

Additional context

Tested on a Pixel Slate and Dell XPS 15 (ubuntu)

NickDJM commented 2 years ago

Note: while the screen shot shows a mobile view on desktop, it happens in desktop view as well- it's just easier to show the problem on mobile because there's less clutter.

NickDJM commented 2 years ago

I believe this has to do with click and hover interacting with each other. When I comment out the toggle.toggle() trigger in the click event, hover works as expected.

NickDJM commented 2 years ago

This may be a bigger problem than I first assumed. We'll need a way to track if a mousenter and then pointerenter as possibly the same event.

I'll need more time to look into if that is possible/how much time it will take.

mandrasch commented 2 years ago

Just as side note, I guess this is not helping in this case: There is a CSS Media Query for "whether the user’s primary pointing device is capable of hovering" https://css-irl.info/detecting-hover-capable-devices/

Came across this recently for menus on big tablets or touch laptop screens in cases where the desktop menu is still shown due to screen size. There is no way to access the hover menus because the navigation link is directly triggered and the next page is loading, e.g. on https://www.wienerlinien.at/ wiener_linien_a11y (Surface Pro in landscape mode in Chrome Devtools)

NickDJM commented 2 years ago

@mandrasch Yeah there's an isPrimary property on events when they trigger, which I definitely thought would solve the issue- however I noticed that it's not so much a problem of checking for the primary event as much as it is that when I touch the screen both a click and a touch pointer event fire.

I have not tested other OS's or devices yet, mind you. That's my next step. If its an OS problem that will at least help narrow down the solutions.

All the above being said, I like your suggestion of just detecting touch and not worrying about hover at all. That may be the best solution overall (especially since I personally never use the hover feature unless specifically requested).

mandrasch commented 2 years ago

:+1: Much success with the next steps! (Happy to help in terms of testing)

btw: I found your repo because I looked for an accessible menu solution which also implements "open on hover/mouseenter", because some clients requested this specifically (and bootstrap has made this intentional design that dropdowns only work with click, as you already know I guess ;-)).

Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not by hovering; this is an intentional design decision. https://getbootstrap.com/docs/5.0/components/dropdowns/#overview

NickDJM commented 2 years ago

@mandrasch good to know that's why you found this! Perhaps I'll add that to the tags for others to search for as well!

Yeah hoverabilitiy of menus definitely is a trend that's going away (at least in the dev community). Still something that most clients want though- which is why I attempt to support it as best I can.

NickDJM commented 2 years ago

A note for this issue: I tested this out on a Chromebook and it actually doesn't happen. It is possible this is just an Ubuntu issue with how the OS supports touch screens.

I'll need to test with Windows and iOS (I think iPads support mice now, but I'm actually not sure).

NickDJM commented 1 year ago

Tested on iPadOS with a mouse connected and Windows 10 with a touch screen (same Dell XPS15). This problem does not occur. This might be the way that either Ubuntu handles touch screens, or how Dell-specific drivers for Ubuntu support the touch screen.

At this point I don't actually think there's much we can do for this given it seems to either be a driver or OS-level thing.

Going to close.