W3C home > Mailing lists > Public > www-svg@w3.org > June 2010

how to implement activate** as an author?

From: Jonathan Chetwynd <j.chetwynd@btinternet.com>
Date: Wed, 16 Jun 2010 12:02:59 +0100
Message-Id: <D5F769A4-CD5D-4EBE-BC0D-61F2DB3B109B@btinternet.com>
To: www-svg <www-svg@w3.org>
Cc: Charles McCathieNevile <chaals@opera.com>
How to implement activate** as an author?
possible testcase attached

When considering navigating an svg menu from the user's perspective:


when using a mouse:	

	mouseover produces highlight as indicator		ie orange in testcase
	click raises button							ie red
	
when using a keyboard:

	tab key produces highlight as indicator			ie orange
	enter key raises button						ie red

--

To implement this as author:


	mouseover uses begin="mouseover" end="mouseout"
	click uses begin="focus" end="focusout"

	tab-key uses begin="focus" end="focusout"
	enter key uses begin="activate" end=?

This immediately raises confusion, because the keyboard user expects  
the tab-key to have an effect similar to mouseover, but the author  
cannot implement this, at least not in this way.

Has activate been implemented by any UA?

does someone have a clearer example of the intended implementation,  
that is easy to understand from a user and author perspective?

regards

Jonathan Chetwynd



**the August 2000 Accessibility Features of SVG  states:
"Good authoring practice will normally use the focusin, focusout and  
activate events rather than the device specific events for gaining and  
losing the focus on an element or activating the element. "
http://www.w3.org/TR/SVG-access/

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
 >
<style type="text/css" id="css"><![CDATA[
.inputText {cursor:text;  fill:#3e3;}
]]></style>

	<title>activate test: click on one box, then the other, the first  
should change back, check with mouseover, and keyboard navigation tab  
and enter keys</title>

<rect x="12" y="9" id="chat" width="185" height="22"  rx="4" ry="4"  
class="inputText" pointer-events="visible">
<set attributeName="fill"  to="orange" begin="mouseover"  
end="mouseout" />
<set attributeName="fill" to="red" begin="focus" end="focusout" />
</rect>

<rect x="280" y="275" id="chat2" width="185" height="18" rx="4" ry="4"  
class="inputText" pointer-events="visible">

<set attributeName="fill"  to="orange" begin="focus" end="focusout" />
<set attributeName="fill"  to="red" begin="activate" end="focusout"  />
</rect>

</svg>
Received on Wednesday, 16 June 2010 13:49:43 GMT

This archive was generated by hypermail 2.3.1 : Friday, 8 March 2013 15:54:45 GMT