Merge pull request w3c#13 from frivoal/api-note

Add note about the APIs

Author: Jihye Hong

index.bs

@@ -627,6 +627,10 @@ before going up the tree to search in the nearest ancestor <a>spatnav container<
 <h2 id="js-api">
 Javascript API</h2>
 
+Note: These APIs are designed to be low level constructs following the processing model closely.
+As such, they should be easy to use by authors who want to extend or override the way spatial navigation works.
+More user-friendly and higher level APIs may be considered based on use cases.
+
 <pre class=idl>
 enum SequentialNavigationDirection {
     "forward",

index.html

@@ -1178,6 +1178,7 @@
 </style>
   <meta content="Bikeshed version 166744eb86a34dbc5493268ea410dc65275aa964" name="generator">
   <link href="http://wicg.github.io/spatial-navigation" rel="canonical">
+  <meta content="1ca2c48113d259dab3fd4bad8029e8bf38fb44ac" name="document-revision">
 <style>
 code.key {
     border: solid 1px;
@@ -1623,8 +1624,8 @@ <h2 class="non-normative heading settled" data-level="3" id="overview"><span cla
 such as using calling the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/interaction.html#dom-focus" id="ref-for-dom-focus">focus()</a></code> method on a different
 element of the author’s choosing.</p>
    <p>See <a href="#events-nav-type">§5.2 Navigation Event Types</a> for details about the various events.</p>
-   <div class="example" id="example-aa5bea16">
-    <a class="self-link" href="#example-aa5bea16"></a> In this example, a series of elements are arranged in the <a data-link-type="dfn" href="#spatial-navigation-focus-container" id="ref-for-spatial-navigation-focus-container⑤">spatial navigation focus container</a>.
+   <div class="example" id="example-75e2aca1">
+    <a class="self-link" href="#example-75e2aca1"></a> In this example, a series of elements are arranged in the <a data-link-type="dfn" href="#spatial-navigation-focus-container" id="ref-for-spatial-navigation-focus-container⑤">spatial navigation focus container</a>.
     This example allows the arrow keys to move focus among elements within a scrollable <a data-link-type="dfn" href="#spatial-navigation-focus-container" id="ref-for-spatial-navigation-focus-container⑥">spatial navigation focus container</a> using the <a class="property" data-link-type="propdesc" href="#propdef-spatial-navigation" id="ref-for-propdef-spatial-navigation">spatial-navigation</a> property. 
     <figure>
       <img alt="An image about enabling spatnav using active value" src="images/scroll-spatnav1.png" style="width: 200px;"> <img alt="An image about enabling spatnav using active value" src="images/scroll-spatnav2.png" style="width: 200px;"> 
@@ -1938,8 +1939,8 @@ <h4 class="non-normative heading settled" data-level="5.2.3" id="event-type-navn
         <dd>The direction of the navigation as requested by the user 
        </dl>
    </table>
-   <div class="example" id="example-8c902f79">
-    <a class="self-link" href="#example-8c902f79"></a> This example shows the <a href="https://www.w3.org/TR/uievents/#event-order">UI Events §event-order</a> when pressing the <code class="key">ArrowDown</code> key in the situation like the following figure. 
+   <div class="example" id="example-dbcf5285">
+    <a class="self-link" href="#example-dbcf5285"></a> This example shows the <a href="https://www.w3.org/TR/uievents/#event-order">UI Events §event-order</a> when pressing the <code class="key">ArrowDown</code> key in the situation like the following figure. 
     <figure>
       <img alt="An image about navnotarget" src="images/navnotarget-example.png" style="width: 200px;"> 
      <figcaption>Moving focus when there isn’t any candidate in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-overflow-3/#scroll-container" id="ref-for-scroll-container③">scroll container</a>.</figcaption>
@@ -2028,6 +2029,9 @@ <h4 class="non-normative heading settled" data-level="5.2.3" id="event-type-navn
 </pre>
    </div>
    <h2 class="heading settled" data-level="6" id="js-api"><span class="secno">6. </span><span class="content"> Javascript API</span><a class="self-link" href="#js-api"></a></h2>
+   <p class="note" role="note"><span>Note:</span> These APIs are designed to be low level constructs following the processing model closely.
+As such, they should be easy to use by authors who want to extend or override the way spatial navigation works.
+More user-friendly and higher level APIs may be considered based on use cases.</p>
 <pre class="idl highlight def"><span class="kt">enum</span> <dfn class="nv dfn-paneled idl-code" data-dfn-type="enum" data-export="" id="enumdef-sequentialnavigationdirection"><code>SequentialNavigationDirection</code></dfn> {
     <dfn class="s idl-code" data-dfn-for="SequentialNavigationDirection" data-dfn-type="enum-value" data-export="" data-lt="&quot;forward&quot;|forward" id="dom-sequentialnavigationdirection-forward"><code>"forward"</code><a class="self-link" href="#dom-sequentialnavigationdirection-forward"></a></dfn>,
     <dfn class="s idl-code" data-dfn-for="SequentialNavigationDirection" data-dfn-type="enum-value" data-export="" data-lt="&quot;backward&quot;|backward" id="dom-sequentialnavigationdirection-backward"><code>"backward"</code><a class="self-link" href="#dom-sequentialnavigationdirection-backward"></a></dfn>