[html5] r7498 - [giow] (3) Another attempt at defining tabindex, :disabled, what can be focused, [...]
whatwg at whatwg.org
whatwg at whatwg.org
Thu Nov 1 16:07:04 PDT 2012
Author: ianh
Date: 2012-11-01 16:07:03 -0700 (Thu, 01 Nov 2012)
New Revision: 7498
Modified:
complete.html
index
source
Log:
[giow] (3) Another attempt at defining tabindex, :disabled, what can be focused, etc.
Fixing https://www.w3.org/Bugs/Public/show_bug.cgi?id=16018
Affected topics: HTML
Modified: complete.html
===================================================================
--- complete.html 2012-11-01 22:18:43 UTC (rev 7497)
+++ complete.html 2012-11-01 23:07:03 UTC (rev 7498)
@@ -824,10 +824,11 @@
<li><a href=#tag-clouds><span class=secno>4.13.3 </span>Tag clouds</a></li>
<li><a href=#conversations><span class=secno>4.13.4 </span>Conversations</a></li>
<li><a href=#footnotes><span class=secno>4.13.5 </span>Footnotes</a></ol></li>
- <li><a href=#selectors><span class=secno>4.14 </span>Matching HTML elements using selectors</a>
+ <li><a href=#disabled-elements><span class=secno>4.14 </span>Disabled elements</a></li>
+ <li><a href=#selectors><span class=secno>4.15 </span>Matching HTML elements using selectors</a>
<ol>
- <li><a href=#case-sensitivity><span class=secno>4.14.1 </span>Case-sensitivity</a></li>
- <li><a href=#pseudo-classes><span class=secno>4.14.2 </span>Pseudo-classes</a></ol></ol></li>
+ <li><a href=#case-sensitivity><span class=secno>4.15.1 </span>Case-sensitivity</a></li>
+ <li><a href=#pseudo-classes><span class=secno>4.15.2 </span>Pseudo-classes</a></ol></ol></li>
<li><a href=#microdata><span class=secno>5 </span>Microdata</a>
<ol>
<li><a href=#introduction-4><span class=secno>5.1 </span>Introduction</a>
@@ -62610,13 +62611,43 @@
</div>
+ <h3 id=disabled-elements><span class=secno>4.14 </span>Disabled elements</h3>
+ <p>An element is said to be <dfn id=concept-element-disabled title=concept-element-disabled>actually disabled</dfn> if it
+ falls into one of the following categories:</p>
+ <ul><li><code><a href=#the-button-element>button</a></code> elements that are <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>
+
+ <li><code><a href=#the-input-element>input</a></code> elements that are <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>
+
+ <li><code><a href=#the-select-element>select</a></code> elements that are <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>
+
+ <li><code><a href=#the-textarea-element>textarea</a></code> elements that are <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>
+
+ <li><code><a href=#the-optgroup-element>optgroup</a></code> elements that have a <code title=attr-optgroup-disabled><a href=#attr-optgroup-disabled>disabled</a></code> attribute</li>
+
+ <li><code><a href=#the-option-element>option</a></code> elements that are <a href=#concept-option-disabled title=concept-option-disabled>disabled</a></li>
+
+ <li><code><a href=#the-command-element>command</a></code> elements that have a <code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code> attribute</li>
+
+ <li><code><a href=#the-li-element>li</a></code> elements that are children of
+ <code><a href=#the-menu-element>menu</a></code> elements, and that have a child element that
+ defines a <a href=#concept-command title=concept-command>command</a>, if the
+ first such element's <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled State</a> facet
+ is true (disabled)</li>
+
+ <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>
+
+
+
<div class=impl>
- <h3 id=selectors><span class=secno>4.14 </span>Matching HTML elements using selectors</h3>
+ <h3 id=selectors><span class=secno>4.15 </span>Matching HTML elements using selectors</h3>
- <h4 id=case-sensitivity><span class=secno>4.14.1 </span>Case-sensitivity</h4>
+ <h4 id=case-sensitivity><span class=secno>4.15.1 </span>Case-sensitivity</h4>
<p>The Selectors specification leaves the case-sensitivity of IDs,
classes, element names, attribute names, and attribute values to be
@@ -62645,7 +62676,7 @@
matching.</p>
- <h4 id=pseudo-classes><span class=secno>4.14.2 </span>Pseudo-classes</h4>
+ <h4 id=pseudo-classes><span class=secno>4.15.2 </span>Pseudo-classes</h4>
<p>There are a number of dynamic selectors that can be used with
HTML. This section defines when these selectors match HTML elements.
@@ -62835,35 +62866,12 @@
<dd>
- <p>The <code title=selector-disabled><a href=#selector-disabled>:disabled</a></code>
- pseudo-class must match any element falling into one of the
- following categories:</p>
+ <p>The <code title=selector-disabled><a href=#selector-disabled>:disabled</a></code> pseudo-class must match any element that
+ is <a href=#concept-element-disabled title=concept-element-disabled>actually disabled</a>.</p>
- <ul><li><code><a href=#the-button-element>button</a></code> elements that are <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>
+ </dd>
- <li><code><a href=#the-input-element>input</a></code> elements that are <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>
- <li><code><a href=#the-select-element>select</a></code> elements that are <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>
-
- <li><code><a href=#the-textarea-element>textarea</a></code> elements that are <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>
-
- <li><code><a href=#the-optgroup-element>optgroup</a></code> elements that have a <code title=attr-optgroup-disabled><a href=#attr-optgroup-disabled>disabled</a></code> attribute</li>
-
- <li><code><a href=#the-option-element>option</a></code> elements that are <a href=#concept-option-disabled title=concept-option-disabled>disabled</a></li>
-
- <li><code><a href=#the-command-element>command</a></code> elements that have a <code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code> attribute</li>
-
- <li><code><a href=#the-li-element>li</a></code> elements that are children of
- <code><a href=#the-menu-element>menu</a></code> elements, and that have a child element that
- defines a <a href=#concept-command title=concept-command>command</a>, if the
- first such element's <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled State</a> facet
- is true (disabled)</li>
-
- <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></dd>
-
-
<dt><dfn id=selector-checked title=selector-checked><code>:checked</code></dfn></dt>
<dd>
@@ -78069,10 +78077,9 @@
<div class=impl>
- <p>Each element has a <dfn id=specially-focusable>tabindex focus
- flag</dfn>. 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>
+ <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>
<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
@@ -78088,7 +78095,35 @@
so, whether the element can be reached using sequential focus
navigation, and if so, what its relative order should be.</p>
- <p class=note>One valid reason to ignore the platform
+ <p>Modulo platform conventions, it is suggested that for the following elements, the
+ <a href=#specially-focusable>tabindex focus flag</a> be set:</p>
+
+ <ul><li><code><a href=#the-a-element>a</a></code> elements that have an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute</li>
+
+ <li><code><a href=#the-link-element>link</a></code> elements that have an <code title=attr-link-href><a href=#attr-link-href>href</a></code> attribute</li>
+
+ <li><code><a href=#the-button-element>button</a></code> elements</li>
+
+ <li><code><a href=#the-input-element>input</a></code> elements whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute are not in the
+ <a href="#hidden-state-(type=hidden)" title=attr-input-type-hidden>Hidden</a> state</li>
+
+ <li><code><a href=#the-select-element>select</a></code> elements</li>
+
+ <li><code><a href=#the-textarea-element>textarea</a></code> elements</li>
+
+ <li><code><a href=#the-command-element>command</a></code> elements</li>
+
+ <li>Elements with a <code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code>
+ attribute set, if that would enable the user agent to allow the
+ user to begin a drag operations for those elements without the use
+ of a pointing device</li>
+
+ <li><a href=#editing-host title="editing host">Editing hosts</a></li>
+
+ <li><a href=#browsing-context-container title="browsing context container">Browsing context
+ containers</a></li> <!-- like <iframe>s -->
+
+ </ul><p class=note>One valid reason to ignore the platform
conventions and always allow an element to be focused (by setting
its <a href=#specially-focusable>tabindex focus flag</a>) would be if the user's only
mechanism for activating an element is through a keyboard action
@@ -78183,57 +78218,30 @@
<h4 id=focus-management><span class=secno>8.4.2 </span>Focus management</h4>
- <p>An element is <dfn id=focusable>focusable</dfn> if the user agent's default
- behavior allows it to be focusable or if the element has its
- <a href=#specially-focusable>tabindex focus flag</a> set, but only if the element is
- either <a href=#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>, and only if
- neither the element nor any of its ancestors are
- <a href=#inert>inert</a>.</p>
+ <p>An element is <dfn id=focusable>focusable</dfn> if all of the following conditions are met:</p>
- <p>User agents should make the following elements
- <a href=#focusable>focusable</a> as part of their default behavior, unless
- platform conventions dictate otherwise:</p>
+ <ul><li>The element's <a href=#specially-focusable>tabindex focus flag</a> is set.</li>
- <ul><li><code><a href=#the-a-element>a</a></code> elements that have an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute</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>
- <li><code><a href=#the-link-element>link</a></code> elements that have an <code title=attr-link-href><a href=#attr-link-href>href</a></code> attribute</li>
+ <li>Neither the element nor any of its ancestors are <a href=#inert>inert</a>.</li>
- <li><code><a href=#the-button-element>button</a></code> elements that are not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>
+ <li>The element is not <a href=#concept-element-disabled title=concept-element-disabled>disabled</a>.</li>
- <li><code><a href=#the-input-element>input</a></code> elements whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute are not in the
- <a href="#hidden-state-(type=hidden)" title=attr-input-type-hidden>Hidden</a> state and that
- are not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>
-
- <li><code><a href=#the-select-element>select</a></code> elements that are not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>
-
- <li><code><a href=#the-textarea-element>textarea</a></code> elements that are not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>
-
- <li><code><a href=#the-command-element>command</a></code> elements that do not have a <code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code> attribute</li>
-
- <li>Elements with a <code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code>
- attribute set, if that would enable the user agent to allow the
- user to begin a drag operations for those elements without the use
- of a pointing device</li>
-
- <li><a href=#editing-host title="editing host">Editing hosts</a></li>
-
- <li><a href=#browsing-context-container title="browsing context container">Browsing context
- containers</a></li> <!-- like <iframe>s -->
-
</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 <span title="media elements">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 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. (A
+ 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>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
+ <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>
<p>Notwithstanding the above, user agents may make <em>any</em> element or part of an element
Modified: index
===================================================================
--- index 2012-11-01 22:18:43 UTC (rev 7497)
+++ index 2012-11-01 23:07:03 UTC (rev 7498)
@@ -824,10 +824,11 @@
<li><a href=#tag-clouds><span class=secno>4.13.3 </span>Tag clouds</a></li>
<li><a href=#conversations><span class=secno>4.13.4 </span>Conversations</a></li>
<li><a href=#footnotes><span class=secno>4.13.5 </span>Footnotes</a></ol></li>
- <li><a href=#selectors><span class=secno>4.14 </span>Matching HTML elements using selectors</a>
+ <li><a href=#disabled-elements><span class=secno>4.14 </span>Disabled elements</a></li>
+ <li><a href=#selectors><span class=secno>4.15 </span>Matching HTML elements using selectors</a>
<ol>
- <li><a href=#case-sensitivity><span class=secno>4.14.1 </span>Case-sensitivity</a></li>
- <li><a href=#pseudo-classes><span class=secno>4.14.2 </span>Pseudo-classes</a></ol></ol></li>
+ <li><a href=#case-sensitivity><span class=secno>4.15.1 </span>Case-sensitivity</a></li>
+ <li><a href=#pseudo-classes><span class=secno>4.15.2 </span>Pseudo-classes</a></ol></ol></li>
<li><a href=#microdata><span class=secno>5 </span>Microdata</a>
<ol>
<li><a href=#introduction-4><span class=secno>5.1 </span>Introduction</a>
@@ -62610,13 +62611,43 @@
</div>
+ <h3 id=disabled-elements><span class=secno>4.14 </span>Disabled elements</h3>
+ <p>An element is said to be <dfn id=concept-element-disabled title=concept-element-disabled>actually disabled</dfn> if it
+ falls into one of the following categories:</p>
+ <ul><li><code><a href=#the-button-element>button</a></code> elements that are <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>
+
+ <li><code><a href=#the-input-element>input</a></code> elements that are <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>
+
+ <li><code><a href=#the-select-element>select</a></code> elements that are <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>
+
+ <li><code><a href=#the-textarea-element>textarea</a></code> elements that are <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>
+
+ <li><code><a href=#the-optgroup-element>optgroup</a></code> elements that have a <code title=attr-optgroup-disabled><a href=#attr-optgroup-disabled>disabled</a></code> attribute</li>
+
+ <li><code><a href=#the-option-element>option</a></code> elements that are <a href=#concept-option-disabled title=concept-option-disabled>disabled</a></li>
+
+ <li><code><a href=#the-command-element>command</a></code> elements that have a <code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code> attribute</li>
+
+ <li><code><a href=#the-li-element>li</a></code> elements that are children of
+ <code><a href=#the-menu-element>menu</a></code> elements, and that have a child element that
+ defines a <a href=#concept-command title=concept-command>command</a>, if the
+ first such element's <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled State</a> facet
+ is true (disabled)</li>
+
+ <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>
+
+
+
<div class=impl>
- <h3 id=selectors><span class=secno>4.14 </span>Matching HTML elements using selectors</h3>
+ <h3 id=selectors><span class=secno>4.15 </span>Matching HTML elements using selectors</h3>
- <h4 id=case-sensitivity><span class=secno>4.14.1 </span>Case-sensitivity</h4>
+ <h4 id=case-sensitivity><span class=secno>4.15.1 </span>Case-sensitivity</h4>
<p>The Selectors specification leaves the case-sensitivity of IDs,
classes, element names, attribute names, and attribute values to be
@@ -62645,7 +62676,7 @@
matching.</p>
- <h4 id=pseudo-classes><span class=secno>4.14.2 </span>Pseudo-classes</h4>
+ <h4 id=pseudo-classes><span class=secno>4.15.2 </span>Pseudo-classes</h4>
<p>There are a number of dynamic selectors that can be used with
HTML. This section defines when these selectors match HTML elements.
@@ -62835,35 +62866,12 @@
<dd>
- <p>The <code title=selector-disabled><a href=#selector-disabled>:disabled</a></code>
- pseudo-class must match any element falling into one of the
- following categories:</p>
+ <p>The <code title=selector-disabled><a href=#selector-disabled>:disabled</a></code> pseudo-class must match any element that
+ is <a href=#concept-element-disabled title=concept-element-disabled>actually disabled</a>.</p>
- <ul><li><code><a href=#the-button-element>button</a></code> elements that are <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>
+ </dd>
- <li><code><a href=#the-input-element>input</a></code> elements that are <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>
- <li><code><a href=#the-select-element>select</a></code> elements that are <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>
-
- <li><code><a href=#the-textarea-element>textarea</a></code> elements that are <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>
-
- <li><code><a href=#the-optgroup-element>optgroup</a></code> elements that have a <code title=attr-optgroup-disabled><a href=#attr-optgroup-disabled>disabled</a></code> attribute</li>
-
- <li><code><a href=#the-option-element>option</a></code> elements that are <a href=#concept-option-disabled title=concept-option-disabled>disabled</a></li>
-
- <li><code><a href=#the-command-element>command</a></code> elements that have a <code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code> attribute</li>
-
- <li><code><a href=#the-li-element>li</a></code> elements that are children of
- <code><a href=#the-menu-element>menu</a></code> elements, and that have a child element that
- defines a <a href=#concept-command title=concept-command>command</a>, if the
- first such element's <a href=#command-facet-disabledstate title=command-facet-DisabledState>Disabled State</a> facet
- is true (disabled)</li>
-
- <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></dd>
-
-
<dt><dfn id=selector-checked title=selector-checked><code>:checked</code></dfn></dt>
<dd>
@@ -78069,10 +78077,9 @@
<div class=impl>
- <p>Each element has a <dfn id=specially-focusable>tabindex focus
- flag</dfn>. 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>
+ <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>
<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
@@ -78088,7 +78095,35 @@
so, whether the element can be reached using sequential focus
navigation, and if so, what its relative order should be.</p>
- <p class=note>One valid reason to ignore the platform
+ <p>Modulo platform conventions, it is suggested that for the following elements, the
+ <a href=#specially-focusable>tabindex focus flag</a> be set:</p>
+
+ <ul><li><code><a href=#the-a-element>a</a></code> elements that have an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute</li>
+
+ <li><code><a href=#the-link-element>link</a></code> elements that have an <code title=attr-link-href><a href=#attr-link-href>href</a></code> attribute</li>
+
+ <li><code><a href=#the-button-element>button</a></code> elements</li>
+
+ <li><code><a href=#the-input-element>input</a></code> elements whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute are not in the
+ <a href="#hidden-state-(type=hidden)" title=attr-input-type-hidden>Hidden</a> state</li>
+
+ <li><code><a href=#the-select-element>select</a></code> elements</li>
+
+ <li><code><a href=#the-textarea-element>textarea</a></code> elements</li>
+
+ <li><code><a href=#the-command-element>command</a></code> elements</li>
+
+ <li>Elements with a <code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code>
+ attribute set, if that would enable the user agent to allow the
+ user to begin a drag operations for those elements without the use
+ of a pointing device</li>
+
+ <li><a href=#editing-host title="editing host">Editing hosts</a></li>
+
+ <li><a href=#browsing-context-container title="browsing context container">Browsing context
+ containers</a></li> <!-- like <iframe>s -->
+
+ </ul><p class=note>One valid reason to ignore the platform
conventions and always allow an element to be focused (by setting
its <a href=#specially-focusable>tabindex focus flag</a>) would be if the user's only
mechanism for activating an element is through a keyboard action
@@ -78183,57 +78218,30 @@
<h4 id=focus-management><span class=secno>8.4.2 </span>Focus management</h4>
- <p>An element is <dfn id=focusable>focusable</dfn> if the user agent's default
- behavior allows it to be focusable or if the element has its
- <a href=#specially-focusable>tabindex focus flag</a> set, but only if the element is
- either <a href=#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>, and only if
- neither the element nor any of its ancestors are
- <a href=#inert>inert</a>.</p>
+ <p>An element is <dfn id=focusable>focusable</dfn> if all of the following conditions are met:</p>
- <p>User agents should make the following elements
- <a href=#focusable>focusable</a> as part of their default behavior, unless
- platform conventions dictate otherwise:</p>
+ <ul><li>The element's <a href=#specially-focusable>tabindex focus flag</a> is set.</li>
- <ul><li><code><a href=#the-a-element>a</a></code> elements that have an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute</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>
- <li><code><a href=#the-link-element>link</a></code> elements that have an <code title=attr-link-href><a href=#attr-link-href>href</a></code> attribute</li>
+ <li>Neither the element nor any of its ancestors are <a href=#inert>inert</a>.</li>
- <li><code><a href=#the-button-element>button</a></code> elements that are not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>
+ <li>The element is not <a href=#concept-element-disabled title=concept-element-disabled>disabled</a>.</li>
- <li><code><a href=#the-input-element>input</a></code> elements whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute are not in the
- <a href="#hidden-state-(type=hidden)" title=attr-input-type-hidden>Hidden</a> state and that
- are not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>
-
- <li><code><a href=#the-select-element>select</a></code> elements that are not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>
-
- <li><code><a href=#the-textarea-element>textarea</a></code> elements that are not <a href=#concept-fe-disabled title=concept-fe-disabled>disabled</a></li>
-
- <li><code><a href=#the-command-element>command</a></code> elements that do not have a <code title=attr-command-disabled><a href=#attr-command-disabled>disabled</a></code> attribute</li>
-
- <li>Elements with a <code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code>
- attribute set, if that would enable the user agent to allow the
- user to begin a drag operations for those elements without the use
- of a pointing device</li>
-
- <li><a href=#editing-host title="editing host">Editing hosts</a></li>
-
- <li><a href=#browsing-context-container title="browsing context container">Browsing context
- containers</a></li> <!-- like <iframe>s -->
-
</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 <span title="media elements">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 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. (A
+ 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>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
+ <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>
<p>Notwithstanding the above, user agents may make <em>any</em> element or part of an element
Modified: source
===================================================================
--- source 2012-11-01 22:18:43 UTC (rev 7497)
+++ source 2012-11-01 23:07:03 UTC (rev 7498)
@@ -73177,8 +73177,52 @@
</div>
+ <h3>Disabled elements</h3>
+ <p>An element is said to be <dfn title="concept-element-disabled">actually disabled</dfn> if it
+ falls into one of the following categories:</p>
+ <ul>
+
+ <li><code>button</code> elements that are <span
+ title="concept-fe-disabled">disabled</span></li>
+
+ <li><code>input</code> elements that are <span
+ title="concept-fe-disabled">disabled</span></li>
+
+ <li><code>select</code> elements that are <span
+ title="concept-fe-disabled">disabled</span></li>
+
+ <li><code>textarea</code> elements that are <span
+ title="concept-fe-disabled">disabled</span></li>
+
+ <li><code>optgroup</code> elements that have a <code
+ title="attr-optgroup-disabled">disabled</code> attribute</li>
+
+ <li><code>option</code> elements that are <span
+ title="concept-option-disabled">disabled</span></li>
+
+ <li><code>command</code> elements that have a <code
+ title="attr-command-disabled">disabled</code> attribute</li>
+
+ <li><code>li</code> elements that are children of
+ <code>menu</code> elements, and that have a child element that
+ defines a <span title="concept-command">command</span>, if the
+ first such element's <span
+ title="command-facet-DisabledState">Disabled State</span> facet
+ is true (disabled)</li>
+
+ <li><code>fieldset</code> elements that have a <code
+ title="attr-fieldset-disabled">disabled</code> attribute</li>
+
+ </ul>
+
+ <p class="note">This definition is used to determine what elements can be <span title="tabindex
+ focus flag">focused</span> and which elements match the <code
+ title="selector-disabled">:disabled</code> pseudo-class.</p>
+
+
+
<div class="impl">
<h3 id="selectors">Matching HTML elements using selectors</h3>
@@ -73461,45 +73505,9 @@
<dd>
- <p>The <code title="selector-disabled">:disabled</code>
- pseudo-class must match any element falling into one of the
- following categories:</p>
+ <p>The <code title="selector-disabled">:disabled</code> pseudo-class must match any element that
+ is <span title="concept-element-disabled">actually disabled</span>.</p>
- <ul>
-
- <li><code>button</code> elements that are <span
- title="concept-fe-disabled">disabled</span></li>
-
- <li><code>input</code> elements that are <span
- title="concept-fe-disabled">disabled</span></li>
-
- <li><code>select</code> elements that are <span
- title="concept-fe-disabled">disabled</span></li>
-
- <li><code>textarea</code> elements that are <span
- title="concept-fe-disabled">disabled</span></li>
-
- <li><code>optgroup</code> elements that have a <code
- title="attr-optgroup-disabled">disabled</code> attribute</li>
-
- <li><code>option</code> elements that are <span
- title="concept-option-disabled">disabled</span></li>
-
- <li><code>command</code> elements that have a <code
- title="attr-command-disabled">disabled</code> attribute</li>
-
- <li><code>li</code> elements that are children of
- <code>menu</code> elements, and that have a child element that
- defines a <span title="concept-command">command</span>, if the
- first such element's <span
- title="command-facet-DisabledState">Disabled State</span> facet
- is true (disabled)</li>
-
- <li><code>fieldset</code> elements that have a <code
- title="attr-fieldset-disabled">disabled</code> attribute</li>
-
- </ul>
-
</dd>
@@ -91302,10 +91310,9 @@
<div class="impl">
- <p>Each element has a <dfn id="specially-focusable">tabindex focus
- flag</dfn>. This flag is a factor that contributes towards
- determining whether an element is <span>focusable</span>, as
- described in the next section.</p>
+ <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>
<p>If the attribute is specified, it must be parsed using the
<span>rules for parsing integers</span>. The attribute's values have
@@ -91323,6 +91330,41 @@
so, whether the element can be reached using sequential focus
navigation, and if so, what its 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>
+
+ <ul>
+
+ <li><code>a</code> elements that have an <code
+ title="attr-hyperlink-href">href</code> attribute</li>
+
+ <li><code>link</code> elements that have an <code
+ title="attr-link-href">href</code> attribute</li>
+
+ <li><code>button</code> elements</li>
+
+ <li><code>input</code> elements whose <code
+ title="attr-input-type">type</code> attribute are not in the
+ <span title="attr-input-type-hidden">Hidden</span> state</li>
+
+ <li><code>select</code> elements</li>
+
+ <li><code>textarea</code> elements</li>
+
+ <li><code>command</code> elements</li>
+
+ <li>Elements with a <code title="attr-draggable">draggable</code>
+ attribute set, if that would enable the user agent to allow the
+ user to begin a drag operations for those elements without the use
+ of a pointing device</li>
+
+ <li><span title="editing host">Editing hosts</span></li>
+
+ <li><span title="browsing context container">Browsing context
+ containers</span></li> <!-- like <iframe>s -->
+
+ </ul>
+
<p class="note">One valid reason to ignore the platform
conventions and always allow an element to be focused (by setting
its <span>tabindex focus flag</span>) would be if the user's only
@@ -91434,68 +91476,34 @@
<h4 id="focus-management">Focus management</h4>
- <p>An element is <dfn>focusable</dfn> if the user agent's default
- behavior allows it to be focusable or if the element has its
- <span>tabindex focus flag</span> set, but only if 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>, and only if
- neither the element nor any of its ancestors are
- <span>inert</span>.</p>
+ <p>An element is <dfn>focusable</dfn> if all of the following conditions are met:</p>
- <p>User agents should make the following elements
- <span>focusable</span> as part of their default behavior, unless
- platform conventions dictate otherwise:</p>
-
<ul>
- <li><code>a</code> elements that have an <code
- title="attr-hyperlink-href">href</code> attribute</li>
+ <li>The element's <span>tabindex focus flag</span> is set.</li>
- <li><code>link</code> elements that have an <code
- title="attr-link-href">href</code> attribute</li>
+ <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><code>button</code> elements that are not <span
- title="concept-fe-disabled">disabled</span></li>
+ <li>Neither the element nor any of its ancestors are <span>inert</span>.</li>
- <li><code>input</code> elements whose <code
- title="attr-input-type">type</code> attribute are not in the
- <span title="attr-input-type-hidden">Hidden</span> state and that
- are not <span title="concept-fe-disabled">disabled</span></li>
+ <li>The element is not <span title="concept-element-disabled">disabled</span>.</li>
- <li><code>select</code> elements that are not <span
- title="concept-fe-disabled">disabled</span></li>
-
- <li><code>textarea</code> elements that are not <span
- title="concept-fe-disabled">disabled</span></li>
-
- <li><code>command</code> elements that do not have a <code
- title="attr-command-disabled">disabled</code> attribute</li>
-
- <li>Elements with a <code title="attr-draggable">draggable</code>
- attribute set, if that would enable the user agent to allow the
- user to begin a drag operations for those elements without the use
- of a pointing device</li>
-
- <li><span title="editing host">Editing hosts</span></li>
-
- <li><span title="browsing context container">Browsing context
- containers</span></li> <!-- like <iframe>s -->
-
</ul>
<p>In addition, each shape that is generated for an <code>area</code> element, any
user-agent-provided interface components of <span title="media elements">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 title="attr-input-type-number"><input type=number></code> spin
- control), should be <span>focusable</span>, unless platform conventions dictate otherwise. (A
+ control), should be <span>focusable</span>, unless platform conventions dictate otherwise or
+ unless their corresponding element is <span title="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>
- <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
+ <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>Notwithstanding the above, user agents may make <em>any</em> element or part of an element
More information about the Commit-Watchers
mailing list