Hi All,
In my form there are one text box and Infragistics web grid. I set the tab property of textbox to 1 and tabindex of Webgrid to 2.
When I hit the tab key to go from text box to Grid it is not working properly.
I created new button and updated the tab index property to 3 and on hitting the tab from first text box it is going directly to the button. i.e (from tab index 1 to tab index 3 skipping tab index 2)
I even looked at samples on the site, but i didnt got much there also.
Any help in this matter is highly appreciated.
One more thing, I am almost ready to move past this issue, except I am a bit bothered by the documentation saying there is section 508 support when in fact you cannot even get to the grid with the keyboard. That is why I have pursued trying to get this built into the control.
Arrggg, sure enough, I checked the DTD and you are right. Minor correction though, it is not "only defined" as part of the %focus. It is explicitly listed in the object and select elements ATTLIST.
At any rate, the problem for us is not that we can't use the keyboard once the grid is selected with the mouse (and yes Section508Compliant is on). The problem is tabbing to the grid. Or stated another way, trying to get to the grid with the keyboard. We have a workaround client-side for tab & shift+tab by generating some javascript that tracks the keydown for the control that is before and after the grid and then use the CSOM to give the grid the focus and select the row.
I was hoping that you all could have provided something built-in, but that is looking less and less likely.
If only it were that easy, however tabindex is not a legal attribute on <td> elements under the XHTML 1.0 Transitional doctype your example uses. It's support on <td> cells was implemented as a non-standard, browser-specific behavior originally by Internet Explorer only. However, see "The solution: changes to standard behavior of tabindex" in http://developer.mozilla.org/en/docs/Key-navigable_custom_DHTML_widgets for where Firefox 1.5 would allow developers to bend the rules.
If you examine the DTD closely, you will see that the tabindex attribute is only defined as part of the %focus entity which applies to elements such as <a>, <input>, etc. But if you look at the !ATTLIST definition for <td> it specifies only the %attrs entity (which is %coreattrs %events %i18n but not %focus).
XHTML 1.0 Transitional DTDhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
As pertains to Section 508 compliance and the WebGrid's keyboard accessibility, have you tried enabling the Section508Compliant property? if so, are you not able to access the cells within the WebGrid using the keyboard?
That is completely false. Tables can receive tabs and focus and so can cells. Here is the sample HTML. Simply begin tabbing and you will see it is possible. Therefore, I disagree and this should be fixed, especially for Section 508.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <input id="txtBox" tabindex="1" type="Enter something here." /> <table border="1" cellpadding="3" tabindex="2" onfocus="this.style.backgroundColor='blue';" onblur="this.style.backgroundColor='white';" style="width: 50%; height: 50%"> <tr> <td tabindex="3" onfocus="this.style.backgroundColor='red';" onblur="this.style.backgroundColor='white';" style="width: 100px"> Row 1 cell 1. </td> <td tabindex="4" onfocus="this.style.backgroundColor='red';" onblur="this.style.backgroundColor='white';" style="width: 100px"> Row 1 cell 1. </td> <td tabindex="5" onfocus="this.style.backgroundColor='red';" onblur="this.style.backgroundColor='white';" style="width: 100px"> Row 1 cell 1. </td> </tr> <tr> <td tabindex="6" onfocus="this.style.backgroundColor='red';" onblur="this.style.backgroundColor='white';" style="width: 100px"> Row 1 cell 1. </td> <td tabindex="7" onfocus="this.style.backgroundColor='red';" onblur="this.style.backgroundColor='white';" style="width: 100px"> Row 1 cell 1. </td> <td tabindex="8" onfocus="this.style.backgroundColor='red';" onblur="this.style.backgroundColor='white';" style="width: 100px"> Row 1 cell 1. </td> </tr> <tr> <td tabindex="9" onfocus="this.style.backgroundColor='red';" onblur="this.style.backgroundColor='white';" style="width: 100px"> Row 1 cell 1. </td> <td tabindex="10" onfocus="this.style.backgroundColor='red';" onblur="this.style.backgroundColor='white';" style="width: 100px"> Row 1 cell 1. </td> <td tabindex="11" onfocus="this.style.backgroundColor='red';" onblur="this.style.backgroundColor='white';" style="width: 100px"> Row 1 cell 1. </td> </tr> </table> </form></body></html>
It looks like a solution.
Thanks,
for the quick help.