[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 git-svn-id: http://svn.whatwg.org/webapps@7498 340c8d12-0b0e-0410-8428-c7bf67bfef74
whatwg · Nov 1, 2012 · cc3f77a · cc3f77a
1 parent cb4fa39
commit cc3f77a
Show file tree

Hide file tree

Showing 3 changed files with 264 additions and 240 deletions.
diff --git a/complete.html b/complete.html
@@ -824,10 +824,11 @@ <h2 class="no-num no-toc">Living Standard &mdash; Last Updated 1 November 2012</
      <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 @@ <h4 id=footnotes><span class=secno>4.13.5 </span>Footnotes</h4>
   </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 @@ <h4 id=case-sensitivity><span class=secno>4.14.1 </span>Case-sensitivity</h4>
   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,33 +62866,10 @@ <h4 id=pseudo-classes><span class=secno>4.14.2 </span>Pseudo-classes</h4>
 
    <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>
-
-    <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>
+    <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></dd>
+   </dd>
 
 
    <dt><dfn id=selector-checked title=selector-checked><code>:checked</code></dfn></dt>
@@ -78069,10 +78077,9 @@ <h4 id=sequential-focus-navigation-and-the-tabindex-attribute><span class=secno>
 
   <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 @@ <h4 id=sequential-focus-navigation-and-the-tabindex-attribute><span class=secno>
     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=sequential-focus-navigation-and-the-tabindex-attribute><span class=secno>
 
   <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>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><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 that are not <a href=#concept-fe-disabled title=concept-fe-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>
+  <p>An element is <dfn id=focusable>focusable</dfn> if all of the following conditions are met:</p>
 
-   <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>
+  <ul><li>The element's <a href=#specially-focusable>tabindex focus flag</a> is set.</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>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><a href=#editing-host title="editing host">Editing hosts</a></li>
+   <li>Neither the element nor any of its ancestors are <a href=#inert>inert</a>.</li>
 
-   <li><a href=#browsing-context-container title="browsing context container">Browsing context
-   containers</a></li> <!-- like <iframe>s -->
+   <li>The element is not <a href=#concept-element-disabled title=concept-element-disabled>disabled</a>.</li>
 
   </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)">&lt;input type=number&gt;</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