@@ -1132,7 +1132,7 @@ follow the following steps:
1132
1132
<h2 id=declarative>
1133
1133
Controlling spatial navigation through declarative means</h2>
1134
1134
1135
- <h3 id=container >
1135
+ <h3 id=css-property-spatialnavigationcontain >
1136
1136
Creating additional spatial navigation containers: the 'spatial-navigation-contain' property</h3>
1137
1137
1138
1138
<pre class='propdef'>
@@ -1250,7 +1250,7 @@ Note: the 'spatial-navigation-contain' property is <a>at-risk</a>.
1250
1250
1251
1251
</div>
1252
1252
1253
- <h3 id=container >
1253
+ <h3 id=css-property-spatialnavigationaction >
1254
1254
Defining the spatial navigation behavior : the 'spatial-navigation-action' property</h3>
1255
1255
1256
1256
<pre class='propdef'>
@@ -1273,10 +1273,7 @@ the proper spatial navigation behavior.
1273
1273
Else, the focus moves to the candidates in the viewport.
1274
1274
1275
1275
<dt> <dfn>focus</dfn>
1276
- <dd> If the element is a <a>scroll container</a> ,
1277
- then directional input moves the focus to the candidates(visible or not). The user cannot manually scroll the container.
1278
-
1279
- Else, the focus moves to the candidates in the viewport.
1276
+ <dd> The directional input moves the focus to the candidates(visible or not). The user cannot manually scroll the container.
1280
1277
1281
1278
NOTE: If the 'focus' value is given to 'spatial-navigation-action' , 'navnotarget' event occurs
1282
1279
when there isn’t any visible candidate in the spatial navigation container no matter what it can be scrolled more or not.
@@ -1294,7 +1291,7 @@ Pressing the down arrow key moves the focus directly to it without scrolling man
1294
1291
1295
1292
<figure>
1296
1293
<img alt="" src="images/spatnav-action.png" style="width: 500px;"/>
1297
- <figcaption> Moving focus to the element without manually scrolling</figcaption>
1294
+ <figcaption> Moving focus to "Box 3" from "Box 2" without manually scrolling</figcaption>
1298
1295
</figure>
1299
1296
1300
1297
<pre><code highlight=markup>
@@ -1323,21 +1320,6 @@ Pressing the down arrow key moves the focus directly to it without scrolling man
1323
1320
background-color: red;
1324
1321
}
1325
1322
</code></pre>
1326
- <pre><code highlight=js>
1327
- let container = document.getElementById('feed' );
1328
- let currentTarget = document.activeElement;
1329
-
1330
- container.addEventListener('navnotarget' , function(e) {
1331
- e.preventDefault();
1332
-
1333
- let nextFocus = currentTarget.spatialNavigationSearch({
1334
- dir: e.dir,
1335
- this.focusableAreas({'mode' : 'all' })
1336
- });
1337
-
1338
- nextFocus.focus();
1339
- });
1340
- </code></pre>
1341
1323
1342
1324
</div>
1343
1325
0 commit comments