update tree for visibility in high contrast mode; use background-images otherwise

[Becky Gibson]

Tree is currently using images for the expand (+/-) node. It should be changed to use either background-images or characters, depending on the a11y mode.

The template for TreeNode? should contain something like this for the expando node:

<span dojoAttachPoint=expandoNode>
	<span dojoAttachPoint=expandoNodeText 	
	class=dijitExpandoNodeText></span>
</span>

with additional CSS in dijit.css, something like this, to make the text only show up in A11Y mode.

.dijitExpandoNodoText { display: none; }
.dijit_a11y .dojoExpandoNodeText{ display: inline; }

The code is setExpando() needs to set the class of the outer span to display the background image (ex: "TreeExpando? TreeExpandoOpened?"), and set the text of the inner span (ex: + or →) so that the widget works in a11y mode.

When Owen checks in the Button example it should be clearer.

---

Notes on code to remove:

Inside Tree.html it has some dummy tags:

	><img dojoAttachPoint="expandoOpened" class="TreeExpandoOpened dijitDisplayNone"
	><img dojoAttachPoint="expandoClosed" class="TreeExpandoClosed dijitDisplayNone"
	><img dojoAttachPoint="expandoLeaf" class="TreeExpandoLeaf dijitDisplayNone"
	><img dojoAttachPoint="expandoProcessing" class="TreeExpandoProcessing dijitDisplayNone"

And then inside Tree.js it has this code:

		var imageNames = ["expandoOpened", "expandoClosed", "expandoLeaf", "expandoProcessing"];
		dojo.forEach(imageNames, 
			function(name) {
				dijit.util.wai.imageBgToSrc(this[name]);
				this[name + "Img"] = this[name].src;
			}, this
		);
		

/*
		dojo.forEach(["expandoOpened", "expandoClosed", "expandoLeaf", "expandoProcessing"],
			function(item){
				var bi = dojo.getComputedStyle(this[item]).backgroundImage;
				var href = bi.charAt(4)=='"' ? bi.slice(5,-2) : bi.slice(4,-1);	// url(foo) --> foo, url("foo") --> foo
				this[item+"Img"]=href;
			}, this);
*/

And also the setExpando() code needs to be redone:

	_setExpando: function(/*Boolean*/ processing) {
		// summary: set the right image for the expando node
		var img = processing ? "expandoProcessingImg" :
				(this.isFolder ?
					(this.isExpanded ? "expandoOpenedImg" : "expandoClosedImg") : "expandoLeafImg");
		this.expandoNode.src = this.tree[img];
	},

[Becky Gibson]

This needs to wait until the resolution of the new tundra theme and use of background images.

[davidb]

Note the work on font-based arrows might help here (​http://www.dojotoolkit.org/~owen/arrowTest.html)

[davidb]

Note in ​http://svn.dojotoolkit.org/dojo/dijit/trunk/_tree/Node.html there are 3 div open tags and only 2 div close tags. We (I) can fix this as part of this work unless this is by design?

[davidb]

fix v1... tested to work in FF

[davidb]

using better arrows.

[bill]

(In [8797]) Tree a11y work. Refs #2181. Checkin for David Bolter (CLA on file).

[davidb]

This includes the images to background images via css class work and removes cruft.

[davidb]

bill, this patch contains the work in v3 above that is not yet checked in

[davidb]

bill, this patch contains the work in v3 above that is not yet checked in

[davidb]

thanks bill i incorporated your suggested improvements.

[bill]

(In [8836]) Make tree uses background images for expando nodes, or in high-contrast mode, arrow characters. Fixes #2181. Patch from David Bolter (CLA on file)