[css-ui] Move nav-* from l3 to l4

Resolution: https://logs.csswg.org/irc.w3.org/css/2017-08-03/#e844375

Author: frivoal

css-ui-4/Overview.bs

@@ -863,7 +863,118 @@ Omitted values are set to their initial values.
 
 <h4 id="nav-dir">Directional Focus Navigation: the 'nav-up', 'nav-right', 'nav-down', 'nav-left' properties</h4>
 
-	Issue: Add final level 3 content
+<pre class="propdef"> 
+Name: nav-up , nav-right , nav-down , nav-left 
+Value: auto | <<id>> [ current | root | <<target-name>> ]? 
+Initial: auto 
+Applies to: all enabled elements 
+Inherited: no 
+Percentages: N/A 
+Media: interactive 
+Computed value: as specified 
+</pre>
+
+<dl>
+<dt>auto</dt>
+<dd>The user agent automatically determines which element to navigate the focus to in response to directional navigational input.</dd>
+<dt><dfn noexport><<id>></dfn></dt>
+<dd><p>The <<id>> value is an ID selector [[SELECT]].
+In response to directional navigation input corresponding to the property,
+the focus is navigated to the first element in tree order matching the selector.
+
+If this refers to the currently focused element,
+the directional navigation input respective to the nav- property is ignored &mdash;
+there is no need to refocus the same element.
+
+If no element matches the selector,
+the user agent automatically determines which element to navigate the focus to.
+
+If the focus is navigated to an element
+that was not otherwise focusable,
+it becomes focusable
+only as the result of this directional navigation,
+and the <css>:focus</css> pseudo-class matches the element
+while it is focused as such.
+
+Note: there were other options under consideration for such "not otherwise focusable" elements, including focus to the next otherwise focusable element in the document tree (including descendants of such a not otherwise focusable element). Input on such other options is welcome and explicitly solicited, especially from implementation experiences and author experience using the directional navigation properties in their content.
+
+</dd>
+<dt><dfn noexport><<target-name>></dfn></dt>
+<dd>
+The &lt;target-name&gt; parameter indicates the target frame for the focus navigation.
+It is a <<string>> and it MUST NOT start with the underscore "_" character.
+Error handling: if it does start with an underscore, "_parent" navigates to the parent frame,
+"_root" is treated as ''root'',
+and other values navigate to a frame by that name if it exists.
+If the specified target frame does not exist,
+the parameter will be treated as the keyword ''current'',
+which means to simply use the frame that the element is in.
+The keyword ''root'' indicates that the user agent should target the full window.
+</dd>
+</dl>
+
+User agents for devices with directional navigation keys
+respond by navigating the focus according to four respective nav-* directional navigation properties
+(nav-up, nav-right, nav-down, nav-left).
+This specification does not define which keys of a device are directional navigational keys.
+
+Note: Typical personal computers have keyboards with four arrow keys.
+One possible implementation would be to use those four arrow keys for directional navigation.
+For accessibility and user convenience,
+user agents should allow configuration of which keys on a keyboard are used for directional navigation.
+
+<div class="example">
+<h5 id=example-positioned-buttons>Example: positioned buttons</h5>
+
+Here is an example of buttons positioned in a diamond shape
+whose directional focus navigation is set in such a way
+to navigate the focus clockwise (or counter-clockwise) around the diamond shape
+when the user chooses to navigate directionally.
+<pre><code class="lang-css">
+button { position:absolute }
+
+button#b1 {
+	top:0; left:50%;
+	nav-right:#b2; nav-left:#b4;
+	nav-down:#b2; nav-up:#b4;
+}
+
+button#b2 {
+	top:50%; left:100%;
+	nav-right:#b3; nav-left:#b1;
+	nav-down:#b3; nav-up:#b1;
+}
+
+button#b3 {
+	top:100%; left:50%;
+	nav-right:#b4; nav-left:#b2;
+	nav-down:#b4; nav-up:#b2;
+}
+
+button#b4 {
+	top:50%; left:0;
+	nav-right:#b1; nav-left:#b3;
+	nav-down:#b1; nav-up:#b3;
+}
+</code></pre>
+
+Whatever markup sequence the buttons may have
+(which is not specified in this example)
+is irrelevant in this case because they are positioned, and yet,
+it is still important to ensure focus navigation behaviors which relate reasonably to the specified layout.
+</div>
+
+<div class="example">
+<h5 id=example-moving-focus-to-inside-a-frame>Example: moving focus to inside a frame</h5>
+
+Moving the focus to an element in a specific frame requires both the element's id and the frame's name.
+
+This example shows how to make navigating left from the button with id "foo" move the focus to the element with id "bar" within the frame named "sidebar".
+
+<pre><code class="lang-css">
+button#foo { nav-left: #bar "sidebar"; }
+</code></pre>
+</div>
 
 <h4 id="input-method-editor">Obsolete: the ime-mode property</h4>
 
@@ -1379,6 +1490,7 @@ This appendix describes functional changes from the
 	    replaced elements representing images or videos,
 	    and to iframes.
 	<li>The string values and dual values of the text-overflow property were moved to this specification from level 3.
+	<li>Move directional focus navigation properties from level 3 to level 4
 </ul>
 
 <h2 class="no-num" id="security-privacy-considerations">Appendix C. Considerations for Security and Privacy</h2>

css-ui/Overview.bs

@@ -32,7 +32,6 @@ Link Defaults: css-writing-modes-3 (dfn) end
 Ignored Terms: outline-top
 Ignored Terms: outline-left
 Ignored Terms: ime-mode
-At Risk: Directional focus navigation: the 'nav-up', 'nav-right', 'nav-down', 'nav-left' properties
 Can I Use URL: https://drafts.csswg.org/css-ui-3/
 Can I Use URL: http://drafts.csswg.org/css-ui-3/
 Can I Use URL: https://drafts.csswg.org/css-ui/
@@ -120,8 +119,6 @@ The purpose of this specification is to achieve the following objectives:
 <li>Extend the user interface features in CSS2.1.
 <li>Provide additional CSS mechanisms to augment or replace other
 dynamic presentation related features in HTML.
-<li>Introduce directional navigation properties to assist in the construction of
-user interfaces which make use of a directional navigation model.
 </ul>
 
 
@@ -1254,124 +1251,6 @@ caret-color:#00aacc
 
 <h3 id="keyboard">Keyboard control</h3>
 
-<h4 id="nav-dir">Directional Focus Navigation: the 'nav-up', 'nav-right', 'nav-down', 'nav-left' properties</h4>
-
-This section is at risk.
-
-<pre class="propdef"> 
-Name: nav-up , nav-right , nav-down , nav-left 
-Value: auto | <<id>> [ current | root | <<target-name>> ]? 
-Initial: auto 
-Applies to: all enabled elements 
-Inherited: no 
-Percentages: N/A 
-Media: interactive 
-Computed value: as specified 
-</pre>
-
-<dl>
-<dt>auto</dt>
-<dd>The user agent automatically determines which element to navigate the focus to in response to directional navigational input.</dd>
-<dt><dfn noexport><<id>></dfn></dt>
-<dd><p>The <<id>> value is an ID selector [[SELECT]].
-In response to directional navigation input corresponding to the property,
-the focus is navigated to the first element in tree order matching the selector.
-
-If this refers to the currently focused element,
-the directional navigation input respective to the nav- property is ignored &mdash;
-there is no need to refocus the same element.
-
-If no element matches the selector,
-the user agent automatically determines which element to navigate the focus to.
-
-If the focus is navigated to an element
-that was not otherwise focusable,
-it becomes focusable
-only as the result of this directional navigation,
-and the <css>:focus</css> pseudo-class matches the element
-while it is focused as such.
-
-Note: there were other options under consideration for such "not otherwise focusable" elements, including focus to the next otherwise focusable element in the document tree (including descendants of such a not otherwise focusable element). Input on such other options is welcome and explicitly solicited, especially from implementation experiences and author experience using the directional navigation properties in their content.
-
-</dd>
-<dt><dfn noexport><<target-name>></dfn></dt>
-<dd>
-The &lt;target-name&gt; parameter indicates the target frame for the focus navigation.
-It is a <<string>> and it MUST NOT start with the underscore "_" character.
-Error handling: if it does start with an underscore, "_parent" navigates to the parent frame,
-"_root" is treated as ''root'',
-and other values navigate to a frame by that name if it exists.
-If the specified target frame does not exist,
-the parameter will be treated as the keyword ''current'',
-which means to simply use the frame that the element is in.
-The keyword ''root'' indicates that the user agent should target the full window.
-</dd>
-</dl>
-
-User agents for devices with directional navigation keys
-respond by navigating the focus according to four respective nav-* directional navigation properties
-(nav-up, nav-right, nav-down, nav-left).
-This specification does not define which keys of a device are directional navigational keys.
-
-Note: Typical personal computers have keyboards with four arrow keys.
-One possible implementation would be to use those four arrow keys for directional navigation.
-For accessibility and user convenience,
-user agents should allow configuration of which keys on a keyboard are used for directional navigation.
-
-<div class="example">
-<h5 id=example-positioned-buttons>Example: positioned buttons</h5>
-
-Here is an example of buttons positioned in a diamond shape
-whose directional focus navigation is set in such a way
-to navigate the focus clockwise (or counter-clockwise) around the diamond shape
-when the user chooses to navigate directionally.
-<pre><code class="lang-css">
-button { position:absolute }
-
-button#b1 {
-	top:0; left:50%;
-	nav-right:#b2; nav-left:#b4;
-	nav-down:#b2; nav-up:#b4;
-}
-
-button#b2 {
-	top:50%; left:100%;
-	nav-right:#b3; nav-left:#b1;
-	nav-down:#b3; nav-up:#b1;
-}
-
-button#b3 {
-	top:100%; left:50%;
-	nav-right:#b4; nav-left:#b2;
-	nav-down:#b4; nav-up:#b2;
-}
-
-button#b4 {
-	top:50%; left:0;
-	nav-right:#b1; nav-left:#b3;
-	nav-down:#b1; nav-up:#b3;
-}
-</code></pre>
-
-Whatever markup sequence the buttons may have
-(which is not specified in this example)
-is irrelevant in this case because they are positioned, and yet,
-it is still important to ensure focus navigation behaviors which relate reasonably to the specified layout.
-</div>
-
-<div class="example">
-<h5 id=example-moving-focus-to-inside-a-frame>Example: moving focus to inside a frame</h5>
-
-Moving the focus to an element in a specific frame requires both the element's id and the frame's name.
-
-This example shows how to make navigating left from the button with id "foo" move the focus to the element with id "bar" within the frame named "sidebar".
-
-<pre><code class="lang-css">
-button#foo { nav-left: #bar "sidebar"; }
-</code></pre>
-</div>
-
-
 <h4 id="input-method-editor">Obsolete: the ime-mode property</h4>
 
 "ime-mode" is a property somewhat implemented in some browsers, that is problematic and officially obsoleted by this specification.
@@ -1483,6 +1362,7 @@ This appendix describes changes from the
 <ul>
 	<li>Updated references to latest versions
 	<li>Editorial Clarification about the resize property
+	<li>Move directional focus navigation properties from level 3 to level 4
 </ul>
 
 <h2 class="no-num" id="security-privacy-considerations">Appendix C. Considerations for Security and Privacy</h2>