Need help with GWT / ARIA programming!!

[El_Geeko]

Hello,

I can't figure out a solution for this exercise.

Using Google Web Toolkit implement a simple user interface that contains a list of items and another HTML division. The content of HTML division will get dynamically updated according to the selected item. For example the HTML division may show a longer text description for the selected item. Both item list and HTML division should be Web Accessible according to WAI‐ARIA standard.

Here is the code of the Java Application


import javax.accessibility.AccessibleComponent;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.dom.client.Element;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.KeyDownEvent;
import com.google.gwt.event.dom.client.KeyDownHandler;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.ListBox;
import com.google.gwt.user.client.ui.MenuBar;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Accessibility;




/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
/**
* Entry point classes define onModuleLoad().
*/



public class Exercise implements EntryPoint {


public void onModuleLoad() {


final Label roller = new Label("This text will change depending on which element the user selects");

RootPanel.get("changeOnRollOver").add(roller);

MenuBar mb = new MenuBar();


final ListBox lb = new ListBox();



lb.addItem("Cat");
lb.addItem("Dog");
lb.addItem("Monkey");

lb.setSelectedIndex(-1);



// Make enough room for all five items (setting this value to 1 turns it
// into a drop-down list).
lb.setVisibleItemCount(3);

// Add it to the root panel.
RootPanel.get("ListElements").add(lb);

lb.addClickHandler(new ClickHandler() {

@Override
public void onClick(ClickEvent event) {
int i = lb.getSelectedIndex();
if(i==0)
roller.setText("The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines and felids, is a small predatory carnivorous species of crepuscular mammal that is valued by humans for its companionship and its ability to hunt vermin, snakes, scorpions, and other unwanted household pests. It has been associated with humans for at least 9,500 years.[5]");
if(i==1)
roller.setText("The dog (Canis lupus familiaris,[2] is a domesticated subspecies of the Gray Wolf, a member of the Canidae family of the order Carnivora. The term is used for both feral and pet varieties. The domestic dog has been one of the most widely kept working and companion animals in human history.");
if(i==2)
roller.setText("A monkey is any cercopithecoid (Old World monkey) or platyrrhine (New World monkey) primate. All primates that are not prosimians (lemurs and tarsiers) or apes are monkeys. The 264 known extant monkey species represent two of the three groupings of simian primates (the third group being the 21 species of apes). Monkeys are usually smaller and/or longer-tailed than apes.");
}

});

//Make the application accessible for keyboards

lb.addKeyDownHandler(new KeyDownHandler() {

@Override
public void onKeyDown(KeyDownEvent event) {
int i = lb.getSelectedIndex();
if(i==0)
roller.setText("The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines and felids, is a small predatory carnivorous species of crepuscular mammal that is valued by humans for its companionship and its ability to hunt vermin, snakes, scorpions, and other unwanted household pests. It has been associated with humans for at least 9,500 years.[5]");
if(i==1)
roller.setText("The dog (Canis lupus familiaris,[2] is a domesticated subspecies of the Gray Wolf, a member of the Canidae family of the order Carnivora. The term is used for both feral and pet varieties. The domestic dog has been one of the most widely kept working and companion animals in human history.");
if(i==2)
roller.setText("A monkey is any cercopithecoid (Old World monkey) or platyrrhine (New World monkey) primate. All primates that are not prosimians (lemurs and tarsiers) or apes are monkeys. The 264 known extant monkey species represent two of the three groupings of simian primates (the third group being the 21 species of apes). Monkeys are usually smaller and/or longer-tailed than apes.");

}

});


}
}




And the HTML looks like this:


!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<HTML>
<HEAD>
<TITLE>Exercise 3</TITLE>

<!-- You need this to reference the GWT module -->
<META name='gwt:module' content='com.myexercise.Exercise'>

<SCRIPT language="javascript" src="exercise/exercise.nocache.js">
</SCRIPT>

<STYLE>
</STYLE>
</HEAD>

<BODY role="Application">
<H1>Exercise 3 Demo</H1>

<p>A list that changes the content of a container depending on which element is selected.</p>

<DIV id="content" role="main">

<DIV id = "ListElements" role="listbox" tabindex="0" ></DIV>

<DIV id="changeOnRollOver"></DIV>

</DIV>



</BODY>
</HTML>


I managed to implemennt the listbox and the dynamically changing DIV, but I need help because I can't figure out how to make the list box and the DIV ARIA accessible! As you can see I tried to add roles / states in the HTML, but I'm expected t assign roles, states, and all the other stuff in the java code as well and there is the problem. For example I searched the net trying to find out how to assign a role to the listbox (Accessibility.setRole(Element, role)) but it didn't work.

If anyone could help me make this simple application ARIA accessible, it would be much appreciated, I'm pressed for time :-(