HTML Standard Tracker

Diff (omit for latest revision)
Filter

Short URL: http://html5.org/r/3065

File a bug

SVNBugCommentTime (UTC)
3065Define accesskey='' and related magic to try to Solve the Problem.2009-05-03 01:55
Index: source
===================================================================
--- source	(revision 3064)
+++ source	(revision 3065)
@@ -8022,6 +8022,8 @@
            attribute long <span title="dom-tabindex">tabIndex</span>;
   void <span title="dom-focus">focus</span>();
   void <span title="dom-blur">blur</span>();
+           attribute DOMString <span title="dom-accessKey">accessKey</span>;
+  readonly attribute DOMString <span title="dom-accessKeyLabel">accessKeyLabel</span>;
            attribute boolean <span title="dom-draggable">draggable</span>;
            attribute DOMString <span title="dom-contentEditable">contentEditable</span>;
   readonly attribute boolean <span title="dom-isContentEditable">isContentEditable</span>;
@@ -8111,6 +8113,7 @@
   defined in this specification)</span>:</p>
 
   <ul class="brief">
+   <li><code title="attr-accesskey">accesskey</code></li>
    <li><code title="attr-class">class</code></li>
    <li><code title="attr-contenteditable">contenteditable</code></li>
    <li><code title="attr-contextmenu">contextmenu</code></li>
@@ -44358,6 +44361,11 @@
    represents the action. A command might not have an Icon.</dd> <!--
    changing base URLs might change the icon -->
 
+   <dt><dfn title="command-facet-AccessKey">Access Key</dfn></dt>
+
+   <dd>A key combination selected by the user agent that triggers the
+   command. A command might not have an Access Key.</dd>
+
    <dt><dfn title="command-facet-HiddenState">Hidden State</dfn></dt>
 
    <dd>Whether the command is hidden or not (basically, whether it
@@ -44434,6 +44442,14 @@
 
    </dd>
 
+   <dt><var title="">element</var> . <code title="dom-accessKeyLabel">accessKeyLabel</code></dt>
+
+   <dd>
+
+    <p>Exposes the <span title="command-facet-AccessKey">Access Key</span> facet of the command.</p>
+
+   </dd>
+
    <dt><var title="">element</var> . <code title="dom-hidden">hidden</code></dt>
 
    <dd>
@@ -44541,10 +44557,12 @@
   <p class="note">The <span title="command-facet-ID">ID</span> facet
   is exposed by the the <code title="dom-id">id</code> DOM attribute,
   the <span title="command-facet-Hint">Hint</span> facet is exposed by
-  the <code title="dom-title">title</code> DOM attribute, and the
-  <span title="command-facet-HiddenState">Hidden State</span> facet is
-  exposed by the <code title="dom-hidden">hidden</code> DOM
-  attribute.</p>
+  the <code title="dom-title">title</code> DOM attribute, the <span
+  title="command-facet-AccessKey">AccessKey</span> facet is exposed by
+  the <code title="dom-accessKeyLabel">accessKeyLabel</code> DOM
+  attribute, and the <span title="command-facet-HiddenState">Hidden
+  State</span> facet is exposed by the <code
+  title="dom-hidden">hidden</code> DOM attribute.</p>
 
   </div>
 
@@ -44572,8 +44590,17 @@
 
   </div>
 
+  <hr>
 
+  <p>User agents may expose the <span
+  title="concept-command">commands</span> whose <span
+  title="command-facet-HiddenState">Hidden State</span> facet is false
+  (visible), e.g. in the user agent's menu bar. User agents are
+  encouraged to do this especially for commands that have <span
+  title="command-facet-AccessKey">Access Keys</span>, as a way to
+  advertise those keys to the user.</p>
 
+
   <div class="impl">
 
   <h5><dfn title="a-command">Using the <code>a</code> element to define a command</dfn></h5>
@@ -44608,6 +44635,10 @@
   successful. Otherwise, there is no <span
   title="command-facet-Icon">Icon</span> for the command.</p>
 
+  <p>The <span title="command-facet-AccessKey">AccessKey</span> of the
+  command is the element's <span>assigned access key</span>, if
+  any.</p>
+
   <p>The <span title="command-facet-HiddenState">Hidden State</span>
   of the command is true (hidden) if the element has a <code
   title="attr-hidden">hidden</code> attribute, and false
@@ -44635,6 +44666,7 @@
   title="command-facet-Label">Label</span>, <span
   title="command-facet-Hint">Hint</span>, <span
   title="command-facet-Icon">Icon</span>, <span
+  title="command-facet-AccessKey">Access Key</span>, <span
   title="command-facet-HiddenState">Hidden State</span>, <span
   title="command-facet-CheckedState">Checked State</span>, and <span
   title="command-facet-Action">Action</span> facets of the command are
@@ -44684,7 +44716,7 @@
   control</span>, the <code>textContent</code> of the first
   <code>label</code> element in <span>tree order</span> whose
   <span>labeled control</span> is the element in question is the <span
-  title="command-facet-Label">Label</span> (in DOM terms, this the
+  title="command-facet-Label">Label</span> (in DOM terms, this is the
   string given by <code><var
   title="">element</var>.labels[0].textContent</code>).  Otherwise,
   the value of the <code title="attr-input-value">value</code>
@@ -44701,6 +44733,10 @@
   <p>There is no <span title="command-facet-Icon">Icon</span> for the
   command.</p>
 
+  <p>The <span title="command-facet-AccessKey">AccessKey</span> of the
+  command is the element's <span>assigned access key</span>, if
+  any.</p>
+
   <p>The <span title="command-facet-HiddenState">Hidden State</span>
   of the command is true (hidden) if the element has a <code
   title="attr-hidden">hidden</code> attribute, and false
@@ -44758,6 +44794,10 @@
   <p>There is no <span title="command-facet-Icon">Icon</span> for the
   command.</p>
 
+  <p>The <span title="command-facet-AccessKey">AccessKey</span> of the
+  command is the element's <span>assigned access key</span>, if
+  any.</p>
+
   <p>The <span title="command-facet-HiddenState">Hidden State</span>
   of the command is true (hidden) if the element has a <code
   title="attr-hidden">hidden</code> attribute, and false
@@ -44821,6 +44861,10 @@
   successful. Otherwise, there is no <span
   title="command-facet-Icon">Icon</span> for the command.</p>
 
+  <p>The <span title="command-facet-AccessKey">AccessKey</span> of the
+  command is the element's <span>assigned access key</span>, if
+  any.</p>
+
   <p>The <span title="command-facet-HiddenState">Hidden State</span>
   of the command is true (hidden) if the element has a <code
   title="attr-hidden">hidden</code> attribute, and false
@@ -44880,6 +44924,10 @@
   appropriate for the <code>bb</code> element's <code
   title="attr-bb-type">type</code> attribute's state.</p>
 
+  <p>The <span title="command-facet-AccessKey">AccessKey</span> of the
+  command is the element's <span>assigned access key</span>, if
+  any.</p>
+
   <p>The <span title="command-facet-HiddenState">Hidden State</span>
   facet of the command is true (hidden) if the <code>bb</code>
   element's <code title="attr-bb-type">type</code> attribute's state
@@ -44900,6 +44948,72 @@
   element's <code title="attr-bb-type">type</code> attribute's
   state.</p>
 
+
+  <h5><dfn title="accesskey-command">Using the <code title="attr-accesskey">accesskey</code> attribute to define a command</dfn></h5>
+
+  <p>An element that is <span>focusable</span>, has an <span>assigned
+  access key</span>, and is neither an <code>a</code> element with an
+  <code title="attr-a-href">href</code> attribute, a
+  <code>button</code> element, an <code>input</code> element whose
+  attribute is in one of the <span
+  title="attr-input-type-submit">Submit Button</span>, <span
+  title="attr-input-type-reset">Reset Button</span>, <span
+  title="attr-input-type-button">Button</span>, <span
+  title="attr-input-type-radio">Radio Button</span>, or <span
+  title="attr-input-type-checkbox">Checkbox</span> states, an
+  <code>option</code> element with an ancestor <code>select</code>
+  element and either no <code title="attr-option-value">value</code>
+  attribute or a <code title="attr-option-value">value</code>
+  attribute that is not the empty string, a <code>command</code>
+  element, nor a <code>bb</code> element, <span
+  title="concept-command">defines a command</span>.</p>
+
+  <p>The <span title="command-facet-Type">Type</span> of the command
+  is "command".</p>
+
+  <p>The <span title="command-facet-ID">ID</span> of the command is
+  the value of the <code title="attr-id">id</code> attribute of the
+  element, if the attribute is present and not empty. Otherwise the
+  command is an <span>anonymous command</span>.</p>
+
+  <p>The <span title="command-facet-Label">Label</span> of the command
+  depends on the element. If the element is a <span>labeled
+  control</span>, the <code>textContent</code> of the first
+  <code>label</code> element in <span>tree order</span> whose
+  <span>labeled control</span> is the element in question is the <span
+  title="command-facet-Label">Label</span> (in DOM terms, this is the
+  string given by <code><var
+  title="">element</var>.labels[0].textContent</code>). Otherwise, the
+  <span title="command-facet-Label">Label</span> is the
+  <code>textContent</code> of the element itself.</p>
+
+  <p>The <span title="command-facet-Hint">Hint</span> of the command
+  is the value of the <code title="attr-title">title</code> attribute
+  of the element. If the attribute is not present, the <span
+  title="command-facet-Hint">Hint</span> is the empty string.</p>
+
+  <p>There is no <span title="command-facet-Icon">Icon</span> for the
+  command.</p>
+
+  <p>The <span title="command-facet-AccessKey">AccessKey</span> of the
+  command is the element's <span>assigned access key</span>.</p>
+
+  <p>The <span title="command-facet-HiddenState">Hidden State</span>
+  of the command is true (hidden) if the element has a <code
+  title="attr-hidden">hidden</code> attribute, and false
+  otherwise.</p>
+
+  <p>The <span title="command-facet-DisabledState">Disabled
+  State</span> facet of the command is always false. (The command is
+  always enabled.)</p>
+
+  <p>The <span title="command-facet-CheckedState">Checked State</span>
+  of the command is always false. (The command is never checked.)</p>
+
+  <p>The <span title="command-facet-Action">Action</span> of the
+  command is to run the <span>focusing steps</span> for the
+  element.</p>
+
   </div>
 
 
@@ -56129,6 +56243,8 @@
   and submit respectively. Only their presentation to the user
   changes.</p>
 
+  <div class="impl">
+
   <!-- XXX might be worth disabling user interaction event submission
   in hidden areas? e.g. make onmousemove and onclick and form controls
   not respond to input? -->
@@ -56137,8 +56253,10 @@
   attribute must <span>reflect</span> the content attribute of the
   same name.</p>
 
+  </div>
 
 
+
   <h3>Activation</h3>
 
   <!-- v2 idea: HTMLImageElement.click(x, y); or clickPoint(), if
@@ -56672,6 +56790,168 @@
 
 
 
+
+
+  <h3>The <dfn title="attr-accesskey"><code>accesskey</code></dfn> attribute</h3>
+
+  <p>All elements may have the <code
+  title="attr-accesskey">accesskey</code> content attribute set. The
+  <code title="attr-accesskey">accesskey</code> attribute's value is
+  used by the user agent as a guide for creating a keyboard shortcut
+  that activates or focuses the element.</p>
+
+  <p>If specified, the value must be an <span>ordered set of unique
+  space-separated tokens</span>, each of which must be exactly one
+  Unicode code point in length.</p>
+
+  <div class="impl">
+
+  <p>An element's <dfn>assigned access key</dfn> is a key combination
+  derived from the element's <code
+  title="attr-accesskey">accesskey</code> content attribute as
+  follows:</p>
+
+  <ol>
+
+   <li><p>If the element has no <code
+   title="attr-accesskey">accesskey</code> attribute, then the element
+   has no <span>assigned access key</span>.</p></li>
+
+   <li><p>Otherwise, the user agent must must <span title="split a
+   string on spaces">split the attribute's value on spaces</span>, and
+   let <var title="">keys</var> be the resulting tokens.</p></li>
+
+   <li>
+
+    <p>For each value in <var title="">keys</var> in turn, in the
+    order the tokens appeared in the attribute's value, run the
+    following substeps:</p>
+
+    <ol>
+
+     <li><p>If the value is not a string exactly one Unicode code
+     point in length, then skip the remainder of these steps for this
+     value.</p></li>
+
+     <li><p>If the value does not correspond to a key on the system's
+     keyboard, then skip the remainder of these steps for this
+     value.</p></li>
+
+     <li><p>If the user agent can find a combination of modifier keys
+     that, with the key that corresponds to the value given in the
+     attribute, can be used as a shortcut key, then the user agent may
+     assign that combination of keys as the element's <span>assigned
+     access key</span> and abort these steps.</p></li>
+
+    </ol>
+
+   </li>
+
+   <li><p>If none of the values (if any) result in an access key being
+   assigned, then the element has no <span>assigned access
+   key</span>.</p></li>
+
+  </ol>
+
+  <p>Once a user agent has selected and assigned an access key for an
+  element, the user agent should not change the element's
+  <span>assigned access key</span> unless the <code
+  title="attr-accesskey">accesskey</code> content attribute is changed
+  or the element is moved to another <code>Document</code>.</p>
+
+  <p>When the user presses the key combination corresponding to the
+  <span>assigned access key</span> for an element, if the element
+  <span title="concept-command">defines a command</span>, the user
+  agent must trigger the <span
+  title="command-facet-Action">Action</span> of the command.</p>
+
+  <p>User agents may expose elements that have an <code
+  title="attr-accesskey">accesskey</code> attribute in other ways as
+  well, e.g. in a menu displayed in response to a specific key
+  combination.</p>
+
+  </div>
+
+  <div class="impl">
+
+  <p>The <dfn title="dom-accessKey"><code>accessKey</code></dfn> DOM
+  attribute must <span>reflect</span> the <code
+  title="attr-accesskey">accesskey</code> content attribute.</p>
+
+  <p>The <dfn
+  title="dom-accessKeyLabel"><code>accessKeyLabel</code></dfn> DOM
+  attribute must return a string that represents the element's
+  <span>assigned access key</span>, if any. If the element does not
+  have one, then the DOM attribute must return the empty string.</p>
+
+  </div>
+
+  <div class="example">
+
+   <p>In the following example, a variety of links are given with
+   access keys so that keyboard users familiar with the site can
+   more quickly navigate to the relevant pages:</p>
+
+   <pre>&lt;nav>
+ &lt;p>
+  &lt;a title="Consortium Activities" accesskey="A" href="/Consortium/activities">Activities&lt;/a> |
+  &lt;a title="Technical Reports and Recommendations" accesskey="T" href="/TR/">Technical Reports&lt;/a> |
+  &lt;a title="Alphabetical Site Index" accesskey="S" href="/Consortium/siteindex">Site Index&lt;/a> |
+  &lt;a title="About This Site" accesskey="B" href="/Consortium/">About Consortium&lt;/a> |
+  &lt;a title="Contact Consortium" accesskey="C" href="/Consortium/contact">Contact&lt;/a>
+ &lt;/p>
+&lt;/nav></pre>
+
+  </div>
+
+  <div class="example">
+
+   <p>In the following example, the search field is given two possible
+   access keys, "s" and "0" (in that order). A user agent on a device
+   with a full keyboard might pick
+   <kbd><kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>S</kbd></kbd> as the
+   shortcut key, while a user agent on a small device with just a
+   numeric keypad might pick just the plain unadorned key
+   <kbd><kbd>0</kbd></kbd>:</p>
+
+   <pre>&lt;form action="/search">
+ &lt;label>Search: &lt;input type="search" name="q" accesskey="s 0">&lt;/label>
+ &lt;input type="submit">
+&lt;/form></pre>
+
+  </div>
+
+  <div class="example">
+
+   <p>In the following example, a button has possible access keys
+   described. A script then tries to update the button's label to
+   advertise the key combination the user agent selected.</p>
+
+   <pre>&lt;input type=submit accesskey="N @ 1" value="Compose">
+...
+&lt;script>
+ function labelButton(button) {
+   if (button.accessKeyLabel)
+     button.value += ' (' + button.accessKeyLabel + ')';
+ }
+ var inputs = document.getElementsByTagName('input');
+ for (var i = 0; i &lt; inputs.length; i += 1) {
+   if (inputs[i].type == "submit")
+     labelButton(inputs[i]);
+ }
+&lt;/script></pre>
+
+   <p>On one user agent, the button's label might become
+   "<samp>Compose (&#x2318;N)</samp>". On another, it might become
+   "<samp>Compose (Alt+&#x21E7;+1)</samp>". If the user agent doesn't
+   assign a key, it will be just "<samp>Compose</samp>". The exact
+   string depends on what the <span>assigned access key</span> is, and
+   on how the user agent represents that key combination.</p>
+
+  </div>
+
+
+
   <h3 id="selection">The text selection APIs</h3>
 
   <p>Every <span>browsing context</span> has <dfn title="the

|