Hello,
I have a webpage that has multiple dialogs. Since our goal is to make
the pages as Accessible as possible (we support the screen reader JAWS
9), each time a dialog comes up, we must place focus on something
inside the dialog so that the screen reader knows where to continue
reading from.
So far, my intermediate function that opens the dialog works in
FireFox to target, say a password field so that the user can start
typing right away without having to click into the password box. Also
if the user clicks on the overlay (screen blocker), then focus should
be brought back into the focus object specified:
try{ this.focus = $(params.$focus)[0]; } // get the object that
should get focus when dialog loads
catch(e){ // if none specified, then get the anchor in the title tag
this.focus = $("." + $
(this.modalContent).data("dialog").uiDialogTitlebar[0].className + "
a")[0];
}
this.focus.focus(); // place focus on the focus object
$(".ui-dialog-overlay")[0].onclick=function()
{ openOrders.focus.focus(); } // if user clicks on the overlay, put
focus back into the focus object
The first few lines work for IE and FF but the last line doesn't work
for IE. Seems like I can only override a .onmouseover event for the
overlay in IE. onmousedown and onclick events don't seem to register.
The 2nd problem: If there is no $focus argument passed in, then I
want to default the title in the title bar to be the object to focus
on.
I know the line of code in the catch phrase isn't the best way to get
to the object, but it gets it properly.
When I alert the innerHTML or className of the focus object I get
what's expected, however, the call "this.focus.focus()" doesn't
actually place focus on the anchor tag in the titlebar even though I
have the correct object...Anyone else encounter this before?
Thanks,
Shao
