- From: SVG Working Group repository <cam+svgwgrepo@mcc.id.au>
- Date: Wed, 01 May 2013 08:03:35 -0700
- To: public-svg-wg@w3.org
details: https://svgwg.org/hg/svg2/rev/420435c82f76 branches: changeset: 491:420435c82f76 user: Richard Schwerdtfeger <schwer@us.ibm.com> date: Wed May 01 10:01:15 2013 -0500 description: add tabindex support - first pass diffstat: master/definitions.xml | 3 + master/interact.html | 229 +++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 232 insertions(+), 0 deletions(-) diffs (267 lines): diff --git a/master/definitions.xml b/master/definitions.xml --- a/master/definitions.xml +++ b/master/definitions.xml @@ -789,16 +789,19 @@ <!-- xlink:show and xlink:actuate for all elements supporting the XLink attributes, except a --> <attribute name='xlink:show' elements='animate, set, animateMotion, mpath, animateColor, animateTransform, color-profile, filter, feImage, font-face-uri, cursor, pattern, script, textPath, tref, use, image, altGlyph, glyphRef, linearGradient, radialGradient, meshGradient' href='linking.html#XLinkShowAttribute'/> <attribute name='xlink:actuate' elements='animate, set, animateMotion, mpath, animateColor, animateTransform, color-profile, filter, feImage, font-face-uri, cursor, pattern, script, textPath, tref, use, image, altGlyph, glyphRef, linearGradient, radialGradient, meshGradient' href='linking.html#XLinkActuateAttribute'/> <!-- 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'/> <attribute name='zoomAndPan' href='interact.html#ZoomAndPanAttribute'/> <!-- ... attribute categories .......................................... --> <attributecategory diff --git a/master/interact.html b/master/interact.html --- a/master/interact.html +++ b/master/interact.html @@ -1159,11 +1159,240 @@ element. </div> </dd> </dl> </dd> </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><number></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 <number> </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>
Received on Wednesday, 1 May 2013 15:03:59 UTC