Opened 13 years ago

Closed 12 years ago

#2181 closed task (fixed)

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

Reported by: Becky Gibson Owned by: davidb
Priority: high Milestone: 0.9beta
Component: Accessibility Version: 0.9
Keywords: a11y Cc:
Blocked By: Blocking:

Description (last modified by bill)

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 &rarr;) 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];
	},

Attachments (6)

2181-high-contrast-tree-work.diff (2.1 KB) - added by davidb 12 years ago.
fix v1... tested to work in FF
2181-high-contrast-tree-workv2.diff (2.1 KB) - added by davidb 12 years ago.
using better arrows.
2181-high-contrast-tree-workv3.diff (4.5 KB) - added by davidb 12 years ago.
This includes the images to background images via css class work and removes cruft.
2181-background-image-work.diff (2.9 KB) - added by davidb 12 years ago.
bill, this patch contains the work in v3 above that is not yet checked in
2181-background-image-work.2.diff (2.8 KB) - added by davidb 12 years ago.
bill, this patch contains the work in v3 above that is not yet checked in
2181-background-image-work.3.diff (3.4 KB) - added by davidb 12 years ago.
thanks bill i incorporated your suggested improvements.

Download all attachments as: .zip

Change History (17)

comment:1 Changed 13 years ago by Becky Gibson

Status: newassigned

comment:2 Changed 12 years ago by Becky Gibson

Owner: changed from Becky Gibson to davidb
Status: assignednew

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

comment:3 Changed 12 years ago by davidb

Version: 0.4.10.9

comment:4 Changed 12 years ago by davidb

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

comment:5 Changed 12 years ago by bill

Description: modified (diff)
Milestone: 0.90.9beta
Type: defecttask

comment:6 Changed 12 years ago by bill

Description: modified (diff)

comment:7 Changed 12 years ago by 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?

Changed 12 years ago by davidb

fix v1... tested to work in FF

comment:8 Changed 12 years ago by davidb

Status: newassigned

Changed 12 years ago by davidb

using better arrows.

comment:9 Changed 12 years ago by bill

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

Changed 12 years ago by davidb

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

comment:10 Changed 12 years ago by davidb

Summary: update treeV3 for visibility in high contrast modeupdate tree for visibility in high contrast mode; use background-images otherwise

Changed 12 years ago by davidb

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

Changed 12 years ago by davidb

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

Changed 12 years ago by davidb

thanks bill i incorporated your suggested improvements.

comment:11 Changed 12 years ago by bill

Resolution: fixed
Status: assignedclosed

(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)

Note: See TracTickets for help on using tickets.