[Dojo-interest] Need Some Urgent Help - dojoButtons and access keys

Thu Feb 22 09:19:02 MST 2007

Hi Jon et al,

I have the same need to add access keys to dojo buttons (tab indices are not
currently required).  Using the released 0.4.1 version, I tried adding 1) a
line to define an accesskey property to src/widget/Button.js and 2) the
'accesskey="${this.accesskey}"' phrase to the <div class="dojoButton"...
definition in /src/widget/templates/ButtonTemplate.html.  However, it didn't
quite work on both IE 6 and FF 2.

On IE 6, typing the accesskey (ALT-<key>) moves the focus to the button, but
does not "click" it - an extra keystroke (spacebar, enter) is required to do
so.

On FF 2, typing the accesskey (SHIFT-ALT-<key>) does nothing - focus isn't
even shifted to the button.

Did I make all the required modifications, or did I miss something?

Below is a short code example, with the exact mods I made to the dojo
modules below that.  Thanks for any help!

Dave

=================
<html>
<head>
<style type="text/css">
span.accesskey { text-decoration: underline; }
</style>
<script type="text/javascript">
//<![CDATA[
var djConfig = { isDebug: false };
//]]>
</script>
<script type="text/javascript" src="js/dojo/dojo.js"></script>
<script type="text/javascript">
//<![CDATA[
dojo.require("dojo.widget.*");
//]]>

function testButtonClick()
{
	alert("Button clicked!");
}

function initPage()
{
	dojo.event.connect(dojo.widget.byId("btnTest"), "onClick",
testButtonClick);
}

dojo.addOnLoad(initPage);

</script>
</head>
<body>
<button id="btnTest" dojoType="button" accesskey="L"><span
class="accesskey">L</span>ogin</button>
</body>
</html>
=================
Changes to Button.js:

dojo.widget.defineWidget(
	"dojo.widget.Button",
	dojo.widget.HtmlWidget,
	{
		// summary
		//	Basically the same thing as a normal HTML button, but with special
styling.

		isContainer: true,

		// caption: String
		//	text to display in button
		caption: "",

		templatePath:
dojo.uri.dojoUri("src/widget/templates/ButtonTemplate.html"),
		templateCssPath:
dojo.uri.dojoUri("src/widget/templates/ButtonTemplate.css"),

// ADDED - BEGIN
		accesskey: "",
// ADDED - END

		// inactiveImg: Url
		//	prefix of filename holding images (left, center, right) for button in
normal state
		inactiveImg: "src/widget/templates/images/soriaButton-",

=================
Change to ButtonTemplate.html (added at end of line):

<div dojoAttachPoint="buttonNode" class="dojoButton"
style="position:relative;" dojoAttachEvent="onMouseOver; onMouseOut;
onMouseDown; onMouseUp; onClick:buttonClick; onKey:onKey; onFocus;"
accesskey="${this.accesskey}">

=================

A quick peruse over the button.js widget code and it looks like it  
doesn't take that into consideration.  You could keep your HTML as it  
is now and  then do this:

add to the top of the button.js file:

dojo.provide("dojo.widget.Button");
dojo.provide("dojo.widget.html.Button");

dojo.require("dojo.lang.extras");
dojo.require("dojo.html");
dojo.require("dojo.style");
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.HtmlWidget");

dojo.widget.defineWidget(
	"dojo.widget.html.Button",
	dojo.widget.HtmlWidget,
	{
		widgetType: "Button",
		isContainer: true,

		// Constructor arguments
		caption: "",
		disabled: false,
	        tabindex: "",			////// ADD THIS
	        accesskey: "",			////// ADD THIS

		templatePath: dojo.uri.dojoUri("src/widget/templates/ 
HtmlButtonTemplate.html"),
		templateCssPath: dojo.uri.dojoUri("src/widget/templates/ 
HtmlButtonTemplate.css"),

		// button images
		inactiveImg: "src/widget/templates/images/soriaButton-",
		activeImg: "src/widget/templates/images/soriaActive-",
		pressedImg: "src/widget/templates/images/soriaPressed-",
		disabledImg: "src/widget/templates/images/soriaDisabled-",
		width2height: 1.0/3.0,

		// attach points
		containerNode: null,
		leftImage: null,
		centerImage: null,
		rightImage: null,

		fillInTemplate: function(args, frag){
			if(this.caption != ""){
				this.containerNode.appendChild(document.createTextNode 
(this.caption));
			}
			dojo.html.disableSelection(this.containerNode);
		},

Edit HtmlButtonTemplate.html to look like:

<div class="dojoButton" style="position:relative;"  
dojoAttachEvent="onMouseOver; onMouseOut; onMouseDown; onMouseUp;  
onClick:buttonClick;" tabindex="${this.tabindex}" accesskey="$ 
{this.accesskey}">
   <div class="dojoButtonContents" align=center  
dojoAttachPoint="containerNode" style="position:absolute;z-index: 
2;"></div>

</div>

That way you pass thru from your HTML the tabindex and accesskey  
parameters.

Also FWIW, most people who post to this list have urgent help needs,  
but usually those with descriptive post titles will get the faster  
response.

Jon Sykes
-- 
View this message in context: http://www.nabble.com/Need-Some-Urgent-Help-tf2581733.html#a9102956
Sent from the Dojo mailing list archive at Nabble.com.