text: sequential focus navigation order

text: sequential focus navigation starting point

text: sequential navigation search algorithm

text: tabindex; url: #attr-tabindex

urlPrefix: rendering.html

type: dfn;

text: being rendered; url: #being-rendered

text: painting order; url: #painting-order

</pre>

<pre class=link-defaults>

spec:html; type:method; for:HTMLOrSVGElement; text:focus()

spec:html; type:method; for:HTMLOrSVGOrMathMLElement; text:focus()

spec:dom; type:dfn; for:/; text:document

</pre>

<style>

code.key {

These enable the author to prevent the upcoming action

(by calling {{preventDefault()}}),

and if desired to provide an alternate action,

such as using the {{HTMLOrSVGElement/focus()}} method on a different

such as using the {{focus()}} method on a different

element of the author's choosing.

To help the author write such alternate actions,

: <dfn method for=Element lt="getSpatialNavigationContainer()">getSpatialNavigationContainer()</dfn>

::

1. Return the nearest ancestor of the element that is a <a>spatial navigation container</a>,

or the <a>document</a> if the nearest <a>spatial navigation container</a> is the viewport.

or the [=/document=] if the nearest <a>spatial navigation container</a> is the viewport.

Note: If the element is a <a>spatial navigation container</a>, {{getSpatialNavigationContainer()}} also returns

the nearest <a>spatial navigation container</a>, not the element itself.

the {{NavigationEvent/relatedTarget}} is the element which is about to receive focus.

If <a>navigation-override</a> is disabled in the [=node document=] of <var>eventTarget</var> for

the <a spec=html for="/">origin</a> of the [=active document=] of the [=top-level browsing context=], this event won't be dispatched.

the [=/origin=] of the [=active document=] of the [=top-level browsing context=], this event won't be dispatched.

<div class='example'>

This example shows the [=event order=] when pressing the <code class=key>ArrowRight</code>

to move the focus to a [=scroll container=] and to scroll it,

but not to move the focus to its descendants.

However, if the focus is moved to a descendant by some other mean

(such as pressing the <span class=key>Tab</span> key or using the <{{HTMLOrSVGElement/focus()}}> method)

(such as pressing the <span class=key>Tab</span> key or using the <{{focus()}}> method)

spatial navigation can be used to move the focus to other focusable descendants.

Note: The ''spatial-navigation-ation/scroll'' value is <a>at-risk</a>.