optimize zoom and pan controls for various input types #40
Conversation
✅ Deploy Preview for prefect-graphs ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
| <div class="flow-run-timeline"> | ||
| <div class="flow-run-timeline__zoom-controls"> | ||
| <p-button icon="MinusIcon" inset rounded aria-label="Zoom out" @click="zoomOut" /> | ||
| <p-button icon="PlusIcon" inset rounded aria-label="Zoom in" @click="zoomIn" /> | ||
| </div> | ||
| <div ref="stage" class="flow-run-timeline__canvas-container" /> | ||
| </div> |
There was a problem hiding this comment.
Aren't discreet controls necessary for keyboard-only users? Should we maintain these in those cases even while we expand touchscreen controls?
There was a problem hiding this comment.
I was actually just creating a ticket to work through accessibility for this graph.
I think for assistive tech users or screen reader users, I'd actually surface a way to focus the graph and use arrows and +/- keys or something similar. For now, there will be no keyboard only pan controls, so zoom without pan really wouldn't be helpful anyway. One could argue they're a bit distracting up there as well, at least in their current size. So if they're not helping and possibly hurting, I still think they can go for now. Added to that ticket to think through how to enable keyboard only interaction though.
Resolves #38
Trackpad: Click and drag to pan, pinch or two finger scroll to zoom
Mouse: Click and drag to pan, scroll to zoom
Touch: Drag to pan, pinch to zoom