framework7 icon indicating copy to clipboard operation
framework7 copied to clipboard

Use <button> instead of <a> in FAB buttons

Open brian-g opened this issue 1 year ago • 0 comments

  • Framework7 version: 5.7.12
  • Platform and Target: iOS 16, Capacitor 3
  • Live Link or CodeSandbox: https://framework7.io/kitchen-sink/core/?theme=ios&mode=light&example-preview=true#!/fab/

Describe the bug

Apple's iOS Safari browser, even when running in Capacitor, will try to show a link preview when the user does a long press. It refuses to run the typical click or touch events as a result. This can frustrate users of the application. In fact the we've seen users who get into a horrible feedback loop where they try to press harder and longer to make the button work.

Also, semantically, a hyperlink is something that links to another page while a button performs an action. In this case, I think the the correct semantic element to use is a

To Reproduce

Steps to reproduce the behavior:

  1. Go to https://framework7.io/kitchen-sink/core/?theme=ios&mode=light&example-preview=true#!/fab/ using an iPhone or other iOS device.
  2. Press and hold the top left button (or any of the FAB buttons) for 1-2 seconds. Really, I should be able to hold a button for 30s and it should still respond.

Expected behavior

I expect the action associated with the button to trigger. In the case of the demo, the FAB should display sub-actions.

Actual Behavior

Zilch

Screenshots

If applicable, add screenshots to help explain your problem.

Additional context

Add any other context about the problem here.

brian-g avatar Apr 20 '23 20:04 brian-g