|
3 | 3 |
|
4 | 4 | To support the spatial navigation in the Web, we need to develop several standard APIs. The APIs seem to be discussed with the suitable working groups in W3C (mainly in CSS WG). In this explainer page, the latest status of the spatial navigation would be summarized so that the overall progress could be tracked at a glance. |
5 | 5 |
|
6 | | -## API for enabling the spatial navigation mode |
| 6 | +## Enabling the spatial navigation mode |
7 | 7 | It makes author set the spatial navigation mode. The following APIs could be considered for the possibilities to support the feature: |
8 | 8 |
|
9 | 9 | #### * CSS property |
10 | 10 | - If the proposed property below is applied to the element, the DOM subtree rooted at the element can be managed by the spatial navigation. |
11 | 11 | ```css |
12 | 12 | // CSS property |
13 | | -arrow-key-behavior: auto | navigation | scroll |
| 13 | +arrow-key-behavior: auto | focus-nav |
14 | 14 | ``` |
15 | 15 | - auto: The arrow keys work as the UA-defined manner. |
16 | | -- navigation: The arrow keys work for the spatial navigation. |
17 | | -- scroll: The arrow keys work for scrolling. |
| 16 | +- focus-nav: The arrow keys work for the spatial navigation. |
18 | 17 |
|
19 | | -#### * DOM method (JS) |
20 | | -```javascript |
21 | | -// JavaScript |
22 | | -setSpatialNavigationEnabled(boolean) |
| 18 | +## Establishing focus navigation containers |
| 19 | +- If the proposed property below is applied to the element, the local logical grouping is created with the DOM subtree rooted at the element. |
| 20 | +```css |
| 21 | +// CSS property |
| 22 | +spatnav-container: auto | create |
23 | 23 | ``` |
24 | | -- If the parameter is `true`, the spatial navigation mode is enabled. |
25 | | -- Otherwise, the arrow keys work as the UA-defined manner. |
| 24 | +- auto: If the element is either the document element of a browsing context’s document (not limited to the top-level browsing context) or a scroll container then it establishes a spatial navigation focus container, otherwise it does not. |
| 25 | +- create: The element establishes a spatial navigation focus container. |
26 | 26 |
|
27 | 27 | ## Overriding methods on top of the heuristic algorithm |
28 | 28 | Developers can customize the spatial navigation with CSS properties by overriding the heuristic spatial navigation. |
|
0 commit comments