Adding "alt" or "title" text to a Image from an ImageBundle

[markmccall]

Using GWT 1.5.2 and IE7 (both web mode and hosted mode) I am
attempting to add ALT and/or TITLE text to an Image that is sourced
from an ImageBundle, but the result is the "alt" and "title"
attributes are added to the "<gwt:clipper>" element rather than the
"<img>" element. This is an issue for screen readers like JAWS since
the screen reader expects the "alt" attribute to reside on the "<img>"
element.

Sample code:

Image clippedImage = MyImageBundle.myLogo().createImage();
DOM.setElementProperty(clippedImage.getElement(), "alt",
"clipped alt");
DOM.setElementAttribute(clippedImage.getElement(), "title",
"clipped title");

Resulting HTML:

<?xml:namespace prefix = gwt />
<gwt:clipper class=gwt-Image title="clipped title" style="PADDING-
RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; OVERFLOW: hidden;
WIDTH: 326px; PADDING-TOP: 0px; ZOOM: 1; HEIGHT: 86px"
__eventBits="131197" alt="clipped alt">
<IMG style="BORDER-RIGHT: medium none; BORDER-TOP: medium none; MARGIN-
TOP: 0px; FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='http://localhost:8080/a/
A29BCAE7C99015EF96C61496A2D16C34.cache.png',sizingMethod='crop');
MARGIN-LEFT: -745px; BORDER-LEFT: medium none; BORDER-BOTTOM: medium
none" height=86 src="http://localhost:8080/a/clear.cache.gif"
width=1071 border=0>
</gwt:clipper>


Does anybody know how to force the "alt' and "title" attributes onto
the "<img>" element?

By the way, for those who do not know, you can paste the following
into your hosted mode URL bar and a new window will open showing you
the generated HTML:

javascript:void(window.open("javascript:document.open(\"text/plain
\");document.write(opener.document.body.parentNode.outerHTML)"))

Thanks,
Mark

[James Wheat]

Okay so after playing around with the code here is what I have come up with to fix the issue:

TestImageBundle imgBundle = (TestImageBundle)GWT.create(TestImageBundle.class);

        

        Image img = imgBundle.aeromexico().createImage();

        RootPanel.get().add(img);

        

        if(img.getElement().hasChildNodes())

        {

            //This is used for IE only I think because of the way IE renders images from the ImageBundle

            //In IE the image is wrapped in a clipper element where as in Mozilla or Chrome the image element is placed directly

            img.getElement().getFirstChildElement().setAttribute("alt", "testAlt");

            

        }else

        {

            //This will set the element attribute for the other browsers

            DOM.setElementAttribute(img.getElement(), "alt", "testAlt");

        }

        Window.alert(img.getElement().getString());

I hope this answers your questions and if you have any other problems let me know,

James

[markmccall]

Thanks James! I'm not sure why I didn't think to do this on my own. I
am going to add this to Issue 1333: http://code.google.com/p/google-web-toolkit/issues/detail?id=1333

On Nov 12, 12:18 pm, "James Wheat" <jwheat3...@gmail.com> wrote:
> Okay so after playing around with the code here is what I have come up with
> to fix the issue:
> TestImageBundle imgBundle =
> (TestImageBundle)GWT.create(TestImageBundle.class);
>
> Image img = imgBundle.aeromexico().createImage();
>
> RootPanel.get().add(img);
>
> if(img.getElement().hasChildNodes())
> {
> //This is used for IE only I think because of the way IE renders
> images from the ImageBundle
> //In IE the image is wrapped in a clipper element where as in
> Mozilla or Chrome the image element is placed directly
>
> img.getElement().getFirstChildElement().setAttribute("alt",
> "testAlt");
>
> }else
> {
> //This will set the element attribute for the other browsers
>
> DOM.setElementAttribute(img.getElement(), "alt", "testAlt");
> }
> Window.alert(img.getElement().getString());
>
> I hope this answers your questions and if you have any other problems let me
> know,
>
> James
>