Semi-accessible Minimap; multiple drag zones
- Drag-and-drop the shapes around the large canvas. Keyboard shortcut: none.
- Move around the large canvas by drag-dropping the red frame in the minimap. Keyboard shortcut: arrow keys.
- Drag-drop the minimap to expose areas beneath it. Keyboard shortcut: shift + arrow keys.
- Resize the display canvas by dragging its bottom-right corner. Keyboard shortcut: none.
To note: Javascript is not running in this browser environment. Our apologies, but this demo has not yet been updated to support progressive enhancement.
Test purpose
- See the instructions given above the <canvas> element; check that the demo works correctly using the mouse
- Check also that the keyboard instructions also work as expected
- When the canvas is resized, the minimap should move to the top-right corner of the canvas, and its dimensions should reflect the canvas dimensions
- When dragging a wheel, its movement should be reflected in real time in the minimap
Touch test: not required
Annotated code