Tap/click events should be mobile-aware

[blackfalcon]

Is your feature request related to a problem? Please describe.

These events need to be mobile-aware. When testing this on mobile, the first tap is invoking the hover event. There is a flash of a UI change just before the page scrolls to the top.

Originally posted by @blackfalcon in #8 (comment)

This issue is reproducible when a user holds a tap for too long. It's agreed that this has a low probability of causing issues, but it should be known that this issue is 100% reproduce able when a user holds their finger on the button for longer than a second, the hover event will be fired and the scroll-to-top feature will not fire. The user will then have to release and tap again.

Describe the solution you'd like

We should code a solution that ignores the hover event when it is known that the UI is on a mobile device.

Exit criteria

This issue can be closed once the described behavior does not illustrate the hover event and returns the user to the top of the page.

[Patrick-Daly-AA]

More investigation into reproduction is needed.

[irma-kurnia-alaska]

Hi team.
If I may, I have done some research for this issue.

For this issue I added a 'touchend' listener:

this.addEventListener('touchend', () => { this.onTriggerClick(); });

I have also tested this code that it only runs on mobile devices and has no effect on desktop. This code also doesn't interfere with running the 'click' function or calling the function multiple times.

I am attaching a video I tried on my mobile device. I inserted an alert in the click function, this aims to determine whether the onTriggerClick() function called the 'click' event is called or not when the 'touchend' listener is executed. After I tried it, when I reproduced the issue above by holding the backToTop button for a long time and releasing it, the function worked well and the onTriggerClick() function was not executed twice, and vice versa.

Screenrecorder-2023-09-01-16-22-31-664_0_COMPRESSED.mp4

Thank you.

[blackfalcon]

Thanks, @irma-kurnia-alaska that's a great solution. We did something exactly like this WAY back in the day for our button element before we discovered the @media (hover: hover) {} CSS media query.

• AlaskaAirlines/auro-button@89a81bb#diff-e8eaf3a2ceca10192e91462c9df2fcf34bc5b7e78c00fc2c85ebb31c309420b0R18

[irma-kurnia-alaska]

HI @blackfalcon,

As per my research the fixing issue above should I to commit and PR this code? Thank you.