[html5] r8478 - [giow] (2) Revamp how focus is defined, to actually handle things we've ignored [...]
whatwg at whatwg.org
whatwg at whatwg.org
Wed Feb 19 14:39:17 PST 2014
Author: ianh
Date: 2014-02-19 14:39:15 -0800 (Wed, 19 Feb 2014)
New Revision: 8478
Modified:
complete.html
index
source
Log:
[giow] (2) Revamp how focus is defined, to actually handle things we've ignored before, like viewports and scrollable regions
Fixing https://www.w3.org/Bugs/Public/show_bug.cgi?id=23475
Affected topics: CSS, Canvas, DOM APIs, HTML, Rendering
Modified: complete.html
===================================================================
--- complete.html 2014-02-11 20:54:28 UTC (rev 8477)
+++ complete.html 2014-02-19 22:39:15 UTC (rev 8478)
@@ -298,7 +298,7 @@
<header class=head id=head><p><a href=http://www.whatwg.org/ class=logo><img width=101 src=/images/logo alt=WHATWG height=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
- <h2 class="no-num no-toc">Living Standard — Last Updated 11 February 2014</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 19 February 2014</h2>
</hgroup><dl><dt><strong>Web developer edition:</strong></dt>
<dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
<dt>Multiple-page version:</dt>
@@ -1074,15 +1074,16 @@
<li><a href=#activation><span class=secno>8.3 </span>Activation</a></li>
<li><a href=#focus><span class=secno>8.4 </span>Focus</a>
<ol>
- <li><a href=#sequential-focus-navigation-and-the-tabindex-attribute><span class=secno>8.4.1 </span>Sequential focus navigation and the <code title=attr-tabindex>tabindex</code> attribute</a></li>
- <li><a href=#focus-management><span class=secno>8.4.2 </span>Focus management</a></li>
- <li><a href=#document-level-focus-apis><span class=secno>8.4.3 </span>Document-level focus APIs</a></li>
- <li><a href=#element-level-focus-apis><span class=secno>8.4.4 </span>Element-level focus APIs</a></ol></li>
+ <li><a href=#introduction-7><span class=secno>8.4.1 </span>Introduction</a></li>
+ <li><a href=#data-model><span class=secno>8.4.2 </span>Data model</a></li>
+ <li><a href=#sequential-focus-navigation-and-the-tabindex-attribute><span class=secno>8.4.3 </span>Sequential focus navigation and the <code title=attr-tabindex>tabindex</code> attribute</a></li>
+ <li><a href=#processing-model-5><span class=secno>8.4.4 </span>Processing model</a></li>
+ <li><a href=#focus-management-apis><span class=secno>8.4.5 </span>Focus management APIs</a></ol></li>
<li><a href=#assigning-keyboard-shortcuts><span class=secno>8.5 </span>Assigning keyboard shortcuts</a>
<ol>
- <li><a href=#introduction-7><span class=secno>8.5.1 </span>Introduction</a></li>
+ <li><a href=#introduction-8><span class=secno>8.5.1 </span>Introduction</a></li>
<li><a href=#the-accesskey-attribute><span class=secno>8.5.2 </span>The <code>accesskey</code> attribute</a></li>
- <li><a href=#processing-model-5><span class=secno>8.5.3 </span>Processing model</a></ol></li>
+ <li><a href=#processing-model-6><span class=secno>8.5.3 </span>Processing model</a></ol></li>
<li><a href=#editing-0><span class=secno>8.6 </span>Editing</a>
<ol>
<li><a href=#contenteditable><span class=secno>8.6.1 </span>Making document regions editable: The <code title=attr-contenteditable>contenteditable</code> content attribute</a></li>
@@ -1092,7 +1093,7 @@
<li><a href=#spelling-and-grammar-checking><span class=secno>8.6.5 </span>Spelling and grammar checking</a></ol></li>
<li><a href=#dnd><span class=secno>8.7 </span>Drag and drop</a>
<ol>
- <li><a href=#introduction-8><span class=secno>8.7.1 </span>Introduction</a></li>
+ <li><a href=#introduction-9><span class=secno>8.7.1 </span>Introduction</a></li>
<li><a href=#the-drag-data-store><span class=secno>8.7.2 </span>The drag data store</a></li>
<li><a href=#the-datatransfer-interface><span class=secno>8.7.3 </span>The <code>DataTransfer</code> interface</a>
<ol>
@@ -1111,7 +1112,7 @@
<ol>
<li><a href=#server-sent-events-intro><span class=secno>9.2.1 </span>Introduction</a></li>
<li><a href=#the-eventsource-interface><span class=secno>9.2.2 </span>The <code>EventSource</code> interface</a></li>
- <li><a href=#processing-model-6><span class=secno>9.2.3 </span>Processing model</a></li>
+ <li><a href=#processing-model-7><span class=secno>9.2.3 </span>Processing model</a></li>
<li><a href=#parsing-an-event-stream><span class=secno>9.2.4 </span>Parsing an event stream</a></li>
<li><a href=#event-stream-interpretation><span class=secno>9.2.5 </span>Interpreting an event stream</a></li>
<li><a href=#authoring-notes><span class=secno>9.2.6 </span>Authoring notes</a></li>
@@ -1133,7 +1134,7 @@
<li><a href=#garbage-collection-1><span class=secno>9.3.7 </span>Garbage collection</a></ol></li>
<li><a href=#web-messaging><span class=secno>9.4 </span>Cross-document messaging</a>
<ol>
- <li><a href=#introduction-9><span class=secno>9.4.1 </span>Introduction</a></li>
+ <li><a href=#introduction-10><span class=secno>9.4.1 </span>Introduction</a></li>
<li><a href=#security-postmsg><span class=secno>9.4.2 </span>Security</a>
<ol>
<li><a href=#authors><span class=secno>9.4.2.1 </span>Authors</a></li>
@@ -1141,7 +1142,7 @@
<li><a href=#posting-messages><span class=secno>9.4.3 </span>Posting messages</a></ol></li>
<li><a href=#channel-messaging><span class=secno>9.5 </span>Channel messaging</a>
<ol>
- <li><a href=#introduction-10><span class=secno>9.5.1 </span>Introduction</a>
+ <li><a href=#introduction-11><span class=secno>9.5.1 </span>Introduction</a>
<ol>
<li><a href=#examples-4><span class=secno>9.5.1.1 </span>Examples</a></li>
<li><a href=#ports-as-the-basis-of-an-object-capability-model-on-the-web><span class=secno>9.5.1.2 </span>Ports as the basis of an object-capability model on the Web</a></li>
@@ -1153,7 +1154,7 @@
<li><a href=#broadcasting-to-other-browsing-contexts><span class=secno>9.6 </span>Broadcasting to other browsing contexts</a></ol></li>
<li><a href=#workers><span class=secno>10 </span>Web workers</a>
<ol>
- <li><a href=#introduction-11><span class=secno>10.1 </span>Introduction</a>
+ <li><a href=#introduction-12><span class=secno>10.1 </span>Introduction</a>
<ol>
<li><a href=#scope-0><span class=secno>10.1.1 </span>Scope</a></li>
<li><a href=#examples-5><span class=secno>10.1.2 </span>Examples</a>
@@ -1177,7 +1178,7 @@
<li><a href=#shared-workers-and-the-sharedworkerglobalscope-interface><span class=secno>10.2.1.3 </span>Shared workers and the <code>SharedWorkerGlobalScope</code> interface</a></ol></li>
<li><a href=#worker-event-loop><span class=secno>10.2.2 </span>The event loop</a></li>
<li><a href="#the-worker's-lifetime"><span class=secno>10.2.3 </span>The worker's lifetime</a></li>
- <li><a href=#processing-model-7><span class=secno>10.2.4 </span>Processing model</a></li>
+ <li><a href=#processing-model-8><span class=secno>10.2.4 </span>Processing model</a></li>
<li><a href=#runtime-script-errors-0><span class=secno>10.2.5 </span>Runtime script errors</a></li>
<li><a href=#creating-workers><span class=secno>10.2.6 </span>Creating workers</a>
<ol>
@@ -1192,7 +1193,7 @@
<li><a href=#worker-locations><span class=secno>10.3.3 </span>Worker locations</a></ol></ol></li>
<li><a href=#webstorage><span class=secno>11 </span>Web storage</a>
<ol>
- <li><a href=#introduction-12><span class=secno>11.1 </span>Introduction</a></li>
+ <li><a href=#introduction-13><span class=secno>11.1 </span>Introduction</a></li>
<li><a href=#storage><span class=secno>11.2 </span>The API</a>
<ol>
<li><a href=#the-storage-interface><span class=secno>11.2.1 </span>The <code>Storage</code> interface</a></li>
@@ -1371,7 +1372,7 @@
<li><a href=#parsing-xhtml-fragments><span class=secno>13.4 </span>Parsing XHTML fragments</a></ol></li>
<li><a href=#rendering><span class=secno>14 </span>Rendering</a>
<ol>
- <li><a href=#introduction-13><span class=secno>14.1 </span>Introduction</a></li>
+ <li><a href=#introduction-14><span class=secno>14.1 </span>Introduction</a></li>
<li><a href=#the-css-user-agent-style-sheet-and-presentational-hints><span class=secno>14.2 </span>The CSS user agent style sheet and presentational hints</a></li>
<li><a href=#non-replaced-elements><span class=secno>14.3 </span>Non-replaced elements</a>
<ol>
@@ -1396,7 +1397,7 @@
<li><a href=#image-maps-0><span class=secno>14.4.4 </span>Image maps</a></ol></li>
<li><a href=#bindings><span class=secno>14.5 </span>Bindings</a>
<ol>
- <li><a href=#introduction-14><span class=secno>14.5.1 </span>Introduction</a></li>
+ <li><a href=#introduction-15><span class=secno>14.5.1 </span>Introduction</a></li>
<li><a href=#the-button-element-0><span class=secno>14.5.2 </span>The <code>button</code> element</a></li>
<li><a href=#the-details-element-0><span class=secno>14.5.3 </span>The <code>details</code> element</a></li>
<li><a href=#the-input-element-as-a-text-entry-widget><span class=secno>14.5.4 </span>The <code>input</code> element as a text entry widget</a></li>
@@ -31924,7 +31925,8 @@
<p class=note>Because a <code><a href=#the-map-element>map</a></code> element (and its <code><a href=#the-area-element>area</a></code> elements) can be
associated with multiple <code><a href=#the-img-element>img</a></code> and <code><a href=#the-object-element>object</a></code> elements, it is possible for an
- <code><a href=#the-area-element>area</a></code> element to correspond to multiple focusable areas of the document.</p>
+ <code><a href=#the-area-element>area</a></code> element to correspond to multiple <i title="focusable area"><a href=#focusable-area>focusable areas</a></i>
+ of the document.</p>
<p>Image maps are <a href=#live>live</a>; if the DOM is mutated, then the user agent must act as if it
had rerun the algorithms for image maps.</p>
@@ -43484,7 +43486,7 @@
attribute specified, authors should include a <dfn id=attr-input-title title=attr-input-title><code>title</code></dfn> attribute to give a description of the pattern.
User agents may use the contents of this attribute, if it is present, when informing the user that
the pattern is not matched, or at any other suitable time, such as in a tooltip or read out by
- assistive technology when the control gains focus.</p>
+ assistive technology when the control <a href=#gains-focus>gains focus</a>.</p>
<div class=example>
<p>For example, the following snippet:</p>
@@ -43941,7 +43943,7 @@
<div class=impl>
<p>User agents should present this hint to the user, after having <a href=#strip-line-breaks title="strip line
- breaks">stripped line breaks</a> from it, when the element's <a href=#concept-fe-value title=concept-fe-value>value</a> is the empty string or the control is not focused (or both),
+ breaks">stripped line breaks</a> from it, when the element's <a href=#concept-fe-value title=concept-fe-value>value</a> is the empty string or the control is not <a href=#focused>focused</a> (or both),
e.g. by displaying it inside a blank unfocused control and hiding it otherwise.</p>
</div>
@@ -44306,13 +44308,14 @@
<h5 id=common-input-element-events><span class=secno>4.10.5.5 </span>Common event behaviors</h5>
+<!--CLEANUP-->
<p>When the <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code>
events <a href=#concept-input-apply title=concept-input-apply>apply</a> (which is the case for all
<code><a href=#the-input-element>input</a></code> controls other than <a href=#concept-button title=concept-button>buttons</a> and those with
the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href="#hidden-state-(type=hidden)" title=attr-input-type-hidden>Hidden</a> state), the events are fired to indicate that the
user has interacted with the control. The <dfn id=event-input-input title=event-input-input><code>input</code></dfn>
event fires whenever the user has modified the data of the control. The <dfn id=event-input-change title=event-input-change><code>change</code></dfn> event fires when the value is committed, if
- that makes sense for the control, or else when the control loses focus. In all cases, the <code title=event-input-input><a href=#event-input-input>input</a></code> event comes before the corresponding <code title=event-input-change><a href=#event-input-change>change</a></code> event (if any).</p>
+ that makes sense for the control, or else when the control <a href=#unfocus-causes-change-event>loses focus</a>. In all cases, the <code title=event-input-input><a href=#event-input-input>input</a></code> event comes before the corresponding <code title=event-input-change><a href=#event-input-change>change</a></code> event (if any).</p>
<p>When an <code><a href=#the-input-element>input</a></code> element has a defined <a href=#activation-behavior>activation behavior</a>, the rules
for dispatching these events, if they <a href=#concept-input-apply title=concept-input-apply>apply</a>, are given
@@ -44343,10 +44346,11 @@
simple event</a> that bubbles named <code title=event-input-change><a href=#event-input-change>change</a></code> at the
<code><a href=#the-input-element>input</a></code> element.</p>
+<!--CLEANUP-->
<p class=example>An example of a user interface with a commit action would be a <a href="#color-state-(type=color)" title=attr-input-type-color>Color</a> control that consists of a single button that brings
up a color wheel: if the <a href=#concept-fe-value title=concept-fe-value>value</a> only changes when the dialog
- is closed, then that would be the explicit commit action. On the other hand, if the control can be
- focused and manipulating the control changes the color interactively, then there might be no
+ is closed, then that would be the explicit commit action. On the other hand, if
+ manipulating the control changes the color interactively, then there might be no
commit action.</p>
<p class=example>Another example of a user interface with a commit action would be a <a href="#date-state-(type=date)" title=attr-input-type-date>Date</a> control that allows both text-based user input and user
@@ -44360,15 +44364,16 @@
action, the user agent must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a> that
bubbles named <code title=event-input-input><a href=#event-input-input>input</a></code> at the <code><a href=#the-input-element>input</a></code> element. The
corresponding <code title=event-input-change><a href=#event-input-change>change</a></code> event, if any, will be fired when the
- control <a href=#unfocusing-steps title="unfocusing steps">loses focus</a>.</p>
+ control <a href=#unfocus-causes-change-event>loses focus</a>.</p>
<p class=example>Examples of a user changing the element's <a href=#concept-fe-value title=concept-fe-value>value</a> would include the user typing into a text field, pasting a
new value into the field, or undoing an edit in that field. Some user interactions do not cause
changes to the value, e.g. hitting the "delete" key in an empty text field, or replacing some text
in the field with text from the clipboard that happens to be exactly the same text.</p>
+<!--CLEANUP-->
<p class=example>A <a href="#range-state-(type=range)" title=attr-input-type-range>Range</a> control in the form of a
- slider that the user has focused and is interacting with using a keyboard would be another example
+ slider that the user has <a href=#focused>focused</a> and is interacting with using a keyboard would be another example
of the user changing the element's <a href=#concept-fe-value title=concept-fe-value>value</a> without a commit
step.</p>
@@ -45742,7 +45747,8 @@
<div class=impl>
- <p>User agents should present this hint to the user when the element's <a href=#concept-fe-value title=concept-fe-value>value</a> is the empty string and the control is not focused (e.g. by
+<!--CLEANUP-->
+ <p>User agents should present this hint to the user when the element's <a href=#concept-fe-value title=concept-fe-value>value</a> is the empty string and the control is not <a href=#focused>focused</a> (e.g. by
displaying it inside a blank unfocused control). All U+000D CARRIAGE RETURN U+000A LINE FEED
character pairs (CRLF) in the hint, as well as all other U+000D CARRIAGE RETURN (CR) and U+000A
LINE FEED (LF) characters in the hint, must be treated as line breaks when rendering the hint.
@@ -47588,8 +47594,8 @@
<li><p>If the user has indicated (for example, by starting to type in a form control) that he
does not wish focus to be changed, then optionally abort these steps.</li>
- <li><p><a href=#queue-a-task>Queue a task</a> that checks to see if the element is <a href=#focusable>focusable</a>, and
- if so, runs the <a href=#focusing-steps>focusing steps</a> for that element. User agents may also change the
+<!--CLEANUP-->
+ <li><p><a href=#queue-a-task>Queue a task</a> that runs the <a href=#focusing-steps>focusing steps</a> for the element. User agents may also change the
scrolling position of the document, or perform some other action that brings the element to the
user's attention. The <a href=#task-source>task source</a> for this task is the <a href=#user-interaction-task-source>user interaction task
source</a>.</li>
@@ -49643,7 +49649,7 @@
owner</a> is that <code><a href=#the-form-element>form</a></code> element.</p>
<p>If the user agent supports letting the user submit a form implicitly (for example, on some
- platforms hitting the "enter" key while a text field is focused implicitly submits the form), then
+ platforms hitting the "enter" key while a text field is <a href=#focused>focused</a> implicitly submits the form), then
doing so for a form whose <a href=#default-button>default button</a> has a defined <a href=#activation-behavior>activation
behavior</a> must cause the user agent to <a href=#run-synthetic-click-activation-steps>run synthetic click activation steps</a> on
that <a href=#default-button>default button</a>.</p>
@@ -51930,8 +51936,7 @@
<p>The <a href=#command-facet-action title=command-facet-Action>Action</a> of the command is to run the following
steps:</p>
- <ol><li>If the element is <a href=#focusable>focusable</a>, run the <a href=#focusing-steps>focusing steps</a> for the
- element.</li>
+ <ol><li>Run the <a href=#focusing-steps>focusing steps</a> for the element.</li>
<li>If the element has a defined <a href=#activation-behavior>activation behavior</a>, <a href=#run-synthetic-click-activation-steps>run synthetic click
activation steps</a> on the element.</li>
@@ -52076,21 +52081,25 @@
<li><p>Push <var title="">subject</var> onto <var title="">subject</var>'s
<code><a href=#document>Document</a></code>'s <a href=#pending-dialog-stack>pending dialog stack</a>.</li>
+ <li><p>Run the <a href=#dialog-focusing-steps>dialog focusing steps</a> for <var title="">subject</var>.</li>
+
+ </ol><p>The <dfn id=dialog-focusing-steps>dialog focusing steps</dfn> for a <code><a href=#the-dialog-element>dialog</a></code> element <var title="">subject</var> are as follows:</p>
+
+ <ol><li><p>If for some reason <var title="">subject</var> is not a <a href=#control-group-owner>control group owner</a>
+ at this point, or if it is <a href=#inert>inert</a>, abort these steps.</li>
+
<li>
- <p>Let <var title="">control</var> be the first element in tree order that has an <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code> attribute specified and whose nearest ancestor
- <code><a href=#the-dialog-element>dialog</a></code> element is <var title="">subject</var>, if any.</p>
+ <p>Let <var title="">control</var> be the first non-<a href=#inert>inert</a> <i><a href=#focusable-area>focusable area</a></i> in
+ <var title="">subject</var>'s <i><a href=#control-group>control group</a></i> whose <i><a href=#dom-anchor>DOM anchor</a></i> has an <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code> attribute specified.</p>
- <p>If there isn't one, then let <var title="">control</var> be the first element in tree order
- that is <a href=#focusable>focusable</a> and whose nearest ancestor <code><a href=#the-dialog-element>dialog</a></code> element is <var title="">subject</var>, if any.</p>
+ <p>If there isn't one, then let <var title="">control</var> be the first non-<a href=#inert>inert</a>
+ <i><a href=#focusable-area>focusable area</a></i> in <var title="">subject</var>'s <i><a href=#control-group>control group</a></i>.</p>
- <p>If there isn't one of those either but <var title="">subject</var> itself is
- <a href=#focusable>focusable</a>, then let <var title="">control</var> be <var title="">subject</var>. (This is unusual.)</p>
+ <p>If there isn't one of those either, then let <var title="">control</var> be <var title="">subject</var>.</p>
</li>
- <li><p>If there is no <var title="">control</var>, then abort these steps.</li>
-
<li><p>Run the <a href=#focusing-steps>focusing steps</a> for <var title="">control</var>.</li>
</ol><p>If at any time a <code><a href=#the-dialog-element>dialog</a></code> element is <a href=#remove-an-element-from-a-document title="remove an element from a
@@ -53967,12 +53976,16 @@
<!-- CANVAS-FOCUS-FALLBACK -->
<p>When a <code><a href=#the-canvas-element>canvas</a></code> element <a href=#represents>represents</a> <a href=#embedded-content>embedded content</a>, the
user can still focus descendants of the <code><a href=#the-canvas-element>canvas</a></code> element (in the <a href=#fallback-content>fallback
- content</a>). When an element is focused, it is the target of keyboard interaction events (even
+ content</a>). When an element is <a href=#focused>focused</a>, it is the target of keyboard interaction events (even
though the element itself is not visible). This allows authors to make an interactive canvas
- keyboard-accessible: authors should have a one-to-one mapping of interactive regions to focusable
- elements in the <a href=#fallback-content>fallback content</a>. (Focus has no effect on mouse interaction events.)
+ keyboard-accessible: authors should have a one-to-one mapping of interactive regions to <i title="focusable area"><a href=#focusable-area>focusable
+ areas</a></i> in the <a href=#fallback-content>fallback content</a>. (Focus has no effect on mouse interaction events.)
<a href=#refsDOMEVENTS>[DOMEVENTS]</a></p> <!-- user interaction spec integration point -->
+ <p>An element whose nearest <code><a href=#the-canvas-element>canvas</a></code> element ancestor is <a href=#being-rendered>being rendered</a>
+ and <a href=#represents>represents</a> <a href=#embedded-content>embedded content</a> is an element that is <dfn id=being-used-as-relevant-canvas-fallback-content>being used as
+ relevant canvas fallback content</dfn>.</p>
+
<hr><p>The <code><a href=#the-canvas-element>canvas</a></code> element has two attributes to control the size of the element's bitmap:
<dfn id=attr-canvas-width title=attr-canvas-width><code>width</code></dfn> and <dfn id=attr-canvas-height title=attr-canvas-height><code>height</code></dfn>. These attributes, when specified, must have
values that are <a href=#valid-non-negative-integer title="valid non-negative integer">valid non-negative integers</a>. <span class=impl>The <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</a> must be used to obtain their
@@ -57787,7 +57800,8 @@
<dd>
- <p>If the given element is focused, draws a focus ring around the <a href=#current-default-path>current default
+<!--CLEANUP-->
+ <p>If the given element is <a href=#focused>focused</a>, draws a focus ring around the <a href=#current-default-path>current default
path</a> or the given path, following the platform conventions for focus rings.</p>
</dd>
@@ -57798,11 +57812,12 @@
<dd>
- <p>If the given element is focused, and the user has configured his system to draw focus rings
+<!--CLEANUP-->
+ <p>If the given element is <a href=#focused>focused</a>, and the user has configured his system to draw focus rings
in a particular manner (for example, high contrast focus rings), draws a focus ring around the
<a href=#current-default-path>current default path</a> or the given path and returns false.</p>
- <p>Otherwise, returns true if the given element is focused, and false otherwise. This can thus
+ <p>Otherwise, returns true if the given element is <a href=#focused>focused</a>, and false otherwise. This can thus
be used to determine when to draw a focus ring (see <a href=#drawCustomFocusRingExample>the
example</a> below).</p>
@@ -57903,7 +57918,7 @@
<hr><p id=dom-context-2d-drawosfocusring>The <dfn id=dom-context-2d-drawsystemfocusring title=dom-context-2d-drawSystemFocusRing><code>drawSystemFocusRing(<var title="">element</var>)</code></dfn> method, when invoked, must run the following steps:</p>
- <ol><li><p>If <var title="">element</var> is not focused or is not a descendant of the element with
+ <ol><li><p>If <var title="">element</var> is not <a href=#focused>focused</a> or is not a descendant of the element with
whose context the method is associated, then abort these steps.</li>
<li>
@@ -57947,7 +57962,7 @@
</ol><p>The <dfn id=dom-context-2d-drawcustomfocusring title=dom-context-2d-drawCustomFocusRing><code>drawCustomFocusRing(<var title="">element</var>)</code></dfn> method, when invoked, must run the following steps:</p>
- <ol><li><p>If <var title="">element</var> is not focused or is not a descendant of the element with
+ <ol><li><p>If <var title="">element</var> is not <a href=#focused>focused</a> or is not a descendant of the element with
whose context the method is associated, then return false and abort these steps.</li>
<li><p>Let <var title="">result</var> be true.</li>
@@ -58837,13 +58852,14 @@
that given by the <a href="#hit-region's-aria-role">hit region's ARIA role</a>, and whose textual representation, if any,
is given by the <a href="#hit-region's-label">hit region's label</a>.</p>
+<!--CLEANUP-->
<p class=note>Thus, for instance, a user agent on a touch-screen device could provide haptic
feedback when the user croses over a <a href="#hit-region's-bounding-circumference">hit region's bounding circumference</a>, and then
read the <a href="#hit-region's-label">hit region's label</a> to the user. Similarly, a desktop user agent with a
virtual accessibility focus separate from the keyboard input focus could allow the user to
navigate through the hit regions, using the virtual DOM tree described above to enable
- hierarchical navigation. When an interactive control inside the <code><a href=#the-canvas-element>canvas</a></code> element is
- focused, if the control has a corresponding region, then that <a href="#hit-region's-bounding-circumference">hit region's bounding
+ hierarchical navigation. When an interactive control inside the <code><a href=#the-canvas-element>canvas</a></code> element
+ <a href=#gains-focus>gains focus</a>, if the control has a corresponding region, then that <a href="#hit-region's-bounding-circumference">hit region's bounding
circumference</a> could be used to determine what area of the display to magnify.</p>
</div>
@@ -59440,12 +59456,13 @@
<p>When a canvas is interactive, authors should include focusable elements in the element's
fallback content corresponding to each focusable part of the canvas, as in the <a href=#drawCustomFocusRingExample>example above</a>.</p>
+<!--CLEANUP-->
<p>To expose text and interactive content on a <code><a href=#the-canvas-element>canvas</a></code> to users of accessibility
tools, authors should use the <code title=dom-context-2d-addHitRegion><a href=#dom-context-2d-addhitregion>addHitRegion()</a></code>
API. When rendering focus rings, to ensure that focus rings have the appearance of native focus
rings, authors should use the <code title=dom-context-2d-drawSystemFocusRing><a href=#dom-context-2d-drawsystemfocusring>drawSystemFocusRing()</a></code> method, passing it the
element for which a ring is being drawn. This method only draws the focus ring if the element is
- focused, so that it can simply be called whenever drawing the element, without checking whether
+ <a href=#focused>focused</a>, so that it can simply be called whenever drawing the element, without checking whether
the element is focused or not first.</p>
<p id=no-text-editing-in-canvas-please>Authors should avoid implementing text editing controls
@@ -60383,8 +60400,8 @@
<li><code><a href=#the-fieldset-element>fieldset</a></code> elements that have a <code title=attr-fieldset-disabled><a href=#attr-fieldset-disabled>disabled</a></code> attribute</li>
- </ul><p class=note>This definition is used to determine what elements can be <a href=#specially-focusable title="tabindex
- focus flag">focused</a> and which elements match the <code title=selector-disabled><a href=#selector-disabled>:disabled</a></code> pseudo-class.</p>
+ </ul><!--CLEANUP--><p class=note>This definition is used to determine what elements <a href=#specially-focusable title="tabindex
+ focus flag">can be focused</a> and which elements match the <code title=selector-disabled><a href=#selector-disabled>:disabled</a></code> pseudo-class.</p>
<div class=impl>
@@ -60561,6 +60578,19 @@
</dd>
+ <dt><dfn id=selector-focus title=selector-focus><code>:focus</code></dfn></dt>
+
+ <dd>
+
+ <p>For the purposes of the CSS ':focus' pseudo-class, an <dfn id=element-has-the-focus>element has the focus</dfn> when
+ its <a href=#top-level-browsing-context>top-level browsing context</a> has the system focus, it is not itself a
+ <a href=#browsing-context-container>browsing context container</a>, and it is one of the elements listed in the <a href=#focus-chain>focus
+ chain</a> of the <a href=#currently-focused-area-of-a-top-level-browsing-context title="currently focused area of a top-level browsing
+ context">currently focused area of the top-level browsing context</a>.</p>
+
+ </dd>
+
+
<dt><dfn id=selector-enabled title=selector-enabled><code>:enabled</code></dfn></dt>
<dd>
@@ -60828,8 +60858,10 @@
</dl><p class=note>Another section of this specification defines the <i><a href=#target-element>target element</a></i> used with
the <code title=selector-target>:target</code> pseudo-class.</p>
- <p class=note>This specification does not define when an element matches the <code title=selector-focus>:focus</code> or <code title=selector-lang()>:lang()</code> dynamic
- pseudo-classes, as those are all defined in sufficient detail in a language-agnostic fashion in
+<!--CLEANUP-->
+ <p class=note>This specification does not define when an element matches the
+ <code title=selector-lang()>:lang()</code> dynamic
+ pseudo-class, as it is defined in sufficient detail in a language-agnostic fashion in
the Selectors specification. <a href=#refsSELECTORS>[SELECTORS]</a></p>
<!--REMOVE-TOPIC:CSS-->
@@ -68497,8 +68529,7 @@
<li><p>Use the <a href=#scroll-an-element-into-view>scroll an element into view</a> algorithm to scroll <var title="">target</var> into view, with the <var title="">align to top flag</var> set. <a href=#refsCSSOMVIEW>[CSSOMVIEW]</a></li>
- <li><p>If <var title="">target</var> is a <a href=#focusable>focusable</a> element, run the <a href=#focusing-steps>focusing
- steps</a> for that element.</li>
+ <li><p>Run the <a href=#focusing-steps>focusing steps</a> for that element.</li>
</ol><p><dfn id=the-indicated-part-of-the-document>The indicated part of the document</dfn> is the one that the fragment identifier, if any,
identifies. The semantics of the fragment identifier in terms of mapping it to a specific DOM Node
@@ -75915,8 +75946,7 @@
no <code title=event-mouseover><a href=#event-mouseover>mouseover</a></code> event would be fired, and the <code title=event-mousemove><a href=#event-mousemove>mousemove</a></code> and <code title=event-click><a href=#event-click>click</a></code> events would
be fired on the <code><a href=#the-body-element>body</a></code> element rather than the paragraph.</p>
- <p class=note>When a node is inert, it also can't be <a href=#focusable>focusable</a>, and it is disabled
- if it is a <a href=#concept-command title=concept-command>command</a>.</p>
+ <p class=note>When a node is inert, it generally cannot be focused. Inert nodes that are <a href=#concept-command title=concept-command>commands</a> will also get disabled.</p>
<p>An entire <code><a href=#document>Document</a></code> can be marked as <dfn id=blocked-by-a-modal-dialog>blocked by a modal dialog</dfn> <var title="">subject</var>. While a <code><a href=#document>Document</a></code> is so marked, every node that is <a href=#in-a-document title="in a Document">in the <code>Document</code></a>, with the exception of the <var title="">subject</var> element and its descendants, must be marked <a href=#inert>inert</a>. (The
elements excepted by this paragraph can additionally be marked <a href=#inert>inert</a> through other
@@ -76102,33 +76132,294 @@
http://msdn.microsoft.com/workshop/author/dhtml/reference/events/onbeforeactivate.asp
-->
- <div class=impl>
+ <h4 id=introduction-7><span class=secno>8.4.1 </span>Introduction</h4>
- <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 <a href=#the-body-element-0>the body element</a>, if there is one, or else at the
- <code><a href=#document>Document</a></code>'s root element, if there is one. If there is no root element, key events
- must not be fired.</p>
+ <p><i>This section is non-normative.</i></p>
- <p>User agents may track focus for each <a href=#browsing-context>browsing context</a> or <code><a href=#document>Document</a></code>
- individually, or may support only one focused element per <a href=#top-level-browsing-context>top-level browsing context</a>
- — user agents should follow platform conventions in this regard.</p>
+ <p>An HTML user interface typically consists of multiple interactive widgets, such as form
+ controls, scrollable regions, links, dialog boxes, browser tabs, and so forth. These widgets form
+ a hierarchy, with some (e.g. browser tabs, dialog boxes) containing others (e.g. links, form
+ controls).</p>
- <p>Which elements within a <a href=#top-level-browsing-context>top-level browsing context</a> currently have focus must be
- independent of whether or not the <a href=#top-level-browsing-context>top-level browsing context</a> itself has the <i>system
- focus</i>.</p>
+ <p>When interacting with an interface using a keyboard, key input is channeled from the system,
+ through the hierarchy of interactive widgets, to an active widget, which is said to be
+ <i title="">focused</i>.</p>
- <p id=bc-focus-ergo-bcc-focus>When a <a href=#child-browsing-context>child browsing context</a> is focused, its
- <a href=#browsing-context-container>browsing context container</a> must also have focus.</p>
+ <div class=example>
- <p class=note>When an element is focused, the element matches the CSS <code>:focus</code>
- pseudo-class.</p>
+ <p>Consider an HTML application running in a browser tab running in a graphical environment.
+ Suppose this application had a page with some text fields and links, and was currently showing a
+ modal dialog, which itself had a text field and a button.</p>
+ <p>The hierarchy of focusable widgets, in this scenario, would include the browser window, which
+ would have, amongst its children, the browser tab containing the HTML application. The tab itself
+ would have as its children the various links and text fields, as well as the dialog. The dialog
+ itself would have as its children the text field and the button.</p>
+
+ <p><img src=http://images.whatwg.org/focus-tree.png alt=""><!-- purely decorative: it repeats the previous
+ paragraph, in graphical form --><p>If the widget with <i>focus</i> in this example was the text field in the dialog box, then key
+ input would be channeled from the graphical system to ① the Web browser, then to ②
+ the tab, then to ③ the dialog, and finally to ④ the text field.</p>
+
</div>
+ <p>Keyboard <em>events</em> are always targetted at this <i title="">focused</i> element.</p>
- <h4 id=sequential-focus-navigation-and-the-tabindex-attribute><span class=secno>8.4.1 </span>Sequential focus navigation and the <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute</h4>
+ <h4 id=data-model><span class=secno>8.4.2 </span>Data model</h4>
+
+ <p>The term <dfn id=focusable-area>focusable area</dfn> is used to refer to regions of the interface that can become
+ the target of keyboard input. Focusable areas can be elements, parts of elements, or other regions
+ managed by the user agent.</p>
+
+ <p>Each <i><a href=#focusable-area>focusable area</a></i> has a <dfn id=dom-anchor>DOM anchor</dfn>, which is a <code><a href=#node>Node</a></code> object
+ that represents the position of the <i><a href=#focusable-area>focusable area</a></i> in the DOM. (When the <i><a href=#focusable-area>focusable
+ area</a></i> is itself a <code><a href=#node>Node</a></code>, it is its own <i><a href=#dom-anchor>DOM anchor</a></i>.) The <i><a href=#dom-anchor>DOM anchor</a></i> is
+ used in some APIs as a substitute for the <i><a href=#focusable-area>focusable area</a></i> when there is no other DOM object
+ to represent the <i><a href=#focusable-area>focusable area</a></i>.</p>
+
+ <p>The following table describes what objects can be <i title="focusable area"><a href=#focusable-area>focusable
+ areas</a></i>. The cells in the left column describe objects that can be <i title="focusable
+ area"><a href=#focusable-area>focusable areas</a></i>; the cells in the right column describe the <i title="DOM anchor"><a href=#dom-anchor>DOM
+ anchors</a></i> for those elements. (The cells that span both columns are non-normative examples.)</p>
+
+ <table id=table-fa><thead><tr><th id=th-fa-area><i><a href=#focusable-area>Focusable area</a></i>
+ <th id=th-fa-dom-rep><i><a href=#dom-anchor>DOM anchor</a></i>
+ <tr><th colspan=2 id=th-fa-examples>Examples
+
+ <tbody><tr><th headers=th-fa-area class=data-header id=td-fa-1>
+ Elements that have their <a href=#specially-focusable>tabindex focus flag</a> set, that are not <a href=#concept-element-disabled title=concept-element-disabled>actually disabled</a>, that are not <a href=#expressly-inert-control title="expressly inert control">expressly inert</a>, and that are either <a href=#being-rendered>being
+ rendered</a> or <a href=#being-used-as-relevant-canvas-fallback-content>being used as relevant canvas fallback content</a>. <!--
+ CANVAS-FOCUS-FALLBACK -->
+ <td headers="td-fa-1 th-fa-dom-rep">
+ The element itself.
+ <tr><td headers="td-fa-1 th-fa-examples" colspan=2>
+ <p class=example><code><a href=#the-iframe-element>iframe</a></code>, <code title=attr-input-type-text><a href="#text-(type=text)-state-and-search-state-(type=search)"><input
+ type=text></a></code>, sometimes <code title=a><a href=#the-a-element><a href=""></a></code> (depending on platform
+ conventions).
+
+ <tbody><tr><th headers=th-fa-area class=data-header id=td-fa-2>
+ The shapes of <code><a href=#the-area-element>area</a></code> elements in an <a href=#image-map>image map</a> associated with an
+ <code><a href=#the-img-element>img</a></code> element that is <a href=#being-rendered>being rendered</a> and is not <a href=#expressly-inert-control title="expressly
+ inert control">expressly inert</a>.
+ <td headers="td-fa-2 th-fa-dom-rep">
+ The <code><a href=#the-img-element>img</a></code> element.
+ <tr><td headers="td-fa-2 th-fa-examples" colspan=2>
+ <div class=example>
+ <p>In the following example, the <code><a href=#the-area-element>area</a></code> element creates two shapes, one on each
+ image. The <i><a href=#dom-anchor>DOM anchor</a></i> of the first shape is the first <code><a href=#the-img-element>img</a></code> element, and the
+ <i><a href=#dom-anchor>DOM anchor</a></i> of the second shape is the second <code><a href=#the-img-element>img</a></code> element.</p>
+ <pre><map id=wallmap><area alt="Enter Door" coords="10,10,100,200" href="door.html"></map>
+...
+<img src="images/innerwall.jpeg" alt="There is a white wall here, with a door." usemap="#wallmap">
+...
+<img src="images/outerwall.jpeg" alt="There is a red wall here, with a door." usemap="#wallmap"></pre>
+ </div>
+
+ <tbody><tr><th headers=th-fa-area class=data-header id=td-fa-3>
+ The user-agent provided subwidgets of elements that are <a href=#being-rendered>being rendered</a> and are not
+ <a href=#concept-element-disabled title=concept-element-disabled>actually disabled</a> or <a href=#expressly-inert-control title="expressly
+ inert control">expressly inert</a>.
+ <td headers="td-fa-3 th-fa-dom-rep">
+ The element for which the <i><a href=#focusable-area>focusable area</a></i> is a subwidget.
+ <tr><td headers="td-fa-3 th-fa-examples" colspan=2>
+ <p class=example>The <a href=#expose-a-user-interface-to-the-user title="expose a user interface to the user">controls in the user
+ interface that is exposed to the user</a> for a <code><a href=#the-video-element>video</a></code> element, the up and down
+ buttons in a spin-control version of <code title=attr-input-type-number><a href="#number-state-(type=number)"><input
+ type=number></a></code>, the two range control widgets in a <code title=attr-input-type-range><a href="#range-state-(type=range)"><input type=range multiple></a></code>, the part of a
+ <code><a href=#the-details-element>details</a></code> element's rendering that enabled the element to be opened or closed using
+ keyboard input.</p>
+
+ <tbody><tr><th headers=th-fa-area class=data-header id=td-fa-4>
+ The scrollable regions of elements that are <a href=#being-rendered>being rendered</a> are not <a href=#expressly-inert-control title="expressly inert control">expressly inert</a>. <!-- the being rendered part is kinda
+ redundant, a scrollable region is a box generated for the element so by definition if the
+ element has a scrollable region it is being rendered -->
+ <td headers="td-fa-4 th-fa-dom-rep">
+ The element for which the box that the scrollable region scrolls was created.
+ <tr><td headers="td-fa-4 th-fa-examples" colspan=2>
+ <p class=example>The CSS 'overflow' property's 'scroll' value typically creates a scrollable
+ region.</p>
+
+ <tbody><tr><th headers=th-fa-area class=data-header id=td-fa-5>
+ The viewport of a <code><a href=#document>Document</a></code> that is in a <a href=#browsing-context>browsing context</a> and is not
+ <a href=#inert>inert</a>.
+ <td headers="td-fa-5 th-fa-dom-rep">
+ The <code><a href=#document>Document</a></code> for which the viewport was created.
+ <tr><td headers="td-fa-5 th-fa-examples" colspan=2>
+ <p class=example>The contents of an <code><a href=#the-iframe-element>iframe</a></code>.</p>
+
+ <tbody><tr><th headers=th-fa-area class=data-header id=td-fa-6>
+ Any other element or part of an element, especially to aid with accessibility or to better
+ match platform conventions.
+ <td headers="td-fa-6 th-fa-dom-rep">
+ The element.
+ <tr><td headers="td-fa-6 th-fa-examples" colspan=2>
+ <p class=example>A user agent could make all list item bullets focusable, so that a user can
+ more easily navigate lists.</p>
+ <p class=example>Similarly, a user agent could make all elements with <code title=attr-title><a href=#attr-title>title</a></code> attributes focusable, so that their advisory information can
+ be accessed.</p>
+
+ </table><p id=bc-focus-ergo-bcc-focus class=note>A <a href=#browsing-context-container>browsing context container</a> (e.g. an
+ <code><a href=#the-iframe-element>iframe</a></code>) is a <i><a href=#focusable-area>focusable area</a></i>, but key events routed to a <a href=#browsing-context-container>browsing context
+ container</a> get immediately routed to the <a href=#nested-browsing-context>nested browsing context</a>'s <a href=#active-document>active
+ document</a>. Similarly, in sequential focus navigation a <a href=#browsing-context-container>browsing context
+ container</a> essentially acts merely as a placeholder for its <a href=#nested-browsing-context>nested browsing
+ context</a>'s <a href=#active-document>active document</a>.</p>
+
+ <p>Each <i><a href=#focusable-area>focusable area</a></i> belongs to a <dfn id=control-group>control group</dfn>. Each <i><a href=#control-group>control group</a></i> has
+ an <dfn id=control-group-owner title="control group owner">owner</dfn>. <a href=#control-group-owner title="control group owner">Control group
+ owners</a> are <dfn id=control-group-owner-object title="control group owner object">control group owner objects</dfn>. The
+ following are <a href=#control-group-owner-object title="control group owner object">control group owner objects</a>:</p>
+
+ <ul class=brief><li><code><a href=#document>Document</a></code> object in <a href=#browsing-context title="browsing context">browsing contexts</a>.</li>
+
+ <li><code><a href=#the-dialog-element>dialog</a></code> elements that have an <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code>
+ attribute specified and that are <a href=#being-rendered>being rendered</a>.</li>
+
+ </ul><p>Each <a href=#control-group-owner-object>control group owner object</a> owns one <i><a href=#control-group>control group</a></i> (though that
+ group might be empty).</p>
+
+ <p>If the <i><a href=#dom-anchor>DOM anchor</a></i> of a <i><a href=#focusable-area>focusable area</a></i> is a <a href=#control-group-owner-object>control group owner
+ object</a>, then that <i><a href=#focusable-area>focusable area</a></i> belongs to that <a href=#control-group-owner-object>control group owner
+ object</a>'s <i><a href=#control-group>control group</a></i>. Otherwise, the <i><a href=#focusable-area>focusable area</a></i> belongs to its
+ <i><a href=#dom-anchor>DOM anchor</a></i>'s nearest ancestor <a href=#control-group-owner-object>control group owner object</a>.</p>
+
+ <div class=example>
+
+ <p>Thus, a viewport always belongs to the <i><a href=#control-group>control group</a></i> of the <code><a href=#document>Document</a></code>
+ for which the viewport was created, an <code><a href=#the-input-element>input</a></code> control belongs to the <i><a href=#control-group>control
+ group</a></i> of its nearest ancestor <code><a href=#the-dialog-element>dialog</a></code> or <code><a href=#document>Document</a></code>, and an image
+ map's shapes belong to the nearest ancestor <code><a href=#the-dialog-element>dialog</a></code> or <code><a href=#document>Document</a></code> of the
+ <code><a href=#the-img-element>img</a></code> elements (not the <code><a href=#the-area-element>area</a></code> elements — this means one
+ <code><a href=#the-area-element>area</a></code> element might create multiple shapes in different <i title="control
+ group"><a href=#control-group>control groups</a></i>).</p>
+
+ </div>
+
+ <p>An element is <dfn id=expressly-inert-control title="expressly inert control">expressly inert</dfn> if it is
+ <a href=#inert>inert</a> but it is not a <a href=#control-group-owner-object>control group owner object</a> and its nearest
+ ancestor <a href=#control-group-owner-object>control group owner object</a> is not <a href=#inert>inert</a>.</p>
+
+ <p>One <i><a href=#focusable-area>focusable area</a></i> in each non-empty <i><a href=#control-group>control group</a></i> is designated the
+ <dfn id=focused-area-of-the-control-group>focused area of the control group</dfn>. Which control is so designated changes over time,
+ based on algorithms in this specification. If a <i><a href=#control-group>control group</a></i> is empty, it has no <i title="focused area of the control group"><a href=#focused-area-of-the-control-group>focused area</a></i>.</p>
+
+ <p>Each <a href=#control-group-owner-object>control group owner object</a> can also act as the <dfn id=dialog-group-manager title="dialog group
+ manager">manager</dfn> of a <dfn id=dialog-group>dialog group</dfn>.</p>
+
+ <p>Each <code><a href=#the-dialog-element>dialog</a></code> element that has an <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code>
+ attribute specified and that is <a href=#being-rendered>being rendered</a> (i.e. that is a <a href=#control-group-owner-object>control group
+ owner object</a>) and is not <a href=#expressly-inert-dialog title="expressly inert dialog">expressly inert</a>
+ belongs to the <i><a href=#dialog-group>dialog group</a></i> whose <a href=#dialog-group-manager title="dialog group manager">manager</a> is
+ the <code><a href=#the-dialog-element>dialog</a></code> element's nearest ancestor <a href=#control-group-owner-object>control group owner object</a>.</p>
+
+ <p>A <code><a href=#the-dialog-element>dialog</a></code> is <dfn id=expressly-inert-dialog title="expressly inert dialog">expressly inert</dfn> if it is
+ <a href=#inert>inert</a> but its nearest ancestor <a href=#control-group-owner-object>control group owner object</a> is not.</p>
+
+ <p>If no <code><a href=#the-dialog-element>dialog</a></code> element has a particular <a href=#control-group-owner-object>control group owner object</a> as
+ its nearest ancestor <a href=#control-group-owner-object>control group owner object</a>, then that <a href=#control-group-owner-object>control group owner
+ object</a> has no <i><a href=#dialog-group>dialog group</a></i>.</p>
+
+ <p>Each <i><a href=#dialog-group>dialog group</a></i> can have a <code><a href=#the-dialog-element>dialog</a></code> designated as the <dfn id=focused-dialog-of-the-dialog-group>focused
+ dialog of the dialog group</dfn>. Which <code><a href=#the-dialog-element>dialog</a></code> is so designated changes over time,
+ based on algorithms in this specification.</p>
+
+ <hr><p><i title="focusable area"><a href=#focusable-area>Focusable areas</a></i> in <i title="control group"><a href=#control-group>control groups</a></i>
+ are ordered relative to the <a href=#tree-order>tree order</a> of their <i title="DOM anchor"><a href=#dom-anchor>DOM
+ anchors</a></i>. <i title="focusable area"><a href=#focusable-area>Focusable areas</a></i> with the same <i><a href=#dom-anchor>DOM anchor</a></i> in a
+ <i><a href=#control-group>control group</a></i> are ordered relative to their CSS box's relative positions in a pre-order,
+ depth-first traversal of the box tree. <a href=#refsCSS>[CSS]</a></p>
+
+ <p>Elements in <i title="dialog group"><a href=#dialog-group>dialog groups</a></i> are ordered in <a href=#tree-order>tree
+ order</a>.</p>
+
+ <hr><p>The <dfn id=currently-focused-area-of-a-top-level-browsing-context>currently focused area of a top-level browsing context</dfn> at any particular time is
+ the <i><a href=#focusable-area>focusable area</a></i> or <code><a href=#the-dialog-element>dialog</a></code> returned by this algorithm:</p>
+
+ <ol><li><p>Let <var title="">candidate</var> be the <code><a href=#document>Document</a></code> of the <a href=#top-level-browsing-context>top-level
+ browsing context</a>.</li>
+
+ <li>
+
+ <p>If <var title="">candidate</var> has a <i><a href=#dialog-group>dialog group</a></i> with a designated
+ <a href=#focused-dialog-of-the-dialog-group>focused dialog of the dialog group</a>, then let <var title="">candidate</var> be the
+ designated <a href=#focused-dialog-of-the-dialog-group>focused dialog of the dialog group</a>, and redo this step.</p>
+
+ <p>Otherwise, if <var title="">candidate</var> has a non-empty <i><a href=#control-group>control group</a></i>, and the
+ designated <a href=#focused-area-of-the-control-group>focused area of the control group</a> is a <a href=#browsing-context-container>browsing context
+ container</a>, then let <var title="">candidate</var> be the <a href=#active-document>active document</a> of
+ that <a href=#browsing-context-container>browsing context container</a>'s <a href=#nested-browsing-context>nested browsing context</a>, and redo
+ this step.</p>
+
+ <p>Otherwise, if <var title="">candidate</var> has a non-empty <i><a href=#control-group>control group</a></i>, let
+ <var title="">candidate</var> be the designated <a href=#focused-area-of-the-control-group>focused area of the control
+ group</a>.</p>
+
+ </li>
+
+ <li><p>Return <var title="">candidate</var>.</li>
+
+ </ol><p>An element that is the <i><a href=#dom-anchor>DOM anchor</a></i> of a <i><a href=#focusable-area>focusable area</a></i> is said to <dfn id=gains-focus title="gains focus">gain focus</dfn> when that <i><a href=#focusable-area>focusable area</a></i> becomes the <a href=#currently-focused-area-of-a-top-level-browsing-context>currently
+ focused area of a top-level browsing context</a>. When an element is the <i><a href=#dom-anchor>DOM anchor</a></i> of a
+ <i><a href=#focusable-area>focusable area</a></i> of the <a href=#currently-focused-area-of-a-top-level-browsing-context>currently focused area of a top-level browsing context</a>,
+ it is <dfn id=focused>focused</dfn>.</p>
+
+ <div class=impl>
+
+ <p>The <dfn id=focus-chain>focus chain</dfn> of a <i><a href=#focusable-area>focusable area</a></i> or <a href=#control-group-owner-object>control group owner
+ object</a> <var title="">subject</var> is the ordered list constructed as follows:</p>
+
+ <ol><li><p>Let <var title="">current object</var> be <var title="">subject</var>.</li>
+
+ <li><p>Let <var title="">output</var> be an empty list.</li>
+
+ <li><p><i>Loop</i>: Append <var title="">current object</var> to <var title="">output</var>.</li>
+
+ <li>
+
+ <p>If <var title="">current object</var> is an <code><a href=#the-area-element>area</a></code> element's shape, append
+ that <code><a href=#the-area-element>area</a></code> element to <var title="">output</var>.</p>
+
+ <p>Otherwise, if <var title="">current object</var> is a <i><a href=#focusable-area>focusable area</a></i> whose <i><a href=#dom-anchor>DOM
+ anchor</a></i> is an element that is not <var title="">current object</var> itself, append that
+ <i><a href=#dom-anchor>DOM anchor</a></i> element to <var title="">output</var>.</p>
+
+ </li>
+
+ <li>
+
+ <p>Otherwise, if <var title="">current object</var> is a <code><a href=#the-dialog-element>dialog</a></code> object in a
+ <i><a href=#dialog-group>dialog group</a></i>, let <var title="">current object</var> be that <i><a href=#dialog-group>dialog
+ group</a></i>'s <a href=#dialog-group-manager title="dialog group manager">manager</a>, and return to the step
+ labeled <i>loop</i>.</p>
+
+ <p>Otherwise, if <var title="">current object</var> is a <i><a href=#focusable-area>focusable area</a></i>, let <var title="">current object</var> be that <i><a href=#focusable-area>focusable area</a></i>'s <i><a href=#control-group>control group</a></i>'s
+ <a href=#control-group-owner title="control group owner">owner</a>, and return to the step labeled <i>loop</i>.</p>
+
+ <p>Otherwise, if <var title="">current object</var> is a <code><a href=#document>Document</a></code> in a
+ <a href=#nested-browsing-context>nested browsing context</a>, let <var title="">current object</var> be its
+ <a href=#browsing-context-container>browsing context container</a>, and return to the step labeled <i>loop</i>.</p>
+
+ </li>
+
+ <li>
+
+ <p>Return <var title="">output</var>.</p>
+
+ <p class=note>The chain starts with <var title="">subject</var> and (if <var title="">subject</var> is or can be the <a href=#currently-focused-area-of-a-top-level-browsing-context>currently focused area of a top-level browsing
+ context</a>) continues up the focus hierarchy up to the <code><a href=#document>Document</a></code> of the
+ <a href=#top-level-browsing-context>top-level browsing context</a>.</p>
+
+ </li>
+
+ </ol></div>
+
+
+ <h4 id=sequential-focus-navigation-and-the-tabindex-attribute><span class=secno>8.4.3 </span>Sequential focus navigation and the <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute</h4>
+
+ <!-- XXX dfn sequential focus navigation -->
+ <!-- e.g. when tabbing into a <span>browsing context container</span>, you defer to the Document's idea of what the first focusable area is -->
+
<p>The <dfn id=attr-tabindex title=attr-tabindex><code>tabindex</code></dfn> content attribute allows authors to
control whether an element is supposed to be 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
@@ -76142,8 +76433,8 @@
<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>
+ below. This flag is a factor that contributes towards determining whether an element is a
+ <i><a href=#focusable-area>focusable area</a></i>, as described in the previous section.</p>
<p>If the attribute is specified, it must be parsed using the <a href=#rules-for-parsing-integers>rules for parsing
integers</a>. The attribute's values have the following meanings:</p>
@@ -76153,8 +76444,9 @@
<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>
+ <a href=#specially-focusable>tabindex focus flag</a> is set and, if so, whether the element and any <i title="focusable area"><a href=#focusable-area>focusable areas</a></i> that have the element as their <i><a href=#dom-anchor>DOM anchor</a></i> can
+ be reached using sequential focus navigation, and if so, what their relative order should
+ be.</p>
<p>Modulo platform conventions, it is suggested that for the following elements, the
<a href=#specially-focusable>tabindex focus flag</a> be set:</p>
@@ -76199,7 +76491,8 @@
<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>
+ the element, or any <i title="focusable area"><a href=#focusable-area>focusable areas</a></i> that have the element as
+ their <i><a href=#dom-anchor>DOM anchor</a></i>, 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
@@ -76214,8 +76507,10 @@
<dd>
+<!--CLEANUP-->
<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
+ element and any <i title="focusable area"><a href=#focusable-area>focusable areas</a></i> that have the element as
+ their <i><a href=#dom-anchor>DOM anchor</a></i> to be reached using sequential focus navigation, and should follow platform conventions
to determine the element's relative order.</p>
</dd>
@@ -76224,31 +76519,33 @@
<dd>
+<!--CLEANUP-->
<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>
+ element and any <i title="focusable area"><a href=#focusable-area>focusable areas</a></i> that have the element as their
+ <i><a href=#dom-anchor>DOM anchor</a></i> to be reached using sequential focus navigation, and should place the
+ element — referenced as <var title="">candidate</var> below — and the aforementioned <i title="focusable area"><a href=#focusable-area>focusable areas</a></i> in the sequential
+ focus navigation order so that they are:</p>
- <ul><li>before any <a href=#focusable>focusable</a> element whose <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code>
+ <ul><!--CLEANUP--><li>before any <i><a href=#focusable-area>focusable area</a></i> whose <i><a href=#dom-anchor>DOM anchor</a></i> is an element whose <code title=attr-tabindex><a href=#attr-tabindex>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 title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code>
+ <li>before any <i><a href=#focusable-area>focusable area</a></i> whose <i><a href=#dom-anchor>DOM anchor</a></i> is an element whose <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code>
attribute has a value equal to or less than zero,</li>
- <li>after any element whose <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute has a value
+ <li>after any <i><a href=#focusable-area>focusable area</a></i> whose <i><a href=#dom-anchor>DOM anchor</a></i> is an element whose <code title=attr-tabindex><a href=#attr-tabindex>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>
+ attribute on <var title="">candidate</var>,</li>
- <li>after any element whose <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute has a value
- equal to the value of the <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute on the element
- but that is earlier in the document in <a href=#tree-order>tree order</a> than the element,</li>
+ <li>after any <i><a href=#focusable-area>focusable area</a></i> whose <i><a href=#dom-anchor>DOM anchor</a></i> is an element whose <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute has a value
+ equal to the value of the <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute on <var title="">candidate</var>
+ but that is earlier in the document in <a href=#tree-order>tree order</a> than <var title="">candidate</var>,</li>
- <li>before any element whose <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute has a value
- equal to the value of the <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute on the element
- but that is later in the document in <a href=#tree-order>tree order</a> than the element, and</li>
+ <li>before any <i><a href=#focusable-area>focusable area</a></i> whose <i><a href=#dom-anchor>DOM anchor</a></i> is an element whose <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute has a value
+ equal to the value of the <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute on <var title="">candidate</var>
+ but that is later in the document in <a href=#tree-order>tree order</a> than <var title="">candidate</var>, and</li>
- <li>before any element whose <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute has a value
- greater than the value of the <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute on the
- element.</li>
+ <li>before any <i><a href=#focusable-area>focusable area</a></i> whose <i><a href=#dom-anchor>DOM anchor</a></i> is an element whose <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute has a value
+ greater than the value of the <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute on <var title="">candidate</var>.</li>
</ul></dd>
@@ -76258,7 +76555,7 @@
<p class=note>This means that an element that is only focusable because of its <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute will fire a <code title=event-click><a href=#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>
+ <a href=#focused>focused</a>).</p>
<p>The <dfn id=dom-tabindex title=dom-tabIndex><code>tabIndex</code></dfn> IDL attribute must
<a href=#reflect>reflect</a> the value of the <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> content
@@ -76271,198 +76568,437 @@
<div class=impl>
- <h4 id=focus-management><span class=secno>8.4.2 </span>Focus management</h4>
+ <h4 id=processing-model-5><span class=secno>8.4.4 </span>Processing model</h4>
- <p>An element is <dfn id=focusable>focusable</dfn> if all of the following conditions are met:</p>
+ <p>The <dfn id=focusing-steps>focusing steps</dfn> for an object <var title="">new focus target</var> that is
+ either a <i><a href=#focusable-area>focusable area</a></i>, or an element that is not a <i><a href=#focusable-area>focusable area</a></i>, or a
+ <a href=#browsing-context>browsing context</a>, are as follows:</p>
- <ul><li>The element's <a href=#specially-focusable>tabindex focus flag</a> is set.</li>
+ <ol><!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/2816 div.focus() when it's got a scroll region --><!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/2817 img.focus() when it's got an image map --><li>
- <li>The element is either <a href=#being-rendered>being rendered</a> or <!-- CANVAS-FOCUS-FALLBACK --> is a
- descendant of a <code><a href=#the-canvas-element>canvas</a></code> element that <a href=#represents>represents</a> <a href=#embedded-content>embedded
- content</a>.</li>
+ <p>If <var title="">new focus target</var> is neither a <code><a href=#the-dialog-element>dialog</a></code> element that has an
+ <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code> attribute specified and that is <a href=#being-rendered>being
+ rendered</a> (i.e. that is a <a href=#control-group-owner-object>control group owner object</a>), nor a <i><a href=#focusable-area>focusable
+ area</a></i>, then run the first matching set of steps from the following list:</p>
- <li>The element is not <a href=#inert>inert</a>.</li>
+ <dl class=switch><dt>If <var title="">new focus target</var> is an <code><a href=#the-area-element>area</a></code> element with one or more
+ shapes that are <i title="focusable area"><a href=#focusable-area>focusable areas</a></i></dt>
- <li>The element is not <a href=#concept-element-disabled title=concept-element-disabled>disabled</a>.</li>
+ <dd>
- </ul><p>In addition, each shape that is generated for an <code><a href=#the-area-element>area</a></code> element, any
- user-agent-provided interface components of <a href=#media-element title="media element">media elements</a>
- (e.g. a play button), and distinct user interface components of form controls (e.g. "up" and
- "down" buttons on an <code title=attr-input-type-number><a href="#number-state-(type=number)"><input type=number></a></code> spin
- control), should be <a href=#focusable>focusable</a>, unless platform conventions dictate otherwise or
- unless their corresponding element is <a href=#concept-element-disabled title=concept-element-disabled>disabled</a>. (A
- single <code><a href=#the-area-element>area</a></code> element can correspond to multiple shapes, since image maps can be reused
- with multiple images on a page.)</p>
+ <p>Let <var title="">new focus target</var> be the shape corresponding to the first
+ <code><a href=#the-img-element>img</a></code> element in tree order that uses the image map to which the <code><a href=#the-area-element>area</a></code>
+ element belongs.</p>
- <p>The user agent may also make part of a <code><a href=#the-details-element>details</a></code> element's rendering
- <a href=#focusable>focusable</a>, to enable the element to be opened or closed using keyboard input.
- However, this is distinct from the <code><a href=#the-details-element>details</a></code> or <code><a href=#the-summary-element>summary</a></code> element being
- focusable.</p>
+ </dd>
- <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>
+ <dt>If <var title="">new focus target</var> is an element with one or more scrollable regions
+ that are <i title="focusable area"><a href=#focusable-area>focusable areas</a></i></dt>
- <ol><li><p>If the element is not <a href=#in-a-document title="in a Document">in a <code>Document</code></a>, or if
- the element's <code><a href=#document>Document</a></code> has no <a href=#browsing-context>browsing context</a>, or if the element's
- <code><a href=#document>Document</a></code>'s <a href=#browsing-context>browsing context</a> has no <a href=#top-level-browsing-context>top-level browsing
- context</a>, or if the element is not <a href=#focusable>focusable</a>, or if the element is already
- focused, then abort these steps.</p>
+ <dd>
- <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.</li>
+ <p>Let <var title="">new focus target</var> be the element's first scrollable region,
+ according to a pre-order, depth-first traversal of the box tree. <a href=#refsCSS>[CSS]</a></p>
+ </dd>
+
+
+ <dt>If <var title="">new focus target</var> is <a href=#the-body-element-0>the body element</a> of its
+ <code><a href=#document>Document</a></code></dt>
+ <dt>If <var title="">new focus target</var> is the <a href=#root-element>root element</a> of its
+ <code><a href=#document>Document</a></code> and that <code><a href=#document>Document</a></code> has no <a href=#the-body-element-0 title="the body
+ element">body element</a></dt>
+
+ <dd>
+
+ <p>Let <var title="">new focus target</var> be the <code><a href=#document>Document</a></code>'s viewport.</p>
+
+ </dd>
+
+
+ <dt>If <var title="">new focus target</var> is a <a href=#browsing-context>browsing context</a></dt>
+
+ <dd>
+
+ <p>Let <var title="">new focus target</var> be the <a href=#browsing-context>browsing context</a>'s
+ <a href=#active-document>active document</a>.</p>
+
+ </dd>
+
+ <dt>Otherwise</dt>
+
+ <dd>
+
+ <p>Abort the <a href=#focusing-steps>focusing steps</a>.</p>
+
+ </dd>
+
+ </dl></li>
+
<li>
- <p>Make the element the currently focused element in its <a href=#top-level-browsing-context>top-level browsing
- context</a>.</p>
+ <p>If <var title="">new focus target</var> is a <a href=#control-group-owner-object>control group owner object</a> that is
+ not a <i><a href=#focusable-area>focusable area</a></i>, but does have a <i><a href=#dialog-group>dialog group</a></i>, and that <i><a href=#dialog-group>dialog group</a></i>
+ has a designated <a href=#focused-dialog-of-the-dialog-group title="focused dialog of the dialog group">focused dialog</a>, then
+ let <var title="">new focus target</var> be the <a href=#focused-dialog-of-the-dialog-group>focused dialog of the dialog
+ group</a>, and redo this step.</p>
- <p>Some elements, most notably <code><a href=#the-area-element>area</a></code>, can correspond to more than one distinct
- focusable area. If a particular area was indicated when the element was focused, then that is
- the area that must get focus; otherwise, e.g. when using the <code title=dom-focus><a href=#dom-focus>focus()</a></code> method, the first such region in tree order is the one that
- must be focused.</p>
+ <p>Otherwise, if <var title="">new focus target</var> is a <a href=#control-group-owner-object>control group owner
+ object</a> that is not a <i><a href=#focusable-area>focusable area</a></i>, and its <i><a href=#control-group>control group</a></i> is not empty,
+ then designate <var title="">new focus target</var> as the <a href=#focused-area-of-the-control-group>focused area of the control
+ group</a>, and redo this step.</p>
+ <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/?saved=2818 -->
+ <p>Otherwise, if <var title="">new focus target</var> is a <a href=#browsing-context-container>browsing context
+ container</a>, then let <var title="">new focus target</var> be the <a href=#nested-browsing-context>nested browsing
+ context</a>'s <a href=#active-document>active document</a>, and redo this step.</p>
+
+ <p class=note>A <code><a href=#the-dialog-element>dialog</a></code> element can be both a <a href=#control-group-owner-object>control group owner
+ object</a> and a <i><a href=#focusable-area>focusable area</a></i>, if it has both an <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code> attribute specified and a <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute specified and is <a href=#being-rendered>being
+ rendered</a>.</p>
+
</li>
+ <li><p>If <var title="">new focus target</var> is a <i><a href=#focusable-area>focusable area</a></i> and its <i><a href=#dom-anchor>DOM
+ anchor</a></i> is <a href=#inert>inert</a>, then abort these steps.</li>
+
+ <li><p>If <var title="">new focus target</var> is the <a href=#currently-focused-area-of-a-top-level-browsing-context>currently focused area of a
+ top-level browsing context</a>, then abort these steps.</li>
+
+ <li><p>Let <var title="">old chain</var> be the <a href=#focus-chain>focus chain</a> of the <a href=#currently-focused-area-of-a-top-level-browsing-context title="currently focused area of a top-level browsing context">currently focused area of the
+ top-level browsing context</a> in which <var title="">new focus target</var> finds
+ itself.</li>
+
+ <li><p>Let <var title="">new chain</var> be the <a href=#focus-chain>focus chain</a> of <var title="">new
+ focus target</var>.</li>
+
+ <li><p>Run the <a href=#focus-update-steps>focus update steps</a> with <var title="">old chain</var>, <var title="">new chain</var>, and <var title="">new focus target</var> respectively.</li>
+
+ </ol><p>User agents must synchronously run the <a href=#focusing-steps>focusing steps</a> for a <i><a href=#focusable-area>focusable area</a></i>,
+ <code><a href=#the-dialog-element>dialog</a></code>, or <a href=#browsing-context>browsing context</a> <var title="">candidate</var> whenever the
+ user attempts to move the focus to <var title="">candidate</var>.</p>
+
+ <p>The <dfn id=unfocusing-steps>unfocusing steps</dfn> for an object <var title="">old focus target</var> that is
+ either a <i><a href=#focusable-area>focusable area</a></i> or an element that is not a <i><a href=#focusable-area>focusable area</a></i> are as
+ follows:</p>
+
+ <ol><!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/2819 --><!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/2822 --><li><p>If <var title="">old focus target</var> is <a href=#inert>inert</a>, then abort these
+ steps.</li>
+
<li>
- <p>The user agent may apply relevant platform-specific conventions for focusing widgets.</p>
+ <p>If <var title="">old focus target</var> is an <code><a href=#the-area-element>area</a></code> element and one of its
+ shapes is the <a href=#currently-focused-area-of-a-top-level-browsing-context>currently focused area of a top-level browsing context</a>, or, if <var title="">old focus target</var> is an element with one or more scrollable regions, and one of
+ them is the <a href=#currently-focused-area-of-a-top-level-browsing-context>currently focused area of a top-level browsing context</a>, then let <var title="">old focus target</var> be that <a href=#currently-focused-area-of-a-top-level-browsing-context>currently focused area of a top-level browsing
+ context</a>.</p>
- <p class=note>For example, some platforms select the contents of a text field when that field
- is focused.</p>
+ </li>
+ <li><p>Let <var title="">old chain</var> be the <a href=#focus-chain>focus chain</a> of the <a href=#currently-focused-area-of-a-top-level-browsing-context>currently
+ focused area of a top-level browsing context</a>.</li>
+
+ <li><p>If <var title="">old focus target</var> is not one of the entries in <var title="">old
+ chain</var>, then abort these steps.</li>
+
+ <li>
+
+ <p>If <var title="">old focus target</var> is a <code><a href=#the-dialog-element>dialog</a></code> in a <i><a href=#dialog-group>dialog group</a></i>,
+ and the <a href=#dialog-group-manager>dialog group manager</a> has a non-empty <i><a href=#control-group>control group</a></i>, then let <var title="">new focus target</var> be the designated <a href=#focused-area-of-the-control-group title="focused area of the control
+ group">focused area of that focus group</a>.</p>
+
+ <p>Otherwise, if <var title="">old focus target</var> is a <i><a href=#focusable-area>focusable area</a></i>, then let <var title="">new focus target</var> be the first <i><a href=#focusable-area>focusable area</a></i> of its <i><a href=#control-group>control
+ group</a></i> (if the <a href=#control-group-owner>control group owner</a> is a <code><a href=#document>Document</a></code>, this will
+ always be a viewport).</p>
+
+ <p>Otherwise, let <var title="">new focus target</var> be null.</p>
+
</li>
- <li><p><a href=#fire-a-simple-event>Fire a simple event</a> named <code title=event-focus><a href=#event-focus>focus</a></code> at the element.</li>
- <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/723 -->
+ <li><p>If <var title="">new focus target</var> is not null, then run the <a href=#focusing-steps>focusing
+ steps</a> for <var title="">new focus target</var>.</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>
+ </ol><p>When the <a href=#currently-focused-area-of-a-top-level-browsing-context>currently focused area of a top-level browsing context</a> is somehow
+ unfocused without another element being explicitly focused in its stead, the user agent must
+ synchronously run the <a href=#unfocusing-steps>unfocusing steps</a> for that object.</p>
- <p>The <dfn id=unfocusing-steps>unfocusing steps</dfn> for an element are as follows:</p>
+ <p class=note>The <a href=#unfocusing-steps>unfocusing steps</a> do not always result in the focus changing, even
+ when applied to the <a href=#currently-focused-area-of-a-top-level-browsing-context>currently focused area of a top-level browsing context</a>. For
+ example, if the <a href=#currently-focused-area-of-a-top-level-browsing-context>currently focused area of a top-level browsing context</a> is a viewport,
+ then it will usually keep its focus regardless until another <i><a href=#focusable-area>focusable area</a></i> is explicitly
+ focused with the <a href=#focusing-steps>focusing steps</a>.</p>
- <ol><li><p>If the element is an <code><a href=#the-input-element>input</a></code> element, and the <code title=event-input-change><a href=#event-input-change>change</a></code> event applies to the element, and the element does not
- have a defined <a href=#activation-behavior>activation behavior</a>, and the user has changed the element's <a href=#concept-fe-value title=concept-fe-value>value</a> or its list of <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a> while the control was focused
- without committing that change, then <a href=#fire-a-simple-event>fire a simple event</a> that bubbles named <code title=event-change><a href=#event-change>change</a></code> at the element.</p>
+ <hr><p>When a <i><a href=#focusable-area>focusable area</a></i> is added to an empty <i><a href=#control-group>control group</a></i>, it must be designated
+ the <i><a href=#focused-area-of-the-control-group>focused area of the control group</a></i>.</p>
- <li><p>Unfocus the element.</li>
+ <p>When a <i><a href=#dialog-group>dialog group</a></i> is formed, if the <a href=#dialog-group-manager>dialog group manager</a> has an empty
+ <i><a href=#control-group>control group</a></i>, the first non-<a href=#inert>inert</a> <code><a href=#the-dialog-element>dialog</a></code> in the <i><a href=#dialog-group>dialog
+ group</a></i>, if any, or else the first <code><a href=#the-dialog-element>dialog</a></code> in the <i><a href=#dialog-group>dialog group</a></i> regardless of
+ <a href=#inert title=inert>inertness</a>, must be designated the <a href=#focused-dialog-of-the-dialog-group>focused dialog of the dialog
+ group</a>.</p>
- <li><p><a href=#fire-a-simple-event>Fire a simple event</a> named <code title=event-blur><a href=#event-blur>blur</a></code> at the element.</li>
- <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/723 -->
+ <p><dfn id=focus-fixup-rule-one>Focus fixup rule one</dfn>: When the designated <a href=#focused-area-of-the-control-group title="focused area of the control
+ group">focused area of a control group</a> is removed from that <i><a href=#control-group>control group</a></i> in some
+ way (e.g. it stops being a <i><a href=#focusable-area>focusable area</a></i>, it is removed from the DOM, it becomes <a href=#expressly-inert-control title="expressly inert control">expressly inert</a>, etc), and the <i><a href=#control-group>control group</a></i> is
+ still not empty: designate the first non-<a href=#inert>inert</a> <i>focused area</i> in that <i><a href=#control-group>control
+ group</a></i> to be the new <a href=#focused-area-of-the-control-group>focused area of the control group</a>, if any; if they are all
+ <a href=#inert>inert</a>, then designate the first <i>focused area</i> in that <i><a href=#control-group>control group</a></i> to
+ be the new <a href=#focused-area-of-the-control-group>focused area of the control group</a> regardless of <a href=#inert title=inert>inertness</a>. If such a removal instead results in the <i><a href=#control-group>control group</a></i>
+ being empty, then there is simply no longer a <a href=#focused-area-of-the-control-group>focused area of the control group</a>.</p>
- </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=#document>Document</a></code>, or has a <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> attribute added. It would
+ <p class=example>For example, this might happen because an element is removed from its
+ <code><a href=#document>Document</a></code>, or has a <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> attribute added. It might
also happen to an <code><a href=#the-input-element>input</a></code> element when the element gets <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>.</p>
- </div>
+ <p><dfn id=focus-fixup-rule-two>Focus fixup rule two</dfn>: When a <i><a href=#dialog-group>dialog group</a></i> has no designed <a href=#focused-dialog-of-the-dialog-group>focused
+ dialog of the dialog group</a>, and its <a href=#dialog-group-manager>dialog group manager</a>'s <i><a href=#control-group>control
+ group</a></i> changes from being non-empty to being empty, the first non-<a href=#inert>inert</a>
+ <code><a href=#the-dialog-element>dialog</a></code> in the <i><a href=#dialog-group>dialog group</a></i>, if any, or else the first <code><a href=#the-dialog-element>dialog</a></code> in
+ the <i><a href=#dialog-group>dialog group</a></i> regardless of <a href=#inert title=inert>inertness</a>, must be designated
+ the <a href=#focused-dialog-of-the-dialog-group>focused dialog of the dialog group</a>.</p>
+ <p><dfn id=focus-fixup-rule-three>Focus fixup rule three</dfn>: When the designated <a href=#focused-dialog-of-the-dialog-group title="focused dialog of the
+ dialog group">focused dialog of a dialog group</a> is removed from that <i><a href=#dialog-group>dialog group</a></i> in
+ some way (e.g. it stops <a href=#being-rendered>being rendered</a>, it loses its <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code> attribute, it becomes <a href=#expressly-inert-dialog title="expressly inert
+ dialog">expressly inert</a>, etc), and there is still a <i><a href=#dialog-group>dialog group</a></i> (because the
+ <code><a href=#the-dialog-element>dialog</a></code> in question was not the last <code><a href=#the-dialog-element>dialog</a></code> in that <i><a href=#dialog-group>dialog group</a></i>):
+ if the <i><a href=#dialog-group>dialog group</a></i>'s <a href=#dialog-group-manager title="dialog group manager">manager</a>'s <i><a href=#control-group>control
+ group</a></i> is non-empty, let there be no designated <a href=#focused-dialog-of-the-dialog-group>focused dialog of the dialog group</a>
+ any more; otherwise (in the case that the <i><a href=#control-group>control group</a></i> is empty), designate the first
+ non-<a href=#inert>inert</a> <code><a href=#the-dialog-element>dialog</a></code> in the <i><a href=#dialog-group>dialog group</a></i> to be the <a href=#focused-dialog-of-the-dialog-group>focused
+ dialog of the dialog group</a>, or, if they are all <a href=#inert>inert</a>, designate the first
+ <code><a href=#the-dialog-element>dialog</a></code> in the <i><a href=#dialog-group>dialog group</a></i> to be the <a href=#focused-dialog-of-the-dialog-group>focused dialog of the dialog
+ group</a> regardless of <a href=#inert title=inert>inertness</a>.</p>
-<!--TOPIC:DOM APIs-->
- <h4 id=document-level-focus-apis><span class=secno>8.4.3 </span>Document-level focus APIs</h4>
+ <p>When the <a href=#currently-focused-area-of-a-top-level-browsing-context>currently focused area of a top-level browsing context</a> was a <i><a href=#focusable-area>focusable
+ area</a></i> but stops being a <i><a href=#focusable-area>focusable area</a></i>, or when it was a <code><a href=#the-dialog-element>dialog</a></code> in a
+ <a href=#dialog-group>dialog group</a> and stops being part of that <a href=#dialog-group>dialog group</a>, or when it
+ starts being <a href=#inert>inert</a>, the user agent must run the following steps:</p>
- <dl class=domintro><dt><var title="">document</var> . <code title=dom-document-activeElement><a href=#dom-document-activeelement>activeElement</a></code></dt>
+ <ol><!-- this is basically a special-cased version of the focusing steps --><li><p>Let <var title="">old focus target</var> be whatever the <a href=#currently-focused-area-of-a-top-level-browsing-context title="currently focused
+ area of a top-level browsing context">currently focused area of the top-level browsing
+ context</a> was immediately before this algorithm became applicable (e.g. before the element
+ was disabled, or the dialog was closed, or whatever caused this algorithm to tun).</li>
- <dd>
+ <li><p>Let <var title="">old chain</var> be the <a href=#focus-chain>focus chain</a> of the <a href=#currently-focused-area-of-a-top-level-browsing-context title="currently focused area of a top-level browsing context">currently focused area of the
+ top-level browsing context</a> at the same time.</li>
- <p>Returns the currently focused element.</p>
+ <li><p>Make sure that the changes implied by the focus fixup rules <a href=#focus-fixup-rule-one title="focus fixup rule
+ one">one</a>, <a href=#focus-fixup-rule-two title="focus fixup rule two">two</a>, and <a href=#focus-fixup-rule-three title="focus fixup
+ rule three">three</a> above are applied.</li>
- </dd>
+ <li><p>Let <var title="">new focus target</var> be the <a href=#currently-focused-area-of-a-top-level-browsing-context>currently focused area of a
+ top-level browsing context</a>.</li>
- <dt><var title="">document</var> . <code title=dom-document-hasFocus><a href=#dom-document-hasfocus>hasFocus</a></code>()</dt>
+ <li><p>If <var title="">old focus target</var> and <var title="">new focus target</var> are the
+ same, abort these steps.</li>
- <dd>
+ <li><p>Let <var title="">new chain</var> be the <a href=#focus-chain>focus chain</a> of <var title="">new
+ focus target</var>.</li>
- <p>Returns true if the document has focus; otherwise, returns false.</p>
+ <li><p>Run the <a href=#focus-update-steps>focus update steps</a> with <var title="">old chain</var>, <var title="">new chain</var>, and <var title="">new focus target</var> respectively.</li>
- </dd>
+ </ol><hr><p>The <dfn id=focus-update-steps>focus update steps</dfn>, given an <var title="">old chain</var>, a <var title="">new chain</var>, and a <var title="">new focus target</var> respectively, are as
+ follows:</p>
- <dt><var title="">window</var> . <code title=dom-window-focus><a href=#dom-window-focus>focus</a></code>()</dt>
+ <ol><!-- focusin/focusout?: http://software.hixie.ch/utilities/js/live-dom-viewer/saved/723 --><li><p>If the last entry in <var title="">old chain</var> and the last entry in <var title="">new chain</var> are the same, pop the last entry from <var title="">old chain</var>
+ and the last entry from <var title="">new chain</var> and redo this step.</li>
- <dd>
+ <li>
- <p>Focuses the window. Use of this method is discouraged. Allow the user to control window focus
- instead.</p>
+ <p>For each entry <var title="">entry</var> in <var title="">old chain</var>, in order, run
+ these substeps:</p>
- </dd>
+ <ol><li id=unfocus-causes-change-event><p>If <var title="">entry</var> is an <code><a href=#the-input-element>input</a></code>
+ element, and the <code title=event-input-change><a href=#event-input-change>change</a></code> event <a href=#concept-input-apply title=concept-input-apply>applies</a> to the element, and the element does not have a
+ defined <a href=#activation-behavior>activation behavior</a>, and the user has changed the element's <a href=#concept-fe-value title=concept-fe-value>value</a> or its list of <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a> while the control was focused
+ without committing that change, then <a href=#fire-a-simple-event>fire a simple event</a> that bubbles named <code title=event-change><a href=#event-change>change</a></code> at the element.</p>
- <dt><var title="">window</var> . <code title=dom-window-blur><a href=#dom-window-blur>blur</a></code>()</dt>
+ <li>
+ <p>If <var title="">entry</var> is an element, let <var title="">blur event target</var> be
+ <var title="">entry</var>.</p>
+
+ <p>If <var title="">entry</var> is a <code><a href=#document>Document</a></code> object, let <var title="">blur
+ event target</var> be that <code><a href=#document>Document</a></code> object's <code><a href=#window>Window</a></code> object.</p>
+
+ <p>Otherwise, let <var title="">blur event target</var> be null.</p>
+
+ </li>
+
+ <li>
+
+ <p>If <var title="">blur event target</var> is not null, <a href=#fire-a-simple-event>fire a simple event</a>
+ named <code title=event-blur><a href=#event-blur>blur</a></code> at <var title="">blur event target</var>.</p>
+
+ <p class=note>In some cases, e.g. if <var title="">entry</var> is an <code><a href=#the-area-element>area</a></code>
+ element's shape, a scrollable region, or a viewport, no event is fired.</p>
+
+ </li>
+
+ </ol></li>
+
+ <li><p>Apply any relevant platform-specific conventions for focusing <var title="">new focus
+ target</var>. (For example, some platforms select the contents of a text field when that field is
+ focused.)</li>
+
+ <li>
+
+ <p>For each entry <var title="">entry</var> in <var title="">new chain</var>, in reverse
+ order, run these substeps:</p>
+
+ <ol><li><p>If <var title="">entry</var> is a <code><a href=#the-dialog-element>dialog</a></code> element: Let <var title="">entry</var> be the designated <a href=#focused-dialog-of-the-dialog-group title="focused dialog of the dialog
+ group">focused dialog of its dialog group</a>.</li>
+
+ <li>
+
+ <p>If <var title="">entry</var> is a <i><a href=#focusable-area>focusable area</a></i>: Designate <var title="">entry</var> as the <a href=#focused-area-of-the-control-group>focused area of the control group</a>. If its <i><a href=#control-group>control
+ group</a></i>'s <a href=#control-group-owner title="control group owner">owner</a> is also a <a href=#dialog-group-manager>dialog group
+ manager</a>, then let there be no designated <a href=#focused-dialog-of-the-dialog-group title="focused dialog of the dialog
+ group">focused dialog</a> in that <i><a href=#dialog-group>dialog group</a></i>.</p>
+
+ <p class=note>It is possible for <var title="">entry</var> to be both a <code><a href=#the-dialog-element>dialog</a></code>
+ element and a <i><a href=#focusable-area>focusable area</a></i>, in which case it is its own <a href=#control-group-owner>control group
+ owner</a>.</p>
+
+ </li>
+
+ <li>
+
+ <p>If <var title="">entry</var> is an element, let <var title="">focus event target</var> be
+ <var title="">entry</var>.</p>
+
+ <p>If <var title="">entry</var> is a <code><a href=#document>Document</a></code> object, let <var title="">focus
+ event target</var> be that <code><a href=#document>Document</a></code> object's <code><a href=#window>Window</a></code> object.</p>
+
+ <p>Otherwise, let <var title="">focus event target</var> be null.</p>
+
+ </li>
+
+ <li>
+
+ <p>If <var title="">focus event target</var> is not null, <a href=#fire-a-simple-event>fire a simple event</a>
+ named <code title=event-focus><a href=#event-focus>focus</a></code> at <var title="">focus event target</var>.</p>
+
+ <p class=note>In some cases, e.g. if <var title="">entry</var> is an <code><a href=#the-area-element>area</a></code>
+ element's shape, a scrollable region, or a viewport, no event is fired.</p>
+
+ </li>
+
+ </ol></li>
+
+ </ol><hr><p>When a key event is to be routed in a <a href=#top-level-browsing-context>top-level browsing context</a>, the user agent
+ must run the follow steps:</p>
+
+ <ol><li><p>Let <var title="">target area</var> be the <a href=#currently-focused-area-of-a-top-level-browsing-context title="currently focused area of a
+ top-level browsing context">currently focused area of the top-level browsing
+ context</a>.</li>
+
+ <li><p>If <var title="">target area</var> is a <i><a href=#focusable-area>focusable area</a></i>, let <var title="">target
+ node</var> be <var title="">target area</var>'s <i><a href=#dom-anchor>DOM anchor</a></i>. Otherwise, <var title="">target area</var> is a <code><a href=#the-dialog-element>dialog</a></code>; let <var title="">target node</var> be
+ <var title="">target area</var>.</li>
+
+ <li>
+
+ <p>If <var title="">target node</var> is a <code><a href=#document>Document</a></code> that has a <a href=#the-body-element-0 title="the
+ body element">body element</a>, then let <var title="">target node</var> be <a href=#the-body-element-0>the body
+ element</a> of that <code><a href=#document>Document</a></code>.</p>
+
+ <p>Otherwise, if <var title="">target node</var> is a <code><a href=#document>Document</a></code> that has a
+ <a href=#root-element>root element</a>, then let <var title="">target node</var> be the <a href=#root-element>root
+ element</a> of that <code><a href=#document>Document</a></code>.</p>
+
+ </li>
+
+ <li>
+
+ <p>If <var title="">target node</var> is not <a href=#inert>inert</a>, fire the event at <var title="">target node</var>.</p>
+
+ <p class=note>It is possible for the <a href=#currently-focused-area-of-a-top-level-browsing-context>currently focused area of a top-level browsing
+ context</a> to be <a href=#inert>inert</a>, for example if a <a href=#dom-dialog-showmodal title=dom-dialog-showModal>modal dialog is shown</a>, and then that <code><a href=#the-dialog-element>dialog</a></code>
+ element is made <a href=#inert>inert</a>. It is likely to be the result of a logic error in the
+ application, though.</p>
+
+ </li>
+
+ <li><p>If the event was not canceled, then let <var title="">target area</var> handle the key
+ event. This might include <a href=#run-synthetic-click-activation-steps title="run synthetic click activation steps">running synthetic
+ click activation steps</a> for <var title="">target node</var>.</li>
+
+ </ol></div>
+
+
+<!--TOPIC:DOM APIs-->
+ <h4 id=focus-management-apis><span class=secno>8.4.5 </span>Focus management APIs</h4>
+
+ <dl class=domintro><dt><var title="">document</var> . <code title=dom-document-activeElement><a href=#dom-document-activeelement>activeElement</a></code></dt>
+
<dd>
- <p>Unfocuses the window. Use of this method is discouraged. Allow the user to control window
- focus instead.</p>
+ <p>Returns the deepest element in the document through which or to which key events are being
+ routed. This is, roughly speaking, the focused element in the document.</p>
+ <p>For the purposes of this API, when a <a href=#child-browsing-context>child browsing context</a> is focused, its
+ <a href=#browsing-context-container>browsing context container</a> is <a href=#bc-focus-ergo-bcc-focus>focused</a> in the
+ <a href=#parent-browsing-context>parent browsing context</a>. For example, if the user moves the focus to a text field
+ in an <code><a href=#the-iframe-element>iframe</a></code>, the <code><a href=#the-iframe-element>iframe</a></code> is the element returned by the <code title=dom-document-activeElement><a href=#dom-document-activeelement>activeElement</a></code> API in the <code><a href=#the-iframe-element>iframe</a></code>'s
+ <code><a href=#document>Document</a></code>.</p>
+
</dd>
- </dl><div class=impl>
+ <dt><var title="">document</var> . <code title=dom-document-hasFocus><a href=#dom-document-hasfocus>hasFocus</a></code>()</dt>
- <p>The <dfn id=dom-document-activeelement title=dom-document-activeElement><code>activeElement</code></dfn> attribute on
- <code><a href=#document>Document</a></code> objects must return the element in the document that is focused. If no
- element in the <code><a href=#document>Document</a></code> is focused, this must return <a href=#the-body-element-0>the body
- element</a>.</p>
+ <dd>
- <p class=note>When a <a href=#child-browsing-context>child browsing context</a> is focused, its <a href=#browsing-context-container>browsing context
- container</a> is also focused, <a href=#bc-focus-ergo-bcc-focus>by definition</a>. For
- example, if the user moves the focus to a text field in an <code><a href=#the-iframe-element>iframe</a></code>, the
- <code><a href=#the-iframe-element>iframe</a></code> is the element with focus in the <a href=#parent-browsing-context>parent browsing context</a>.</p>
+ <p>Returns true if key events are being routed through or to the document; otherwise, returns
+ false. Roughly speaking, this corresponds to the document, or a documented nested inside this
+ one, being focused.</p>
- <p>The <dfn id=dom-document-hasfocus title=dom-document-hasFocus><code>hasFocus()</code></dfn> method on
- <code><a href=#document>Document</a></code> objects must return true if the <code><a href=#document>Document</a></code>'s <a href=#browsing-context>browsing
- context</a> is focused, and all its <a href=#ancestor-browsing-context title="ancestor browsing context">ancestor browsing
- contexts</a> are also focused, and the <a href=#top-level-browsing-context>top-level browsing context</a> has the
- <i>system focus</i>. If the <code><a href=#document>Document</a></code> has no <a href=#browsing-context>browsing context</a> or if its
- <a href=#browsing-context>browsing context</a> has no <a href=#top-level-browsing-context>top-level browsing context</a>, then the method will
- always return false.</p>
+ </dd>
- <p>The <dfn id=dom-window-focus title=dom-window-focus><code>focus()</code></dfn> method on the <code><a href=#window>Window</a></code>
- object, when invoked, provides a hint to the user agent that the script believes the user might be
- interested in the contents of the <a href=#browsing-context>browsing context</a> of the <code><a href=#window>Window</a></code> object
- on which the method was invoked.</p>
+ <dt><var title="">window</var> . <code title=dom-window-focus><a href=#dom-window-focus>focus</a></code>()</dt>
- <p>User agents are encouraged to have this <code title=dom-window-focus><a href=#dom-window-focus>focus()</a></code> method
- trigger some kind of notification.</p>
+ <dd>
- <p>The <dfn id=dom-window-blur title=dom-window-blur><code>blur()</code></dfn> method on the <code><a href=#window>Window</a></code>
- object, when invoked, provides a hint to the user agent that the script believes the user probably
- is not currently interested in the contents of the <a href=#browsing-context>browsing context</a> of the
- <code><a href=#window>Window</a></code> object on which the method was invoked, but that the contents might become
- interesting again in the future.</p>
+ <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/?saved=2823 -->
- <p>User agents are encouraged to ignore calls to this <code title=dom-window-blur><a href=#dom-window-blur>blur()</a></code>
- method entirely.</p>
+ <p>Moves the focus to the window's <a href=#browsing-context-container>browsing context container</a>, if any.</p>
- <p class=note>Historically the <code title=dom-window-blur><a href=#dom-window-blur>focus()</a></code> and <code title=dom-window-blur><a href=#dom-window-blur>blur()</a></code> methods actually affected the system focus, but hostile
- sites widely abuse this behavior to the user's detriment.</p>
+ </dd>
- </div>
+<!--
+ <dt><var title="">window</var> . <code title="dom-window-blur">blur</code>()</dt>
+ <dd>
- <h4 id=element-level-focus-apis><span class=secno>8.4.4 </span>Element-level focus APIs</h4>
+ <p>No effect.</p>
- <dl class=domintro><dt><var title="">element</var> . <code title=dom-focus><a href=#dom-focus>focus</a></code>()</dt>
+ </dd>
+-->
+ <dt><var title="">element</var> . <code title=dom-focus><a href=#dom-focus>focus</a></code>()</dt>
+
<dd>
- <p>Focuses the element.</p>
+ <p>Moves the focus to the element.</p>
+ <p>If the element is <a href=#the-body-element-0>the body element</a>, moves the focus to the viewport instead.</p>
+
</dd>
<dt><var title="">element</var> . <code title=dom-blur><a href=#dom-blur>blur</a></code>()</dt>
<dd>
- <p>Unfocuses the element. Use of this method is discouraged. Focus another element instead.</p>
+ <p>Moves the focus to the viewport. Use of this method is discouraged; if you want to focus the
+ viewport, call the <code title=dom-focus><a href=#dom-focus>focus()</a></code> method on <a href=#the-body-element-0>the body
+ element</a>.</p>
<p>Do not use this method to hide the focus ring if you find the focus ring unsightly. Instead,
- use a CSS rule to override the 'outline' property. Be aware, however, that if an alternative
- focusing style isn't made available instead, the page will be significantly less usable for
- people who primarily navigate pages using a keyboard, or those with reduced vision who use focus
- outlines to help them navigate the page.</p>
+ use a CSS rule to override the 'outline' property, and provide a different way to show what
+ element is focused. Be aware that if an alternative focusing style isn't made available, the
+ page will be significantly less usable for people who primarily navigate pages using a keyboard,
+ or those with reduced vision who use focus outlines to help them navigate the page.</p>
<!-- we suggest using CSS here because users can override CSS, so it's no the end of the world,
unlike using .blur(), which cannot be easily overridden by users and completely breaks tab
@@ -76470,8 +77006,8 @@
<div class=example>
- <p>For example, to hide the outline from links and instead use a yellow background, you could
- use:</p>
+ <p>For example, to hide the outline from links and instead use a yellow background to indicate
+ focus, you could use:</p>
<pre>:link:focus, :visited:focus { outline: none; background: yellow; color: black; }</pre>
@@ -76481,9 +77017,95 @@
</dl><div class=impl>
- <p>The <dfn id=dom-focus title=dom-focus><code>focus()</code></dfn> method, when invoked, must run the
- following algorithm:</p>
+ <p>The <dfn id=dom-document-activeelement title=dom-document-activeElement><code>activeElement</code></dfn> attribute on
+ <code><a href=#document>Document</a></code> objects must return the value returned by the following steps:</p>
+ <ol><li><p>Let <var title="">candidate</var> be the <code><a href=#document>Document</a></code> on which the method was
+ invoked.</li>
+
+ <li><p>If <var title="">candidate</var> has a <i><a href=#dialog-group>dialog group</a></i> with a designated
+ <a href=#focused-dialog-of-the-dialog-group>focused dialog of the dialog group</a>, then let <var title="">candidate</var> be the
+ designated <a href=#focused-dialog-of-the-dialog-group>focused dialog of the dialog group</a>, and redo this step.</li>
+
+ <li><p>If <var title="">candidate</var> has a non-empty <i><a href=#control-group>control group</a></i>, let <var title="">candidate</var> be the designated <a href=#focused-area-of-the-control-group>focused area of the control
+ group</a>.</p>
+
+ </li>
+
+ <li><p>If <var title="">candidate</var> is a <i><a href=#focusable-area>focusable area</a></i>, let <var title="">candidate</var> be <var title="">candidate</var>'s <i><a href=#dom-anchor>DOM anchor</a></i>.</li>
+
+ <li>
+
+ <p>If <var title="">candidate</var> is a <code><a href=#document>Document</a></code> that has a <a href=#the-body-element-0 title="the
+ body element">body element</a>, then let <var title="">candidate</var> be <a href=#the-body-element-0>the body
+ element</a> of that <code><a href=#document>Document</a></code>.</p>
+
+ <p>Otherwise, if <var title="">candidate</var> is a <code><a href=#document>Document</a></code> that has a <a href=#root-element>root
+ element</a>, then let <var title="">candidate</var> be the <a href=#root-element>root element</a> of that
+ <code><a href=#document>Document</a></code>.</p>
+
+ <p>Otherwise, if <var title="">candidate</var> is a <code><a href=#document>Document</a></code>, then let <var title="">candidate</var> be null.</p>
+
+ </li>
+
+ <li><p>Return <var title="">candidate</var>.</li>
+
+ </ol><p>The <dfn id=dom-document-hasfocus title=dom-document-hasFocus><code>hasFocus()</code></dfn> method on
+ <code><a href=#document>Document</a></code> objects must return true the value returned by the following steps:</p>
+
+ <ol><li><p>Let <var title="">target</var> be the <code><a href=#document>Document</a></code> on which the method was
+ invoked.</li>
+
+ <li><p>Let <var title="">candidate</var> be the <code><a href=#document>Document</a></code> of the <a href=#top-level-browsing-context>top-level
+ browsing context</a>.</li>
+
+ <li><p>If <var title="">candidate</var> is <var title="">target</var>, return true and abort
+ these steps.</li>
+
+ <li>
+
+ <p>If <var title="">candidate</var> has a <i><a href=#dialog-group>dialog group</a></i> with a designated <a href=#focused-dialog-of-the-dialog-group>focused
+ dialog of the dialog group</a>, then let <var title="">candidate</var> be the designated
+ <a href=#focused-dialog-of-the-dialog-group>focused dialog of the dialog group</a>, and redo this step.</p>
+
+ <p>Otherwise, if <var title="">candidate</var> has a non-empty <i><a href=#control-group>control group</a></i>, and the
+ designated <a href=#focused-area-of-the-control-group>focused area of the control group</a> is a <a href=#browsing-context-container>browsing context
+ container</a>, and the <a href=#active-document>active document</a> of that <a href=#browsing-context-container>browsing context
+ container</a>'s <a href=#nested-browsing-context>nested browsing context</a> is <var title="">target</var>, then
+ return true and abort these steps.</p>
+
+ <p>Otherwise, if <var title="">candidate</var> has a non-empty <i><a href=#control-group>control group</a></i>, and the
+ designated <a href=#focused-area-of-the-control-group>focused area of the control group</a> is a <a href=#browsing-context-container>browsing context
+ container</a>, then let <var title="">candidate</var> be the <a href=#active-document>active document</a> of
+ that <a href=#browsing-context-container>browsing context container</a>'s <a href=#nested-browsing-context>nested browsing context</a>, and redo
+ this step.</p>
+
+ <p>Otherwise, return false and abort these steps.</p>
+
+ </li>
+
+ </ol><p>The <dfn id=dom-window-focus title=dom-window-focus><code>focus()</code></dfn> method on <code><a href=#window>Window</a></code>
+ object, when invoked, must run the <a href=#focusing-steps>focusing steps</a> with the <code><a href=#window>Window</a></code>
+ object's <a href=#browsing-context>browsing context</a>. Additionally, if this <a href=#browsing-context>browsing context</a> is a
+ <a href=#top-level-browsing-context>top-level browsing context</a>, user agents are encouraged to trigger some sort of
+ notification to indicate to the user that the page is attempting to gain focus.</p>
+
+ <p>The <dfn id=dom-window-blur title=dom-window-blur><code>blur()</code></dfn> method on the <code><a href=#window>Window</a></code>
+ object, when invoked, provides a hint to the user agent that the script believes the user probably
+ is not currently interested in the contents of the <a href=#browsing-context>browsing context</a> of the
+ <code><a href=#window>Window</a></code> object on which the method was invoked, but that the contents might become
+ interesting again in the future.</p>
+
+ <p>User agents are encouraged to ignore calls to this <code title=dom-window-blur><a href=#dom-window-blur>blur()</a></code>
+ method entirely.</p>
+
+ <p class=note>Historically, the <code title=dom-window-blur><a href=#dom-window-blur>focus()</a></code> and <code title=dom-window-blur><a href=#dom-window-blur>blur()</a></code> methods actually affected the system-level focus of the
+ system widget (e.g. tab or window) that contained the <a href=#browsing-context>browsing context</a>, but hostile
+ sites widely abuse this behavior to the user's detriment.</p>
+
+ <p>The <dfn id=dom-focus title=dom-focus><code>focus()</code></dfn> method on elements, when invoked, must
+ run the following algorithm:</p>
+
<ol><li><p>If the element is marked as <i><a href=#locked-for-focus>locked for focus</a></i>, then abort these steps.</li>
<li><p>Mark the element as <dfn id=locked-for-focus>locked for focus</dfn>.</li>
@@ -76493,8 +77115,8 @@
<li><p>Unmark the element as <i><a href=#locked-for-focus>locked for focus</a></i>.</li>
</ol><p>The <dfn id=dom-blur title=dom-blur><code>blur()</code></dfn> method, when invoked, should run the
- <a href=#unfocusing-steps>unfocusing steps</a> for the element on which the method was called instead. User agents
- may selectively or uniformly ignore calls to this method for usability reasons.</p>
+ <a href=#unfocusing-steps>unfocusing steps</a> for the element on which the method was called. User agents may
+ selectively or uniformly ignore calls to this method for usability reasons.</p>
<p class=example>For example, if the <code title=dom-blur><a href=#dom-blur>blur()</a></code> method is unwisely
being used to remove the focus ring for aesthetics reasons, the page would become unusable by
@@ -76502,13 +77124,14 @@
page.</p>
</div>
+
+
<!--TOPIC:HTML-->
-
<h3 id=assigning-keyboard-shortcuts><span class=secno>8.5 </span>Assigning keyboard shortcuts</h3>
- <h4 id=introduction-7><span class=secno>8.5.1 </span>Introduction</h4>
+ <h4 id=introduction-8><span class=secno>8.5.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -76637,7 +77260,7 @@
<div class=impl>
- <h4 id=processing-model-5><span class=secno>8.5.3 </span>Processing model</h4>
+ <h4 id=processing-model-6><span class=secno>8.5.3 </span>Processing model</h4>
<p>An element's <dfn id=assigned-access-key>assigned access key</dfn> is a key combination derived from the element's
<code title=attr-accesskey><a href=#the-accesskey-attribute>accesskey</a></code> content attribute. Initially, an element must not
@@ -77133,7 +77756,7 @@
</div>
- <h4 id=introduction-8><span class=secno>8.7.1 </span>Introduction</h4>
+ <h4 id=introduction-9><span class=secno>8.7.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -79524,7 +80147,7 @@
</ul><p>These values are not currently exposed on the interface.</p>
- <h4 id=processing-model-6><span class=secno>9.2.3 </span>Processing model</h4>
+ <h4 id=processing-model-7><span class=secno>9.2.3 </span>Processing model</h4>
<p>The resource indicated in the argument to the <code title=dom-EventSource><a href=#dom-eventsource>EventSource</a></code>
constructor is <a href=#fetch title=fetch>fetched</a> when the constructor is run.</p>
@@ -80895,7 +81518,7 @@
</div>
- <h4 id=introduction-9><span class=secno>9.4.1 </span>Introduction</h4>
+ <h4 id=introduction-10><span class=secno>9.4.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -81116,7 +81739,7 @@
<h3 id=channel-messaging><span class=secno>9.5 </span><dfn>Channel messaging</dfn></h3>
- <h4 id=introduction-10><span class=secno>9.5.1 </span>Introduction</h4>
+ <h4 id=introduction-11><span class=secno>9.5.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -82118,7 +82741,7 @@
- <h3 id=introduction-11><span class=secno>10.1 </span>Introduction</h3>
+ <h3 id=introduction-12><span class=secno>10.1 </span>Introduction</h3>
<h4 id=scope-0><span class=secno>10.1.1 </span>Scope</h4>
@@ -83351,7 +83974,7 @@
worker</a> but it is a <a href=#permissible-worker>permissible worker</a>.</p>
- <h4 id=processing-model-7><span class=secno>10.2.4 </span>Processing model</h4>
+ <h4 id=processing-model-8><span class=secno>10.2.4 </span>Processing model</h4>
<p>When a user agent is to <dfn id=run-a-worker>run a worker</dfn> for a script with <a href=#url>URL</a> <var title="">url</var> and a <a href=#script-settings-object>script settings object</a> <var title="">settings
object</var>, it must run the following steps:</p>
@@ -84140,7 +84763,7 @@
- <h3 id=introduction-12><span class=secno>11.1 </span>Introduction</h3>
+ <h3 id=introduction-13><span class=secno>11.1 </span>Introduction</h3>
<p><i>This section is non-normative.</i></p>
@@ -94397,7 +95020,7 @@
section has the same conformance implications as the RFC2119-defined term "must".</i></p>
- <h3 id=introduction-13><span class=secno>14.1 </span>Introduction</h3>
+ <h3 id=introduction-14><span class=secno>14.1 </span>Introduction</h3>
<p>In general, user agents are expected to support CSS, and many of the suggestions in this
section are expressed in CSS terms. User agents that use other presentation mechanisms can derive
@@ -95937,7 +96560,7 @@
<h3 id=bindings><span class=secno>14.5 </span>Bindings</h3> <!-- a binding -->
- <h4 id=introduction-14><span class=secno>14.5.1 </span>Introduction</h4>
+ <h4 id=introduction-15><span class=secno>14.5.1 </span>Introduction</h4>
<p>A number of elements have their rendering defined in terms of the 'binding' property. <a href=#refsBECSS>[BECSS]</a></p>
@@ -96812,10 +97435,11 @@
<p>User agents are expected to expose the <a href=#advisory-information>advisory information</a> of elements upon user
request, and to make the user aware of the presence of such information.</p>
+<!--CLEANUP-->
<p>On interactive graphical systems where the user can use a pointing device, this could take the
form of a tooltip. When the user is unable to use a pointing device, then the user agent is
- expected to make the content available in some other fashion, e.g. by making the element focusable
- and always displaying the <a href=#advisory-information>advisory information</a> of the currently focused element, or
+ expected to make the content available in some other fashion, e.g. by making the element a <i><a href=#focusable-area>focusable area</a></i>
+ and always displaying the <a href=#advisory-information>advisory information</a> of the currently <a href=#focused>focused</a> element, or
by showing the <a href=#advisory-information>advisory information</a> of the elements under the user's finger on a
touch device as the user pans around the screen.</p>
@@ -96826,7 +97450,7 @@
<div class=example>
- <p>For example, a visual user agent could make elements with a <code title=attr-title><a href=#attr-title>title</a></code> attribute focusable, and could make any focused element with a
+ <p>For example, a visual user agent could make elements with a <code title=attr-title><a href=#attr-title>title</a></code> attribute <a href=#focusable-area title="focusable area">focusable</a>, and could make any <a href=#focused>focused</a> element with a
<code title=attr-title><a href=#attr-title>title</a></code> attribute show its tooltip under the element while the
element has focus. This would allow a user to tab around the document to find all the advisory
text.</p>
@@ -97006,7 +97630,7 @@
<li>None of the elements in the <code><a href=#document>Document</a></code> have any <a href=#presentational-hints>presentational hints</a>.
<li>None of the elements in the <code><a href=#document>Document</a></code> have any <a href=#css-styling-attribute title="CSS styling attribute">CSS styling attributes</a>.
<li>None of the elements in the <code><a href=#document>Document</a></code> are in any of the following namespaces: <a href=#html-namespace-0>HTML namespace</a>, <a href=#svg-namespace>SVG namespace</a>, <a href=#mathml-namespace>MathML namespace</a>
- <li>The <code><a href=#document>Document</a></code> has no <a href=#focusable>focusable</a> elements (e.g. from XLink).
+ <li>The <code><a href=#document>Document</a></code> has no <i><a href=#focusable-area>focusable area</a></i> (e.g. from XLink) other than the viewport.
<li>The <code><a href=#document>Document</a></code> has no <a href=#hyperlink title=hyperlink>hyperlinks</a> (e.g. from XLink).
<li>There exists no <a href=#concept-script title=concept-script>script</a> whose <a href=#settings-object>settings object</a> specifies this <code><a href=#document>Document</a></code> as the <a href=#responsible-document>responsible document</a>.
<li>None of the elements in the <code><a href=#document>Document</a></code> have any registered event listeners.
@@ -102475,7 +103099,7 @@
<tr><!-- blur --><td> <dfn id=event-blur title=event-blur><code>blur</code></dfn>
<td> <code><a href=#event>Event</a></code>
<td> <code><a href=#window>Window</a></code>, elements
- <td> Fired at nodes losing focus <!-- XXX bug 23475 -->
+ <td> Fired at nodes when they stop being <a href=#focused>focused</a>
<tr><!-- cancel --><td> <dfn id=event-cancel title=event-cancel><code>cancel</code></dfn>
<td> <code><a href=#event>Event</a></code>
@@ -102515,7 +103139,7 @@
<tr><!-- focus --><td> <dfn id=event-focus title=event-focus><code>focus</code></dfn>
<td> <code><a href=#event>Event</a></code>
<td> <code><a href=#window>Window</a></code>, elements
- <td> Fired at nodes gaining focus <!-- XXX bug 23475 -->
+ <td> Fired at nodes <a href=#gains-focus title="gains focus">gaining focus</a>
<tr><!-- hashchange --><td> <dfn id=event-hashchange title=event-hashchange><code>hashchange</code></dfn>
<td> <code><a href=#hashchangeevent>HashChangeEvent</a></code>
Modified: index
===================================================================
--- index 2014-02-11 20:54:28 UTC (rev 8477)
+++ index 2014-02-19 22:39:15 UTC (rev 8478)
@@ -298,7 +298,7 @@
<header class=head id=head><p><a href=http://www.whatwg.org/ class=logo><img width=101 src=/images/logo alt=WHATWG height=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
- <h2 class="no-num no-toc">Living Standard — Last Updated 11 February 2014</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 19 February 2014</h2>
</hgroup><dl><dt><strong>Web developer edition:</strong></dt>
<dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
<dt>Multiple-page version:</dt>
@@ -1074,15 +1074,16 @@
<li><a href=#activation><span class=secno>8.3 </span>Activation</a></li>
<li><a href=#focus><span class=secno>8.4 </span>Focus</a>
<ol>
- <li><a href=#sequential-focus-navigation-and-the-tabindex-attribute><span class=secno>8.4.1 </span>Sequential focus navigation and the <code title=attr-tabindex>tabindex</code> attribute</a></li>
- <li><a href=#focus-management><span class=secno>8.4.2 </span>Focus management</a></li>
- <li><a href=#document-level-focus-apis><span class=secno>8.4.3 </span>Document-level focus APIs</a></li>
- <li><a href=#element-level-focus-apis><span class=secno>8.4.4 </span>Element-level focus APIs</a></ol></li>
+ <li><a href=#introduction-7><span class=secno>8.4.1 </span>Introduction</a></li>
+ <li><a href=#data-model><span class=secno>8.4.2 </span>Data model</a></li>
+ <li><a href=#sequential-focus-navigation-and-the-tabindex-attribute><span class=secno>8.4.3 </span>Sequential focus navigation and the <code title=attr-tabindex>tabindex</code> attribute</a></li>
+ <li><a href=#processing-model-5><span class=secno>8.4.4 </span>Processing model</a></li>
+ <li><a href=#focus-management-apis><span class=secno>8.4.5 </span>Focus management APIs</a></ol></li>
<li><a href=#assigning-keyboard-shortcuts><span class=secno>8.5 </span>Assigning keyboard shortcuts</a>
<ol>
- <li><a href=#introduction-7><span class=secno>8.5.1 </span>Introduction</a></li>
+ <li><a href=#introduction-8><span class=secno>8.5.1 </span>Introduction</a></li>
<li><a href=#the-accesskey-attribute><span class=secno>8.5.2 </span>The <code>accesskey</code> attribute</a></li>
- <li><a href=#processing-model-5><span class=secno>8.5.3 </span>Processing model</a></ol></li>
+ <li><a href=#processing-model-6><span class=secno>8.5.3 </span>Processing model</a></ol></li>
<li><a href=#editing-0><span class=secno>8.6 </span>Editing</a>
<ol>
<li><a href=#contenteditable><span class=secno>8.6.1 </span>Making document regions editable: The <code title=attr-contenteditable>contenteditable</code> content attribute</a></li>
@@ -1092,7 +1093,7 @@
<li><a href=#spelling-and-grammar-checking><span class=secno>8.6.5 </span>Spelling and grammar checking</a></ol></li>
<li><a href=#dnd><span class=secno>8.7 </span>Drag and drop</a>
<ol>
- <li><a href=#introduction-8><span class=secno>8.7.1 </span>Introduction</a></li>
+ <li><a href=#introduction-9><span class=secno>8.7.1 </span>Introduction</a></li>
<li><a href=#the-drag-data-store><span class=secno>8.7.2 </span>The drag data store</a></li>
<li><a href=#the-datatransfer-interface><span class=secno>8.7.3 </span>The <code>DataTransfer</code> interface</a>
<ol>
@@ -1111,7 +1112,7 @@
<ol>
<li><a href=#server-sent-events-intro><span class=secno>9.2.1 </span>Introduction</a></li>
<li><a href=#the-eventsource-interface><span class=secno>9.2.2 </span>The <code>EventSource</code> interface</a></li>
- <li><a href=#processing-model-6><span class=secno>9.2.3 </span>Processing model</a></li>
+ <li><a href=#processing-model-7><span class=secno>9.2.3 </span>Processing model</a></li>
<li><a href=#parsing-an-event-stream><span class=secno>9.2.4 </span>Parsing an event stream</a></li>
<li><a href=#event-stream-interpretation><span class=secno>9.2.5 </span>Interpreting an event stream</a></li>
<li><a href=#authoring-notes><span class=secno>9.2.6 </span>Authoring notes</a></li>
@@ -1133,7 +1134,7 @@
<li><a href=#garbage-collection-1><span class=secno>9.3.7 </span>Garbage collection</a></ol></li>
<li><a href=#web-messaging><span class=secno>9.4 </span>Cross-document messaging</a>
<ol>
- <li><a href=#introduction-9><span class=secno>9.4.1 </span>Introduction</a></li>
+ <li><a href=#introduction-10><span class=secno>9.4.1 </span>Introduction</a></li>
<li><a href=#security-postmsg><span class=secno>9.4.2 </span>Security</a>
<ol>
<li><a href=#authors><span class=secno>9.4.2.1 </span>Authors</a></li>
@@ -1141,7 +1142,7 @@
<li><a href=#posting-messages><span class=secno>9.4.3 </span>Posting messages</a></ol></li>
<li><a href=#channel-messaging><span class=secno>9.5 </span>Channel messaging</a>
<ol>
- <li><a href=#introduction-10><span class=secno>9.5.1 </span>Introduction</a>
+ <li><a href=#introduction-11><span class=secno>9.5.1 </span>Introduction</a>
<ol>
<li><a href=#examples-4><span class=secno>9.5.1.1 </span>Examples</a></li>
<li><a href=#ports-as-the-basis-of-an-object-capability-model-on-the-web><span class=secno>9.5.1.2 </span>Ports as the basis of an object-capability model on the Web</a></li>
@@ -1153,7 +1154,7 @@
<li><a href=#broadcasting-to-other-browsing-contexts><span class=secno>9.6 </span>Broadcasting to other browsing contexts</a></ol></li>
<li><a href=#workers><span class=secno>10 </span>Web workers</a>
<ol>
- <li><a href=#introduction-11><span class=secno>10.1 </span>Introduction</a>
+ <li><a href=#introduction-12><span class=secno>10.1 </span>Introduction</a>
<ol>
<li><a href=#scope-0><span class=secno>10.1.1 </span>Scope</a></li>
<li><a href=#examples-5><span class=secno>10.1.2 </span>Examples</a>
@@ -1177,7 +1178,7 @@
<li><a href=#shared-workers-and-the-sharedworkerglobalscope-interface><span class=secno>10.2.1.3 </span>Shared workers and the <code>SharedWorkerGlobalScope</code> interface</a></ol></li>
<li><a href=#worker-event-loop><span class=secno>10.2.2 </span>The event loop</a></li>
<li><a href="#the-worker's-lifetime"><span class=secno>10.2.3 </span>The worker's lifetime</a></li>
- <li><a href=#processing-model-7><span class=secno>10.2.4 </span>Processing model</a></li>
+ <li><a href=#processing-model-8><span class=secno>10.2.4 </span>Processing model</a></li>
<li><a href=#runtime-script-errors-0><span class=secno>10.2.5 </span>Runtime script errors</a></li>
<li><a href=#creating-workers><span class=secno>10.2.6 </span>Creating workers</a>
<ol>
@@ -1192,7 +1193,7 @@
<li><a href=#worker-locations><span class=secno>10.3.3 </span>Worker locations</a></ol></ol></li>
<li><a href=#webstorage><span class=secno>11 </span>Web storage</a>
<ol>
- <li><a href=#introduction-12><span class=secno>11.1 </span>Introduction</a></li>
+ <li><a href=#introduction-13><span class=secno>11.1 </span>Introduction</a></li>
<li><a href=#storage><span class=secno>11.2 </span>The API</a>
<ol>
<li><a href=#the-storage-interface><span class=secno>11.2.1 </span>The <code>Storage</code> interface</a></li>
@@ -1371,7 +1372,7 @@
<li><a href=#parsing-xhtml-fragments><span class=secno>13.4 </span>Parsing XHTML fragments</a></ol></li>
<li><a href=#rendering><span class=secno>14 </span>Rendering</a>
<ol>
- <li><a href=#introduction-13><span class=secno>14.1 </span>Introduction</a></li>
+ <li><a href=#introduction-14><span class=secno>14.1 </span>Introduction</a></li>
<li><a href=#the-css-user-agent-style-sheet-and-presentational-hints><span class=secno>14.2 </span>The CSS user agent style sheet and presentational hints</a></li>
<li><a href=#non-replaced-elements><span class=secno>14.3 </span>Non-replaced elements</a>
<ol>
@@ -1396,7 +1397,7 @@
<li><a href=#image-maps-0><span class=secno>14.4.4 </span>Image maps</a></ol></li>
<li><a href=#bindings><span class=secno>14.5 </span>Bindings</a>
<ol>
- <li><a href=#introduction-14><span class=secno>14.5.1 </span>Introduction</a></li>
+ <li><a href=#introduction-15><span class=secno>14.5.1 </span>Introduction</a></li>
<li><a href=#the-button-element-0><span class=secno>14.5.2 </span>The <code>button</code> element</a></li>
<li><a href=#the-details-element-0><span class=secno>14.5.3 </span>The <code>details</code> element</a></li>
<li><a href=#the-input-element-as-a-text-entry-widget><span class=secno>14.5.4 </span>The <code>input</code> element as a text entry widget</a></li>
@@ -31924,7 +31925,8 @@
<p class=note>Because a <code><a href=#the-map-element>map</a></code> element (and its <code><a href=#the-area-element>area</a></code> elements) can be
associated with multiple <code><a href=#the-img-element>img</a></code> and <code><a href=#the-object-element>object</a></code> elements, it is possible for an
- <code><a href=#the-area-element>area</a></code> element to correspond to multiple focusable areas of the document.</p>
+ <code><a href=#the-area-element>area</a></code> element to correspond to multiple <i title="focusable area"><a href=#focusable-area>focusable areas</a></i>
+ of the document.</p>
<p>Image maps are <a href=#live>live</a>; if the DOM is mutated, then the user agent must act as if it
had rerun the algorithms for image maps.</p>
@@ -43484,7 +43486,7 @@
attribute specified, authors should include a <dfn id=attr-input-title title=attr-input-title><code>title</code></dfn> attribute to give a description of the pattern.
User agents may use the contents of this attribute, if it is present, when informing the user that
the pattern is not matched, or at any other suitable time, such as in a tooltip or read out by
- assistive technology when the control gains focus.</p>
+ assistive technology when the control <a href=#gains-focus>gains focus</a>.</p>
<div class=example>
<p>For example, the following snippet:</p>
@@ -43941,7 +43943,7 @@
<div class=impl>
<p>User agents should present this hint to the user, after having <a href=#strip-line-breaks title="strip line
- breaks">stripped line breaks</a> from it, when the element's <a href=#concept-fe-value title=concept-fe-value>value</a> is the empty string or the control is not focused (or both),
+ breaks">stripped line breaks</a> from it, when the element's <a href=#concept-fe-value title=concept-fe-value>value</a> is the empty string or the control is not <a href=#focused>focused</a> (or both),
e.g. by displaying it inside a blank unfocused control and hiding it otherwise.</p>
</div>
@@ -44306,13 +44308,14 @@
<h5 id=common-input-element-events><span class=secno>4.10.5.5 </span>Common event behaviors</h5>
+<!--CLEANUP-->
<p>When the <code title=event-input-input><a href=#event-input-input>input</a></code> and <code title=event-input-change><a href=#event-input-change>change</a></code>
events <a href=#concept-input-apply title=concept-input-apply>apply</a> (which is the case for all
<code><a href=#the-input-element>input</a></code> controls other than <a href=#concept-button title=concept-button>buttons</a> and those with
the <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute in the <a href="#hidden-state-(type=hidden)" title=attr-input-type-hidden>Hidden</a> state), the events are fired to indicate that the
user has interacted with the control. The <dfn id=event-input-input title=event-input-input><code>input</code></dfn>
event fires whenever the user has modified the data of the control. The <dfn id=event-input-change title=event-input-change><code>change</code></dfn> event fires when the value is committed, if
- that makes sense for the control, or else when the control loses focus. In all cases, the <code title=event-input-input><a href=#event-input-input>input</a></code> event comes before the corresponding <code title=event-input-change><a href=#event-input-change>change</a></code> event (if any).</p>
+ that makes sense for the control, or else when the control <a href=#unfocus-causes-change-event>loses focus</a>. In all cases, the <code title=event-input-input><a href=#event-input-input>input</a></code> event comes before the corresponding <code title=event-input-change><a href=#event-input-change>change</a></code> event (if any).</p>
<p>When an <code><a href=#the-input-element>input</a></code> element has a defined <a href=#activation-behavior>activation behavior</a>, the rules
for dispatching these events, if they <a href=#concept-input-apply title=concept-input-apply>apply</a>, are given
@@ -44343,10 +44346,11 @@
simple event</a> that bubbles named <code title=event-input-change><a href=#event-input-change>change</a></code> at the
<code><a href=#the-input-element>input</a></code> element.</p>
+<!--CLEANUP-->
<p class=example>An example of a user interface with a commit action would be a <a href="#color-state-(type=color)" title=attr-input-type-color>Color</a> control that consists of a single button that brings
up a color wheel: if the <a href=#concept-fe-value title=concept-fe-value>value</a> only changes when the dialog
- is closed, then that would be the explicit commit action. On the other hand, if the control can be
- focused and manipulating the control changes the color interactively, then there might be no
+ is closed, then that would be the explicit commit action. On the other hand, if
+ manipulating the control changes the color interactively, then there might be no
commit action.</p>
<p class=example>Another example of a user interface with a commit action would be a <a href="#date-state-(type=date)" title=attr-input-type-date>Date</a> control that allows both text-based user input and user
@@ -44360,15 +44364,16 @@
action, the user agent must <a href=#queue-a-task>queue a task</a> to <a href=#fire-a-simple-event>fire a simple event</a> that
bubbles named <code title=event-input-input><a href=#event-input-input>input</a></code> at the <code><a href=#the-input-element>input</a></code> element. The
corresponding <code title=event-input-change><a href=#event-input-change>change</a></code> event, if any, will be fired when the
- control <a href=#unfocusing-steps title="unfocusing steps">loses focus</a>.</p>
+ control <a href=#unfocus-causes-change-event>loses focus</a>.</p>
<p class=example>Examples of a user changing the element's <a href=#concept-fe-value title=concept-fe-value>value</a> would include the user typing into a text field, pasting a
new value into the field, or undoing an edit in that field. Some user interactions do not cause
changes to the value, e.g. hitting the "delete" key in an empty text field, or replacing some text
in the field with text from the clipboard that happens to be exactly the same text.</p>
+<!--CLEANUP-->
<p class=example>A <a href="#range-state-(type=range)" title=attr-input-type-range>Range</a> control in the form of a
- slider that the user has focused and is interacting with using a keyboard would be another example
+ slider that the user has <a href=#focused>focused</a> and is interacting with using a keyboard would be another example
of the user changing the element's <a href=#concept-fe-value title=concept-fe-value>value</a> without a commit
step.</p>
@@ -45742,7 +45747,8 @@
<div class=impl>
- <p>User agents should present this hint to the user when the element's <a href=#concept-fe-value title=concept-fe-value>value</a> is the empty string and the control is not focused (e.g. by
+<!--CLEANUP-->
+ <p>User agents should present this hint to the user when the element's <a href=#concept-fe-value title=concept-fe-value>value</a> is the empty string and the control is not <a href=#focused>focused</a> (e.g. by
displaying it inside a blank unfocused control). All U+000D CARRIAGE RETURN U+000A LINE FEED
character pairs (CRLF) in the hint, as well as all other U+000D CARRIAGE RETURN (CR) and U+000A
LINE FEED (LF) characters in the hint, must be treated as line breaks when rendering the hint.
@@ -47588,8 +47594,8 @@
<li><p>If the user has indicated (for example, by starting to type in a form control) that he
does not wish focus to be changed, then optionally abort these steps.</li>
- <li><p><a href=#queue-a-task>Queue a task</a> that checks to see if the element is <a href=#focusable>focusable</a>, and
- if so, runs the <a href=#focusing-steps>focusing steps</a> for that element. User agents may also change the
+<!--CLEANUP-->
+ <li><p><a href=#queue-a-task>Queue a task</a> that runs the <a href=#focusing-steps>focusing steps</a> for the element. User agents may also change the
scrolling position of the document, or perform some other action that brings the element to the
user's attention. The <a href=#task-source>task source</a> for this task is the <a href=#user-interaction-task-source>user interaction task
source</a>.</li>
@@ -49643,7 +49649,7 @@
owner</a> is that <code><a href=#the-form-element>form</a></code> element.</p>
<p>If the user agent supports letting the user submit a form implicitly (for example, on some
- platforms hitting the "enter" key while a text field is focused implicitly submits the form), then
+ platforms hitting the "enter" key while a text field is <a href=#focused>focused</a> implicitly submits the form), then
doing so for a form whose <a href=#default-button>default button</a> has a defined <a href=#activation-behavior>activation
behavior</a> must cause the user agent to <a href=#run-synthetic-click-activation-steps>run synthetic click activation steps</a> on
that <a href=#default-button>default button</a>.</p>
@@ -51930,8 +51936,7 @@
<p>The <a href=#command-facet-action title=command-facet-Action>Action</a> of the command is to run the following
steps:</p>
- <ol><li>If the element is <a href=#focusable>focusable</a>, run the <a href=#focusing-steps>focusing steps</a> for the
- element.</li>
+ <ol><li>Run the <a href=#focusing-steps>focusing steps</a> for the element.</li>
<li>If the element has a defined <a href=#activation-behavior>activation behavior</a>, <a href=#run-synthetic-click-activation-steps>run synthetic click
activation steps</a> on the element.</li>
@@ -52076,21 +52081,25 @@
<li><p>Push <var title="">subject</var> onto <var title="">subject</var>'s
<code><a href=#document>Document</a></code>'s <a href=#pending-dialog-stack>pending dialog stack</a>.</li>
+ <li><p>Run the <a href=#dialog-focusing-steps>dialog focusing steps</a> for <var title="">subject</var>.</li>
+
+ </ol><p>The <dfn id=dialog-focusing-steps>dialog focusing steps</dfn> for a <code><a href=#the-dialog-element>dialog</a></code> element <var title="">subject</var> are as follows:</p>
+
+ <ol><li><p>If for some reason <var title="">subject</var> is not a <a href=#control-group-owner>control group owner</a>
+ at this point, or if it is <a href=#inert>inert</a>, abort these steps.</li>
+
<li>
- <p>Let <var title="">control</var> be the first element in tree order that has an <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code> attribute specified and whose nearest ancestor
- <code><a href=#the-dialog-element>dialog</a></code> element is <var title="">subject</var>, if any.</p>
+ <p>Let <var title="">control</var> be the first non-<a href=#inert>inert</a> <i><a href=#focusable-area>focusable area</a></i> in
+ <var title="">subject</var>'s <i><a href=#control-group>control group</a></i> whose <i><a href=#dom-anchor>DOM anchor</a></i> has an <code title=attr-fe-autofocus><a href=#attr-fe-autofocus>autofocus</a></code> attribute specified.</p>
- <p>If there isn't one, then let <var title="">control</var> be the first element in tree order
- that is <a href=#focusable>focusable</a> and whose nearest ancestor <code><a href=#the-dialog-element>dialog</a></code> element is <var title="">subject</var>, if any.</p>
+ <p>If there isn't one, then let <var title="">control</var> be the first non-<a href=#inert>inert</a>
+ <i><a href=#focusable-area>focusable area</a></i> in <var title="">subject</var>'s <i><a href=#control-group>control group</a></i>.</p>
- <p>If there isn't one of those either but <var title="">subject</var> itself is
- <a href=#focusable>focusable</a>, then let <var title="">control</var> be <var title="">subject</var>. (This is unusual.)</p>
+ <p>If there isn't one of those either, then let <var title="">control</var> be <var title="">subject</var>.</p>
</li>
- <li><p>If there is no <var title="">control</var>, then abort these steps.</li>
-
<li><p>Run the <a href=#focusing-steps>focusing steps</a> for <var title="">control</var>.</li>
</ol><p>If at any time a <code><a href=#the-dialog-element>dialog</a></code> element is <a href=#remove-an-element-from-a-document title="remove an element from a
@@ -53967,12 +53976,16 @@
<!-- CANVAS-FOCUS-FALLBACK -->
<p>When a <code><a href=#the-canvas-element>canvas</a></code> element <a href=#represents>represents</a> <a href=#embedded-content>embedded content</a>, the
user can still focus descendants of the <code><a href=#the-canvas-element>canvas</a></code> element (in the <a href=#fallback-content>fallback
- content</a>). When an element is focused, it is the target of keyboard interaction events (even
+ content</a>). When an element is <a href=#focused>focused</a>, it is the target of keyboard interaction events (even
though the element itself is not visible). This allows authors to make an interactive canvas
- keyboard-accessible: authors should have a one-to-one mapping of interactive regions to focusable
- elements in the <a href=#fallback-content>fallback content</a>. (Focus has no effect on mouse interaction events.)
+ keyboard-accessible: authors should have a one-to-one mapping of interactive regions to <i title="focusable area"><a href=#focusable-area>focusable
+ areas</a></i> in the <a href=#fallback-content>fallback content</a>. (Focus has no effect on mouse interaction events.)
<a href=#refsDOMEVENTS>[DOMEVENTS]</a></p> <!-- user interaction spec integration point -->
+ <p>An element whose nearest <code><a href=#the-canvas-element>canvas</a></code> element ancestor is <a href=#being-rendered>being rendered</a>
+ and <a href=#represents>represents</a> <a href=#embedded-content>embedded content</a> is an element that is <dfn id=being-used-as-relevant-canvas-fallback-content>being used as
+ relevant canvas fallback content</dfn>.</p>
+
<hr><p>The <code><a href=#the-canvas-element>canvas</a></code> element has two attributes to control the size of the element's bitmap:
<dfn id=attr-canvas-width title=attr-canvas-width><code>width</code></dfn> and <dfn id=attr-canvas-height title=attr-canvas-height><code>height</code></dfn>. These attributes, when specified, must have
values that are <a href=#valid-non-negative-integer title="valid non-negative integer">valid non-negative integers</a>. <span class=impl>The <a href=#rules-for-parsing-non-negative-integers>rules for parsing non-negative integers</a> must be used to obtain their
@@ -57787,7 +57800,8 @@
<dd>
- <p>If the given element is focused, draws a focus ring around the <a href=#current-default-path>current default
+<!--CLEANUP-->
+ <p>If the given element is <a href=#focused>focused</a>, draws a focus ring around the <a href=#current-default-path>current default
path</a> or the given path, following the platform conventions for focus rings.</p>
</dd>
@@ -57798,11 +57812,12 @@
<dd>
- <p>If the given element is focused, and the user has configured his system to draw focus rings
+<!--CLEANUP-->
+ <p>If the given element is <a href=#focused>focused</a>, and the user has configured his system to draw focus rings
in a particular manner (for example, high contrast focus rings), draws a focus ring around the
<a href=#current-default-path>current default path</a> or the given path and returns false.</p>
- <p>Otherwise, returns true if the given element is focused, and false otherwise. This can thus
+ <p>Otherwise, returns true if the given element is <a href=#focused>focused</a>, and false otherwise. This can thus
be used to determine when to draw a focus ring (see <a href=#drawCustomFocusRingExample>the
example</a> below).</p>
@@ -57903,7 +57918,7 @@
<hr><p id=dom-context-2d-drawosfocusring>The <dfn id=dom-context-2d-drawsystemfocusring title=dom-context-2d-drawSystemFocusRing><code>drawSystemFocusRing(<var title="">element</var>)</code></dfn> method, when invoked, must run the following steps:</p>
- <ol><li><p>If <var title="">element</var> is not focused or is not a descendant of the element with
+ <ol><li><p>If <var title="">element</var> is not <a href=#focused>focused</a> or is not a descendant of the element with
whose context the method is associated, then abort these steps.</li>
<li>
@@ -57947,7 +57962,7 @@
</ol><p>The <dfn id=dom-context-2d-drawcustomfocusring title=dom-context-2d-drawCustomFocusRing><code>drawCustomFocusRing(<var title="">element</var>)</code></dfn> method, when invoked, must run the following steps:</p>
- <ol><li><p>If <var title="">element</var> is not focused or is not a descendant of the element with
+ <ol><li><p>If <var title="">element</var> is not <a href=#focused>focused</a> or is not a descendant of the element with
whose context the method is associated, then return false and abort these steps.</li>
<li><p>Let <var title="">result</var> be true.</li>
@@ -58837,13 +58852,14 @@
that given by the <a href="#hit-region's-aria-role">hit region's ARIA role</a>, and whose textual representation, if any,
is given by the <a href="#hit-region's-label">hit region's label</a>.</p>
+<!--CLEANUP-->
<p class=note>Thus, for instance, a user agent on a touch-screen device could provide haptic
feedback when the user croses over a <a href="#hit-region's-bounding-circumference">hit region's bounding circumference</a>, and then
read the <a href="#hit-region's-label">hit region's label</a> to the user. Similarly, a desktop user agent with a
virtual accessibility focus separate from the keyboard input focus could allow the user to
navigate through the hit regions, using the virtual DOM tree described above to enable
- hierarchical navigation. When an interactive control inside the <code><a href=#the-canvas-element>canvas</a></code> element is
- focused, if the control has a corresponding region, then that <a href="#hit-region's-bounding-circumference">hit region's bounding
+ hierarchical navigation. When an interactive control inside the <code><a href=#the-canvas-element>canvas</a></code> element
+ <a href=#gains-focus>gains focus</a>, if the control has a corresponding region, then that <a href="#hit-region's-bounding-circumference">hit region's bounding
circumference</a> could be used to determine what area of the display to magnify.</p>
</div>
@@ -59440,12 +59456,13 @@
<p>When a canvas is interactive, authors should include focusable elements in the element's
fallback content corresponding to each focusable part of the canvas, as in the <a href=#drawCustomFocusRingExample>example above</a>.</p>
+<!--CLEANUP-->
<p>To expose text and interactive content on a <code><a href=#the-canvas-element>canvas</a></code> to users of accessibility
tools, authors should use the <code title=dom-context-2d-addHitRegion><a href=#dom-context-2d-addhitregion>addHitRegion()</a></code>
API. When rendering focus rings, to ensure that focus rings have the appearance of native focus
rings, authors should use the <code title=dom-context-2d-drawSystemFocusRing><a href=#dom-context-2d-drawsystemfocusring>drawSystemFocusRing()</a></code> method, passing it the
element for which a ring is being drawn. This method only draws the focus ring if the element is
- focused, so that it can simply be called whenever drawing the element, without checking whether
+ <a href=#focused>focused</a>, so that it can simply be called whenever drawing the element, without checking whether
the element is focused or not first.</p>
<p id=no-text-editing-in-canvas-please>Authors should avoid implementing text editing controls
@@ -60383,8 +60400,8 @@
<li><code><a href=#the-fieldset-element>fieldset</a></code> elements that have a <code title=attr-fieldset-disabled><a href=#attr-fieldset-disabled>disabled</a></code> attribute</li>
- </ul><p class=note>This definition is used to determine what elements can be <a href=#specially-focusable title="tabindex
- focus flag">focused</a> and which elements match the <code title=selector-disabled><a href=#selector-disabled>:disabled</a></code> pseudo-class.</p>
+ </ul><!--CLEANUP--><p class=note>This definition is used to determine what elements <a href=#specially-focusable title="tabindex
+ focus flag">can be focused</a> and which elements match the <code title=selector-disabled><a href=#selector-disabled>:disabled</a></code> pseudo-class.</p>
<div class=impl>
@@ -60561,6 +60578,19 @@
</dd>
+ <dt><dfn id=selector-focus title=selector-focus><code>:focus</code></dfn></dt>
+
+ <dd>
+
+ <p>For the purposes of the CSS ':focus' pseudo-class, an <dfn id=element-has-the-focus>element has the focus</dfn> when
+ its <a href=#top-level-browsing-context>top-level browsing context</a> has the system focus, it is not itself a
+ <a href=#browsing-context-container>browsing context container</a>, and it is one of the elements listed in the <a href=#focus-chain>focus
+ chain</a> of the <a href=#currently-focused-area-of-a-top-level-browsing-context title="currently focused area of a top-level browsing
+ context">currently focused area of the top-level browsing context</a>.</p>
+
+ </dd>
+
+
<dt><dfn id=selector-enabled title=selector-enabled><code>:enabled</code></dfn></dt>
<dd>
@@ -60828,8 +60858,10 @@
</dl><p class=note>Another section of this specification defines the <i><a href=#target-element>target element</a></i> used with
the <code title=selector-target>:target</code> pseudo-class.</p>
- <p class=note>This specification does not define when an element matches the <code title=selector-focus>:focus</code> or <code title=selector-lang()>:lang()</code> dynamic
- pseudo-classes, as those are all defined in sufficient detail in a language-agnostic fashion in
+<!--CLEANUP-->
+ <p class=note>This specification does not define when an element matches the
+ <code title=selector-lang()>:lang()</code> dynamic
+ pseudo-class, as it is defined in sufficient detail in a language-agnostic fashion in
the Selectors specification. <a href=#refsSELECTORS>[SELECTORS]</a></p>
<!--REMOVE-TOPIC:CSS-->
@@ -68497,8 +68529,7 @@
<li><p>Use the <a href=#scroll-an-element-into-view>scroll an element into view</a> algorithm to scroll <var title="">target</var> into view, with the <var title="">align to top flag</var> set. <a href=#refsCSSOMVIEW>[CSSOMVIEW]</a></li>
- <li><p>If <var title="">target</var> is a <a href=#focusable>focusable</a> element, run the <a href=#focusing-steps>focusing
- steps</a> for that element.</li>
+ <li><p>Run the <a href=#focusing-steps>focusing steps</a> for that element.</li>
</ol><p><dfn id=the-indicated-part-of-the-document>The indicated part of the document</dfn> is the one that the fragment identifier, if any,
identifies. The semantics of the fragment identifier in terms of mapping it to a specific DOM Node
@@ -75915,8 +75946,7 @@
no <code title=event-mouseover><a href=#event-mouseover>mouseover</a></code> event would be fired, and the <code title=event-mousemove><a href=#event-mousemove>mousemove</a></code> and <code title=event-click><a href=#event-click>click</a></code> events would
be fired on the <code><a href=#the-body-element>body</a></code> element rather than the paragraph.</p>
- <p class=note>When a node is inert, it also can't be <a href=#focusable>focusable</a>, and it is disabled
- if it is a <a href=#concept-command title=concept-command>command</a>.</p>
+ <p class=note>When a node is inert, it generally cannot be focused. Inert nodes that are <a href=#concept-command title=concept-command>commands</a> will also get disabled.</p>
<p>An entire <code><a href=#document>Document</a></code> can be marked as <dfn id=blocked-by-a-modal-dialog>blocked by a modal dialog</dfn> <var title="">subject</var>. While a <code><a href=#document>Document</a></code> is so marked, every node that is <a href=#in-a-document title="in a Document">in the <code>Document</code></a>, with the exception of the <var title="">subject</var> element and its descendants, must be marked <a href=#inert>inert</a>. (The
elements excepted by this paragraph can additionally be marked <a href=#inert>inert</a> through other
@@ -76102,33 +76132,294 @@
http://msdn.microsoft.com/workshop/author/dhtml/reference/events/onbeforeactivate.asp
-->
- <div class=impl>
+ <h4 id=introduction-7><span class=secno>8.4.1 </span>Introduction</h4>
- <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 <a href=#the-body-element-0>the body element</a>, if there is one, or else at the
- <code><a href=#document>Document</a></code>'s root element, if there is one. If there is no root element, key events
- must not be fired.</p>
+ <p><i>This section is non-normative.</i></p>
- <p>User agents may track focus for each <a href=#browsing-context>browsing context</a> or <code><a href=#document>Document</a></code>
- individually, or may support only one focused element per <a href=#top-level-browsing-context>top-level browsing context</a>
- — user agents should follow platform conventions in this regard.</p>
+ <p>An HTML user interface typically consists of multiple interactive widgets, such as form
+ controls, scrollable regions, links, dialog boxes, browser tabs, and so forth. These widgets form
+ a hierarchy, with some (e.g. browser tabs, dialog boxes) containing others (e.g. links, form
+ controls).</p>
- <p>Which elements within a <a href=#top-level-browsing-context>top-level browsing context</a> currently have focus must be
- independent of whether or not the <a href=#top-level-browsing-context>top-level browsing context</a> itself has the <i>system
- focus</i>.</p>
+ <p>When interacting with an interface using a keyboard, key input is channeled from the system,
+ through the hierarchy of interactive widgets, to an active widget, which is said to be
+ <i title="">focused</i>.</p>
- <p id=bc-focus-ergo-bcc-focus>When a <a href=#child-browsing-context>child browsing context</a> is focused, its
- <a href=#browsing-context-container>browsing context container</a> must also have focus.</p>
+ <div class=example>
- <p class=note>When an element is focused, the element matches the CSS <code>:focus</code>
- pseudo-class.</p>
+ <p>Consider an HTML application running in a browser tab running in a graphical environment.
+ Suppose this application had a page with some text fields and links, and was currently showing a
+ modal dialog, which itself had a text field and a button.</p>
+ <p>The hierarchy of focusable widgets, in this scenario, would include the browser window, which
+ would have, amongst its children, the browser tab containing the HTML application. The tab itself
+ would have as its children the various links and text fields, as well as the dialog. The dialog
+ itself would have as its children the text field and the button.</p>
+
+ <p><img src=http://images.whatwg.org/focus-tree.png alt=""><!-- purely decorative: it repeats the previous
+ paragraph, in graphical form --><p>If the widget with <i>focus</i> in this example was the text field in the dialog box, then key
+ input would be channeled from the graphical system to ① the Web browser, then to ②
+ the tab, then to ③ the dialog, and finally to ④ the text field.</p>
+
</div>
+ <p>Keyboard <em>events</em> are always targetted at this <i title="">focused</i> element.</p>
- <h4 id=sequential-focus-navigation-and-the-tabindex-attribute><span class=secno>8.4.1 </span>Sequential focus navigation and the <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute</h4>
+ <h4 id=data-model><span class=secno>8.4.2 </span>Data model</h4>
+
+ <p>The term <dfn id=focusable-area>focusable area</dfn> is used to refer to regions of the interface that can become
+ the target of keyboard input. Focusable areas can be elements, parts of elements, or other regions
+ managed by the user agent.</p>
+
+ <p>Each <i><a href=#focusable-area>focusable area</a></i> has a <dfn id=dom-anchor>DOM anchor</dfn>, which is a <code><a href=#node>Node</a></code> object
+ that represents the position of the <i><a href=#focusable-area>focusable area</a></i> in the DOM. (When the <i><a href=#focusable-area>focusable
+ area</a></i> is itself a <code><a href=#node>Node</a></code>, it is its own <i><a href=#dom-anchor>DOM anchor</a></i>.) The <i><a href=#dom-anchor>DOM anchor</a></i> is
+ used in some APIs as a substitute for the <i><a href=#focusable-area>focusable area</a></i> when there is no other DOM object
+ to represent the <i><a href=#focusable-area>focusable area</a></i>.</p>
+
+ <p>The following table describes what objects can be <i title="focusable area"><a href=#focusable-area>focusable
+ areas</a></i>. The cells in the left column describe objects that can be <i title="focusable
+ area"><a href=#focusable-area>focusable areas</a></i>; the cells in the right column describe the <i title="DOM anchor"><a href=#dom-anchor>DOM
+ anchors</a></i> for those elements. (The cells that span both columns are non-normative examples.)</p>
+
+ <table id=table-fa><thead><tr><th id=th-fa-area><i><a href=#focusable-area>Focusable area</a></i>
+ <th id=th-fa-dom-rep><i><a href=#dom-anchor>DOM anchor</a></i>
+ <tr><th colspan=2 id=th-fa-examples>Examples
+
+ <tbody><tr><th headers=th-fa-area class=data-header id=td-fa-1>
+ Elements that have their <a href=#specially-focusable>tabindex focus flag</a> set, that are not <a href=#concept-element-disabled title=concept-element-disabled>actually disabled</a>, that are not <a href=#expressly-inert-control title="expressly inert control">expressly inert</a>, and that are either <a href=#being-rendered>being
+ rendered</a> or <a href=#being-used-as-relevant-canvas-fallback-content>being used as relevant canvas fallback content</a>. <!--
+ CANVAS-FOCUS-FALLBACK -->
+ <td headers="td-fa-1 th-fa-dom-rep">
+ The element itself.
+ <tr><td headers="td-fa-1 th-fa-examples" colspan=2>
+ <p class=example><code><a href=#the-iframe-element>iframe</a></code>, <code title=attr-input-type-text><a href="#text-(type=text)-state-and-search-state-(type=search)"><input
+ type=text></a></code>, sometimes <code title=a><a href=#the-a-element><a href=""></a></code> (depending on platform
+ conventions).
+
+ <tbody><tr><th headers=th-fa-area class=data-header id=td-fa-2>
+ The shapes of <code><a href=#the-area-element>area</a></code> elements in an <a href=#image-map>image map</a> associated with an
+ <code><a href=#the-img-element>img</a></code> element that is <a href=#being-rendered>being rendered</a> and is not <a href=#expressly-inert-control title="expressly
+ inert control">expressly inert</a>.
+ <td headers="td-fa-2 th-fa-dom-rep">
+ The <code><a href=#the-img-element>img</a></code> element.
+ <tr><td headers="td-fa-2 th-fa-examples" colspan=2>
+ <div class=example>
+ <p>In the following example, the <code><a href=#the-area-element>area</a></code> element creates two shapes, one on each
+ image. The <i><a href=#dom-anchor>DOM anchor</a></i> of the first shape is the first <code><a href=#the-img-element>img</a></code> element, and the
+ <i><a href=#dom-anchor>DOM anchor</a></i> of the second shape is the second <code><a href=#the-img-element>img</a></code> element.</p>
+ <pre><map id=wallmap><area alt="Enter Door" coords="10,10,100,200" href="door.html"></map>
+...
+<img src="images/innerwall.jpeg" alt="There is a white wall here, with a door." usemap="#wallmap">
+...
+<img src="images/outerwall.jpeg" alt="There is a red wall here, with a door." usemap="#wallmap"></pre>
+ </div>
+
+ <tbody><tr><th headers=th-fa-area class=data-header id=td-fa-3>
+ The user-agent provided subwidgets of elements that are <a href=#being-rendered>being rendered</a> and are not
+ <a href=#concept-element-disabled title=concept-element-disabled>actually disabled</a> or <a href=#expressly-inert-control title="expressly
+ inert control">expressly inert</a>.
+ <td headers="td-fa-3 th-fa-dom-rep">
+ The element for which the <i><a href=#focusable-area>focusable area</a></i> is a subwidget.
+ <tr><td headers="td-fa-3 th-fa-examples" colspan=2>
+ <p class=example>The <a href=#expose-a-user-interface-to-the-user title="expose a user interface to the user">controls in the user
+ interface that is exposed to the user</a> for a <code><a href=#the-video-element>video</a></code> element, the up and down
+ buttons in a spin-control version of <code title=attr-input-type-number><a href="#number-state-(type=number)"><input
+ type=number></a></code>, the two range control widgets in a <code title=attr-input-type-range><a href="#range-state-(type=range)"><input type=range multiple></a></code>, the part of a
+ <code><a href=#the-details-element>details</a></code> element's rendering that enabled the element to be opened or closed using
+ keyboard input.</p>
+
+ <tbody><tr><th headers=th-fa-area class=data-header id=td-fa-4>
+ The scrollable regions of elements that are <a href=#being-rendered>being rendered</a> are not <a href=#expressly-inert-control title="expressly inert control">expressly inert</a>. <!-- the being rendered part is kinda
+ redundant, a scrollable region is a box generated for the element so by definition if the
+ element has a scrollable region it is being rendered -->
+ <td headers="td-fa-4 th-fa-dom-rep">
+ The element for which the box that the scrollable region scrolls was created.
+ <tr><td headers="td-fa-4 th-fa-examples" colspan=2>
+ <p class=example>The CSS 'overflow' property's 'scroll' value typically creates a scrollable
+ region.</p>
+
+ <tbody><tr><th headers=th-fa-area class=data-header id=td-fa-5>
+ The viewport of a <code><a href=#document>Document</a></code> that is in a <a href=#browsing-context>browsing context</a> and is not
+ <a href=#inert>inert</a>.
+ <td headers="td-fa-5 th-fa-dom-rep">
+ The <code><a href=#document>Document</a></code> for which the viewport was created.
+ <tr><td headers="td-fa-5 th-fa-examples" colspan=2>
+ <p class=example>The contents of an <code><a href=#the-iframe-element>iframe</a></code>.</p>
+
+ <tbody><tr><th headers=th-fa-area class=data-header id=td-fa-6>
+ Any other element or part of an element, especially to aid with accessibility or to better
+ match platform conventions.
+ <td headers="td-fa-6 th-fa-dom-rep">
+ The element.
+ <tr><td headers="td-fa-6 th-fa-examples" colspan=2>
+ <p class=example>A user agent could make all list item bullets focusable, so that a user can
+ more easily navigate lists.</p>
+ <p class=example>Similarly, a user agent could make all elements with <code title=attr-title><a href=#attr-title>title</a></code> attributes focusable, so that their advisory information can
+ be accessed.</p>
+
+ </table><p id=bc-focus-ergo-bcc-focus class=note>A <a href=#browsing-context-container>browsing context container</a> (e.g. an
+ <code><a href=#the-iframe-element>iframe</a></code>) is a <i><a href=#focusable-area>focusable area</a></i>, but key events routed to a <a href=#browsing-context-container>browsing context
+ container</a> get immediately routed to the <a href=#nested-browsing-context>nested browsing context</a>'s <a href=#active-document>active
+ document</a>. Similarly, in sequential focus navigation a <a href=#browsing-context-container>browsing context
+ container</a> essentially acts merely as a placeholder for its <a href=#nested-browsing-context>nested browsing
+ context</a>'s <a href=#active-document>active document</a>.</p>
+
+ <p>Each <i><a href=#focusable-area>focusable area</a></i> belongs to a <dfn id=control-group>control group</dfn>. Each <i><a href=#control-group>control group</a></i> has
+ an <dfn id=control-group-owner title="control group owner">owner</dfn>. <a href=#control-group-owner title="control group owner">Control group
+ owners</a> are <dfn id=control-group-owner-object title="control group owner object">control group owner objects</dfn>. The
+ following are <a href=#control-group-owner-object title="control group owner object">control group owner objects</a>:</p>
+
+ <ul class=brief><li><code><a href=#document>Document</a></code> object in <a href=#browsing-context title="browsing context">browsing contexts</a>.</li>
+
+ <li><code><a href=#the-dialog-element>dialog</a></code> elements that have an <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code>
+ attribute specified and that are <a href=#being-rendered>being rendered</a>.</li>
+
+ </ul><p>Each <a href=#control-group-owner-object>control group owner object</a> owns one <i><a href=#control-group>control group</a></i> (though that
+ group might be empty).</p>
+
+ <p>If the <i><a href=#dom-anchor>DOM anchor</a></i> of a <i><a href=#focusable-area>focusable area</a></i> is a <a href=#control-group-owner-object>control group owner
+ object</a>, then that <i><a href=#focusable-area>focusable area</a></i> belongs to that <a href=#control-group-owner-object>control group owner
+ object</a>'s <i><a href=#control-group>control group</a></i>. Otherwise, the <i><a href=#focusable-area>focusable area</a></i> belongs to its
+ <i><a href=#dom-anchor>DOM anchor</a></i>'s nearest ancestor <a href=#control-group-owner-object>control group owner object</a>.</p>
+
+ <div class=example>
+
+ <p>Thus, a viewport always belongs to the <i><a href=#control-group>control group</a></i> of the <code><a href=#document>Document</a></code>
+ for which the viewport was created, an <code><a href=#the-input-element>input</a></code> control belongs to the <i><a href=#control-group>control
+ group</a></i> of its nearest ancestor <code><a href=#the-dialog-element>dialog</a></code> or <code><a href=#document>Document</a></code>, and an image
+ map's shapes belong to the nearest ancestor <code><a href=#the-dialog-element>dialog</a></code> or <code><a href=#document>Document</a></code> of the
+ <code><a href=#the-img-element>img</a></code> elements (not the <code><a href=#the-area-element>area</a></code> elements — this means one
+ <code><a href=#the-area-element>area</a></code> element might create multiple shapes in different <i title="control
+ group"><a href=#control-group>control groups</a></i>).</p>
+
+ </div>
+
+ <p>An element is <dfn id=expressly-inert-control title="expressly inert control">expressly inert</dfn> if it is
+ <a href=#inert>inert</a> but it is not a <a href=#control-group-owner-object>control group owner object</a> and its nearest
+ ancestor <a href=#control-group-owner-object>control group owner object</a> is not <a href=#inert>inert</a>.</p>
+
+ <p>One <i><a href=#focusable-area>focusable area</a></i> in each non-empty <i><a href=#control-group>control group</a></i> is designated the
+ <dfn id=focused-area-of-the-control-group>focused area of the control group</dfn>. Which control is so designated changes over time,
+ based on algorithms in this specification. If a <i><a href=#control-group>control group</a></i> is empty, it has no <i title="focused area of the control group"><a href=#focused-area-of-the-control-group>focused area</a></i>.</p>
+
+ <p>Each <a href=#control-group-owner-object>control group owner object</a> can also act as the <dfn id=dialog-group-manager title="dialog group
+ manager">manager</dfn> of a <dfn id=dialog-group>dialog group</dfn>.</p>
+
+ <p>Each <code><a href=#the-dialog-element>dialog</a></code> element that has an <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code>
+ attribute specified and that is <a href=#being-rendered>being rendered</a> (i.e. that is a <a href=#control-group-owner-object>control group
+ owner object</a>) and is not <a href=#expressly-inert-dialog title="expressly inert dialog">expressly inert</a>
+ belongs to the <i><a href=#dialog-group>dialog group</a></i> whose <a href=#dialog-group-manager title="dialog group manager">manager</a> is
+ the <code><a href=#the-dialog-element>dialog</a></code> element's nearest ancestor <a href=#control-group-owner-object>control group owner object</a>.</p>
+
+ <p>A <code><a href=#the-dialog-element>dialog</a></code> is <dfn id=expressly-inert-dialog title="expressly inert dialog">expressly inert</dfn> if it is
+ <a href=#inert>inert</a> but its nearest ancestor <a href=#control-group-owner-object>control group owner object</a> is not.</p>
+
+ <p>If no <code><a href=#the-dialog-element>dialog</a></code> element has a particular <a href=#control-group-owner-object>control group owner object</a> as
+ its nearest ancestor <a href=#control-group-owner-object>control group owner object</a>, then that <a href=#control-group-owner-object>control group owner
+ object</a> has no <i><a href=#dialog-group>dialog group</a></i>.</p>
+
+ <p>Each <i><a href=#dialog-group>dialog group</a></i> can have a <code><a href=#the-dialog-element>dialog</a></code> designated as the <dfn id=focused-dialog-of-the-dialog-group>focused
+ dialog of the dialog group</dfn>. Which <code><a href=#the-dialog-element>dialog</a></code> is so designated changes over time,
+ based on algorithms in this specification.</p>
+
+ <hr><p><i title="focusable area"><a href=#focusable-area>Focusable areas</a></i> in <i title="control group"><a href=#control-group>control groups</a></i>
+ are ordered relative to the <a href=#tree-order>tree order</a> of their <i title="DOM anchor"><a href=#dom-anchor>DOM
+ anchors</a></i>. <i title="focusable area"><a href=#focusable-area>Focusable areas</a></i> with the same <i><a href=#dom-anchor>DOM anchor</a></i> in a
+ <i><a href=#control-group>control group</a></i> are ordered relative to their CSS box's relative positions in a pre-order,
+ depth-first traversal of the box tree. <a href=#refsCSS>[CSS]</a></p>
+
+ <p>Elements in <i title="dialog group"><a href=#dialog-group>dialog groups</a></i> are ordered in <a href=#tree-order>tree
+ order</a>.</p>
+
+ <hr><p>The <dfn id=currently-focused-area-of-a-top-level-browsing-context>currently focused area of a top-level browsing context</dfn> at any particular time is
+ the <i><a href=#focusable-area>focusable area</a></i> or <code><a href=#the-dialog-element>dialog</a></code> returned by this algorithm:</p>
+
+ <ol><li><p>Let <var title="">candidate</var> be the <code><a href=#document>Document</a></code> of the <a href=#top-level-browsing-context>top-level
+ browsing context</a>.</li>
+
+ <li>
+
+ <p>If <var title="">candidate</var> has a <i><a href=#dialog-group>dialog group</a></i> with a designated
+ <a href=#focused-dialog-of-the-dialog-group>focused dialog of the dialog group</a>, then let <var title="">candidate</var> be the
+ designated <a href=#focused-dialog-of-the-dialog-group>focused dialog of the dialog group</a>, and redo this step.</p>
+
+ <p>Otherwise, if <var title="">candidate</var> has a non-empty <i><a href=#control-group>control group</a></i>, and the
+ designated <a href=#focused-area-of-the-control-group>focused area of the control group</a> is a <a href=#browsing-context-container>browsing context
+ container</a>, then let <var title="">candidate</var> be the <a href=#active-document>active document</a> of
+ that <a href=#browsing-context-container>browsing context container</a>'s <a href=#nested-browsing-context>nested browsing context</a>, and redo
+ this step.</p>
+
+ <p>Otherwise, if <var title="">candidate</var> has a non-empty <i><a href=#control-group>control group</a></i>, let
+ <var title="">candidate</var> be the designated <a href=#focused-area-of-the-control-group>focused area of the control
+ group</a>.</p>
+
+ </li>
+
+ <li><p>Return <var title="">candidate</var>.</li>
+
+ </ol><p>An element that is the <i><a href=#dom-anchor>DOM anchor</a></i> of a <i><a href=#focusable-area>focusable area</a></i> is said to <dfn id=gains-focus title="gains focus">gain focus</dfn> when that <i><a href=#focusable-area>focusable area</a></i> becomes the <a href=#currently-focused-area-of-a-top-level-browsing-context>currently
+ focused area of a top-level browsing context</a>. When an element is the <i><a href=#dom-anchor>DOM anchor</a></i> of a
+ <i><a href=#focusable-area>focusable area</a></i> of the <a href=#currently-focused-area-of-a-top-level-browsing-context>currently focused area of a top-level browsing context</a>,
+ it is <dfn id=focused>focused</dfn>.</p>
+
+ <div class=impl>
+
+ <p>The <dfn id=focus-chain>focus chain</dfn> of a <i><a href=#focusable-area>focusable area</a></i> or <a href=#control-group-owner-object>control group owner
+ object</a> <var title="">subject</var> is the ordered list constructed as follows:</p>
+
+ <ol><li><p>Let <var title="">current object</var> be <var title="">subject</var>.</li>
+
+ <li><p>Let <var title="">output</var> be an empty list.</li>
+
+ <li><p><i>Loop</i>: Append <var title="">current object</var> to <var title="">output</var>.</li>
+
+ <li>
+
+ <p>If <var title="">current object</var> is an <code><a href=#the-area-element>area</a></code> element's shape, append
+ that <code><a href=#the-area-element>area</a></code> element to <var title="">output</var>.</p>
+
+ <p>Otherwise, if <var title="">current object</var> is a <i><a href=#focusable-area>focusable area</a></i> whose <i><a href=#dom-anchor>DOM
+ anchor</a></i> is an element that is not <var title="">current object</var> itself, append that
+ <i><a href=#dom-anchor>DOM anchor</a></i> element to <var title="">output</var>.</p>
+
+ </li>
+
+ <li>
+
+ <p>Otherwise, if <var title="">current object</var> is a <code><a href=#the-dialog-element>dialog</a></code> object in a
+ <i><a href=#dialog-group>dialog group</a></i>, let <var title="">current object</var> be that <i><a href=#dialog-group>dialog
+ group</a></i>'s <a href=#dialog-group-manager title="dialog group manager">manager</a>, and return to the step
+ labeled <i>loop</i>.</p>
+
+ <p>Otherwise, if <var title="">current object</var> is a <i><a href=#focusable-area>focusable area</a></i>, let <var title="">current object</var> be that <i><a href=#focusable-area>focusable area</a></i>'s <i><a href=#control-group>control group</a></i>'s
+ <a href=#control-group-owner title="control group owner">owner</a>, and return to the step labeled <i>loop</i>.</p>
+
+ <p>Otherwise, if <var title="">current object</var> is a <code><a href=#document>Document</a></code> in a
+ <a href=#nested-browsing-context>nested browsing context</a>, let <var title="">current object</var> be its
+ <a href=#browsing-context-container>browsing context container</a>, and return to the step labeled <i>loop</i>.</p>
+
+ </li>
+
+ <li>
+
+ <p>Return <var title="">output</var>.</p>
+
+ <p class=note>The chain starts with <var title="">subject</var> and (if <var title="">subject</var> is or can be the <a href=#currently-focused-area-of-a-top-level-browsing-context>currently focused area of a top-level browsing
+ context</a>) continues up the focus hierarchy up to the <code><a href=#document>Document</a></code> of the
+ <a href=#top-level-browsing-context>top-level browsing context</a>.</p>
+
+ </li>
+
+ </ol></div>
+
+
+ <h4 id=sequential-focus-navigation-and-the-tabindex-attribute><span class=secno>8.4.3 </span>Sequential focus navigation and the <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute</h4>
+
+ <!-- XXX dfn sequential focus navigation -->
+ <!-- e.g. when tabbing into a <span>browsing context container</span>, you defer to the Document's idea of what the first focusable area is -->
+
<p>The <dfn id=attr-tabindex title=attr-tabindex><code>tabindex</code></dfn> content attribute allows authors to
control whether an element is supposed to be 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
@@ -76142,8 +76433,8 @@
<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>
+ below. This flag is a factor that contributes towards determining whether an element is a
+ <i><a href=#focusable-area>focusable area</a></i>, as described in the previous section.</p>
<p>If the attribute is specified, it must be parsed using the <a href=#rules-for-parsing-integers>rules for parsing
integers</a>. The attribute's values have the following meanings:</p>
@@ -76153,8 +76444,9 @@
<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>
+ <a href=#specially-focusable>tabindex focus flag</a> is set and, if so, whether the element and any <i title="focusable area"><a href=#focusable-area>focusable areas</a></i> that have the element as their <i><a href=#dom-anchor>DOM anchor</a></i> can
+ be reached using sequential focus navigation, and if so, what their relative order should
+ be.</p>
<p>Modulo platform conventions, it is suggested that for the following elements, the
<a href=#specially-focusable>tabindex focus flag</a> be set:</p>
@@ -76199,7 +76491,8 @@
<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>
+ the element, or any <i title="focusable area"><a href=#focusable-area>focusable areas</a></i> that have the element as
+ their <i><a href=#dom-anchor>DOM anchor</a></i>, 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
@@ -76214,8 +76507,10 @@
<dd>
+<!--CLEANUP-->
<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
+ element and any <i title="focusable area"><a href=#focusable-area>focusable areas</a></i> that have the element as
+ their <i><a href=#dom-anchor>DOM anchor</a></i> to be reached using sequential focus navigation, and should follow platform conventions
to determine the element's relative order.</p>
</dd>
@@ -76224,31 +76519,33 @@
<dd>
+<!--CLEANUP-->
<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>
+ element and any <i title="focusable area"><a href=#focusable-area>focusable areas</a></i> that have the element as their
+ <i><a href=#dom-anchor>DOM anchor</a></i> to be reached using sequential focus navigation, and should place the
+ element — referenced as <var title="">candidate</var> below — and the aforementioned <i title="focusable area"><a href=#focusable-area>focusable areas</a></i> in the sequential
+ focus navigation order so that they are:</p>
- <ul><li>before any <a href=#focusable>focusable</a> element whose <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code>
+ <ul><!--CLEANUP--><li>before any <i><a href=#focusable-area>focusable area</a></i> whose <i><a href=#dom-anchor>DOM anchor</a></i> is an element whose <code title=attr-tabindex><a href=#attr-tabindex>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 title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code>
+ <li>before any <i><a href=#focusable-area>focusable area</a></i> whose <i><a href=#dom-anchor>DOM anchor</a></i> is an element whose <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code>
attribute has a value equal to or less than zero,</li>
- <li>after any element whose <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute has a value
+ <li>after any <i><a href=#focusable-area>focusable area</a></i> whose <i><a href=#dom-anchor>DOM anchor</a></i> is an element whose <code title=attr-tabindex><a href=#attr-tabindex>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>
+ attribute on <var title="">candidate</var>,</li>
- <li>after any element whose <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute has a value
- equal to the value of the <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute on the element
- but that is earlier in the document in <a href=#tree-order>tree order</a> than the element,</li>
+ <li>after any <i><a href=#focusable-area>focusable area</a></i> whose <i><a href=#dom-anchor>DOM anchor</a></i> is an element whose <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute has a value
+ equal to the value of the <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute on <var title="">candidate</var>
+ but that is earlier in the document in <a href=#tree-order>tree order</a> than <var title="">candidate</var>,</li>
- <li>before any element whose <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute has a value
- equal to the value of the <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute on the element
- but that is later in the document in <a href=#tree-order>tree order</a> than the element, and</li>
+ <li>before any <i><a href=#focusable-area>focusable area</a></i> whose <i><a href=#dom-anchor>DOM anchor</a></i> is an element whose <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute has a value
+ equal to the value of the <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute on <var title="">candidate</var>
+ but that is later in the document in <a href=#tree-order>tree order</a> than <var title="">candidate</var>, and</li>
- <li>before any element whose <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute has a value
- greater than the value of the <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute on the
- element.</li>
+ <li>before any <i><a href=#focusable-area>focusable area</a></i> whose <i><a href=#dom-anchor>DOM anchor</a></i> is an element whose <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute has a value
+ greater than the value of the <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute on <var title="">candidate</var>.</li>
</ul></dd>
@@ -76258,7 +76555,7 @@
<p class=note>This means that an element that is only focusable because of its <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute will fire a <code title=event-click><a href=#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>
+ <a href=#focused>focused</a>).</p>
<p>The <dfn id=dom-tabindex title=dom-tabIndex><code>tabIndex</code></dfn> IDL attribute must
<a href=#reflect>reflect</a> the value of the <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> content
@@ -76271,198 +76568,437 @@
<div class=impl>
- <h4 id=focus-management><span class=secno>8.4.2 </span>Focus management</h4>
+ <h4 id=processing-model-5><span class=secno>8.4.4 </span>Processing model</h4>
- <p>An element is <dfn id=focusable>focusable</dfn> if all of the following conditions are met:</p>
+ <p>The <dfn id=focusing-steps>focusing steps</dfn> for an object <var title="">new focus target</var> that is
+ either a <i><a href=#focusable-area>focusable area</a></i>, or an element that is not a <i><a href=#focusable-area>focusable area</a></i>, or a
+ <a href=#browsing-context>browsing context</a>, are as follows:</p>
- <ul><li>The element's <a href=#specially-focusable>tabindex focus flag</a> is set.</li>
+ <ol><!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/2816 div.focus() when it's got a scroll region --><!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/2817 img.focus() when it's got an image map --><li>
- <li>The element is either <a href=#being-rendered>being rendered</a> or <!-- CANVAS-FOCUS-FALLBACK --> is a
- descendant of a <code><a href=#the-canvas-element>canvas</a></code> element that <a href=#represents>represents</a> <a href=#embedded-content>embedded
- content</a>.</li>
+ <p>If <var title="">new focus target</var> is neither a <code><a href=#the-dialog-element>dialog</a></code> element that has an
+ <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code> attribute specified and that is <a href=#being-rendered>being
+ rendered</a> (i.e. that is a <a href=#control-group-owner-object>control group owner object</a>), nor a <i><a href=#focusable-area>focusable
+ area</a></i>, then run the first matching set of steps from the following list:</p>
- <li>The element is not <a href=#inert>inert</a>.</li>
+ <dl class=switch><dt>If <var title="">new focus target</var> is an <code><a href=#the-area-element>area</a></code> element with one or more
+ shapes that are <i title="focusable area"><a href=#focusable-area>focusable areas</a></i></dt>
- <li>The element is not <a href=#concept-element-disabled title=concept-element-disabled>disabled</a>.</li>
+ <dd>
- </ul><p>In addition, each shape that is generated for an <code><a href=#the-area-element>area</a></code> element, any
- user-agent-provided interface components of <a href=#media-element title="media element">media elements</a>
- (e.g. a play button), and distinct user interface components of form controls (e.g. "up" and
- "down" buttons on an <code title=attr-input-type-number><a href="#number-state-(type=number)"><input type=number></a></code> spin
- control), should be <a href=#focusable>focusable</a>, unless platform conventions dictate otherwise or
- unless their corresponding element is <a href=#concept-element-disabled title=concept-element-disabled>disabled</a>. (A
- single <code><a href=#the-area-element>area</a></code> element can correspond to multiple shapes, since image maps can be reused
- with multiple images on a page.)</p>
+ <p>Let <var title="">new focus target</var> be the shape corresponding to the first
+ <code><a href=#the-img-element>img</a></code> element in tree order that uses the image map to which the <code><a href=#the-area-element>area</a></code>
+ element belongs.</p>
- <p>The user agent may also make part of a <code><a href=#the-details-element>details</a></code> element's rendering
- <a href=#focusable>focusable</a>, to enable the element to be opened or closed using keyboard input.
- However, this is distinct from the <code><a href=#the-details-element>details</a></code> or <code><a href=#the-summary-element>summary</a></code> element being
- focusable.</p>
+ </dd>
- <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>
+ <dt>If <var title="">new focus target</var> is an element with one or more scrollable regions
+ that are <i title="focusable area"><a href=#focusable-area>focusable areas</a></i></dt>
- <ol><li><p>If the element is not <a href=#in-a-document title="in a Document">in a <code>Document</code></a>, or if
- the element's <code><a href=#document>Document</a></code> has no <a href=#browsing-context>browsing context</a>, or if the element's
- <code><a href=#document>Document</a></code>'s <a href=#browsing-context>browsing context</a> has no <a href=#top-level-browsing-context>top-level browsing
- context</a>, or if the element is not <a href=#focusable>focusable</a>, or if the element is already
- focused, then abort these steps.</p>
+ <dd>
- <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.</li>
+ <p>Let <var title="">new focus target</var> be the element's first scrollable region,
+ according to a pre-order, depth-first traversal of the box tree. <a href=#refsCSS>[CSS]</a></p>
+ </dd>
+
+
+ <dt>If <var title="">new focus target</var> is <a href=#the-body-element-0>the body element</a> of its
+ <code><a href=#document>Document</a></code></dt>
+ <dt>If <var title="">new focus target</var> is the <a href=#root-element>root element</a> of its
+ <code><a href=#document>Document</a></code> and that <code><a href=#document>Document</a></code> has no <a href=#the-body-element-0 title="the body
+ element">body element</a></dt>
+
+ <dd>
+
+ <p>Let <var title="">new focus target</var> be the <code><a href=#document>Document</a></code>'s viewport.</p>
+
+ </dd>
+
+
+ <dt>If <var title="">new focus target</var> is a <a href=#browsing-context>browsing context</a></dt>
+
+ <dd>
+
+ <p>Let <var title="">new focus target</var> be the <a href=#browsing-context>browsing context</a>'s
+ <a href=#active-document>active document</a>.</p>
+
+ </dd>
+
+ <dt>Otherwise</dt>
+
+ <dd>
+
+ <p>Abort the <a href=#focusing-steps>focusing steps</a>.</p>
+
+ </dd>
+
+ </dl></li>
+
<li>
- <p>Make the element the currently focused element in its <a href=#top-level-browsing-context>top-level browsing
- context</a>.</p>
+ <p>If <var title="">new focus target</var> is a <a href=#control-group-owner-object>control group owner object</a> that is
+ not a <i><a href=#focusable-area>focusable area</a></i>, but does have a <i><a href=#dialog-group>dialog group</a></i>, and that <i><a href=#dialog-group>dialog group</a></i>
+ has a designated <a href=#focused-dialog-of-the-dialog-group title="focused dialog of the dialog group">focused dialog</a>, then
+ let <var title="">new focus target</var> be the <a href=#focused-dialog-of-the-dialog-group>focused dialog of the dialog
+ group</a>, and redo this step.</p>
- <p>Some elements, most notably <code><a href=#the-area-element>area</a></code>, can correspond to more than one distinct
- focusable area. If a particular area was indicated when the element was focused, then that is
- the area that must get focus; otherwise, e.g. when using the <code title=dom-focus><a href=#dom-focus>focus()</a></code> method, the first such region in tree order is the one that
- must be focused.</p>
+ <p>Otherwise, if <var title="">new focus target</var> is a <a href=#control-group-owner-object>control group owner
+ object</a> that is not a <i><a href=#focusable-area>focusable area</a></i>, and its <i><a href=#control-group>control group</a></i> is not empty,
+ then designate <var title="">new focus target</var> as the <a href=#focused-area-of-the-control-group>focused area of the control
+ group</a>, and redo this step.</p>
+ <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/?saved=2818 -->
+ <p>Otherwise, if <var title="">new focus target</var> is a <a href=#browsing-context-container>browsing context
+ container</a>, then let <var title="">new focus target</var> be the <a href=#nested-browsing-context>nested browsing
+ context</a>'s <a href=#active-document>active document</a>, and redo this step.</p>
+
+ <p class=note>A <code><a href=#the-dialog-element>dialog</a></code> element can be both a <a href=#control-group-owner-object>control group owner
+ object</a> and a <i><a href=#focusable-area>focusable area</a></i>, if it has both an <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code> attribute specified and a <code title=attr-tabindex><a href=#attr-tabindex>tabindex</a></code> attribute specified and is <a href=#being-rendered>being
+ rendered</a>.</p>
+
</li>
+ <li><p>If <var title="">new focus target</var> is a <i><a href=#focusable-area>focusable area</a></i> and its <i><a href=#dom-anchor>DOM
+ anchor</a></i> is <a href=#inert>inert</a>, then abort these steps.</li>
+
+ <li><p>If <var title="">new focus target</var> is the <a href=#currently-focused-area-of-a-top-level-browsing-context>currently focused area of a
+ top-level browsing context</a>, then abort these steps.</li>
+
+ <li><p>Let <var title="">old chain</var> be the <a href=#focus-chain>focus chain</a> of the <a href=#currently-focused-area-of-a-top-level-browsing-context title="currently focused area of a top-level browsing context">currently focused area of the
+ top-level browsing context</a> in which <var title="">new focus target</var> finds
+ itself.</li>
+
+ <li><p>Let <var title="">new chain</var> be the <a href=#focus-chain>focus chain</a> of <var title="">new
+ focus target</var>.</li>
+
+ <li><p>Run the <a href=#focus-update-steps>focus update steps</a> with <var title="">old chain</var>, <var title="">new chain</var>, and <var title="">new focus target</var> respectively.</li>
+
+ </ol><p>User agents must synchronously run the <a href=#focusing-steps>focusing steps</a> for a <i><a href=#focusable-area>focusable area</a></i>,
+ <code><a href=#the-dialog-element>dialog</a></code>, or <a href=#browsing-context>browsing context</a> <var title="">candidate</var> whenever the
+ user attempts to move the focus to <var title="">candidate</var>.</p>
+
+ <p>The <dfn id=unfocusing-steps>unfocusing steps</dfn> for an object <var title="">old focus target</var> that is
+ either a <i><a href=#focusable-area>focusable area</a></i> or an element that is not a <i><a href=#focusable-area>focusable area</a></i> are as
+ follows:</p>
+
+ <ol><!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/2819 --><!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/2822 --><li><p>If <var title="">old focus target</var> is <a href=#inert>inert</a>, then abort these
+ steps.</li>
+
<li>
- <p>The user agent may apply relevant platform-specific conventions for focusing widgets.</p>
+ <p>If <var title="">old focus target</var> is an <code><a href=#the-area-element>area</a></code> element and one of its
+ shapes is the <a href=#currently-focused-area-of-a-top-level-browsing-context>currently focused area of a top-level browsing context</a>, or, if <var title="">old focus target</var> is an element with one or more scrollable regions, and one of
+ them is the <a href=#currently-focused-area-of-a-top-level-browsing-context>currently focused area of a top-level browsing context</a>, then let <var title="">old focus target</var> be that <a href=#currently-focused-area-of-a-top-level-browsing-context>currently focused area of a top-level browsing
+ context</a>.</p>
- <p class=note>For example, some platforms select the contents of a text field when that field
- is focused.</p>
+ </li>
+ <li><p>Let <var title="">old chain</var> be the <a href=#focus-chain>focus chain</a> of the <a href=#currently-focused-area-of-a-top-level-browsing-context>currently
+ focused area of a top-level browsing context</a>.</li>
+
+ <li><p>If <var title="">old focus target</var> is not one of the entries in <var title="">old
+ chain</var>, then abort these steps.</li>
+
+ <li>
+
+ <p>If <var title="">old focus target</var> is a <code><a href=#the-dialog-element>dialog</a></code> in a <i><a href=#dialog-group>dialog group</a></i>,
+ and the <a href=#dialog-group-manager>dialog group manager</a> has a non-empty <i><a href=#control-group>control group</a></i>, then let <var title="">new focus target</var> be the designated <a href=#focused-area-of-the-control-group title="focused area of the control
+ group">focused area of that focus group</a>.</p>
+
+ <p>Otherwise, if <var title="">old focus target</var> is a <i><a href=#focusable-area>focusable area</a></i>, then let <var title="">new focus target</var> be the first <i><a href=#focusable-area>focusable area</a></i> of its <i><a href=#control-group>control
+ group</a></i> (if the <a href=#control-group-owner>control group owner</a> is a <code><a href=#document>Document</a></code>, this will
+ always be a viewport).</p>
+
+ <p>Otherwise, let <var title="">new focus target</var> be null.</p>
+
</li>
- <li><p><a href=#fire-a-simple-event>Fire a simple event</a> named <code title=event-focus><a href=#event-focus>focus</a></code> at the element.</li>
- <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/723 -->
+ <li><p>If <var title="">new focus target</var> is not null, then run the <a href=#focusing-steps>focusing
+ steps</a> for <var title="">new focus target</var>.</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>
+ </ol><p>When the <a href=#currently-focused-area-of-a-top-level-browsing-context>currently focused area of a top-level browsing context</a> is somehow
+ unfocused without another element being explicitly focused in its stead, the user agent must
+ synchronously run the <a href=#unfocusing-steps>unfocusing steps</a> for that object.</p>
- <p>The <dfn id=unfocusing-steps>unfocusing steps</dfn> for an element are as follows:</p>
+ <p class=note>The <a href=#unfocusing-steps>unfocusing steps</a> do not always result in the focus changing, even
+ when applied to the <a href=#currently-focused-area-of-a-top-level-browsing-context>currently focused area of a top-level browsing context</a>. For
+ example, if the <a href=#currently-focused-area-of-a-top-level-browsing-context>currently focused area of a top-level browsing context</a> is a viewport,
+ then it will usually keep its focus regardless until another <i><a href=#focusable-area>focusable area</a></i> is explicitly
+ focused with the <a href=#focusing-steps>focusing steps</a>.</p>
- <ol><li><p>If the element is an <code><a href=#the-input-element>input</a></code> element, and the <code title=event-input-change><a href=#event-input-change>change</a></code> event applies to the element, and the element does not
- have a defined <a href=#activation-behavior>activation behavior</a>, and the user has changed the element's <a href=#concept-fe-value title=concept-fe-value>value</a> or its list of <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a> while the control was focused
- without committing that change, then <a href=#fire-a-simple-event>fire a simple event</a> that bubbles named <code title=event-change><a href=#event-change>change</a></code> at the element.</p>
+ <hr><p>When a <i><a href=#focusable-area>focusable area</a></i> is added to an empty <i><a href=#control-group>control group</a></i>, it must be designated
+ the <i><a href=#focused-area-of-the-control-group>focused area of the control group</a></i>.</p>
- <li><p>Unfocus the element.</li>
+ <p>When a <i><a href=#dialog-group>dialog group</a></i> is formed, if the <a href=#dialog-group-manager>dialog group manager</a> has an empty
+ <i><a href=#control-group>control group</a></i>, the first non-<a href=#inert>inert</a> <code><a href=#the-dialog-element>dialog</a></code> in the <i><a href=#dialog-group>dialog
+ group</a></i>, if any, or else the first <code><a href=#the-dialog-element>dialog</a></code> in the <i><a href=#dialog-group>dialog group</a></i> regardless of
+ <a href=#inert title=inert>inertness</a>, must be designated the <a href=#focused-dialog-of-the-dialog-group>focused dialog of the dialog
+ group</a>.</p>
- <li><p><a href=#fire-a-simple-event>Fire a simple event</a> named <code title=event-blur><a href=#event-blur>blur</a></code> at the element.</li>
- <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/723 -->
+ <p><dfn id=focus-fixup-rule-one>Focus fixup rule one</dfn>: When the designated <a href=#focused-area-of-the-control-group title="focused area of the control
+ group">focused area of a control group</a> is removed from that <i><a href=#control-group>control group</a></i> in some
+ way (e.g. it stops being a <i><a href=#focusable-area>focusable area</a></i>, it is removed from the DOM, it becomes <a href=#expressly-inert-control title="expressly inert control">expressly inert</a>, etc), and the <i><a href=#control-group>control group</a></i> is
+ still not empty: designate the first non-<a href=#inert>inert</a> <i>focused area</i> in that <i><a href=#control-group>control
+ group</a></i> to be the new <a href=#focused-area-of-the-control-group>focused area of the control group</a>, if any; if they are all
+ <a href=#inert>inert</a>, then designate the first <i>focused area</i> in that <i><a href=#control-group>control group</a></i> to
+ be the new <a href=#focused-area-of-the-control-group>focused area of the control group</a> regardless of <a href=#inert title=inert>inertness</a>. If such a removal instead results in the <i><a href=#control-group>control group</a></i>
+ being empty, then there is simply no longer a <a href=#focused-area-of-the-control-group>focused area of the control group</a>.</p>
- </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=#document>Document</a></code>, or has a <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> attribute added. It would
+ <p class=example>For example, this might happen because an element is removed from its
+ <code><a href=#document>Document</a></code>, or has a <code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code> attribute added. It might
also happen to an <code><a href=#the-input-element>input</a></code> element when the element gets <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a>.</p>
- </div>
+ <p><dfn id=focus-fixup-rule-two>Focus fixup rule two</dfn>: When a <i><a href=#dialog-group>dialog group</a></i> has no designed <a href=#focused-dialog-of-the-dialog-group>focused
+ dialog of the dialog group</a>, and its <a href=#dialog-group-manager>dialog group manager</a>'s <i><a href=#control-group>control
+ group</a></i> changes from being non-empty to being empty, the first non-<a href=#inert>inert</a>
+ <code><a href=#the-dialog-element>dialog</a></code> in the <i><a href=#dialog-group>dialog group</a></i>, if any, or else the first <code><a href=#the-dialog-element>dialog</a></code> in
+ the <i><a href=#dialog-group>dialog group</a></i> regardless of <a href=#inert title=inert>inertness</a>, must be designated
+ the <a href=#focused-dialog-of-the-dialog-group>focused dialog of the dialog group</a>.</p>
+ <p><dfn id=focus-fixup-rule-three>Focus fixup rule three</dfn>: When the designated <a href=#focused-dialog-of-the-dialog-group title="focused dialog of the
+ dialog group">focused dialog of a dialog group</a> is removed from that <i><a href=#dialog-group>dialog group</a></i> in
+ some way (e.g. it stops <a href=#being-rendered>being rendered</a>, it loses its <code title=attr-dialog-open><a href=#attr-dialog-open>open</a></code> attribute, it becomes <a href=#expressly-inert-dialog title="expressly inert
+ dialog">expressly inert</a>, etc), and there is still a <i><a href=#dialog-group>dialog group</a></i> (because the
+ <code><a href=#the-dialog-element>dialog</a></code> in question was not the last <code><a href=#the-dialog-element>dialog</a></code> in that <i><a href=#dialog-group>dialog group</a></i>):
+ if the <i><a href=#dialog-group>dialog group</a></i>'s <a href=#dialog-group-manager title="dialog group manager">manager</a>'s <i><a href=#control-group>control
+ group</a></i> is non-empty, let there be no designated <a href=#focused-dialog-of-the-dialog-group>focused dialog of the dialog group</a>
+ any more; otherwise (in the case that the <i><a href=#control-group>control group</a></i> is empty), designate the first
+ non-<a href=#inert>inert</a> <code><a href=#the-dialog-element>dialog</a></code> in the <i><a href=#dialog-group>dialog group</a></i> to be the <a href=#focused-dialog-of-the-dialog-group>focused
+ dialog of the dialog group</a>, or, if they are all <a href=#inert>inert</a>, designate the first
+ <code><a href=#the-dialog-element>dialog</a></code> in the <i><a href=#dialog-group>dialog group</a></i> to be the <a href=#focused-dialog-of-the-dialog-group>focused dialog of the dialog
+ group</a> regardless of <a href=#inert title=inert>inertness</a>.</p>
-<!--TOPIC:DOM APIs-->
- <h4 id=document-level-focus-apis><span class=secno>8.4.3 </span>Document-level focus APIs</h4>
+ <p>When the <a href=#currently-focused-area-of-a-top-level-browsing-context>currently focused area of a top-level browsing context</a> was a <i><a href=#focusable-area>focusable
+ area</a></i> but stops being a <i><a href=#focusable-area>focusable area</a></i>, or when it was a <code><a href=#the-dialog-element>dialog</a></code> in a
+ <a href=#dialog-group>dialog group</a> and stops being part of that <a href=#dialog-group>dialog group</a>, or when it
+ starts being <a href=#inert>inert</a>, the user agent must run the following steps:</p>
- <dl class=domintro><dt><var title="">document</var> . <code title=dom-document-activeElement><a href=#dom-document-activeelement>activeElement</a></code></dt>
+ <ol><!-- this is basically a special-cased version of the focusing steps --><li><p>Let <var title="">old focus target</var> be whatever the <a href=#currently-focused-area-of-a-top-level-browsing-context title="currently focused
+ area of a top-level browsing context">currently focused area of the top-level browsing
+ context</a> was immediately before this algorithm became applicable (e.g. before the element
+ was disabled, or the dialog was closed, or whatever caused this algorithm to tun).</li>
- <dd>
+ <li><p>Let <var title="">old chain</var> be the <a href=#focus-chain>focus chain</a> of the <a href=#currently-focused-area-of-a-top-level-browsing-context title="currently focused area of a top-level browsing context">currently focused area of the
+ top-level browsing context</a> at the same time.</li>
- <p>Returns the currently focused element.</p>
+ <li><p>Make sure that the changes implied by the focus fixup rules <a href=#focus-fixup-rule-one title="focus fixup rule
+ one">one</a>, <a href=#focus-fixup-rule-two title="focus fixup rule two">two</a>, and <a href=#focus-fixup-rule-three title="focus fixup
+ rule three">three</a> above are applied.</li>
- </dd>
+ <li><p>Let <var title="">new focus target</var> be the <a href=#currently-focused-area-of-a-top-level-browsing-context>currently focused area of a
+ top-level browsing context</a>.</li>
- <dt><var title="">document</var> . <code title=dom-document-hasFocus><a href=#dom-document-hasfocus>hasFocus</a></code>()</dt>
+ <li><p>If <var title="">old focus target</var> and <var title="">new focus target</var> are the
+ same, abort these steps.</li>
- <dd>
+ <li><p>Let <var title="">new chain</var> be the <a href=#focus-chain>focus chain</a> of <var title="">new
+ focus target</var>.</li>
- <p>Returns true if the document has focus; otherwise, returns false.</p>
+ <li><p>Run the <a href=#focus-update-steps>focus update steps</a> with <var title="">old chain</var>, <var title="">new chain</var>, and <var title="">new focus target</var> respectively.</li>
- </dd>
+ </ol><hr><p>The <dfn id=focus-update-steps>focus update steps</dfn>, given an <var title="">old chain</var>, a <var title="">new chain</var>, and a <var title="">new focus target</var> respectively, are as
+ follows:</p>
- <dt><var title="">window</var> . <code title=dom-window-focus><a href=#dom-window-focus>focus</a></code>()</dt>
+ <ol><!-- focusin/focusout?: http://software.hixie.ch/utilities/js/live-dom-viewer/saved/723 --><li><p>If the last entry in <var title="">old chain</var> and the last entry in <var title="">new chain</var> are the same, pop the last entry from <var title="">old chain</var>
+ and the last entry from <var title="">new chain</var> and redo this step.</li>
- <dd>
+ <li>
- <p>Focuses the window. Use of this method is discouraged. Allow the user to control window focus
- instead.</p>
+ <p>For each entry <var title="">entry</var> in <var title="">old chain</var>, in order, run
+ these substeps:</p>
- </dd>
+ <ol><li id=unfocus-causes-change-event><p>If <var title="">entry</var> is an <code><a href=#the-input-element>input</a></code>
+ element, and the <code title=event-input-change><a href=#event-input-change>change</a></code> event <a href=#concept-input-apply title=concept-input-apply>applies</a> to the element, and the element does not have a
+ defined <a href=#activation-behavior>activation behavior</a>, and the user has changed the element's <a href=#concept-fe-value title=concept-fe-value>value</a> or its list of <a href=#concept-input-type-file-selected title=concept-input-type-file-selected>selected files</a> while the control was focused
+ without committing that change, then <a href=#fire-a-simple-event>fire a simple event</a> that bubbles named <code title=event-change><a href=#event-change>change</a></code> at the element.</p>
- <dt><var title="">window</var> . <code title=dom-window-blur><a href=#dom-window-blur>blur</a></code>()</dt>
+ <li>
+ <p>If <var title="">entry</var> is an element, let <var title="">blur event target</var> be
+ <var title="">entry</var>.</p>
+
+ <p>If <var title="">entry</var> is a <code><a href=#document>Document</a></code> object, let <var title="">blur
+ event target</var> be that <code><a href=#document>Document</a></code> object's <code><a href=#window>Window</a></code> object.</p>
+
+ <p>Otherwise, let <var title="">blur event target</var> be null.</p>
+
+ </li>
+
+ <li>
+
+ <p>If <var title="">blur event target</var> is not null, <a href=#fire-a-simple-event>fire a simple event</a>
+ named <code title=event-blur><a href=#event-blur>blur</a></code> at <var title="">blur event target</var>.</p>
+
+ <p class=note>In some cases, e.g. if <var title="">entry</var> is an <code><a href=#the-area-element>area</a></code>
+ element's shape, a scrollable region, or a viewport, no event is fired.</p>
+
+ </li>
+
+ </ol></li>
+
+ <li><p>Apply any relevant platform-specific conventions for focusing <var title="">new focus
+ target</var>. (For example, some platforms select the contents of a text field when that field is
+ focused.)</li>
+
+ <li>
+
+ <p>For each entry <var title="">entry</var> in <var title="">new chain</var>, in reverse
+ order, run these substeps:</p>
+
+ <ol><li><p>If <var title="">entry</var> is a <code><a href=#the-dialog-element>dialog</a></code> element: Let <var title="">entry</var> be the designated <a href=#focused-dialog-of-the-dialog-group title="focused dialog of the dialog
+ group">focused dialog of its dialog group</a>.</li>
+
+ <li>
+
+ <p>If <var title="">entry</var> is a <i><a href=#focusable-area>focusable area</a></i>: Designate <var title="">entry</var> as the <a href=#focused-area-of-the-control-group>focused area of the control group</a>. If its <i><a href=#control-group>control
+ group</a></i>'s <a href=#control-group-owner title="control group owner">owner</a> is also a <a href=#dialog-group-manager>dialog group
+ manager</a>, then let there be no designated <a href=#focused-dialog-of-the-dialog-group title="focused dialog of the dialog
+ group">focused dialog</a> in that <i><a href=#dialog-group>dialog group</a></i>.</p>
+
+ <p class=note>It is possible for <var title="">entry</var> to be both a <code><a href=#the-dialog-element>dialog</a></code>
+ element and a <i><a href=#focusable-area>focusable area</a></i>, in which case it is its own <a href=#control-group-owner>control group
+ owner</a>.</p>
+
+ </li>
+
+ <li>
+
+ <p>If <var title="">entry</var> is an element, let <var title="">focus event target</var> be
+ <var title="">entry</var>.</p>
+
+ <p>If <var title="">entry</var> is a <code><a href=#document>Document</a></code> object, let <var title="">focus
+ event target</var> be that <code><a href=#document>Document</a></code> object's <code><a href=#window>Window</a></code> object.</p>
+
+ <p>Otherwise, let <var title="">focus event target</var> be null.</p>
+
+ </li>
+
+ <li>
+
+ <p>If <var title="">focus event target</var> is not null, <a href=#fire-a-simple-event>fire a simple event</a>
+ named <code title=event-focus><a href=#event-focus>focus</a></code> at <var title="">focus event target</var>.</p>
+
+ <p class=note>In some cases, e.g. if <var title="">entry</var> is an <code><a href=#the-area-element>area</a></code>
+ element's shape, a scrollable region, or a viewport, no event is fired.</p>
+
+ </li>
+
+ </ol></li>
+
+ </ol><hr><p>When a key event is to be routed in a <a href=#top-level-browsing-context>top-level browsing context</a>, the user agent
+ must run the follow steps:</p>
+
+ <ol><li><p>Let <var title="">target area</var> be the <a href=#currently-focused-area-of-a-top-level-browsing-context title="currently focused area of a
+ top-level browsing context">currently focused area of the top-level browsing
+ context</a>.</li>
+
+ <li><p>If <var title="">target area</var> is a <i><a href=#focusable-area>focusable area</a></i>, let <var title="">target
+ node</var> be <var title="">target area</var>'s <i><a href=#dom-anchor>DOM anchor</a></i>. Otherwise, <var title="">target area</var> is a <code><a href=#the-dialog-element>dialog</a></code>; let <var title="">target node</var> be
+ <var title="">target area</var>.</li>
+
+ <li>
+
+ <p>If <var title="">target node</var> is a <code><a href=#document>Document</a></code> that has a <a href=#the-body-element-0 title="the
+ body element">body element</a>, then let <var title="">target node</var> be <a href=#the-body-element-0>the body
+ element</a> of that <code><a href=#document>Document</a></code>.</p>
+
+ <p>Otherwise, if <var title="">target node</var> is a <code><a href=#document>Document</a></code> that has a
+ <a href=#root-element>root element</a>, then let <var title="">target node</var> be the <a href=#root-element>root
+ element</a> of that <code><a href=#document>Document</a></code>.</p>
+
+ </li>
+
+ <li>
+
+ <p>If <var title="">target node</var> is not <a href=#inert>inert</a>, fire the event at <var title="">target node</var>.</p>
+
+ <p class=note>It is possible for the <a href=#currently-focused-area-of-a-top-level-browsing-context>currently focused area of a top-level browsing
+ context</a> to be <a href=#inert>inert</a>, for example if a <a href=#dom-dialog-showmodal title=dom-dialog-showModal>modal dialog is shown</a>, and then that <code><a href=#the-dialog-element>dialog</a></code>
+ element is made <a href=#inert>inert</a>. It is likely to be the result of a logic error in the
+ application, though.</p>
+
+ </li>
+
+ <li><p>If the event was not canceled, then let <var title="">target area</var> handle the key
+ event. This might include <a href=#run-synthetic-click-activation-steps title="run synthetic click activation steps">running synthetic
+ click activation steps</a> for <var title="">target node</var>.</li>
+
+ </ol></div>
+
+
+<!--TOPIC:DOM APIs-->
+ <h4 id=focus-management-apis><span class=secno>8.4.5 </span>Focus management APIs</h4>
+
+ <dl class=domintro><dt><var title="">document</var> . <code title=dom-document-activeElement><a href=#dom-document-activeelement>activeElement</a></code></dt>
+
<dd>
- <p>Unfocuses the window. Use of this method is discouraged. Allow the user to control window
- focus instead.</p>
+ <p>Returns the deepest element in the document through which or to which key events are being
+ routed. This is, roughly speaking, the focused element in the document.</p>
+ <p>For the purposes of this API, when a <a href=#child-browsing-context>child browsing context</a> is focused, its
+ <a href=#browsing-context-container>browsing context container</a> is <a href=#bc-focus-ergo-bcc-focus>focused</a> in the
+ <a href=#parent-browsing-context>parent browsing context</a>. For example, if the user moves the focus to a text field
+ in an <code><a href=#the-iframe-element>iframe</a></code>, the <code><a href=#the-iframe-element>iframe</a></code> is the element returned by the <code title=dom-document-activeElement><a href=#dom-document-activeelement>activeElement</a></code> API in the <code><a href=#the-iframe-element>iframe</a></code>'s
+ <code><a href=#document>Document</a></code>.</p>
+
</dd>
- </dl><div class=impl>
+ <dt><var title="">document</var> . <code title=dom-document-hasFocus><a href=#dom-document-hasfocus>hasFocus</a></code>()</dt>
- <p>The <dfn id=dom-document-activeelement title=dom-document-activeElement><code>activeElement</code></dfn> attribute on
- <code><a href=#document>Document</a></code> objects must return the element in the document that is focused. If no
- element in the <code><a href=#document>Document</a></code> is focused, this must return <a href=#the-body-element-0>the body
- element</a>.</p>
+ <dd>
- <p class=note>When a <a href=#child-browsing-context>child browsing context</a> is focused, its <a href=#browsing-context-container>browsing context
- container</a> is also focused, <a href=#bc-focus-ergo-bcc-focus>by definition</a>. For
- example, if the user moves the focus to a text field in an <code><a href=#the-iframe-element>iframe</a></code>, the
- <code><a href=#the-iframe-element>iframe</a></code> is the element with focus in the <a href=#parent-browsing-context>parent browsing context</a>.</p>
+ <p>Returns true if key events are being routed through or to the document; otherwise, returns
+ false. Roughly speaking, this corresponds to the document, or a documented nested inside this
+ one, being focused.</p>
- <p>The <dfn id=dom-document-hasfocus title=dom-document-hasFocus><code>hasFocus()</code></dfn> method on
- <code><a href=#document>Document</a></code> objects must return true if the <code><a href=#document>Document</a></code>'s <a href=#browsing-context>browsing
- context</a> is focused, and all its <a href=#ancestor-browsing-context title="ancestor browsing context">ancestor browsing
- contexts</a> are also focused, and the <a href=#top-level-browsing-context>top-level browsing context</a> has the
- <i>system focus</i>. If the <code><a href=#document>Document</a></code> has no <a href=#browsing-context>browsing context</a> or if its
- <a href=#browsing-context>browsing context</a> has no <a href=#top-level-browsing-context>top-level browsing context</a>, then the method will
- always return false.</p>
+ </dd>
- <p>The <dfn id=dom-window-focus title=dom-window-focus><code>focus()</code></dfn> method on the <code><a href=#window>Window</a></code>
- object, when invoked, provides a hint to the user agent that the script believes the user might be
- interested in the contents of the <a href=#browsing-context>browsing context</a> of the <code><a href=#window>Window</a></code> object
- on which the method was invoked.</p>
+ <dt><var title="">window</var> . <code title=dom-window-focus><a href=#dom-window-focus>focus</a></code>()</dt>
- <p>User agents are encouraged to have this <code title=dom-window-focus><a href=#dom-window-focus>focus()</a></code> method
- trigger some kind of notification.</p>
+ <dd>
- <p>The <dfn id=dom-window-blur title=dom-window-blur><code>blur()</code></dfn> method on the <code><a href=#window>Window</a></code>
- object, when invoked, provides a hint to the user agent that the script believes the user probably
- is not currently interested in the contents of the <a href=#browsing-context>browsing context</a> of the
- <code><a href=#window>Window</a></code> object on which the method was invoked, but that the contents might become
- interesting again in the future.</p>
+ <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/?saved=2823 -->
- <p>User agents are encouraged to ignore calls to this <code title=dom-window-blur><a href=#dom-window-blur>blur()</a></code>
- method entirely.</p>
+ <p>Moves the focus to the window's <a href=#browsing-context-container>browsing context container</a>, if any.</p>
- <p class=note>Historically the <code title=dom-window-blur><a href=#dom-window-blur>focus()</a></code> and <code title=dom-window-blur><a href=#dom-window-blur>blur()</a></code> methods actually affected the system focus, but hostile
- sites widely abuse this behavior to the user's detriment.</p>
+ </dd>
- </div>
+<!--
+ <dt><var title="">window</var> . <code title="dom-window-blur">blur</code>()</dt>
+ <dd>
- <h4 id=element-level-focus-apis><span class=secno>8.4.4 </span>Element-level focus APIs</h4>
+ <p>No effect.</p>
- <dl class=domintro><dt><var title="">element</var> . <code title=dom-focus><a href=#dom-focus>focus</a></code>()</dt>
+ </dd>
+-->
+ <dt><var title="">element</var> . <code title=dom-focus><a href=#dom-focus>focus</a></code>()</dt>
+
<dd>
- <p>Focuses the element.</p>
+ <p>Moves the focus to the element.</p>
+ <p>If the element is <a href=#the-body-element-0>the body element</a>, moves the focus to the viewport instead.</p>
+
</dd>
<dt><var title="">element</var> . <code title=dom-blur><a href=#dom-blur>blur</a></code>()</dt>
<dd>
- <p>Unfocuses the element. Use of this method is discouraged. Focus another element instead.</p>
+ <p>Moves the focus to the viewport. Use of this method is discouraged; if you want to focus the
+ viewport, call the <code title=dom-focus><a href=#dom-focus>focus()</a></code> method on <a href=#the-body-element-0>the body
+ element</a>.</p>
<p>Do not use this method to hide the focus ring if you find the focus ring unsightly. Instead,
- use a CSS rule to override the 'outline' property. Be aware, however, that if an alternative
- focusing style isn't made available instead, the page will be significantly less usable for
- people who primarily navigate pages using a keyboard, or those with reduced vision who use focus
- outlines to help them navigate the page.</p>
+ use a CSS rule to override the 'outline' property, and provide a different way to show what
+ element is focused. Be aware that if an alternative focusing style isn't made available, the
+ page will be significantly less usable for people who primarily navigate pages using a keyboard,
+ or those with reduced vision who use focus outlines to help them navigate the page.</p>
<!-- we suggest using CSS here because users can override CSS, so it's no the end of the world,
unlike using .blur(), which cannot be easily overridden by users and completely breaks tab
@@ -76470,8 +77006,8 @@
<div class=example>
- <p>For example, to hide the outline from links and instead use a yellow background, you could
- use:</p>
+ <p>For example, to hide the outline from links and instead use a yellow background to indicate
+ focus, you could use:</p>
<pre>:link:focus, :visited:focus { outline: none; background: yellow; color: black; }</pre>
@@ -76481,9 +77017,95 @@
</dl><div class=impl>
- <p>The <dfn id=dom-focus title=dom-focus><code>focus()</code></dfn> method, when invoked, must run the
- following algorithm:</p>
+ <p>The <dfn id=dom-document-activeelement title=dom-document-activeElement><code>activeElement</code></dfn> attribute on
+ <code><a href=#document>Document</a></code> objects must return the value returned by the following steps:</p>
+ <ol><li><p>Let <var title="">candidate</var> be the <code><a href=#document>Document</a></code> on which the method was
+ invoked.</li>
+
+ <li><p>If <var title="">candidate</var> has a <i><a href=#dialog-group>dialog group</a></i> with a designated
+ <a href=#focused-dialog-of-the-dialog-group>focused dialog of the dialog group</a>, then let <var title="">candidate</var> be the
+ designated <a href=#focused-dialog-of-the-dialog-group>focused dialog of the dialog group</a>, and redo this step.</li>
+
+ <li><p>If <var title="">candidate</var> has a non-empty <i><a href=#control-group>control group</a></i>, let <var title="">candidate</var> be the designated <a href=#focused-area-of-the-control-group>focused area of the control
+ group</a>.</p>
+
+ </li>
+
+ <li><p>If <var title="">candidate</var> is a <i><a href=#focusable-area>focusable area</a></i>, let <var title="">candidate</var> be <var title="">candidate</var>'s <i><a href=#dom-anchor>DOM anchor</a></i>.</li>
+
+ <li>
+
+ <p>If <var title="">candidate</var> is a <code><a href=#document>Document</a></code> that has a <a href=#the-body-element-0 title="the
+ body element">body element</a>, then let <var title="">candidate</var> be <a href=#the-body-element-0>the body
+ element</a> of that <code><a href=#document>Document</a></code>.</p>
+
+ <p>Otherwise, if <var title="">candidate</var> is a <code><a href=#document>Document</a></code> that has a <a href=#root-element>root
+ element</a>, then let <var title="">candidate</var> be the <a href=#root-element>root element</a> of that
+ <code><a href=#document>Document</a></code>.</p>
+
+ <p>Otherwise, if <var title="">candidate</var> is a <code><a href=#document>Document</a></code>, then let <var title="">candidate</var> be null.</p>
+
+ </li>
+
+ <li><p>Return <var title="">candidate</var>.</li>
+
+ </ol><p>The <dfn id=dom-document-hasfocus title=dom-document-hasFocus><code>hasFocus()</code></dfn> method on
+ <code><a href=#document>Document</a></code> objects must return true the value returned by the following steps:</p>
+
+ <ol><li><p>Let <var title="">target</var> be the <code><a href=#document>Document</a></code> on which the method was
+ invoked.</li>
+
+ <li><p>Let <var title="">candidate</var> be the <code><a href=#document>Document</a></code> of the <a href=#top-level-browsing-context>top-level
+ browsing context</a>.</li>
+
+ <li><p>If <var title="">candidate</var> is <var title="">target</var>, return true and abort
+ these steps.</li>
+
+ <li>
+
+ <p>If <var title="">candidate</var> has a <i><a href=#dialog-group>dialog group</a></i> with a designated <a href=#focused-dialog-of-the-dialog-group>focused
+ dialog of the dialog group</a>, then let <var title="">candidate</var> be the designated
+ <a href=#focused-dialog-of-the-dialog-group>focused dialog of the dialog group</a>, and redo this step.</p>
+
+ <p>Otherwise, if <var title="">candidate</var> has a non-empty <i><a href=#control-group>control group</a></i>, and the
+ designated <a href=#focused-area-of-the-control-group>focused area of the control group</a> is a <a href=#browsing-context-container>browsing context
+ container</a>, and the <a href=#active-document>active document</a> of that <a href=#browsing-context-container>browsing context
+ container</a>'s <a href=#nested-browsing-context>nested browsing context</a> is <var title="">target</var>, then
+ return true and abort these steps.</p>
+
+ <p>Otherwise, if <var title="">candidate</var> has a non-empty <i><a href=#control-group>control group</a></i>, and the
+ designated <a href=#focused-area-of-the-control-group>focused area of the control group</a> is a <a href=#browsing-context-container>browsing context
+ container</a>, then let <var title="">candidate</var> be the <a href=#active-document>active document</a> of
+ that <a href=#browsing-context-container>browsing context container</a>'s <a href=#nested-browsing-context>nested browsing context</a>, and redo
+ this step.</p>
+
+ <p>Otherwise, return false and abort these steps.</p>
+
+ </li>
+
+ </ol><p>The <dfn id=dom-window-focus title=dom-window-focus><code>focus()</code></dfn> method on <code><a href=#window>Window</a></code>
+ object, when invoked, must run the <a href=#focusing-steps>focusing steps</a> with the <code><a href=#window>Window</a></code>
+ object's <a href=#browsing-context>browsing context</a>. Additionally, if this <a href=#browsing-context>browsing context</a> is a
+ <a href=#top-level-browsing-context>top-level browsing context</a>, user agents are encouraged to trigger some sort of
+ notification to indicate to the user that the page is attempting to gain focus.</p>
+
+ <p>The <dfn id=dom-window-blur title=dom-window-blur><code>blur()</code></dfn> method on the <code><a href=#window>Window</a></code>
+ object, when invoked, provides a hint to the user agent that the script believes the user probably
+ is not currently interested in the contents of the <a href=#browsing-context>browsing context</a> of the
+ <code><a href=#window>Window</a></code> object on which the method was invoked, but that the contents might become
+ interesting again in the future.</p>
+
+ <p>User agents are encouraged to ignore calls to this <code title=dom-window-blur><a href=#dom-window-blur>blur()</a></code>
+ method entirely.</p>
+
+ <p class=note>Historically, the <code title=dom-window-blur><a href=#dom-window-blur>focus()</a></code> and <code title=dom-window-blur><a href=#dom-window-blur>blur()</a></code> methods actually affected the system-level focus of the
+ system widget (e.g. tab or window) that contained the <a href=#browsing-context>browsing context</a>, but hostile
+ sites widely abuse this behavior to the user's detriment.</p>
+
+ <p>The <dfn id=dom-focus title=dom-focus><code>focus()</code></dfn> method on elements, when invoked, must
+ run the following algorithm:</p>
+
<ol><li><p>If the element is marked as <i><a href=#locked-for-focus>locked for focus</a></i>, then abort these steps.</li>
<li><p>Mark the element as <dfn id=locked-for-focus>locked for focus</dfn>.</li>
@@ -76493,8 +77115,8 @@
<li><p>Unmark the element as <i><a href=#locked-for-focus>locked for focus</a></i>.</li>
</ol><p>The <dfn id=dom-blur title=dom-blur><code>blur()</code></dfn> method, when invoked, should run the
- <a href=#unfocusing-steps>unfocusing steps</a> for the element on which the method was called instead. User agents
- may selectively or uniformly ignore calls to this method for usability reasons.</p>
+ <a href=#unfocusing-steps>unfocusing steps</a> for the element on which the method was called. User agents may
+ selectively or uniformly ignore calls to this method for usability reasons.</p>
<p class=example>For example, if the <code title=dom-blur><a href=#dom-blur>blur()</a></code> method is unwisely
being used to remove the focus ring for aesthetics reasons, the page would become unusable by
@@ -76502,13 +77124,14 @@
page.</p>
</div>
+
+
<!--TOPIC:HTML-->
-
<h3 id=assigning-keyboard-shortcuts><span class=secno>8.5 </span>Assigning keyboard shortcuts</h3>
- <h4 id=introduction-7><span class=secno>8.5.1 </span>Introduction</h4>
+ <h4 id=introduction-8><span class=secno>8.5.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -76637,7 +77260,7 @@
<div class=impl>
- <h4 id=processing-model-5><span class=secno>8.5.3 </span>Processing model</h4>
+ <h4 id=processing-model-6><span class=secno>8.5.3 </span>Processing model</h4>
<p>An element's <dfn id=assigned-access-key>assigned access key</dfn> is a key combination derived from the element's
<code title=attr-accesskey><a href=#the-accesskey-attribute>accesskey</a></code> content attribute. Initially, an element must not
@@ -77133,7 +77756,7 @@
</div>
- <h4 id=introduction-8><span class=secno>8.7.1 </span>Introduction</h4>
+ <h4 id=introduction-9><span class=secno>8.7.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -79524,7 +80147,7 @@
</ul><p>These values are not currently exposed on the interface.</p>
- <h4 id=processing-model-6><span class=secno>9.2.3 </span>Processing model</h4>
+ <h4 id=processing-model-7><span class=secno>9.2.3 </span>Processing model</h4>
<p>The resource indicated in the argument to the <code title=dom-EventSource><a href=#dom-eventsource>EventSource</a></code>
constructor is <a href=#fetch title=fetch>fetched</a> when the constructor is run.</p>
@@ -80895,7 +81518,7 @@
</div>
- <h4 id=introduction-9><span class=secno>9.4.1 </span>Introduction</h4>
+ <h4 id=introduction-10><span class=secno>9.4.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -81116,7 +81739,7 @@
<h3 id=channel-messaging><span class=secno>9.5 </span><dfn>Channel messaging</dfn></h3>
- <h4 id=introduction-10><span class=secno>9.5.1 </span>Introduction</h4>
+ <h4 id=introduction-11><span class=secno>9.5.1 </span>Introduction</h4>
<p><i>This section is non-normative.</i></p>
@@ -82118,7 +82741,7 @@
- <h3 id=introduction-11><span class=secno>10.1 </span>Introduction</h3>
+ <h3 id=introduction-12><span class=secno>10.1 </span>Introduction</h3>
<h4 id=scope-0><span class=secno>10.1.1 </span>Scope</h4>
@@ -83351,7 +83974,7 @@
worker</a> but it is a <a href=#permissible-worker>permissible worker</a>.</p>
- <h4 id=processing-model-7><span class=secno>10.2.4 </span>Processing model</h4>
+ <h4 id=processing-model-8><span class=secno>10.2.4 </span>Processing model</h4>
<p>When a user agent is to <dfn id=run-a-worker>run a worker</dfn> for a script with <a href=#url>URL</a> <var title="">url</var> and a <a href=#script-settings-object>script settings object</a> <var title="">settings
object</var>, it must run the following steps:</p>
@@ -84140,7 +84763,7 @@
- <h3 id=introduction-12><span class=secno>11.1 </span>Introduction</h3>
+ <h3 id=introduction-13><span class=secno>11.1 </span>Introduction</h3>
<p><i>This section is non-normative.</i></p>
@@ -94397,7 +95020,7 @@
section has the same conformance implications as the RFC2119-defined term "must".</i></p>
- <h3 id=introduction-13><span class=secno>14.1 </span>Introduction</h3>
+ <h3 id=introduction-14><span class=secno>14.1 </span>Introduction</h3>
<p>In general, user agents are expected to support CSS, and many of the suggestions in this
section are expressed in CSS terms. User agents that use other presentation mechanisms can derive
@@ -95937,7 +96560,7 @@
<h3 id=bindings><span class=secno>14.5 </span>Bindings</h3> <!-- a binding -->
- <h4 id=introduction-14><span class=secno>14.5.1 </span>Introduction</h4>
+ <h4 id=introduction-15><span class=secno>14.5.1 </span>Introduction</h4>
<p>A number of elements have their rendering defined in terms of the 'binding' property. <a href=#refsBECSS>[BECSS]</a></p>
@@ -96812,10 +97435,11 @@
<p>User agents are expected to expose the <a href=#advisory-information>advisory information</a> of elements upon user
request, and to make the user aware of the presence of such information.</p>
+<!--CLEANUP-->
<p>On interactive graphical systems where the user can use a pointing device, this could take the
form of a tooltip. When the user is unable to use a pointing device, then the user agent is
- expected to make the content available in some other fashion, e.g. by making the element focusable
- and always displaying the <a href=#advisory-information>advisory information</a> of the currently focused element, or
+ expected to make the content available in some other fashion, e.g. by making the element a <i><a href=#focusable-area>focusable area</a></i>
+ and always displaying the <a href=#advisory-information>advisory information</a> of the currently <a href=#focused>focused</a> element, or
by showing the <a href=#advisory-information>advisory information</a> of the elements under the user's finger on a
touch device as the user pans around the screen.</p>
@@ -96826,7 +97450,7 @@
<div class=example>
- <p>For example, a visual user agent could make elements with a <code title=attr-title><a href=#attr-title>title</a></code> attribute focusable, and could make any focused element with a
+ <p>For example, a visual user agent could make elements with a <code title=attr-title><a href=#attr-title>title</a></code> attribute <a href=#focusable-area title="focusable area">focusable</a>, and could make any <a href=#focused>focused</a> element with a
<code title=attr-title><a href=#attr-title>title</a></code> attribute show its tooltip under the element while the
element has focus. This would allow a user to tab around the document to find all the advisory
text.</p>
@@ -97006,7 +97630,7 @@
<li>None of the elements in the <code><a href=#document>Document</a></code> have any <a href=#presentational-hints>presentational hints</a>.
<li>None of the elements in the <code><a href=#document>Document</a></code> have any <a href=#css-styling-attribute title="CSS styling attribute">CSS styling attributes</a>.
<li>None of the elements in the <code><a href=#document>Document</a></code> are in any of the following namespaces: <a href=#html-namespace-0>HTML namespace</a>, <a href=#svg-namespace>SVG namespace</a>, <a href=#mathml-namespace>MathML namespace</a>
- <li>The <code><a href=#document>Document</a></code> has no <a href=#focusable>focusable</a> elements (e.g. from XLink).
+ <li>The <code><a href=#document>Document</a></code> has no <i><a href=#focusable-area>focusable area</a></i> (e.g. from XLink) other than the viewport.
<li>The <code><a href=#document>Document</a></code> has no <a href=#hyperlink title=hyperlink>hyperlinks</a> (e.g. from XLink).
<li>There exists no <a href=#concept-script title=concept-script>script</a> whose <a href=#settings-object>settings object</a> specifies this <code><a href=#document>Document</a></code> as the <a href=#responsible-document>responsible document</a>.
<li>None of the elements in the <code><a href=#document>Document</a></code> have any registered event listeners.
@@ -102475,7 +103099,7 @@
<tr><!-- blur --><td> <dfn id=event-blur title=event-blur><code>blur</code></dfn>
<td> <code><a href=#event>Event</a></code>
<td> <code><a href=#window>Window</a></code>, elements
- <td> Fired at nodes losing focus <!-- XXX bug 23475 -->
+ <td> Fired at nodes when they stop being <a href=#focused>focused</a>
<tr><!-- cancel --><td> <dfn id=event-cancel title=event-cancel><code>cancel</code></dfn>
<td> <code><a href=#event>Event</a></code>
@@ -102515,7 +103139,7 @@
<tr><!-- focus --><td> <dfn id=event-focus title=event-focus><code>focus</code></dfn>
<td> <code><a href=#event>Event</a></code>
<td> <code><a href=#window>Window</a></code>, elements
- <td> Fired at nodes gaining focus <!-- XXX bug 23475 -->
+ <td> Fired at nodes <a href=#gains-focus title="gains focus">gaining focus</a>
<tr><!-- hashchange --><td> <dfn id=event-hashchange title=event-hashchange><code>hashchange</code></dfn>
<td> <code><a href=#hashchangeevent>HashChangeEvent</a></code>
Modified: source
===================================================================
--- source 2014-02-11 20:54:28 UTC (rev 8477)
+++ source 2014-02-19 22:39:15 UTC (rev 8478)
@@ -34587,7 +34587,8 @@
<p class="note">Because a <code>map</code> element (and its <code>area</code> elements) can be
associated with multiple <code>img</code> and <code>object</code> elements, it is possible for an
- <code>area</code> element to correspond to multiple focusable areas of the document.</p>
+ <code>area</code> element to correspond to multiple <i data-x="focusable area">focusable areas</i>
+ of the document.</p>
<p>Image maps are <span>live</span>; if the DOM is mutated, then the user agent must act as if it
had rerun the algorithms for image maps.</p>
@@ -47504,7 +47505,7 @@
data-x="attr-input-title"><code>title</code></dfn> attribute to give a description of the pattern.
User agents may use the contents of this attribute, if it is present, when informing the user that
the pattern is not matched, or at any other suitable time, such as in a tooltip or read out by
- assistive technology when the control gains focus.</p>
+ assistive technology when the control <span>gains focus</span>.</p>
<div class="example">
<p>For example, the following snippet:</p>
@@ -48048,7 +48049,7 @@
<p>User agents should present this hint to the user, after having <span data-x="strip line
breaks">stripped line breaks</span> from it, when the element's <span
- data-x="concept-fe-value">value</span> is the empty string or the control is not focused (or both),
+ data-x="concept-fe-value">value</span> is the empty string or the control is not <span>focused</span> (or both),
e.g. by displaying it inside a blank unfocused control and hiding it otherwise.</p>
</div>
@@ -48507,6 +48508,7 @@
<h5 id="common-input-element-events">Common event behaviors</h5>
+<!--CLEANUP-->
<p>When the <code data-x="event-input-input">input</code> and <code data-x="event-input-change">change</code>
events <span data-x="concept-input-apply">apply</span> (which is the case for all
<code>input</code> controls other than <span data-x="concept-button">buttons</span> and those with
@@ -48515,7 +48517,7 @@
user has interacted with the control. The <dfn data-x="event-input-input"><code>input</code></dfn>
event fires whenever the user has modified the data of the control. The <dfn
data-x="event-input-change"><code>change</code></dfn> event fires when the value is committed, if
- that makes sense for the control, or else when the control loses focus. In all cases, the <code
+ that makes sense for the control, or else when the control <a href="#unfocus-causes-change-event">loses focus</a>. In all cases, the <code
data-x="event-input-input">input</code> event comes before the corresponding <code
data-x="event-input-change">change</code> event (if any).</p>
@@ -48553,11 +48555,12 @@
simple event</span> that bubbles named <code data-x="event-input-change">change</code> at the
<code>input</code> element.</p>
+<!--CLEANUP-->
<p class="example">An example of a user interface with a commit action would be a <span
data-x="attr-input-type-color">Color</span> control that consists of a single button that brings
up a color wheel: if the <span data-x="concept-fe-value">value</span> only changes when the dialog
- is closed, then that would be the explicit commit action. On the other hand, if the control can be
- focused and manipulating the control changes the color interactively, then there might be no
+ is closed, then that would be the explicit commit action. On the other hand, if
+ manipulating the control changes the color interactively, then there might be no
commit action.</p>
<p class="example">Another example of a user interface with a commit action would be a <span
@@ -48572,7 +48575,7 @@
action, the user agent must <span>queue a task</span> to <span>fire a simple event</span> that
bubbles named <code data-x="event-input-input">input</code> at the <code>input</code> element. The
corresponding <code data-x="event-input-change">change</code> event, if any, will be fired when the
- control <span data-x="unfocusing steps">loses focus</span>.</p>
+ control <a href="#unfocus-causes-change-event">loses focus</a>.</p>
<p class="example">Examples of a user changing the element's <span
data-x="concept-fe-value">value</span> would include the user typing into a text field, pasting a
@@ -48580,8 +48583,9 @@
changes to the value, e.g. hitting the "delete" key in an empty text field, or replacing some text
in the field with text from the clipboard that happens to be exactly the same text.</p>
+<!--CLEANUP-->
<p class="example">A <span data-x="attr-input-type-range">Range</span> control in the form of a
- slider that the user has focused and is interacting with using a keyboard would be another example
+ slider that the user has <span>focused</span> and is interacting with using a keyboard would be another example
of the user changing the element's <span data-x="concept-fe-value">value</span> without a commit
step.</p>
@@ -50146,8 +50150,9 @@
<div class="impl">
+<!--CLEANUP-->
<p>User agents should present this hint to the user when the element's <span
- data-x="concept-fe-value">value</span> is the empty string and the control is not focused (e.g. by
+ data-x="concept-fe-value">value</span> is the empty string and the control is not <span>focused</span> (e.g. by
displaying it inside a blank unfocused control). All U+000D CARRIAGE RETURN U+000A LINE FEED
character pairs (CRLF) in the hint, as well as all other U+000D CARRIAGE RETURN (CR) and U+000A
LINE FEED (LF) characters in the hint, must be treated as line breaks when rendering the hint.
@@ -52256,8 +52261,8 @@
<li><p>If the user has indicated (for example, by starting to type in a form control) that he
does not wish focus to be changed, then optionally abort these steps.</p></li>
- <li><p><span>Queue a task</span> that checks to see if the element is <span>focusable</span>, and
- if so, runs the <span>focusing steps</span> for that element. User agents may also change the
+<!--CLEANUP-->
+ <li><p><span>Queue a task</span> that runs the <span>focusing steps</span> for the element. User agents may also change the
scrolling position of the document, or perform some other action that brings the element to the
user's attention. The <span>task source</span> for this task is the <span>user interaction task
source</span>.</p></li>
@@ -54658,7 +54663,7 @@
owner</span> is that <code>form</code> element.</p>
<p>If the user agent supports letting the user submit a form implicitly (for example, on some
- platforms hitting the "enter" key while a text field is focused implicitly submits the form), then
+ platforms hitting the "enter" key while a text field is <span>focused</span> implicitly submits the form), then
doing so for a form whose <span>default button</span> has a defined <span>activation
behavior</span> must cause the user agent to <span>run synthetic click activation steps</span> on
that <span>default button</span>.</p>
@@ -57374,8 +57379,7 @@
<ol>
- <li>If the element is <span>focusable</span>, run the <span>focusing steps</span> for the
- element.</li>
+ <li>Run the <span>focusing steps</span> for the element.</li>
<li>If the element has a defined <span>activation behavior</span>, <span>run synthetic click
activation steps</span> on the element.</li>
@@ -57539,24 +57543,32 @@
<li><p>Push <var data-x="">subject</var> onto <var data-x="">subject</var>'s
<code>Document</code>'s <span>pending dialog stack</span>.</p></li>
+ <li><p>Run the <span>dialog focusing steps</span> for <var data-x="">subject</var>.</p></li>
+
+ </ol>
+
+ <p>The <dfn>dialog focusing steps</dfn> for a <code>dialog</code> element <var
+ data-x="">subject</var> are as follows:</p>
+
+ <ol>
+
+ <li><p>If for some reason <var data-x="">subject</var> is not a <span>control group owner</span>
+ at this point, or if it is <span>inert</span>, abort these steps.</p></li>
+
<li>
- <p>Let <var data-x="">control</var> be the first element in tree order that has an <code
- data-x="attr-fe-autofocus">autofocus</code> attribute specified and whose nearest ancestor
- <code>dialog</code> element is <var data-x="">subject</var>, if any.</p>
+ <p>Let <var data-x="">control</var> be the first non-<span>inert</span> <i>focusable area</i> in
+ <var data-x="">subject</var>'s <i>control group</i> whose <i>DOM anchor</i> has an <code
+ data-x="attr-fe-autofocus">autofocus</code> attribute specified.</p>
- <p>If there isn't one, then let <var data-x="">control</var> be the first element in tree order
- that is <span>focusable</span> and whose nearest ancestor <code>dialog</code> element is <var
- data-x="">subject</var>, if any.</p>
+ <p>If there isn't one, then let <var data-x="">control</var> be the first non-<span>inert</span>
+ <i>focusable area</i> in <var data-x="">subject</var>'s <i>control group</i>.</p>
- <p>If there isn't one of those either but <var data-x="">subject</var> itself is
- <span>focusable</span>, then let <var data-x="">control</var> be <var
- data-x="">subject</var>. (This is unusual.)</p>
+ <p>If there isn't one of those either, then let <var data-x="">control</var> be <var
+ data-x="">subject</var>.</p>
</li>
- <li><p>If there is no <var data-x="">control</var>, then abort these steps.</p></li>
-
<li><p>Run the <span>focusing steps</span> for <var data-x="">control</var>.</p></li>
</ol>
@@ -59701,12 +59713,16 @@
<!-- CANVAS-FOCUS-FALLBACK -->
<p>When a <code>canvas</code> element <span>represents</span> <span>embedded content</span>, the
user can still focus descendants of the <code>canvas</code> element (in the <span>fallback
- content</span>). When an element is focused, it is the target of keyboard interaction events (even
+ content</span>). When an element is <span>focused</span>, it is the target of keyboard interaction events (even
though the element itself is not visible). This allows authors to make an interactive canvas
- keyboard-accessible: authors should have a one-to-one mapping of interactive regions to focusable
- elements in the <span>fallback content</span>. (Focus has no effect on mouse interaction events.)
+ keyboard-accessible: authors should have a one-to-one mapping of interactive regions to <i data-x="focusable area">focusable
+ areas</i> in the <span>fallback content</span>. (Focus has no effect on mouse interaction events.)
<a href="#refsDOMEVENTS">[DOMEVENTS]</a></p> <!-- user interaction spec integration point -->
+ <p>An element whose nearest <code>canvas</code> element ancestor is <span>being rendered</span>
+ and <span>represents</span> <span>embedded content</span> is an element that is <dfn>being used as
+ relevant canvas fallback content</dfn>.</p>
+
<hr>
<p>The <code>canvas</code> element has two attributes to control the size of the element's bitmap:
@@ -64228,7 +64244,8 @@
<dd>
- <p>If the given element is focused, draws a focus ring around the <span>current default
+<!--CLEANUP-->
+ <p>If the given element is <span>focused</span>, draws a focus ring around the <span>current default
path</span> or the given path, following the platform conventions for focus rings.</p>
</dd>
@@ -64239,11 +64256,12 @@
<dd>
- <p>If the given element is focused, and the user has configured his system to draw focus rings
+<!--CLEANUP-->
+ <p>If the given element is <span>focused</span>, and the user has configured his system to draw focus rings
in a particular manner (for example, high contrast focus rings), draws a focus ring around the
<span>current default path</span> or the given path and returns false.</p>
- <p>Otherwise, returns true if the given element is focused, and false otherwise. This can thus
+ <p>Otherwise, returns true if the given element is <span>focused</span>, and false otherwise. This can thus
be used to determine when to draw a focus ring (see <a href="#drawCustomFocusRingExample">the
example</a> below).</p>
@@ -64355,7 +64373,7 @@
<ol>
- <li><p>If <var data-x="">element</var> is not focused or is not a descendant of the element with
+ <li><p>If <var data-x="">element</var> is not <span>focused</span> or is not a descendant of the element with
whose context the method is associated, then abort these steps.</p></li>
<li>
@@ -64414,7 +64432,7 @@
<ol>
- <li><p>If <var data-x="">element</var> is not focused or is not a descendant of the element with
+ <li><p>If <var data-x="">element</var> is not <span>focused</span> or is not a descendant of the element with
whose context the method is associated, then return false and abort these steps.</p></li>
<li><p>Let <var data-x="">result</var> be true.</p></li>
@@ -65509,13 +65527,14 @@
that given by the <span>hit region's ARIA role</span>, and whose textual representation, if any,
is given by the <span>hit region's label</span>.</p>
+<!--CLEANUP-->
<p class="note">Thus, for instance, a user agent on a touch-screen device could provide haptic
feedback when the user croses over a <span>hit region's bounding circumference</span>, and then
read the <span>hit region's label</span> to the user. Similarly, a desktop user agent with a
virtual accessibility focus separate from the keyboard input focus could allow the user to
navigate through the hit regions, using the virtual DOM tree described above to enable
- hierarchical navigation. When an interactive control inside the <code>canvas</code> element is
- focused, if the control has a corresponding region, then that <span>hit region's bounding
+ hierarchical navigation. When an interactive control inside the <code>canvas</code> element
+ <span>gains focus</span>, if the control has a corresponding region, then that <span>hit region's bounding
circumference</span> could be used to determine what area of the display to magnify.</p>
</div>
@@ -66208,13 +66227,14 @@
fallback content corresponding to each focusable part of the canvas, as in the <a
href="#drawCustomFocusRingExample">example above</a>.</p>
+<!--CLEANUP-->
<p>To expose text and interactive content on a <code>canvas</code> to users of accessibility
tools, authors should use the <code data-x="dom-context-2d-addHitRegion">addHitRegion()</code>
API. When rendering focus rings, to ensure that focus rings have the appearance of native focus
rings, authors should use the <code
data-x="dom-context-2d-drawSystemFocusRing">drawSystemFocusRing()</code> method, passing it the
element for which a ring is being drawn. This method only draws the focus ring if the element is
- focused, so that it can simply be called whenever drawing the element, without checking whether
+ <span>focused</span>, so that it can simply be called whenever drawing the element, without checking whether
the element is focused or not first.</p>
<p id="no-text-editing-in-canvas-please">Authors should avoid implementing text editing controls
@@ -67029,8 +67049,9 @@
</ul>
- <p class="note">This definition is used to determine what elements can be <span data-x="tabindex
- focus flag">focused</span> and which elements match the <code
+<!--CLEANUP-->
+ <p class="note">This definition is used to determine what elements <span data-x="tabindex
+ focus flag">can be focused</span> and which elements match the <code
data-x="selector-disabled">:disabled</code> pseudo-class.</p>
@@ -67234,6 +67255,19 @@
</dd>
+ <dt><dfn data-x="selector-focus"><code>:focus</code></dfn></dt>
+
+ <dd>
+
+ <p>For the purposes of the CSS ':focus' pseudo-class, an <dfn>element has the focus</dfn> when
+ its <span>top-level browsing context</span> has the system focus, it is not itself a
+ <span>browsing context container</span>, and it is one of the elements listed in the <span>focus
+ chain</span> of the <span data-x="currently focused area of a top-level browsing
+ context">currently focused area of the top-level browsing context</span>.</p>
+
+ </dd>
+
+
<dt><dfn data-x="selector-enabled"><code>:enabled</code></dfn></dt>
<dd>
@@ -67562,9 +67596,10 @@
<p class="note">Another section of this specification defines the <i>target element</i> used with
the <code data-x="selector-target">:target</code> pseudo-class.</p>
- <p class="note">This specification does not define when an element matches the <code
- data-x="selector-focus">:focus</code> or <code data-x="selector-lang()">:lang()</code> dynamic
- pseudo-classes, as those are all defined in sufficient detail in a language-agnostic fashion in
+<!--CLEANUP-->
+ <p class="note">This specification does not define when an element matches the
+ <code data-x="selector-lang()">:lang()</code> dynamic
+ pseudo-class, as it is defined in sufficient detail in a language-agnostic fashion in
the Selectors specification. <a href="#refsSELECTORS">[SELECTORS]</a></p>
<!--REMOVE-TOPIC:CSS-->
@@ -76360,8 +76395,7 @@
data-x="">target</var> into view, with the <var data-x="">align to top flag</var> set. <a
href="#refsCSSOMVIEW">[CSSOMVIEW]</a></p></li>
- <li><p>If <var data-x="">target</var> is a <span>focusable</span> element, run the <span>focusing
- steps</span> for that element.</p></li>
+ <li><p>Run the <span>focusing steps</span> for that element.</p></li>
</ol>
@@ -84896,8 +84930,8 @@
data-x="event-mousemove">mousemove</code> and <code data-x="event-click">click</code> events would
be fired on the <code>body</code> element rather than the paragraph.</p>
- <p class="note">When a node is inert, it also can't be <span>focusable</span>, and it is disabled
- if it is a <span data-x="concept-command">command</span>.</p>
+ <p class="note">When a node is inert, it generally cannot be focused. Inert nodes that are <span
+ data-x="concept-command">commands</span> will also get disabled.</p>
<p>An entire <code>Document</code> can be marked as <dfn>blocked by a modal dialog</dfn> <var
data-x="">subject</var>. While a <code>Document</code> is so marked, every node that is <span
@@ -85112,33 +85146,345 @@
http://msdn.microsoft.com/workshop/author/dhtml/reference/events/onbeforeactivate.asp
-->
+ <h4>Introduction</h4>
+
+ <!--END dev-html--><p><i>This section is non-normative.</i></p><!--START dev-html-->
+
+ <p>An HTML user interface typically consists of multiple interactive widgets, such as form
+ controls, scrollable regions, links, dialog boxes, browser tabs, and so forth. These widgets form
+ a hierarchy, with some (e.g. browser tabs, dialog boxes) containing others (e.g. links, form
+ controls).</p>
+
+ <p>When interacting with an interface using a keyboard, key input is channeled from the system,
+ through the hierarchy of interactive widgets, to an active widget, which is said to be
+ <i data-x="">focused</i>.</p>
+
+ <div class="example">
+
+ <p>Consider an HTML application running in a browser tab running in a graphical environment.
+ Suppose this application had a page with some text fields and links, and was currently showing a
+ modal dialog, which itself had a text field and a button.</p>
+
+ <p>The hierarchy of focusable widgets, in this scenario, would include the browser window, which
+ would have, amongst its children, the browser tab containing the HTML application. The tab itself
+ would have as its children the various links and text fields, as well as the dialog. The dialog
+ itself would have as its children the text field and the button.</p>
+
+ <p><img src="images/focus-tree.png" alt=""> <!-- purely decorative: it repeats the previous
+ paragraph, in graphical form -->
+
+ <p>If the widget with <i>focus</i> in this example was the text field in the dialog box, then key
+ input would be channeled from the graphical system to ① the Web browser, then to ②
+ the tab, then to ③ the dialog, and finally to ④ the text field.</p>
+
+ </div>
+
+ <p>Keyboard <em>events</em> are always targetted at this <i data-x="">focused</i> element.</p>
+
+
+ <h4>Data model</h4>
+
+ <p>The term <dfn>focusable area</dfn> is used to refer to regions of the interface that can become
+ the target of keyboard input. Focusable areas can be elements, parts of elements, or other regions
+ managed by the user agent.</p>
+
+ <p>Each <i>focusable area</i> has a <dfn>DOM anchor</dfn>, which is a <code>Node</code> object
+ that represents the position of the <i>focusable area</i> in the DOM. (When the <i>focusable
+ area</i> is itself a <code>Node</code>, it is its own <i>DOM anchor</i>.) The <i>DOM anchor</i> is
+ used in some APIs as a substitute for the <i>focusable area</i> when there is no other DOM object
+ to represent the <i>focusable area</i>.</p>
+
+ <p>The following table describes what objects can be <i data-x="focusable area">focusable
+ areas</i>. The cells in the left column describe objects that can be <i data-x="focusable
+ area">focusable areas</i>; the cells in the right column describe the <i data-x="DOM anchor">DOM
+ anchors</i> for those elements. (The cells that span both columns are non-normative examples.)</p>
+
+ <table id="table-fa">
+ <thead>
+ <tr>
+ <th id="th-fa-area"><i>Focusable area</i>
+ <th id="th-fa-dom-rep"><i>DOM anchor</i>
+ <tr>
+ <th id="th-fa-examples" colspan=2>Examples
+
+ <tbody>
+ <tr>
+ <th class="data-header" headers="th-fa-area" id="td-fa-1">
+ Elements that have their <span>tabindex focus flag</span> set, that are not <span
+ data-x="concept-element-disabled">actually disabled</span>, that are not <span
+ data-x="expressly inert control">expressly inert</span>, and that are either <span>being
+ rendered</span> or <span>being used as relevant canvas fallback content</span>. <!--
+ CANVAS-FOCUS-FALLBACK -->
+ <td headers="td-fa-1 th-fa-dom-rep">
+ The element itself.
+ <tr>
+ <td headers="td-fa-1 th-fa-examples" colspan=2>
+ <p class="example"><code>iframe</code>, <code data-x="attr-input-type-text"><input
+ type=text></code>, sometimes <code data-x="a"><a href=""></code> (depending on platform
+ conventions).
+
+ <tbody>
+ <tr>
+ <th class="data-header" headers="th-fa-area" id="td-fa-2">
+ The shapes of <code>area</code> elements in an <span>image map</span> associated with an
+ <code>img</code> element that is <span>being rendered</span> and is not <span data-x="expressly
+ inert control">expressly inert</span>.
+ <td headers="td-fa-2 th-fa-dom-rep">
+ The <code>img</code> element.
+ <tr>
+ <td headers="td-fa-2 th-fa-examples" colspan=2>
+ <div class="example">
+ <p>In the following example, the <code>area</code> element creates two shapes, one on each
+ image. The <i>DOM anchor</i> of the first shape is the first <code>img</code> element, and the
+ <i>DOM anchor</i> of the second shape is the second <code>img</code> element.</p>
+ <pre><map id=wallmap><area alt="Enter Door" coords="10,10,100,200" href="door.html"></map>
+...
+<img src="images/innerwall.jpeg" alt="There is a white wall here, with a door." usemap="#wallmap">
+...
+<img src="images/outerwall.jpeg" alt="There is a red wall here, with a door." usemap="#wallmap"></pre>
+ </div>
+
+ <tbody>
+ <tr>
+ <th class="data-header" headers="th-fa-area" id="td-fa-3">
+ The user-agent provided subwidgets of elements that are <span>being rendered</span> and are not
+ <span data-x="concept-element-disabled">actually disabled</span> or <span data-x="expressly
+ inert control">expressly inert</span>.
+ <td headers="td-fa-3 th-fa-dom-rep">
+ The element for which the <i>focusable area</i> is a subwidget.
+ <tr>
+ <td headers="td-fa-3 th-fa-examples" colspan=2>
+ <p class="example">The <span data-x="expose a user interface to the user">controls in the user
+ interface that is exposed to the user</span> for a <code>video</code> element, the up and down
+ buttons in a spin-control version of <code data-x="attr-input-type-number"><input
+ type=number></code>, the two range control widgets in a <code
+ data-x="attr-input-type-range"><input type=range multiple></code>, the part of a
+ <code>details</code> element's rendering that enabled the element to be opened or closed using
+ keyboard input.</p>
+
+ <tbody>
+ <tr>
+ <th class="data-header" headers="th-fa-area" id="td-fa-4">
+ The scrollable regions of elements that are <span>being rendered</span> are not <span
+ data-x="expressly inert control">expressly inert</span>. <!-- the being rendered part is kinda
+ redundant, a scrollable region is a box generated for the element so by definition if the
+ element has a scrollable region it is being rendered -->
+ <td headers="td-fa-4 th-fa-dom-rep">
+ The element for which the box that the scrollable region scrolls was created.
+ <tr>
+ <td headers="td-fa-4 th-fa-examples" colspan=2>
+ <p class="example">The CSS 'overflow' property's 'scroll' value typically creates a scrollable
+ region.</p>
+
+ <tbody>
+ <tr>
+ <th class="data-header" headers="th-fa-area" id="td-fa-5">
+ The viewport of a <code>Document</code> that is in a <span>browsing context</span> and is not
+ <span>inert</span>.
+ <td headers="td-fa-5 th-fa-dom-rep">
+ The <code>Document</code> for which the viewport was created.
+ <tr>
+ <td headers="td-fa-5 th-fa-examples" colspan=2>
+ <p class="example">The contents of an <code>iframe</code>.</p>
+
+ <tbody>
+ <tr>
+ <th class="data-header" headers="th-fa-area" id="td-fa-6">
+ Any other element or part of an element, especially to aid with accessibility or to better
+ match platform conventions.
+ <td headers="td-fa-6 th-fa-dom-rep">
+ The element.
+ <tr>
+ <td headers="td-fa-6 th-fa-examples" colspan=2>
+ <p class="example">A user agent could make all list item bullets focusable, so that a user can
+ more easily navigate lists.</p>
+ <p class="example">Similarly, a user agent could make all elements with <code
+ data-x="attr-title">title</code> attributes focusable, so that their advisory information can
+ be accessed.</p>
+
+ </table>
+
+ <p id="bc-focus-ergo-bcc-focus" class="note">A <span>browsing context container</span> (e.g. an
+ <code>iframe</code>) is a <i>focusable area</i>, but key events routed to a <span>browsing context
+ container</span> get immediately routed to the <span>nested browsing context</span>'s <span>active
+ document</span>. Similarly, in sequential focus navigation a <span>browsing context
+ container</span> essentially acts merely as a placeholder for its <span>nested browsing
+ context</span>'s <span>active document</span>.</p>
+
+ <p>Each <i>focusable area</i> belongs to a <dfn>control group</dfn>. Each <i>control group</i> has
+ an <dfn data-x="control group owner">owner</dfn>. <span data-x="control group owner">Control group
+ owners</span> are <dfn data-x="control group owner object">control group owner objects</dfn>. The
+ following are <span data-x="control group owner object">control group owner objects</span>:</p>
+
+ <ul class="brief">
+
+ <li><code>Document</code> object in <span data-x="browsing context">browsing contexts</span>.</li>
+
+ <li><code>dialog</code> elements that have an <code data-x="attr-dialog-open">open</code>
+ attribute specified and that are <span>being rendered</span>.</li>
+
+ </ul>
+
+ <p>Each <span>control group owner object</span> owns one <i>control group</i> (though that
+ group might be empty).</p>
+
+ <p>If the <i>DOM anchor</i> of a <i>focusable area</i> is a <span>control group owner
+ object</span>, then that <i>focusable area</i> belongs to that <span>control group owner
+ object</span>'s <i>control group</i>. Otherwise, the <i>focusable area</i> belongs to its
+ <i>DOM anchor</i>'s nearest ancestor <span>control group owner object</span>.</p>
+
+ <div class="example">
+
+ <p>Thus, a viewport always belongs to the <i>control group</i> of the <code>Document</code>
+ for which the viewport was created, an <code>input</code> control belongs to the <i>control
+ group</i> of its nearest ancestor <code>dialog</code> or <code>Document</code>, and an image
+ map's shapes belong to the nearest ancestor <code>dialog</code> or <code>Document</code> of the
+ <code>img</code> elements (not the <code>area</code> elements — this means one
+ <code>area</code> element might create multiple shapes in different <i data-x="control
+ group">control groups</i>).</p>
+
+ </div>
+
+ <p>An element is <dfn data-x="expressly inert control">expressly inert</dfn> if it is
+ <span>inert</span> but it is not a <span>control group owner object</span> and its nearest
+ ancestor <span>control group owner object</span> is not <span>inert</span>.</p>
+
+ <p>One <i>focusable area</i> in each non-empty <i>control group</i> is designated the
+ <dfn>focused area of the control group</dfn>. Which control is so designated changes over time,
+ based on algorithms in this specification. If a <i>control group</i> is empty, it has no <i
+ data-x="focused area of the control group">focused area</i>.</p>
+
+ <p>Each <span>control group owner object</span> can also act as the <dfn data-x="dialog group
+ manager">manager</dfn> of a <dfn>dialog group</dfn>.</p>
+
+ <p>Each <code>dialog</code> element that has an <code data-x="attr-dialog-open">open</code>
+ attribute specified and that is <span>being rendered</span> (i.e. that is a <span>control group
+ owner object</span>) and is not <span data-x="expressly inert dialog">expressly inert</span>
+ belongs to the <i>dialog group</i> whose <span data-x="dialog group manager">manager</span> is
+ the <code>dialog</code> element's nearest ancestor <span>control group owner object</span>.</p>
+
+ <p>A <code>dialog</code> is <dfn data-x="expressly inert dialog">expressly inert</dfn> if it is
+ <span>inert</span> but its nearest ancestor <span>control group owner object</span> is not.</p>
+
+ <p>If no <code>dialog</code> element has a particular <span>control group owner object</span> as
+ its nearest ancestor <span>control group owner object</span>, then that <span>control group owner
+ object</span> has no <i>dialog group</i>.</p>
+
+ <p>Each <i>dialog group</i> can have a <code>dialog</code> designated as the <dfn>focused
+ dialog of the dialog group</dfn>. Which <code>dialog</code> is so designated changes over time,
+ based on algorithms in this specification.</p>
+
+ <hr>
+
+ <p><i data-x="focusable area">Focusable areas</i> in <i data-x="control group">control groups</i>
+ are ordered relative to the <span>tree order</span> of their <i data-x="DOM anchor">DOM
+ anchors</i>. <i data-x="focusable area">Focusable areas</i> with the same <i>DOM anchor</i> in a
+ <i>control group</i> are ordered relative to their CSS box's relative positions in a pre-order,
+ depth-first traversal of the box tree. <a href="#refsCSS">[CSS]</a></p>
+
+ <p>Elements in <i data-x="dialog group">dialog groups</i> are ordered in <span>tree
+ order</span>.</p>
+
+ <hr>
+
+ <p>The <dfn>currently focused area of a top-level browsing context</dfn> at any particular time is
+ the <i>focusable area</i> or <code>dialog</code> returned by this algorithm:</p>
+
+ <ol>
+
+ <li><p>Let <var data-x="">candidate</var> be the <code>Document</code> of the <span>top-level
+ browsing context</span>.</p></li>
+
+ <li>
+
+ <p>If <var data-x="">candidate</var> has a <i>dialog group</i> with a designated
+ <span>focused dialog of the dialog group</span>, then let <var data-x="">candidate</var> be the
+ designated <span>focused dialog of the dialog group</span>, and redo this step.</p>
+
+ <p>Otherwise, if <var data-x="">candidate</var> has a non-empty <i>control group</i>, and the
+ designated <span>focused area of the control group</span> is a <span>browsing context
+ container</span>, then let <var data-x="">candidate</var> be the <span>active document</span> of
+ that <span>browsing context container</span>'s <span>nested browsing context</span>, and redo
+ this step.</p>
+
+ <p>Otherwise, if <var data-x="">candidate</var> has a non-empty <i>control group</i>, let
+ <var data-x="">candidate</var> be the designated <span>focused area of the control
+ group</span>.</p>
+
+ </li>
+
+ <li><p>Return <var data-x="">candidate</var>.</p></li>
+
+ </ol>
+
+ <p>An element that is the <i>DOM anchor</i> of a <i>focusable area</i> is said to <dfn
+ data-x="gains focus">gain focus</dfn> when that <i>focusable area</i> becomes the <span>currently
+ focused area of a top-level browsing context</span>. When an element is the <i>DOM anchor</i> of a
+ <i>focusable area</i> of the <span>currently focused area of a top-level browsing context</span>,
+ it is <dfn>focused</dfn>.</p>
+
<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 <span>the body element</span>, if there is one, or else at the
- <code>Document</code>'s root element, if there is one. If there is no root element, key events
- must not be fired.</p>
+ <p>The <dfn>focus chain</dfn> of a <i>focusable area</i> or <span>control group owner
+ object</span> <var data-x="">subject</var> is the ordered list constructed as follows:</p>
- <p>User agents may track focus for each <span>browsing context</span> or <code>Document</code>
- individually, or may support only one focused element per <span>top-level browsing context</span>
- — user agents should follow platform conventions in this regard.</p>
+ <ol>
- <p>Which elements within a <span>top-level browsing context</span> currently have focus must be
- independent of whether or not the <span>top-level browsing context</span> itself has the <i>system
- focus</i>.</p>
+ <li><p>Let <var data-x="">current object</var> be <var data-x="">subject</var>.</p></li>
- <p id="bc-focus-ergo-bcc-focus">When a <span>child browsing context</span> is focused, its
- <span>browsing context container</span> must also have focus.</p>
+ <li><p>Let <var data-x="">output</var> be an empty list.</p></li>
- <p class="note">When an element is focused, the element matches the CSS <code>:focus</code>
- pseudo-class.</p>
+ <li><p><i>Loop</i>: Append <var data-x="">current object</var> to <var data-x="">output</var>.</p></li>
+ <li>
+
+ <p>If <var data-x="">current object</var> is an <code>area</code> element's shape, append
+ that <code>area</code> element to <var data-x="">output</var>.</p>
+
+ <p>Otherwise, if <var data-x="">current object</var> is a <i>focusable area</i> whose <i>DOM
+ anchor</i> is an element that is not <var data-x="">current object</var> itself, append that
+ <i>DOM anchor</i> element to <var data-x="">output</var>.</p>
+
+ </li>
+
+ <li>
+
+ <p>Otherwise, if <var data-x="">current object</var> is a <code>dialog</code> object in a
+ <i>dialog group</i>, let <var data-x="">current object</var> be that <i>dialog
+ group</i>'s <span data-x="dialog group manager">manager</span>, and return to the step
+ labeled <i>loop</i>.</p>
+
+ <p>Otherwise, if <var data-x="">current object</var> is a <i>focusable area</i>, let <var
+ data-x="">current object</var> be that <i>focusable area</i>'s <i>control group</i>'s
+ <span data-x="control group owner">owner</span>, and return to the step labeled <i>loop</i>.</p>
+
+ <p>Otherwise, if <var data-x="">current object</var> is a <code>Document</code> in a
+ <span>nested browsing context</span>, let <var data-x="">current object</var> be its
+ <span>browsing context container</span>, and return to the step labeled <i>loop</i>.</p>
+
+ </li>
+
+ <li>
+
+ <p>Return <var data-x="">output</var>.</p>
+
+ <p class="note">The chain starts with <var data-x="">subject</var> and (if <var
+ data-x="">subject</var> is or can be the <span>currently focused area of a top-level browsing
+ context</span>) continues up the focus hierarchy up to the <code>Document</code> of the
+ <span>top-level browsing context</span>.</p>
+
+ </li>
+
+ </ol>
+
</div>
<h4>Sequential focus navigation and the <code data-x="attr-tabindex">tabindex</code> attribute</h4>
+ <!-- XXX dfn sequential focus navigation -->
+ <!-- e.g. when tabbing into a <span>browsing context container</span>, you defer to the Document's idea of what the first focusable area is -->
+
<p>The <dfn data-x="attr-tabindex"><code>tabindex</code></dfn> content attribute allows authors to
control whether an element is supposed to be 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
@@ -85152,8 +85498,8 @@
<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
- <span>focusable</span>, as described in the next section.</p>
+ below. This flag is a factor that contributes towards determining whether an element is a
+ <i>focusable area</i>, as described in the previous section.</p>
<p>If the attribute is specified, it must be parsed using the <span>rules for parsing
integers</span>. The attribute's values have the following meanings:</p>
@@ -85165,8 +85511,10 @@
<dd>
<p>The user agent should follow platform conventions to determine if the element's
- <span>tabindex focus flag</span> 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>
+ <span>tabindex focus flag</span> is set and, if so, whether the element and any <i
+ data-x="focusable area">focusable areas</i> that have the element as their <i>DOM anchor</i> can
+ be reached using sequential focus navigation, and if so, what their relative order should
+ be.</p>
<p>Modulo platform conventions, it is suggested that for the following elements, the
<span>tabindex focus flag</span> be set:</p>
@@ -85216,7 +85564,8 @@
<dd>
<p>The user agent must set the element's <span>tabindex focus flag</span>, but should not allow
- the element to be reached using sequential focus navigation.</p>
+ the element, or any <i data-x="focusable area">focusable areas</i> that have the element as
+ their <i>DOM anchor</i>, 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
@@ -85231,8 +85580,10 @@
<dd>
+<!--CLEANUP-->
<p>The user agent must set the element's <span>tabindex focus flag</span>, should allow the
- element to be reached using sequential focus navigation, and should follow platform conventions
+ element and any <i data-x="focusable area">focusable areas</i> that have the element as
+ their <i>DOM anchor</i> to be reached using sequential focus navigation, and should follow platform conventions
to determine the element's relative order.</p>
</dd>
@@ -85241,33 +85592,35 @@
<dd>
+<!--CLEANUP-->
<p>The user agent must set the element's <span>tabindex focus flag</span>, 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>
+ element and any <i data-x="focusable area">focusable areas</i> that have the element as their
+ <i>DOM anchor</i> to be reached using sequential focus navigation, and should place the
+ element — referenced as <var data-x="">candidate</var> below — and the aforementioned <i data-x="focusable area">focusable areas</i> in the sequential
+ focus navigation order so that they are:</p>
- <ul>
+ <ul><!--CLEANUP-->
- <li>before any <span>focusable</span> element whose <code data-x="attr-tabindex">tabindex</code>
+ <li>before any <i>focusable area</i> whose <i>DOM anchor</i> is an element whose <code data-x="attr-tabindex">tabindex</code>
attribute has been omitted or whose value, when parsed, returns an error,</li>
- <li>before any <span>focusable</span> element whose <code data-x="attr-tabindex">tabindex</code>
+ <li>before any <i>focusable area</i> whose <i>DOM anchor</i> is an element whose <code data-x="attr-tabindex">tabindex</code>
attribute has a value equal to or less than zero,</li>
- <li>after any element whose <code data-x="attr-tabindex">tabindex</code> attribute has a value
+ <li>after any <i>focusable area</i> whose <i>DOM anchor</i> is an element whose <code data-x="attr-tabindex">tabindex</code> attribute has a value
greater than zero but less than the value of the <code data-x="attr-tabindex">tabindex</code>
- attribute on the element,</li>
+ attribute on <var data-x="">candidate</var>,</li>
- <li>after any element whose <code data-x="attr-tabindex">tabindex</code> attribute has a value
- equal to the value of the <code data-x="attr-tabindex">tabindex</code> attribute on the element
- but that is earlier in the document in <span>tree order</span> than the element,</li>
+ <li>after any <i>focusable area</i> whose <i>DOM anchor</i> is an element whose <code data-x="attr-tabindex">tabindex</code> attribute has a value
+ equal to the value of the <code data-x="attr-tabindex">tabindex</code> attribute on <var data-x="">candidate</var>
+ but that is earlier in the document in <span>tree order</span> than <var data-x="">candidate</var>,</li>
- <li>before any element whose <code data-x="attr-tabindex">tabindex</code> attribute has a value
- equal to the value of the <code data-x="attr-tabindex">tabindex</code> attribute on the element
- but that is later in the document in <span>tree order</span> than the element, and</li>
+ <li>before any <i>focusable area</i> whose <i>DOM anchor</i> is an element whose <code data-x="attr-tabindex">tabindex</code> attribute has a value
+ equal to the value of the <code data-x="attr-tabindex">tabindex</code> attribute on <var data-x="">candidate</var>
+ but that is later in the document in <span>tree order</span> than <var data-x="">candidate</var>, and</li>
- <li>before any element whose <code data-x="attr-tabindex">tabindex</code> attribute has a value
- greater than the value of the <code data-x="attr-tabindex">tabindex</code> attribute on the
- element.</li>
+ <li>before any <i>focusable area</i> whose <i>DOM anchor</i> is an element whose <code data-x="attr-tabindex">tabindex</code> attribute has a value
+ greater than the value of the <code data-x="attr-tabindex">tabindex</code> attribute on <var data-x="">candidate</var>.</li>
</ul>
@@ -85282,7 +85635,7 @@
<p class="note">This means that an element that is only focusable because of its <code
data-x="attr-tabindex">tabindex</code> attribute will fire a <code data-x="event-click">click</code>
event in response to a non-mouse activation (e.g. hitting the "enter" key while the element is
- focused).</p>
+ <span>focused</span>).</p>
<p>The <dfn data-x="dom-tabIndex"><code>tabIndex</code></dfn> IDL attribute must
<span>reflect</span> the value of the <code data-x="attr-tabindex">tabindex</code> content
@@ -85295,121 +85648,440 @@
<div class="impl">
- <h4 id="focus-management">Focus management</h4>
+ <h4>Processing model</h4>
- <p>An element is <dfn>focusable</dfn> if all of the following conditions are met:</p>
+ <p>The <dfn>focusing steps</dfn> for an object <var data-x="">new focus target</var> that is
+ either a <i>focusable area</i>, or an element that is not a <i>focusable area</i>, or a
+ <span>browsing context</span>, are as follows:</p>
- <ul>
+ <ol>
- <li>The element's <span>tabindex focus flag</span> is set.</li>
+ <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/2816 div.focus() when it's got a scroll region -->
+ <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/2817 img.focus() when it's got an image map -->
- <li>The element is either <span>being rendered</span> or <!-- CANVAS-FOCUS-FALLBACK --> is a
- descendant of a <code>canvas</code> element that <span>represents</span> <span>embedded
- content</span>.</li>
+ <li>
- <li>The element is not <span>inert</span>.</li>
+ <p>If <var data-x="">new focus target</var> is neither a <code>dialog</code> element that has an
+ <code data-x="attr-dialog-open">open</code> attribute specified and that is <span>being
+ rendered</span> (i.e. that is a <span>control group owner object</span>), nor a <i>focusable
+ area</i>, then run the first matching set of steps from the following list:</p>
- <li>The element is not <span data-x="concept-element-disabled">disabled</span>.</li>
+ <dl class="switch">
- </ul>
+ <dt>If <var data-x="">new focus target</var> is an <code>area</code> element with one or more
+ shapes that are <i data-x="focusable area">focusable areas</i></dt>
- <p>In addition, each shape that is generated for an <code>area</code> element, any
- user-agent-provided interface components of <span data-x="media element">media elements</span>
- (e.g. a play button), and distinct user interface components of form controls (e.g. "up" and
- "down" buttons on an <code data-x="attr-input-type-number"><input type=number></code> spin
- control), should be <span>focusable</span>, unless platform conventions dictate otherwise or
- unless their corresponding element is <span data-x="concept-element-disabled">disabled</span>. (A
- single <code>area</code> element can correspond to multiple shapes, since image maps can be reused
- with multiple images on a page.)</p>
+ <dd>
- <p>The user agent may also make part of a <code>details</code> element's rendering
- <span>focusable</span>, to enable the element to be opened or closed using keyboard input.
- However, this is distinct from the <code>details</code> or <code>summary</code> element being
- focusable.</p>
+ <p>Let <var data-x="">new focus target</var> be the shape corresponding to the first
+ <code>img</code> element in tree order that uses the image map to which the <code>area</code>
+ element belongs.</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>
+ </dd>
- <hr>
- <p>The <dfn>focusing steps</dfn> for an element are as follows:</p>
+ <dt>If <var data-x="">new focus target</var> is an element with one or more scrollable regions
+ that are <i data-x="focusable area">focusable areas</i></dt>
- <ol>
+ <dd>
- <li><p>If the element is not <span data-x="in a Document">in a <code>Document</code></span>, or if
- the element's <code>Document</code> has no <span>browsing context</span>, or if the element's
- <code>Document</code>'s <span>browsing context</span> has no <span>top-level browsing
- context</span>, or if the element is not <span>focusable</span>, or if the element is already
- focused, then abort these steps.</p>
+ <p>Let <var data-x="">new focus target</var> be the element's first scrollable region,
+ according to a pre-order, depth-first traversal of the box tree. <a
+ href="#refsCSS">[CSS]</a></p>
- <li><p>If focusing the element will remove the focus from another element, then run the
- <span>unfocusing steps</span> for that element.</p></li>
+ </dd>
- <li>
- <p>Make the element the currently focused element in its <span>top-level browsing
- context</span>.</p>
+ <dt>If <var data-x="">new focus target</var> is <span>the body element</span> of its
+ <code>Document</code></dt>
+ <dt>If <var data-x="">new focus target</var> is the <span>root element</span> of its
+ <code>Document</code> and that <code>Document</code> has no <span data-x="the body
+ element">body element</span></dt>
- <p>Some elements, most notably <code>area</code>, can correspond to more than one distinct
- focusable area. If a particular area was indicated when the element was focused, then that is
- the area that must get focus; otherwise, e.g. when using the <code
- data-x="dom-focus">focus()</code> method, the first such region in tree order is the one that
- must be focused.</p>
+ <dd>
+ <p>Let <var data-x="">new focus target</var> be the <code>Document</code>'s viewport.</p>
+
+ </dd>
+
+
+ <dt>If <var data-x="">new focus target</var> is a <span>browsing context</span></dt>
+
+ <dd>
+
+ <p>Let <var data-x="">new focus target</var> be the <span>browsing context</span>'s
+ <span>active document</span>.</p>
+
+ </dd>
+
+ <dt>Otherwise</dt>
+
+ <dd>
+
+ <p>Abort the <span>focusing steps</span>.</p>
+
+ </dd>
+
+ </dl>
+
</li>
<li>
- <p>The user agent may apply relevant platform-specific conventions for focusing widgets.</p>
+ <p>If <var data-x="">new focus target</var> is a <span>control group owner object</span> that is
+ not a <i>focusable area</i>, but does have a <i>dialog group</i>, and that <i>dialog group</i>
+ has a designated <span data-x="focused dialog of the dialog group">focused dialog</span>, then
+ let <var data-x="">new focus target</var> be the <span>focused dialog of the dialog
+ group</span>, and redo this step.</p>
- <p class="note">For example, some platforms select the contents of a text field when that field
- is focused.</p>
+ <p>Otherwise, if <var data-x="">new focus target</var> is a <span>control group owner
+ object</span> that is not a <i>focusable area</i>, and its <i>control group</i> is not empty,
+ then designate <var data-x="">new focus target</var> as the <span>focused area of the control
+ group</span>, and redo this step.</p>
+ <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/?saved=2818 -->
+ <p>Otherwise, if <var data-x="">new focus target</var> is a <span>browsing context
+ container</span>, then let <var data-x="">new focus target</var> be the <span>nested browsing
+ context</span>'s <span>active document</span>, and redo this step.</p>
+
+ <p class="note">A <code>dialog</code> element can be both a <span>control group owner
+ object</span> and a <i>focusable area</i>, if it has both an <code
+ data-x="attr-dialog-open">open</code> attribute specified and a <code
+ data-x="attr-tabindex">tabindex</code> attribute specified and is <span>being
+ rendered</span>.</p>
+
</li>
- <li><p><span>Fire a simple event</span> named <code
- data-x="event-focus">focus</code> at the element.</p></li>
- <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/723 -->
+ <li><p>If <var data-x="">new focus target</var> is a <i>focusable area</i> and its <i>DOM
+ anchor</i> is <span>inert</span>, then abort these steps.</p></li>
+ <li><p>If <var data-x="">new focus target</var> is the <span>currently focused area of a
+ top-level browsing context</span>, then abort these steps.</p></li>
+
+ <li><p>Let <var data-x="">old chain</var> be the <span>focus chain</span> of the <span
+ data-x="currently focused area of a top-level browsing context">currently focused area of the
+ top-level browsing context</span> in which <var data-x="">new focus target</var> finds
+ itself.</p></li>
+
+ <li><p>Let <var data-x="">new chain</var> be the <span>focus chain</span> of <var data-x="">new
+ focus target</var>.</p></li>
+
+ <li><p>Run the <span>focus update steps</span> with <var data-x="">old chain</var>, <var
+ data-x="">new chain</var>, and <var data-x="">new focus target</var> respectively.</p></li>
+
</ol>
- <p>User agents must synchronously run the <span>focusing steps</span> for an element whenever the
- user moves the focus to a <span>focusable</span> element.</p>
+ <p>User agents must synchronously run the <span>focusing steps</span> for a <i>focusable area</i>,
+ <code>dialog</code>, or <span>browsing context</span> <var data-x="">candidate</var> whenever the
+ user attempts to move the focus to <var data-x="">candidate</var>.</p>
- <p>The <dfn>unfocusing steps</dfn> for an element are as follows:</p>
+ <p>The <dfn>unfocusing steps</dfn> for an object <var data-x="">old focus target</var> that is
+ either a <i>focusable area</i> or an element that is not a <i>focusable area</i> are as
+ follows:</p>
<ol>
- <li><p>If the element is an <code>input</code> element, and the <code
- data-x="event-input-change">change</code> event applies to the element, and the element does not
- have a defined <span>activation behavior</span>, and the user has changed the element's <span
- data-x="concept-fe-value">value</span> or its list of <span
- data-x="concept-input-type-file-selected">selected files</span> while the control was focused
- without committing that change, then <span>fire a simple event</span> that bubbles named <code
- data-x="event-change">change</code> at the element.</p>
+ <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/2819 -->
+ <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/2822 -->
- <li><p>Unfocus the element.</p></li>
+ <li><p>If <var data-x="">old focus target</var> is <span>inert</span>, then abort these
+ steps.</p></li>
- <li><p><span>Fire a simple event</span> named <code
- data-x="event-blur">blur</code> at the element.</p></li>
- <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/saved/723 -->
+ <li>
+ <p>If <var data-x="">old focus target</var> is an <code>area</code> element and one of its
+ shapes is the <span>currently focused area of a top-level browsing context</span>, or, if <var
+ data-x="">old focus target</var> is an element with one or more scrollable regions, and one of
+ them is the <span>currently focused area of a top-level browsing context</span>, then let <var
+ data-x="">old focus target</var> be that <span>currently focused area of a top-level browsing
+ context</span>.</p>
+
+ </li>
+
+ <li><p>Let <var data-x="">old chain</var> be the <span>focus chain</span> of the <span>currently
+ focused area of a top-level browsing context</span>.</p></li>
+
+ <li><p>If <var data-x="">old focus target</var> is not one of the entries in <var data-x="">old
+ chain</var>, then abort these steps.</p></li>
+
+ <li>
+
+ <p>If <var data-x="">old focus target</var> is a <code>dialog</code> in a <i>dialog group</i>,
+ and the <span>dialog group manager</span> has a non-empty <i>control group</i>, then let <var
+ data-x="">new focus target</var> be the designated <span data-x="focused area of the control
+ group">focused area of that focus group</span>.</p>
+
+ <p>Otherwise, if <var data-x="">old focus target</var> is a <i>focusable area</i>, then let <var
+ data-x="">new focus target</var> be the first <i>focusable area</i> of its <i>control
+ group</i> (if the <span>control group owner</span> is a <code>Document</code>, this will
+ always be a viewport).</p>
+
+ <p>Otherwise, let <var data-x="">new focus target</var> be null.</p>
+
+ </li>
+
+ <li><p>If <var data-x="">new focus target</var> is not null, then run the <span>focusing
+ steps</span> for <var data-x="">new focus target</var>.</p></li>
+
</ol>
- <p>When an element that is focused stops being a <span>focusable</span> element, or stops being
- focused without another element being explicitly focused in its stead, the user agent should
- synchronously run the <span>unfocusing steps</span> for the affected element only.</p>
+ <p>When the <span>currently focused area of a top-level browsing context</span> is somehow
+ unfocused without another element being explicitly focused in its stead, the user agent must
+ synchronously run the <span>unfocusing steps</span> for that object.</p>
- <p class="example">For example, this might happen because the element is removed from its
- <code>Document</code>, or has a <code data-x="attr-hidden">hidden</code> attribute added. It would
+ <p class="note">The <span>unfocusing steps</span> do not always result in the focus changing, even
+ when applied to the <span>currently focused area of a top-level browsing context</span>. For
+ example, if the <span>currently focused area of a top-level browsing context</span> is a viewport,
+ then it will usually keep its focus regardless until another <i>focusable area</i> is explicitly
+ focused with the <span>focusing steps</span>.</p>
+
+ <hr>
+
+ <p>When a <i>focusable area</i> is added to an empty <i>control group</i>, it must be designated
+ the <i>focused area of the control group</i>.</p>
+
+ <p>When a <i>dialog group</i> is formed, if the <span>dialog group manager</span> has an empty
+ <i>control group</i>, the first non-<span>inert</span> <code>dialog</code> in the <i>dialog
+ group</i>, if any, or else the first <code>dialog</code> in the <i>dialog group</i> regardless of
+ <span data-x="inert">inertness</span>, must be designated the <span>focused dialog of the dialog
+ group</span>.</p>
+
+ <p><dfn>Focus fixup rule one</dfn>: When the designated <span data-x="focused area of the control
+ group">focused area of a control group</span> is removed from that <i>control group</i> in some
+ way (e.g. it stops being a <i>focusable area</i>, it is removed from the DOM, it becomes <span
+ data-x="expressly inert control">expressly inert</span>, etc), and the <i>control group</i> is
+ still not empty: designate the first non-<span>inert</span> <i>focused area</i> in that <i>control
+ group</i> to be the new <span>focused area of the control group</span>, if any; if they are all
+ <span>inert</span>, then designate the first <i>focused area</i> in that <i>control group</i> to
+ be the new <span>focused area of the control group</span> regardless of <span
+ data-x="inert">inertness</span>. If such a removal instead results in the <i>control group</i>
+ being empty, then there is simply no longer a <span>focused area of the control group</span>.</p>
+
+ <p class="example">For example, this might happen because an element is removed from its
+ <code>Document</code>, or has a <code data-x="attr-hidden">hidden</code> attribute added. It might
also happen to an <code>input</code> element when the element gets <span
data-x="concept-fe-disabled">disabled</span>.</p>
+ <p><dfn>Focus fixup rule two</dfn>: When a <i>dialog group</i> has no designed <span>focused
+ dialog of the dialog group</span>, and its <span>dialog group manager</span>'s <i>control
+ group</i> changes from being non-empty to being empty, the first non-<span>inert</span>
+ <code>dialog</code> in the <i>dialog group</i>, if any, or else the first <code>dialog</code> in
+ the <i>dialog group</i> regardless of <span data-x="inert">inertness</span>, must be designated
+ the <span>focused dialog of the dialog group</span>.</p>
+
+ <p><dfn>Focus fixup rule three</dfn>: When the designated <span data-x="focused dialog of the
+ dialog group">focused dialog of a dialog group</span> is removed from that <i>dialog group</i> in
+ some way (e.g. it stops <span>being rendered</span>, it loses its <code
+ data-x="attr-dialog-open">open</code> attribute, it becomes <span data-x="expressly inert
+ dialog">expressly inert</span>, etc), and there is still a <i>dialog group</i> (because the
+ <code>dialog</code> in question was not the last <code>dialog</code> in that <i>dialog group</i>):
+ if the <i>dialog group</i>'s <span data-x="dialog group manager">manager</span>'s <i>control
+ group</i> is non-empty, let there be no designated <span>focused dialog of the dialog group</span>
+ any more; otherwise (in the case that the <i>control group</i> is empty), designate the first
+ non-<span>inert</span> <code>dialog</code> in the <i>dialog group</i> to be the <span>focused
+ dialog of the dialog group</span>, or, if they are all <span>inert</span>, designate the first
+ <code>dialog</code> in the <i>dialog group</i> to be the <span>focused dialog of the dialog
+ group</span> regardless of <span data-x="inert">inertness</span>.</p>
+
+ <p>When the <span>currently focused area of a top-level browsing context</span> was a <i>focusable
+ area</i> but stops being a <i>focusable area</i>, or when it was a <code>dialog</code> in a
+ <span>dialog group</span> and stops being part of that <span>dialog group</span>, or when it
+ starts being <span>inert</span>, the user agent must run the following steps:</p>
+
+ <ol> <!-- this is basically a special-cased version of the focusing steps -->
+
+ <li><p>Let <var data-x="">old focus target</var> be whatever the <span data-x="currently focused
+ area of a top-level browsing context">currently focused area of the top-level browsing
+ context</span> was immediately before this algorithm became applicable (e.g. before the element
+ was disabled, or the dialog was closed, or whatever caused this algorithm to tun).</p></li>
+
+ <li><p>Let <var data-x="">old chain</var> be the <span>focus chain</span> of the <span
+ data-x="currently focused area of a top-level browsing context">currently focused area of the
+ top-level browsing context</span> at the same time.</p></li>
+
+ <li><p>Make sure that the changes implied by the focus fixup rules <span data-x="focus fixup rule
+ one">one</span>, <span data-x="focus fixup rule two">two</span>, and <span data-x="focus fixup
+ rule three">three</span> above are applied.</p></li>
+
+ <li><p>Let <var data-x="">new focus target</var> be the <span>currently focused area of a
+ top-level browsing context</span>.</p></li>
+
+ <li><p>If <var data-x="">old focus target</var> and <var data-x="">new focus target</var> are the
+ same, abort these steps.</p></li>
+
+ <li><p>Let <var data-x="">new chain</var> be the <span>focus chain</span> of <var data-x="">new
+ focus target</var>.</p></li>
+
+ <li><p>Run the <span>focus update steps</span> with <var data-x="">old chain</var>, <var
+ data-x="">new chain</var>, and <var data-x="">new focus target</var> respectively.</p></li>
+
+ </ol>
+
+ <hr>
+
+ <p>The <dfn>focus update steps</dfn>, given an <var data-x="">old chain</var>, a <var
+ data-x="">new chain</var>, and a <var data-x="">new focus target</var> respectively, are as
+ follows:</p>
+
+ <ol>
+
+ <!-- focusin/focusout?: http://software.hixie.ch/utilities/js/live-dom-viewer/saved/723 -->
+
+ <li><p>If the last entry in <var data-x="">old chain</var> and the last entry in <var
+ data-x="">new chain</var> are the same, pop the last entry from <var data-x="">old chain</var>
+ and the last entry from <var data-x="">new chain</var> and redo this step.</p></li>
+
+ <li>
+
+ <p>For each entry <var data-x="">entry</var> in <var data-x="">old chain</var>, in order, run
+ these substeps:</p>
+
+ <ol>
+
+ <li id="unfocus-causes-change-event"><p>If <var data-x="">entry</var> is an <code>input</code>
+ element, and the <code data-x="event-input-change">change</code> event <span
+ data-x="concept-input-apply">applies</span> to the element, and the element does not have a
+ defined <span>activation behavior</span>, and the user has changed the element's <span
+ data-x="concept-fe-value">value</span> or its list of <span
+ data-x="concept-input-type-file-selected">selected files</span> while the control was focused
+ without committing that change, then <span>fire a simple event</span> that bubbles named <code
+ data-x="event-change">change</code> at the element.</p>
+
+ <li>
+
+ <p>If <var data-x="">entry</var> is an element, let <var data-x="">blur event target</var> be
+ <var data-x="">entry</var>.</p>
+
+ <p>If <var data-x="">entry</var> is a <code>Document</code> object, let <var data-x="">blur
+ event target</var> be that <code>Document</code> object's <code>Window</code> object.</p>
+
+ <p>Otherwise, let <var data-x="">blur event target</var> be null.</p>
+
+ </li>
+
+ <li>
+
+ <p>If <var data-x="">blur event target</var> is not null, <span>fire a simple event</span>
+ named <code data-x="event-blur">blur</code> at <var data-x="">blur event target</var>.</p>
+
+ <p class="note">In some cases, e.g. if <var data-x="">entry</var> is an <code>area</code>
+ element's shape, a scrollable region, or a viewport, no event is fired.</p>
+
+ </li>
+
+ </ol>
+
+ </li>
+
+ <li><p>Apply any relevant platform-specific conventions for focusing <var data-x="">new focus
+ target</var>. (For example, some platforms select the contents of a text field when that field is
+ focused.)</p></li>
+
+ <li>
+
+ <p>For each entry <var data-x="">entry</var> in <var data-x="">new chain</var>, in reverse
+ order, run these substeps:</p>
+
+ <ol>
+
+ <li><p>If <var data-x="">entry</var> is a <code>dialog</code> element: Let <var
+ data-x="">entry</var> be the designated <span data-x="focused dialog of the dialog
+ group">focused dialog of its dialog group</span>.</p></li>
+
+ <li>
+
+ <p>If <var data-x="">entry</var> is a <i>focusable area</i>: Designate <var
+ data-x="">entry</var> as the <span>focused area of the control group</span>. If its <i>control
+ group</i>'s <span data-x="control group owner">owner</span> is also a <span>dialog group
+ manager</span>, then let there be no designated <span data-x="focused dialog of the dialog
+ group">focused dialog</span> in that <i>dialog group</i>.</p>
+
+ <p class="note">It is possible for <var data-x="">entry</var> to be both a <code>dialog</code>
+ element and a <i>focusable area</i>, in which case it is its own <span>control group
+ owner</span>.</p>
+
+ </li>
+
+ <li>
+
+ <p>If <var data-x="">entry</var> is an element, let <var data-x="">focus event target</var> be
+ <var data-x="">entry</var>.</p>
+
+ <p>If <var data-x="">entry</var> is a <code>Document</code> object, let <var data-x="">focus
+ event target</var> be that <code>Document</code> object's <code>Window</code> object.</p>
+
+ <p>Otherwise, let <var data-x="">focus event target</var> be null.</p>
+
+ </li>
+
+ <li>
+
+ <p>If <var data-x="">focus event target</var> is not null, <span>fire a simple event</span>
+ named <code data-x="event-focus">focus</code> at <var data-x="">focus event target</var>.</p>
+
+ <p class="note">In some cases, e.g. if <var data-x="">entry</var> is an <code>area</code>
+ element's shape, a scrollable region, or a viewport, no event is fired.</p>
+
+ </li>
+
+ </ol>
+
+ </li>
+
+ </ol>
+
+ <hr>
+
+ <p>When a key event is to be routed in a <span>top-level browsing context</span>, the user agent
+ must run the follow steps:</p>
+
+ <ol>
+
+ <li><p>Let <var data-x="">target area</var> be the <span data-x="currently focused area of a
+ top-level browsing context">currently focused area of the top-level browsing
+ context</span>.</p></li>
+
+ <li><p>If <var data-x="">target area</var> is a <i>focusable area</i>, let <var data-x="">target
+ node</var> be <var data-x="">target area</var>'s <i>DOM anchor</i>. Otherwise, <var
+ data-x="">target area</var> is a <code>dialog</code>; let <var data-x="">target node</var> be
+ <var data-x="">target area</var>.</p></li>
+
+ <li>
+
+ <p>If <var data-x="">target node</var> is a <code>Document</code> that has a <span data-x="the
+ body element">body element</span>, then let <var data-x="">target node</var> be <span>the body
+ element</span> of that <code>Document</code>.</p>
+
+ <p>Otherwise, if <var data-x="">target node</var> is a <code>Document</code> that has a
+ <span>root element</span>, then let <var data-x="">target node</var> be the <span>root
+ element</span> of that <code>Document</code>.</p>
+
+ </li>
+
+ <li>
+
+ <p>If <var data-x="">target node</var> is not <span>inert</span>, fire the event at <var
+ data-x="">target node</var>.</p>
+
+ <p class="note">It is possible for the <span>currently focused area of a top-level browsing
+ context</span> to be <span>inert</span>, for example if a <span
+ data-x="dom-dialog-showModal">modal dialog is shown</span>, and then that <code>dialog</code>
+ element is made <span>inert</span>. It is likely to be the result of a logic error in the
+ application, though.</p>
+
+ </li>
+
+ <li><p>If the event was not canceled, then let <var data-x="">target area</var> handle the key
+ event. This might include <span data-x="run synthetic click activation steps">running synthetic
+ click activation steps</span> for <var data-x="">target node</var>.</p></li>
+
+ </ol>
+
</div>
<!--TOPIC:DOM APIs-->
- <h4>Document-level focus APIs</h4>
+ <h4>Focus management APIs</h4>
<dl class="domintro">
@@ -85417,15 +86089,25 @@
<dd>
- <p>Returns the currently focused element.</p>
+ <p>Returns the deepest element in the document through which or to which key events are being
+ routed. This is, roughly speaking, the focused element in the document.</p>
+ <p>For the purposes of this API, when a <span>child browsing context</span> is focused, its
+ <span>browsing context container</span> is <a href="#bc-focus-ergo-bcc-focus">focused</a> in the
+ <span>parent browsing context</span>. For example, if the user moves the focus to a text field
+ in an <code>iframe</code>, the <code>iframe</code> is the element returned by the <code
+ data-x="dom-document-activeElement">activeElement</code> API in the <code>iframe</code>'s
+ <code>Document</code>.</p>
+
</dd>
<dt><var data-x="">document</var> . <code data-x="dom-document-hasFocus">hasFocus</code>()</dt>
<dd>
- <p>Returns true if the document has focus; otherwise, returns false.</p>
+ <p>Returns true if key events are being routed through or to the document; otherwise, returns
+ false. Roughly speaking, this corresponds to the document, or a documented nested inside this
+ one, being focused.</p>
</dd>
@@ -85433,112 +86115,166 @@
<dd>
- <p>Focuses the window. Use of this method is discouraged. Allow the user to control window focus
- instead.</p>
+ <!-- http://software.hixie.ch/utilities/js/live-dom-viewer/?saved=2823 -->
+ <p>Moves the focus to the window's <span>browsing context container</span>, if any.</p>
+
</dd>
+<!--
<dt><var data-x="">window</var> . <code data-x="dom-window-blur">blur</code>()</dt>
<dd>
- <p>Unfocuses the window. Use of this method is discouraged. Allow the user to control window
- focus instead.</p>
+ <p>No effect.</p>
</dd>
+-->
+ <dt><var data-x="">element</var> . <code data-x="dom-focus">focus</code>()</dt>
+
+ <dd>
+
+ <p>Moves the focus to the element.</p>
+
+ <p>If the element is <span>the body element</span>, moves the focus to the viewport instead.</p>
+
+ </dd>
+
+ <dt><var data-x="">element</var> . <code data-x="dom-blur">blur</code>()</dt>
+
+ <dd>
+
+ <p>Moves the focus to the viewport. Use of this method is discouraged; if you want to focus the
+ viewport, call the <code data-x="dom-focus">focus()</code> method on <span>the body
+ element</span>.</p>
+
+ <p>Do not use this method to hide the focus ring if you find the focus ring unsightly. Instead,
+ use a CSS rule to override the 'outline' property, and provide a different way to show what
+ element is focused. Be aware that if an alternative focusing style isn't made available, the
+ page will be significantly less usable for people who primarily navigate pages using a keyboard,
+ or those with reduced vision who use focus outlines to help them navigate the page.</p>
+
+ <!-- we suggest using CSS here because users can override CSS, so it's no the end of the world,
+ unlike using .blur(), which cannot be easily overridden by users and completely breaks tab
+ navigation. -->
+
+ <div class="example">
+
+ <p>For example, to hide the outline from links and instead use a yellow background to indicate
+ focus, you could use:</p>
+
+ <pre>:link:focus, :visited:focus { outline: none; background: yellow; color: black; }</pre>
+
+ </div>
+
+ </dd>
+
</dl>
<div class="impl">
<p>The <dfn data-x="dom-document-activeElement"><code>activeElement</code></dfn> attribute on
- <code>Document</code> objects must return the element in the document that is focused. If no
- element in the <code>Document</code> is focused, this must return <span>the body
- element</span>.</p>
+ <code>Document</code> objects must return the value returned by the following steps:</p>
- <p class="note">When a <span>child browsing context</span> is focused, its <span>browsing context
- container</span> is also focused, <a href="#bc-focus-ergo-bcc-focus">by definition</a>. For
- example, if the user moves the focus to a text field in an <code>iframe</code>, the
- <code>iframe</code> is the element with focus in the <span>parent browsing context</span>.</p>
+ <ol>
- <p>The <dfn data-x="dom-document-hasFocus"><code>hasFocus()</code></dfn> method on
- <code>Document</code> objects must return true if the <code>Document</code>'s <span>browsing
- context</span> is focused, and all its <span data-x="ancestor browsing context">ancestor browsing
- contexts</span> are also focused, and the <span>top-level browsing context</span> has the
- <i>system focus</i>. If the <code>Document</code> has no <span>browsing context</span> or if its
- <span>browsing context</span> has no <span>top-level browsing context</span>, then the method will
- always return false.</p>
+ <li><p>Let <var data-x="">candidate</var> be the <code>Document</code> on which the method was
+ invoked.</p></li>
- <p>The <dfn data-x="dom-window-focus"><code>focus()</code></dfn> method on the <code>Window</code>
- object, when invoked, provides a hint to the user agent that the script believes the user might be
- interested in the contents of the <span>browsing context</span> of the <code>Window</code> object
- on which the method was invoked.</p>
+ <li><p>If <var data-x="">candidate</var> has a <i>dialog group</i> with a designated
+ <span>focused dialog of the dialog group</span>, then let <var data-x="">candidate</var> be the
+ designated <span>focused dialog of the dialog group</span>, and redo this step.</p></li>
- <p>User agents are encouraged to have this <code data-x="dom-window-focus">focus()</code> method
- trigger some kind of notification.</p>
+ <li><p>If <var data-x="">candidate</var> has a non-empty <i>control group</i>, let <var
+ data-x="">candidate</var> be the designated <span>focused area of the control
+ group</span>.</p>
- <p>The <dfn data-x="dom-window-blur"><code>blur()</code></dfn> method on the <code>Window</code>
- object, when invoked, provides a hint to the user agent that the script believes the user probably
- is not currently interested in the contents of the <span>browsing context</span> of the
- <code>Window</code> object on which the method was invoked, but that the contents might become
- interesting again in the future.</p>
+ </li>
- <p>User agents are encouraged to ignore calls to this <code data-x="dom-window-blur">blur()</code>
- method entirely.</p>
+ <li><p>If <var data-x="">candidate</var> is a <i>focusable area</i>, let <var
+ data-x="">candidate</var> be <var data-x="">candidate</var>'s <i>DOM anchor</i>.</p></li>
- <p class="note">Historically the <code data-x="dom-window-blur">focus()</code> and <code
- data-x="dom-window-blur">blur()</code> methods actually affected the system focus, but hostile
- sites widely abuse this behavior to the user's detriment.</p>
+ <li>
- </div>
+ <p>If <var data-x="">candidate</var> is a <code>Document</code> that has a <span data-x="the
+ body element">body element</span>, then let <var data-x="">candidate</var> be <span>the body
+ element</span> of that <code>Document</code>.</p>
+ <p>Otherwise, if <var data-x="">candidate</var> is a <code>Document</code> that has a <span>root
+ element</span>, then let <var data-x="">candidate</var> be the <span>root element</span> of that
+ <code>Document</code>.</p>
- <h4>Element-level focus APIs</h4>
+ <p>Otherwise, if <var data-x="">candidate</var> is a <code>Document</code>, then let <var
+ data-x="">candidate</var> be null.</p>
- <dl class="domintro">
+ </li>
- <dt><var data-x="">element</var> . <code data-x="dom-focus">focus</code>()</dt>
+ <li><p>Return <var data-x="">candidate</var>.</p></li>
- <dd>
+ </ol>
- <p>Focuses the element.</p>
+ <p>The <dfn data-x="dom-document-hasFocus"><code>hasFocus()</code></dfn> method on
+ <code>Document</code> objects must return true the value returned by the following steps:</p>
- </dd>
+ <ol>
- <dt><var data-x="">element</var> . <code data-x="dom-blur">blur</code>()</dt>
+ <li><p>Let <var data-x="">target</var> be the <code>Document</code> on which the method was
+ invoked.</p></li>
- <dd>
+ <li><p>Let <var data-x="">candidate</var> be the <code>Document</code> of the <span>top-level
+ browsing context</span>.</p></li>
- <p>Unfocuses the element. Use of this method is discouraged. Focus another element instead.</p>
+ <li><p>If <var data-x="">candidate</var> is <var data-x="">target</var>, return true and abort
+ these steps.</p></li>
- <p>Do not use this method to hide the focus ring if you find the focus ring unsightly. Instead,
- use a CSS rule to override the 'outline' property. Be aware, however, that if an alternative
- focusing style isn't made available instead, the page will be significantly less usable for
- people who primarily navigate pages using a keyboard, or those with reduced vision who use focus
- outlines to help them navigate the page.</p>
+ <li>
- <!-- we suggest using CSS here because users can override CSS, so it's no the end of the world,
- unlike using .blur(), which cannot be easily overridden by users and completely breaks tab
- navigation. -->
+ <p>If <var data-x="">candidate</var> has a <i>dialog group</i> with a designated <span>focused
+ dialog of the dialog group</span>, then let <var data-x="">candidate</var> be the designated
+ <span>focused dialog of the dialog group</span>, and redo this step.</p>
- <div class="example">
+ <p>Otherwise, if <var data-x="">candidate</var> has a non-empty <i>control group</i>, and the
+ designated <span>focused area of the control group</span> is a <span>browsing context
+ container</span>, and the <span>active document</span> of that <span>browsing context
+ container</span>'s <span>nested browsing context</span> is <var data-x="">target</var>, then
+ return true and abort these steps.</p>
- <p>For example, to hide the outline from links and instead use a yellow background, you could
- use:</p>
+ <p>Otherwise, if <var data-x="">candidate</var> has a non-empty <i>control group</i>, and the
+ designated <span>focused area of the control group</span> is a <span>browsing context
+ container</span>, then let <var data-x="">candidate</var> be the <span>active document</span> of
+ that <span>browsing context container</span>'s <span>nested browsing context</span>, and redo
+ this step.</p>
- <pre>:link:focus, :visited:focus { outline: none; background: yellow; color: black; }</pre>
+ <p>Otherwise, return false and abort these steps.</p>
- </div>
+ </li>
- </dd>
+ </ol>
- </dl>
+ <p>The <dfn data-x="dom-window-focus"><code>focus()</code></dfn> method on <code>Window</code>
+ object, when invoked, must run the <span>focusing steps</span> with the <code>Window</code>
+ object's <span>browsing context</span>. Additionally, if this <span>browsing context</span> is a
+ <span>top-level browsing context</span>, user agents are encouraged to trigger some sort of
+ notification to indicate to the user that the page is attempting to gain focus.</p>
- <div class="impl">
+ <p>The <dfn data-x="dom-window-blur"><code>blur()</code></dfn> method on the <code>Window</code>
+ object, when invoked, provides a hint to the user agent that the script believes the user probably
+ is not currently interested in the contents of the <span>browsing context</span> of the
+ <code>Window</code> object on which the method was invoked, but that the contents might become
+ interesting again in the future.</p>
- <p>The <dfn data-x="dom-focus"><code>focus()</code></dfn> method, when invoked, must run the
- following algorithm:</p>
+ <p>User agents are encouraged to ignore calls to this <code data-x="dom-window-blur">blur()</code>
+ method entirely.</p>
+ <p class="note">Historically, the <code data-x="dom-window-blur">focus()</code> and <code
+ data-x="dom-window-blur">blur()</code> methods actually affected the system-level focus of the
+ system widget (e.g. tab or window) that contained the <span>browsing context</span>, but hostile
+ sites widely abuse this behavior to the user's detriment.</p>
+
+ <p>The <dfn data-x="dom-focus"><code>focus()</code></dfn> method on elements, when invoked, must
+ run the following algorithm:</p>
+
<ol>
<li><p>If the element is marked as <i>locked for focus</i>, then abort these steps.</p></li>
@@ -85552,8 +86288,8 @@
</ol>
<p>The <dfn data-x="dom-blur"><code>blur()</code></dfn> method, when invoked, should run the
- <span>unfocusing steps</span> for the element on which the method was called instead. User agents
- may selectively or uniformly ignore calls to this method for usability reasons.</p>
+ <span>unfocusing steps</span> for the element on which the method was called. User agents may
+ selectively or uniformly ignore calls to this method for usability reasons.</p>
<p class="example">For example, if the <code data-x="dom-blur">blur()</code> method is unwisely
being used to remove the focus ring for aesthetics reasons, the page would become unusable by
@@ -85561,10 +86297,11 @@
page.</p>
</div>
+
+
<!--TOPIC:HTML-->
-
<h3>Assigning keyboard shortcuts</h3>
<h4>Introduction</h4>
@@ -107737,10 +108474,11 @@
<p>User agents are expected to expose the <span>advisory information</span> of elements upon user
request, and to make the user aware of the presence of such information.</p>
+<!--CLEANUP-->
<p>On interactive graphical systems where the user can use a pointing device, this could take the
form of a tooltip. When the user is unable to use a pointing device, then the user agent is
- expected to make the content available in some other fashion, e.g. by making the element focusable
- and always displaying the <span>advisory information</span> of the currently focused element, or
+ expected to make the content available in some other fashion, e.g. by making the element a <i>focusable area</i>
+ and always displaying the <span>advisory information</span> of the currently <span>focused</span> element, or
by showing the <span>advisory information</span> of the elements under the user's finger on a
touch device as the user pans around the screen.</p>
@@ -107752,7 +108490,7 @@
<div class="example">
<p>For example, a visual user agent could make elements with a <code
- data-x="attr-title">title</code> attribute focusable, and could make any focused element with a
+ data-x="attr-title">title</code> attribute <span data-x="focusable area">focusable</span>, and could make any <span>focused</span> element with a
<code data-x="attr-title">title</code> attribute show its tooltip under the element while the
element has focus. This would allow a user to tab around the document to find all the advisory
text.</p>
@@ -107937,7 +108675,7 @@
<li>None of the elements in the <code>Document</code> have any <span>presentational hints</span>.
<li>None of the elements in the <code>Document</code> have any <span data-x="CSS styling attribute">CSS styling attributes</span>.
<li>None of the elements in the <code>Document</code> are in any of the following namespaces: <span>HTML namespace</span>, <span>SVG namespace</span>, <span>MathML namespace</span>
- <li>The <code>Document</code> has no <span>focusable</span> elements (e.g. from XLink).
+ <li>The <code>Document</code> has no <i>focusable area</i> (e.g. from XLink) other than the viewport.
<li>The <code>Document</code> has no <span data-x="hyperlink">hyperlinks</span> (e.g. from XLink).
<li>There exists no <span data-x="concept-script">script</span> whose <span>settings object</span> specifies this <code>Document</code> as the <span>responsible document</span>.
<li>None of the elements in the <code>Document</code> have any registered event listeners.
@@ -114345,7 +115083,7 @@
<td> <dfn data-x="event-blur"><code>blur</code></dfn>
<td> <code>Event</code>
<td> <code>Window</code>, elements
- <td> Fired at nodes losing focus <!-- XXX bug 23475 -->
+ <td> Fired at nodes when they stop being <span>focused</span>
<tr> <!-- cancel -->
<td> <dfn data-x="event-cancel"><code>cancel</code></dfn>
@@ -114393,7 +115131,7 @@
<td> <dfn data-x="event-focus"><code>focus</code></dfn>
<td> <code>Event</code>
<td> <code>Window</code>, elements
- <td> Fired at nodes gaining focus <!-- XXX bug 23475 -->
+ <td> Fired at nodes <span data-x="gains focus">gaining focus</span>
<tr> <!-- hashchange -->
<td> <dfn data-x="event-hashchange"><code>hashchange</code></dfn>
More information about the Commit-Watchers
mailing list