Design consistent UI interface for keyboard+mouse and touch devices

[brprice]

We should come up with some system of input controls (click, right-click, keypresses, hover, dragging etc) for our webapp to use, bearing in mind that it should work smoothly for both traditional desktops and also mobile devices. It may be that we want different controls on different devices (e.g. right-click on an actual mouse is an easy gesture, but does not exist as such on touchscreens), though it would be nice if the correspondence was obvious.

There are also potential accessibility concerns here. For example, small targets, swift double-click-ing...

Currently we have the "interactive tree" story in our storybook #167 (which is intended for visualisation during development and has not worried about touch devices). It uses onclick to grow a tree and oncontextmenu ("right-click") to prune. This is nice with a traditional mouse; it works on android (long-press triggers pruning); but does not work on iPad (I cannot trigger pruning; I don't know how easy it would be to "fix" - I have not investigated much). Whilst ok for development visualisation, it is clearly not acceptable in a released product!

The input actions I think we will certainly want are (in terms of traditional desktop input):

• "click" to select a node or press a button
• "type" to fill in free-form text boxes
• "click+drag" to pan a viewport

I don't know whether we will want anything like the following:

• "scroll wheel" to zoom
• "right-click"/"middle-click"/"double-click" to trigger additional actions (perhaps a shortcut for "do the obvious thing to this node")
• "hover" to pop up a tooltip / info box

Of course, there may be other things I have not thought of here!

[brprice]

There are clearly a few strands to this issue:

• What "ideal" interface do we want
• How feasible are things to implement
• What is standard practice (even if it is not our ideal, it may be better to be consistent)

I don't think we have a clear picture of any of these questions currently, so this design effort is likely to be a long-running evolutionary effort.

[dhess]

This has come up again while designing the session list. I’ll elaborate later.

[dhess]

It seems clear that Apple don’t want developers using long press for apps in mobile Safari:

• https://github.com/Leaflet/Leaflet/issues/6865
• https://github.com/facebook/react/issues/21812
• https://github.com/mdn/browser-compat-data/issues/6376
• https://bugs.webkit.org/show_bug.cgi?id=213953

The latter link, in particular, is on Apple's own bug tracker, was filed in July 2020, and is still marked "NEW" with nobody assigned to it.

Apple’s own web apps don’t even support long press. If you use iCloud Drive on icloud.com, the only way to perform operations like delete & rename on files is to press the selection mode button, select one or more files, and then press the corresponding action icon (trash can, etc.).

This is awful! However, I think it would be unwise to try to work around it. That usually doesn’t end well with Apple products, in my experience.

Therefore, I think we need to ignore long press as an interaction mechanism in Hackworth Codes. This probably means we’ll need more buttons and other explicit/visible UI elements. The downside is that our UI will be a bit more cluttered than I would prefer, but the good news is that features will be more discoverable.