Written: 2019-08-29, Updated: 2019-08-29
Spatial-navigation-chrome-extension enables spatial navigation on any websites using spatial-navigation-polyfill
Spatial Navigation provides a processing model and standards APIs for directional(top/left/bottom/right) focus navigation using arrow keys. (Learn More)
Note: This tool is based on spatial-navigation-polyfill which was forked from the develop branch on August 2019. It means the polyfill includes a few non-standards features.
1. Spatial Navigation
- Enable Spatial Navigation
- Show Spatial Navigation Info in DevTool (F12 / ⌥ +⌘+I)
- Change settings in popup menu
- On / Off Spatial Navigation
- Change Key mode (ARROW / SHIFTARROW)
- Choose whether or not to show candidates in 4 directions
- Focusable Element : Show number of all focusable element inside whole page : Use checkbox, you can see (1) whole focusable element inside web page (2) candidate elements of spatial navigation from current focused element to all and each 4 directions
- Is it container? : Whether current element is container or not
- Next Spatnav Search : Show optimal candidate of 4 directions from current element (in specific container)
- Next Target : Show optimal candidate of 4 directions from current element (show undefined if scrollable)
- Focusable Areas : Show focusable child elements from current element
- Next Candidates : Show all candidates list of 4 directions from current element (show current element if scrollable)
- List of Containers : List of containers from parent of current element to topmost container
How to install
- Clone the repository
git clone https://github.com/WICG/spatial-navigation.git.
- In chrome, navigate to
- Turn on the Developer mode.
- Click LOAD UNPACKED and select the
- Click the toolbar icon
- Click the SpatialNavigation tab of developer's tool(F12 / ⌥ +⌘+I).
- You can see the information of Spatial Navigation on the tab. Also, the information is changed as the focus moves.
We would like to express appreciation to below students who initially developed this extension.