add tabindex support - first pass
authorRichard Schwerdtfeger <schwer@us.ibm.com>
Wed, 01 May 2013 10:01:15 -0500
changeset 491 420435c82f76
parent 490 c6d864fa0358
child 492 e014e18bcd62
add tabindex support - first pass
master/definitions.xml
master/interact.html
--- a/master/definitions.xml	Wed Apr 10 10:46:36 2013 +1000
+++ b/master/definitions.xml	Wed May 01 10:01:15 2013 -0500
@@ -794,6 +794,9 @@
   <!-- attribute common to all animation elements -->
   <attribute name='xlink:href' elements='animate, animateColor, animateMotion, animateTransform, set' href='animate.html#HrefAttribute'/>
 
+  <!-- attributes common to all keyboard focusable elements -->
+  <attribute name='tabindex' elements='a, altGlyph, altGlyphItem, animateColor, circle, cursor, discard, ellipse, foreignObject, g, hkern, image, line, path, polygon, polyline, rect, svg, switch, symbol, text, textPath, tref, tspan, use, view' href='interact.html#SVGElementTabindexAttribute'> 
+
   <!-- misc:  Applies to all <element>s that include attribute name in 'attribute'. -->
   <attribute name='viewBox' href='coords.html#ViewBoxAttribute' animatable='yes'/>
   <attribute name='preserveAspectRatio' href='coords.html#PreserveAspectRatioAttribute' animatable='yes'/>
--- a/master/interact.html	Wed Apr 10 10:46:36 2013 +1000
+++ b/master/interact.html	Wed May 01 10:01:15 2013 -0500
@@ -1164,6 +1164,235 @@
 </dl>
 
 </edit:with>
+<h2 id="Focus">Focus</h2>
+
+<div class="impl">
+
+  <p>When an element is <i>focused</i>, key events received by the
+  document must be targeted at that element. There may be no element
+  focused; when no element is focused, key events received by the
+  document must be targeted at the <code><a href="#document">Document</a></code>'s root <code><a href="struct.html#SVGElement">svg</a></code> element, if
+  there is one. If there is no root element, key events must not be
+  fired.</p>
+
+  <p>User agents may track focus for each <a href="http://www.w3.org/TR/html5/browsers.html#browsing-context">browsing
+  context</a> or <code><a href="#document">Document</a></code> individually, or may support
+  only one focused element per <a href="http://www.w3.org/TR/html5/browsers.html#top-level-browsing-context">top-level browsing context</a>
+  — user agents should follow platform conventions in this
+  regard.</p>
+
+  <p>Which elements within a <a href="http://www.w3.org/TR/html5/browsers.html#top-level-browsing-context">top-level browsing context</a>
+  currently have focus must be independent of whether or not the
+  <a href="http://www.w3.org/TR/html5/browsers.html#top-level-browsing-context">top-level browsing context</a> itself has the <i>system
+  focus</i>.</p>
+
+  <p id="bc-focus-ergo-bcc-focus">When a <a href="http://www.w3.org/TR/html5/browsers.html#child-browsing-context">child browsing
+  context</a> is focused, its <a href="http://www.w3.org/TR/html5/browsers.html#browsing-context-container">browsing conrtext
+  container</a> must also have focus.</p>
+
+  <p class="note">When an element is focused, the element matches the
+  CSS <code>:focus</code> pseudo-class.</p>
+
+  </div>
+<h3 id="sequential-focus-navigation-and-the-tabindex-attribute">Sequential focus navigation and the <code title="attr-tabindex"> <a href="#SVGElementTabindexAttribute">tabindex</a> </code> attribute </h3>
+  
+   <dt>
+    <table class="propdef attrdef">
+      <tr>
+        <th>Name</th>
+        <th>Value</th>
+        <th>Lacuna value</th>
+        <th>Animatable</th>
+      </tr>
+      <tr>
+        <td><dfn id="SVGElementTabindexAttribute">tabindex</dfn></td>
+        <td><a>&lt;number&gt;</a></td>
+        <td>(none)</td>
+        <td>no</td>
+      </tr>
+    </table>
+  </dt>
+  <dd>
+    <p>This content attribute allows authors to control whether an element is focusable, whether it is supposed to be reachable
+  using sequential focus navigation, and what is to be the relative
+  order of the element for the purposes of sequential focus
+  navigation</p>
+    <p>The name "tab index" comes from the common use of the
+  "tab" key to navigate through the focusable elements. The term
+  "tabbing" refers to moving forward through the focusable elements
+  that can be reached using sequential focus navigation.
+   </p>
+  </dd>
+ 
+
+  <div class="impl">
+
+  <p>Each element can have a <dfn id="specially-focusable">tabindex focus flag</dfn> set, as defined
+  below. This flag is a factor that contributes towards determining whether an element is
+  <a href="#focusable">focusable</a>, as described in the next section.</p>
+
+  <dl><dt>If the tabindex attribute is omitted or an invalid &lt;number&gt; </dt>
+   
+   <dd>
+
+    <p>The user agent should follow platform conventions to determine
+    if the element's <a href="#specially-focusable">tabindex focus flag</a> is set and, if
+    so, whether the element can be reached using sequential focus
+    navigation, and if so, what its relative order should be.</p>
+
+    <p>The <code><a href="linking.html#AElement">a</a></code> element that has an <code><a href="linking.html#AElementXLinkHrefAttribute">xlink:href</a></code> attribute must have the <a href="#specially-focusable">tabindex focus flag</a> set.</p>
+
+   </dd>
+
+   <dt id="negative-tabindex">If the value is a negative integer</dt>
+
+   <dd>
+
+    <p>The user agent must set the element's <a href="#specially-focusable">tabindex focus
+    flag</a>, but should not allow the element to be reached using
+    sequential focus navigation.</p>
+
+    <p class="note">One valid reason to ignore the requirement that
+    sequential focus navigation not allow the author to lead to the
+    element would be if the user's only mechanism for moving the focus
+    is sequential focus navigation. For instance, a keyboard-only user
+    would be unable to click on a text field with a negative <code><a href="#SVGElementTabindexAttribute">tabindex</a></code>, so that user's user agent
+    would be well justified in allowing the user to tab to the control
+    regardless.</p>
+
+   </dd>
+
+   <dt>If the value is a zero</dt>
+
+   <dd>
+
+    <p>The user agent must set the element's <a href="#specially-focusable">tabindex focus
+    flag</a>, should allow the element to be reached using
+    sequential focus navigation, and should follow platform
+    conventions to determine the element's relative order.</p>
+
+   </dd>
+
+   <dt>If the value is greater than zero</dt>
+      <dd>
+
+    <p>The user agent must set the element's <a href="#specially-focusable">tabindex focus
+    flag</a>, should allow the element to be reached using
+    sequential focus navigation, and should place the element in the
+    sequential focus navigation order so that it is:</p>
+
+    <ul><li>before any <a href="#focusable">focusable</a> element whose <code><a href="#SVGElementTabindexAttribute">tabindex</a></code> attribute has been omitted
+     or whose value, when parsed, returns an error,</li>
+
+     <li>before any <a href="#focusable">focusable</a> element whose <code><a href="#SVGElementTabindexAttribute">tabindex</a></code> attribute has a value equal
+     to or less than zero,</li>
+
+     <li>after any element whose <code><a href="#SVGElementTabindexAttribute">tabindex</a></code> attribute has a value
+     greater than zero but less than the value of the <code title="attr-tabindex"><a href="#attr-tabindex">tabindex</a></code> attribute on the
+     element,</li>
+
+     <li>after any element whose <code><a href="#SVGElementTabindexAttribute">tabindex</a></code> attribute has a value equal
+     to the value of the <code><a href="#SVGElementTabindexAttribute">tabindex</a></code>
+     attribute on the element but that is earlier in the document in
+     <a href="http://www.w3.org/TR/html5/infrastructure.html#tree-order">tree order</a> than the element,</li>
+
+     <li>before any element whose <code><a href="#SVGElementTabindexAttribute">tabindex</a></code> attribute has a value equal
+     to the value of the <code><a href="#SVGElementTabindexAttribute">tabindex</a></code>
+     attribute on the element but that is later in the document in
+     <a href="http://www.w3.org/TR/html5/infrastructure.html#tree-order">tree order</a> than the element, and</li>
+
+     <li>before any element whose <code><a href="#SVGElementTabindexAttribute">tabindex</a></code> attribute has a value
+     greater than the value of the <code><a href="#SVGElementTabindexAttribute">tabindex</a></code> attribute on the
+     element.</li>
+
+    </ul></dd>
+  </dl><p>An element that has its <a href="#specially-focusable">tabindex focus flag</a> set but
+  does not otherwise have an <a href="http://www.w3.org/TR/html5/dom.html#activation-behavior">activation behavior</a> defined
+  has an <a href="http://www.w3.org/TR/html5/dom.html#activation-behavior">activation behavior</a> that does nothing.</p>
+
+  <p class="note">This means that an element that is only focusable
+  because of its <code><a href="#SVGElementTabindexAttribute">tabindex</a></code> attribute
+  will fire a <code><a href="infrastructure.html#event-click">click</a></code> event in response
+  to a non-mouse activation (e.g. hitting the "enter" key while the
+  element is focused).</p>
+
+  <p>The <dfn id="dom-tabindex" title="dom-tabIndex"><code>tabIndex</code></dfn> IDL
+  attribute must <a href="http://www.w3.org/TR/html5/infrastructure.html#reflect">reflect</a> the value of the <code><a href="#SVGElementTabindexAttribute">tabindex</a></code> content attribute. Its default
+  value is 0 for elements that are focusable and −1 for
+  elements that are not focusable.</p>
+
+  </div>
+  <div class="impl">
+
+  <h4 id="focus-management">Focus management</h4>
+  
+<p class="issue">Need to decide how will replace some of the links pertainig to "in a document",  "Document", and "being rendered". This is dependent on Document work that needs to be added wrt. tabindex. Do we define our own definitions vs. what is in HTML5?</p>
+
+  <p>An element is <dfn id="focusable">focusable</dfn> if the user agent's default
+  behavior allows it to be focusable or if the element has its
+  <a href="#specially-focusable">tabindex focus flag</a> set, but only if the element is
+  either <a href="rendering.html#being-rendered">being rendered</a> and only if
+  neither the element nor any of its ancestors are <a href="http://www.w3.org/TR/html5/editing.html#inert">inert</a>.</p>
+
+  <p>User agents should make the <a href="linking.html#AElement">a</a> element <a href="#focusable">focusable</a> as part of their default behavior, unless
+  platform conventions dictate otherwise:</p>
+ 
+  <p>Notwithstanding the above, user agents may make <em>any</em> element or part of an element
+  focusable, especially to aid with accessibility or to better match platform conventions.</p>
+
+  <hr/><p>The <dfn id="focusing-steps">focusing steps</dfn> for an element are as follows:</p>
+
+  <ol><li><p>If the element is not <a href="infrastructure.html#in-a-document" title="in a Document">in a
+   <code>Document</code></a>, or if the element's
+   <code><a href="dom.html#document">Document</a></code> has no <a href="http://www.w3.org/TR/html5/browsers.html#browsing-context">browsing context</a>, or if
+   the element's <code><a href="dom.html#document">Document</a></code>'s <a href="http://www.w3.org/TR/html5/browsers.html#browsing-context">browsing context</a>
+   has no <a href="http://www.w3.org/TR/html5/browsers.html#top-level-browsing-context">top-level browsing context</a>, or if the element
+   is not <a href="#focusable">focusable</a>, then abort these steps.</p></li>
+
+   <li><p>If focusing the element will remove the focus from another
+   element, then run the <a href="#unfocusing-steps">unfocusing steps</a> for that
+   element.</p></li>
+   <li>
+
+    <p>Make the element the currently focused element in its
+    <a href="http://www.w3.org/TR/html5/browsers.html#top-level-browsing-context">top-level browsing context</a>.</p>
+
+   </li>
+
+   <li><p><a href="http://www.w3.org/TR/html5/webappapis.html#fire-a-simple-event">Fire a simple event</a> named <code title="event-focus">focus</code> at the element.</p></li>
+
+  </ol><p>User agents must synchronously run the <a href="#focusing-steps">focusing
+  steps</a> for an element whenever the user moves the focus to a
+  <a href="#focusable">focusable</a> element.</p>
+
+  <p>The <dfn id="unfocusing-steps">unfocusing steps</dfn> for an element are as
+  follows:</p>
+
+  <ol>   
+   <li><p>Unfocus the element.</p></li>
+
+   <li><p><a href="http://www.w3.org/TR/html5/webappapis.html#fire-a-simple-event">Fire a simple event</a> named <code>focusout</code> at the element.</p></li>
+
+  </ol><p>When an element that is focused stops being a
+  <a href="#focusable">focusable</a> element, or stops being focused without
+  another element being explicitly focused in its stead, the user
+  agent should synchronously run the <a href="#unfocusing-steps">unfocusing steps</a> for
+  the affected element only.</p>
+
+  <p class="example">For example, this might happen because the
+  element is removed from its <code><a href="dom.html#document">Document</a></code>.</p>
+
+  </div>
+  <hr/><p>An element is <dfn id="being-rendered">being rendered</dfn> if it is <a href="infrastructure.html#in-a-document">in a
+  <code>Document</code></a>, either its parent node is itself
+  <a href="#being-rendered">being rendered</a> or it is the <code><a href="dom.html#document">Document</a></code> node,
+  and it is not explicitly excluded from the rendering using either:</p>
+  <ul class="brief"><li>the CSS 'display' property's 'none' value, or</li>
+   <li>the 'visibility' property's 'collapse' value unless it is being treated as equivalent to the 'hidden' value, or</li>
+   <li>some equivalent in other styling languages.</li>
+  </ul><p class="note">Just being off-screen does not mean the element is
+  not <a href="#being-rendered">being rendered</a>.</p>
+  <hr/>
 
 </body>
 </html>