Skip to content

[css-nav-1] Drop navbeforescroll event #3729

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Mar 26, 2019
Merged

[css-nav-1] Drop navbeforescroll event #3729

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
aef3129
Drop the navbeforescroll event
Mar 12, 2019
9753ac3
Remove the description of navbeforescroll in the processing model
Mar 13, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
154 changes: 6 additions & 148 deletions css-nav-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -510,29 +510,6 @@ this only searches through the visible focusable areas of the nearest
and the result will be <code>null</code>.</strong>
</div>


<div class=example id=focus-only>
The following code changes the behavior of spatial navigation
from scrolling when there is no focusable element visible,
to jumping to focusable elements even when they are not visible.

<pre><code highlight=javascript>
document.addEventListener("navbeforescroll", function(e) {
var container = e.relatedTarget;
var areas = container.focusableAreas({ mode: "all" });

if (areas.length === 0) { return; }

e.preventDefault();
var t = e.target.spatialNavigationSearch({
dir: e.dir,
candidates: areas
});
t.focus();
});
</code></pre>
</div>

<div class=example id=delegation>
The following code changes the behavior of spatial navigation
so that when a scroll container would get focused,
Expand Down Expand Up @@ -714,113 +691,6 @@ The <a event>navbeforefocus</a> event occurs before spatial navigation changes t
</table>
</div>

<h4 id="event-type-navbeforescroll" class="non-normative">
<dfn event for=NavigationEvent>navbeforescroll</dfn></h4>

The <a event>navbeforescroll</a> event occurs before spatial navigation triggers scrolling.
<table class="def">
<tbody>
<tr>
<th>Type
<td><strong><code>navbeforescroll</code></strong>
<tr>
<th>Interface
<td>{{NavigationEvent}}
<tr>
<th>Bubbles
<td>Yes
<tr>
<th>Cancelable
<td>Yes
<tr>
<th>Attributes of the event
<td><dl>
<dt>{{NavigationEvent}}.{{NavigationEvent/relatedTarget}}
<dd>The element that will be scrolled if the event is not canceled

<dt>{{NavigationEvent}}.{{NavigationEvent/dir}}
<dd>The direction of the navigation as requested by the user
</dl>
</tbody>
</table>

<div class='example'>
This example shows the [[UI-EVENTS#event-order]] when pressing the <code class=key>ArrowDown</code>
key in the situation like the following figure.
For the sake of keeping the description simple,
this example assumes a UA where spatial navigation is triggered using arrow keys.

<figure>
<img alt="An image about navbeforescroll" src="images/navbeforescroll-example-1.png" style="width: 200px;"/>
<figcaption>"Box 2" gains the focus and there isn't any candidate in a downward direction
in the <a>scrollport</a>.</figcaption>
</figure>

<table class="complex data">
<thead>
<tr>
<th>
<th>Event type
<th>Event target
<th><code>relatedTarget</code>
<th>Notes
</thead>
<tbody>
<tr>
<td>1
<td>keydown
<td><code>#box2</code>
<td>N/A
<td>MUST be a key which can activate spatial navigation,
such as the arrow keys,
otherwise spatial navigation is not triggered.
<tr>
<td>2
<td>navbeforescroll
<td><code>#box2</code>
<td><code>#scrollContainer</code>
<td>Sent if <code>#scrollContainer</code> doesn't contain any candidate in the <a>scrollport</a>,
otherwise this would not be generated.
</tbody>
</table>

After <a event>navbeforescroll</a> is fired, pressing the <code class=key>ArrowDown</code> key triggers scrolling
down the scrollbar like in the figure below:

<figure>
<img alt="An image of the result about navnotarget" src="images/navbeforescroll-example-2.png" style="width: 200px;"/>
<figcaption>The result of moving focus when there isn't any candidate in the <a>scrollport</a>.</figcaption>
</figure>

This example uses the markup as follows:
<pre class="lang-css">
#scrollContainer {
width: 700px;
height: 700px;
overflow-x: hidden;
overflow-y: auto;
}

.item {
width: 150px;
height: 110px;
background-color: blue;
}

.item:focus {
background-color: red;
}
</pre>

<pre class="lang-html">
&lt;div id="scrollContainer">
&lt;div id="box1" class="item" tabindex="0">Box 1&lt;/div>
&lt;div id="box2" class="item" tabindex="0">Box 2&lt;/div>
&lt;div id="box3" class="item" tabindex="0">Box 3&lt;/div>
&lt;/div>
</pre>
</div>

<h4 id="event-type-navnotarget" class="non-normative">
<dfn event for=NavigationEvent>navnotarget</dfn></h4>

Expand Down Expand Up @@ -1057,7 +927,7 @@ To run the <dfn>spatial navigation steps</dfn> in <var>direction</var>, do the f
1. Let <var>searchOrigin</var> be the <a>DOM anchor</a> of the <a>currently focused area of a top-level browsing context</a>.
2. If the <a>spatial navigation starting point</a> is not <code>null</code>
and it is inside <var>searchOrigin</var>
then set <var>searchOrigin</var> to the <a>spatial navigation starting point</a>
then set <var>searchOrigin</var> to the <a>spatial navigation starting point</a>.
3.
* If <var>searchOrigin</var> is an <a>node</a>,
let <var>eventTarget</var> be <var>searchOrigin</var>
Expand All @@ -1079,27 +949,15 @@ To run the <dfn>spatial navigation steps</dfn> in <var>direction</var>, do the f
and with it's <code>bubbles</code> and <code>cancelable</code> attributes set to <code>true</code>,
and return if the result is <code>false</code></span>
3. Run the <a>focusing steps</a> for <var>bestCandidate</var> and return
* Else if <var>eventTarget</var> <a>can be manually scrolled</a>:
1. If <a>navigation-override</a> <a>is enabled</a> 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=], then
<span class=api><a>fire an event</a> named <a event>navbeforescroll</a> at <var>eventTarget</var> using {{NavigationEvent}}
with its {{NavigationEvent/dir}} set to <var>direction</var>
and {{NavigationEvent/relatedTarget}} set to <var>eventTarget</var>
and with it's <code>bubbles</code> and <code>cancelable</code> attributes set to <code>true</code>,
and return if the result is <code>false</code></span>
2. <a>Directionally scroll the element</a> <var>eventTarget</var> in <var>direction</var> and return.
* Else, fallback to the next step
* Else if <var>eventTarget</var> <a>can be manually scrolled</a>, <a>directionally scroll the element</a>
<var>eventTarget</var> in <var>direction</var> and return.
* Else, fallback to the next step.
6. Let <var>container</var> be the nearest ancestor of <var>eventTarget</var> that is a <a>spatial navigation container</a>.
7. <i>Loop</i>: Let <var>candidates</var> be the result of <a>finding focusable areas</a>
within <var>container</var>, excluding <var>searchOrigin</var>
8. If <var>candidates</var> is empty:
* If <var>container</var> is a <a>scroll container</a> that <a>can be manually scrolled</a>:
1. If <a>navigation-override</a> <a>is enabled</a> 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=], then
<span class=api><a>fire an event</a> named <a event>navbeforescroll</a> at <var>eventTarget</var> using {{NavigationEvent}}
with its {{NavigationEvent/dir}} set to <var>direction</var>
and {{NavigationEvent/relatedTarget}} set to <var>container</var>
and with it's <code>bubbles</code> and <code>cancelable</code> attributes set to <code>true</code>,
and return if the result is <code>false</code></span>
2. <a>Directionally scroll the element</a> <var>container</var> in <var>direction</var> and return.
* If <var>container</var> is a <a>scroll container</a> that <a>can be manually scrolled</a>, <a>directionally scroll the element</a>
<var>container</var> in <var>direction</var> and return.
* Else,
1. If <a>navigation-override</a> <a>is enabled</a> 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=], then
<span class=api><a>fire an event</a> named <a event>navnotarget</a> at <var>eventTarget</var> using {{NavigationEvent}}
Expand Down