Opened 13 years ago
Closed 13 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 )
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]; },
Attachments (6)
Change History (17)
comment:1 Changed 13 years ago by
Status: | new → assigned |
---|
comment:2 Changed 13 years ago by
Owner: | changed from Becky Gibson to davidb |
---|---|
Status: | assigned → new |
comment:3 Changed 13 years ago by
Version: | 0.4.1 → 0.9 |
---|
comment:4 Changed 13 years ago by
Note the work on font-based arrows might help here (http://www.dojotoolkit.org/~owen/arrowTest.html)
comment:5 Changed 13 years ago by
Description: | modified (diff) |
---|---|
Milestone: | 0.9 → 0.9beta |
Type: | defect → task |
comment:6 Changed 13 years ago by
Description: | modified (diff) |
---|
comment:7 Changed 13 years ago by
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 13 years ago by
Attachment: | 2181-high-contrast-tree-work.diff added |
---|
fix v1... tested to work in FF
comment:8 Changed 13 years ago by
Status: | new → assigned |
---|
comment:9 Changed 13 years ago by
Changed 13 years ago by
Attachment: | 2181-high-contrast-tree-workv3.diff added |
---|
This includes the images to background images via css class work and removes cruft.
comment:10 Changed 13 years ago by
Summary: | update treeV3 for visibility in high contrast mode → update tree for visibility in high contrast mode; use background-images otherwise |
---|
Changed 13 years ago by
Attachment: | 2181-background-image-work.diff added |
---|
bill, this patch contains the work in v3 above that is not yet checked in
Changed 13 years ago by
Attachment: | 2181-background-image-work.2.diff added |
---|
bill, this patch contains the work in v3 above that is not yet checked in
Changed 13 years ago by
Attachment: | 2181-background-image-work.3.diff added |
---|
thanks bill i incorporated your suggested improvements.
comment:11 Changed 13 years ago by
Resolution: | → fixed |
---|---|
Status: | assigned → closed |
This needs to wait until the resolution of the new tundra theme and use of background images.