Short URL: http://html5.org/r/3065
| SVN | Bug | Comment | Time (UTC) |
|---|---|---|---|
| 3065 | Define 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><nav>
+ <p>
+ <a title="Consortium Activities" accesskey="A" href="/Consortium/activities">Activities</a> |
+ <a title="Technical Reports and Recommendations" accesskey="T" href="/TR/">Technical Reports</a> |
+ <a title="Alphabetical Site Index" accesskey="S" href="/Consortium/siteindex">Site Index</a> |
+ <a title="About This Site" accesskey="B" href="/Consortium/">About Consortium</a> |
+ <a title="Contact Consortium" accesskey="C" href="/Consortium/contact">Contact</a>
+ </p>
+</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><form action="/search">
+ <label>Search: <input type="search" name="q" accesskey="s 0"></label>
+ <input type="submit">
+</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><input type=submit accesskey="N @ 1" value="Compose">
+...
+<script>
+ function labelButton(button) {
+ if (button.accessKeyLabel)
+ button.value += ' (' + button.accessKeyLabel + ')';
+ }
+ var inputs = document.getElementsByTagName('input');
+ for (var i = 0; i < inputs.length; i += 1) {
+ if (inputs[i].type == "submit")
+ labelButton(inputs[i]);
+ }
+</script></pre>
+
+ <p>On one user agent, the button's label might become
+ "<samp>Compose (⌘N)</samp>". On another, it might become
+ "<samp>Compose (Alt+⇧+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