Skip to content
Permalink
Browse files

[gow] (2) Make <canvas> descendants focusable to enable keyboard acce…

…ssibility.

Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=7404

git-svn-id: http://svn.whatwg.org/webapps@3928 340c8d12-0b0e-0410-8428-c7bf67bfef74
  • Loading branch information...
Hixie committed Sep 21, 2009
1 parent bb6d305 commit fdbdd6bac10ca8843b3296b2f89f4fa2348d2d09
Showing with 69 additions and 43 deletions.
  1. +34 −22 index
  2. +35 −21 source
56 index
Object <a href=#dom-canvas-getcontext title=dom-canvas-getContext>getContext</a>(in DOMString contextId);
};</pre>
</dd>
</dl><p>The <code><a href=#the-canvas-element>canvas</a></code> element <a href=#represents>represents</a> a
</dl><p>The <code><a href=#the-canvas-element>canvas</a></code> element provides scripts with a
resolution-dependent bitmap canvas, which can be used for rendering
graphs, game graphics, or other visual images on the fly.</p>


<p>In interactive visual media, if <a href=#concept-n-script title=concept-n-script>scripting is enabled</a> for the
<code><a href=#the-canvas-element>canvas</a></code> element, the <code><a href=#the-canvas-element>canvas</a></code> element
represents an embedded element with a dynamically created image.</p>
<a href=#represents>represents</a> <a href=#embedded-content>embedded content</a> consisting of
a dynamically created image.</p>

<p>In non-interactive, static, visual media, if the
<code><a href=#the-canvas-element>canvas</a></code> element has been previously painted on (e.g. if
the page was viewed in an interactive visual medium and is now being
printed, or if some script that ran during the page layout process
painted on the element), then the <code><a href=#the-canvas-element>canvas</a></code> element
represents <a href=#embedded-content>embedded content</a> with the current image and
size. Otherwise, the element represents its <a href=#fallback-content>fallback
content</a> instead.</p>
<a href=#represents>represents</a> <a href=#embedded-content>embedded content</a> with the
current image and size. Otherwise, the element represents its
<a href=#fallback-content>fallback content</a> instead.</p>

<p>In non-visual media, and in visual media if <a href=#concept-n-noscript title=concept-n-noscript>scripting is disabled</a> for the
<code><a href=#the-canvas-element>canvas</a></code> element, the <code><a href=#the-canvas-element>canvas</a></code> element
represents its <a href=#fallback-content>fallback content</a> instead.</p>
<a href=#represents>represents</a> its <a href=#fallback-content>fallback content</a>
instead.</p>

<!-- 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>). This allows authors to make an interactive canvas
keyboard-focusable: authors should have a one-to-one mapping of
interactive regions to focusable elements in the <a href=#fallback-content>fallback
content</a>.</p>

<p>The <code><a href=#the-canvas-element>canvas</a></code> element has two attributes to control the
size of the coordinate space: <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
to a non-mouse activation (e.g. hitting the "enter" key while the
element is focused).</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 attribute. If the
attribute is not present, or parsing its value returns an error,
then the IDL attribute must return 0 for elements that are focusable
and &minus;1 for elements that are not focusable.</p>

</div>

<div class=impl>

<h4 id=focus-management><span class=secno>7.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 is
<a href=#specially-focusable>specially focusable</a>, but only if the element is
<a href=#being-rendered>being rendered</a>.</p>
<a href=#specially-focusable>specially focusable</a>, 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>.</p>

<p>User agents should make the following elements
<a href=#focusable>focusable</a>, unless platform conventions dictate
element can correspond to multiple shapes, since image maps can be
reused with multiple images on a page.)</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 attribute. If the
attribute is not present, or parsing its value returns an error,
then the IDL attribute must return 0 for elements that are focusable
and &minus;1 for elements that are not focusable.</p>

</div>


<div class=impl>

<h4 id=focus-management><span class=secno>7.4.2 </span>Focus management</h4>

<p>The <dfn id=focusing-steps>focusing steps</dfn> are as follows:</p>
<hr><p>The <dfn id=focusing-steps>focusing steps</dfn> are as follows:</p>

<ol><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
56 source
</dd>
</dl>

<p>The <code>canvas</code> element <span>represents</span> a
<p>The <code>canvas</code> element provides scripts with a
resolution-dependent bitmap canvas, which can be used for rendering
graphs, game graphics, or other visual images on the fly.</p>

<p>In interactive visual media, if <span
title="concept-n-script">scripting is enabled</span> for the
<code>canvas</code> element, the <code>canvas</code> element
represents an embedded element with a dynamically created image.</p>
<span>represents</span> <span>embedded content</span> consisting of
a dynamically created image.</p>

<p>In non-interactive, static, visual media, if the
<code>canvas</code> element has been previously painted on (e.g. if
the page was viewed in an interactive visual medium and is now being
printed, or if some script that ran during the page layout process
painted on the element), then the <code>canvas</code> element
represents <span>embedded content</span> with the current image and
size. Otherwise, the element represents its <span>fallback
content</span> instead.</p>
<span>represents</span> <span>embedded content</span> with the
current image and size. Otherwise, the element represents its
<span>fallback content</span> instead.</p>

<p>In non-visual media, and in visual media if <span
title="concept-n-noscript">scripting is disabled</span> for the
<code>canvas</code> element, the <code>canvas</code> element
represents its <span>fallback content</span> instead.</p>
<span>represents</span> its <span>fallback content</span>
instead.</p>

<!-- 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>). This allows authors to make an interactive canvas
keyboard-focusable: authors should have a one-to-one mapping of
interactive regions to focusable elements in the <span>fallback
content</span>.</p>

<p>The <code>canvas</code> element has two attributes to control the
size of the coordinate space: <dfn
to a non-mouse activation (e.g. hitting the "enter" key while the
element is focused).</p>

<p>The <dfn title="dom-tabIndex"><code>tabIndex</code></dfn> IDL
attribute must <span>reflect</span> the value of the <code
title="attr-tabindex">tabindex</code> content attribute. If the
attribute is not present, or parsing its value returns an error,
then the IDL attribute must return 0 for elements that are focusable
and &#x2212;1 for elements that are not focusable.</p>

</div>

<div class="impl">

<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 is
<span>specially focusable</span>, but only if the element is
<span>being rendered</span>.</p>
<span>specially focusable</span>, 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>.</p>

<p>User agents should make the following elements
<span>focusable</span>, unless platform conventions dictate
element can correspond to multiple shapes, since image maps can be
reused with multiple images on a page.)</p>

<p>The <dfn title="dom-tabIndex"><code>tabIndex</code></dfn> IDL
attribute must <span>reflect</span> the value of the <code
title="attr-tabindex">tabindex</code> content attribute. If the
attribute is not present, or parsing its value returns an error,
then the IDL attribute must return 0 for elements that are focusable
and &#x2212;1 for elements that are not focusable.</p>

</div>


<div class="impl">

<h4 id="focus-management">Focus management</h4>
<hr>

<p>The <dfn>focusing steps</dfn> are as follows:</p>

0 comments on commit fdbdd6b

Please sign in to comment.
You can’t perform that action at this time.