Sightline supports standard keyboard navigation for accessibility.
Global keyboard shortcuts are planned for a future release. Currently, only standard browser and component-level keyboard interactions are supported.
Action Key Navigate between elements Tab / Shift+TabActivate buttons/links Enter or SpaceClose modals/dropdowns EscapeNavigate dropdown options ↑ / ↓
Action Key Pan map ← → ↑ ↓ (when map is focused)Zoom in/out + / - (when map is focused)
These are native Mapbox GL keyboard controls that work when the map canvas has focus.
The following shortcuts are planned for future implementation and are not yet functional.
Action Windows/Linux macOS Pan left ←←Pan right →→Pan up ↑↑Pan down ↓↓Zoom in + or =+ or =Zoom out --Reset view Homefn + ←Fit all incidents FF
Action Windows/Linux macOS Play/Pause SpaceSpaceStep forward →→Step backward ←←Jump to start Homefn + ←Jump to end Endfn + →Toggle timeline TT
Action Windows/Linux macOS Select next incident TabTabSelect previous incident Shift + TabShift + TabOpen selected incident EnterEnterClose popup/modal EscapeEscapeFocus search / or Ctrl + K/ or ⌘ + K
Action Windows/Linux macOS Toggle filter sidebar [[Toggle incident feed ]]Toggle stats panel SSToggle fullscreen Ctrl + Shift + F⌘ + Shift + F
Action Windows/Linux macOS Toggle dark mode DDSwitch to light mode Shift + LShift + LSwitch to dark mode Shift + DShift + DUse system theme Shift + SShift + S
Action Windows/Linux macOS Clear all filters Ctrl + Shift + C⌘ + Shift + CApply quick filter: Radar 11Apply quick filter: Multiple Witnesses 22Apply quick filter: Physical Evidence 33Apply quick filter: Video 44Apply quick filter: Military 55
Action Windows/Linux macOS Refresh data Ctrl + R⌘ + RExport visible data Ctrl + E⌘ + E
Action Windows/Linux macOS Skip to main content Tab (first focus)Tab (first focus)Announce incident count Ctrl + I⌘ + I
Enable or disable keyboard shortcuts in your configuration:
const config : Partial < MapConfig > = { features : { keyboardShortcuts : true , // Enable all shortcuts }, }; Add custom keyboard shortcuts in your application:
src/hooks/use-keyboard-shortcuts.ts import { useEffect } from 'react' ; export function useKeyboardShortcuts () { useEffect (() => { const handleKeyDown = ( event : KeyboardEvent ) => { // Ignore if user is typing in an input if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement ) { return ; } switch (event.key) { case 'f' : // Custom: Focus on first incident document. querySelector < HTMLElement >( '[data-testid="incident-marker"]' )?. focus (); break ; case '?' : // Custom: Show help event. preventDefault (); showHelpDialog (); break ; } }; window. addEventListener ( 'keydown' , handleKeyDown); return () => window. removeEventListener ( 'keydown' , handleKeyDown); }, []); } Some shortcuts may conflict with browser or OS shortcuts. Sightline shortcuts only activate when:
Focus is within the application
Not typing in a text input
No modifier keys are held (unless specified)
If a shortcut isn't working, check if your browser or OS is intercepting it.
For quick reference, here's a compact list:
Navigation: ← → ↑ ↓ Pan +/- Zoom F Fit all Timeline: Space Play ← → Step T Toggle Selection: Tab Next Enter Open Esc Close Panels: [ Filters ] Feed S Stats Theme: D Toggle dark mode Search: / or Ctrl+K (⌘K) Filters: Ctrl+Shift+C (⌘⇧C) Clear all 1-5 Quick filters