Disable tabbing over tabs in a tabset

[hin3x]

Hello,

(Just noticed, this should have been posted in the SmartGWT section - sorry for that)

I am looking for a way to disable the possibility to tab over tabs in a tab-set. I tried setting the 'setCanFocus(false)' property but it doesn't seem to have effect since I can still tab to the tab's and even the tabBar seems to get focus.

This is confirmed by the fact that (when inspecting the HTML using FF or Chrome tools) they all have the tabindex property set.

How can I disable tabbing functionality on the tab-set and its tab labels (and other things luke the tabBar which I can't access direclty)?

Here's a sample extract of the inspection:
<div id="isc_3R" eventproxy="sofid_workspace_tabBar" role="tablist" class="tabBarBottom" onfocus="if(event.target!=this)return;isc.EH.focusInCanvas(sofid_workspace_tabBar,true);" onblur="if(window.isc)isc.EH.blurFocusCanvas(sofid_workspace_tabBar,true);" tabindex="1789" style="position: absolute; left: 0px; top: 521px; width: 1335px; height: 24px; z-index: 800234; -moz-box-sizing: border-box; overflow: hidden; cursor: default;" onscroll="return sofid_workspace_tabBar.$lh()"><div id="isc_3S" eventproxy="sofid_workspace_tabBar" style="position: relative; visibility: inherit; z-index: 800234; cursor: default;">&nbsp;<div id="isc_3T" eventproxy="tab_0" role="tab" onfocus="if(event.target!=this)return;isc.EH.focusInCanvas(tab_0,true);" onblur="if(window.isc)isc.EH.blurFocusCanvas(tab_0,true);" tabindex="1789" style="position: absolute; left: 5px; top: 0px; width: 80px; height: 24px; z-index: 800144; -moz-box-sizing: border-box; overflow: hidden;" onscroll="return tab_0.$lh()"><div id="isc_3U" eventproxy="tab_0" style="POSITION:relative;VISIBILITY:inherit;Z-INDEX:800144;CURSOR:pointer;"><table height="24" cellpadding="0" cellspacing="0" width="80"><tbody><tr><td class="tabButtonBottomSelected" tabindex="-1" onfocus="tab_0.$47()" align="center" nowrap="true" valign="center"><span><img src="http://127.0.0.1:8888/images/16/environment_blue.png" suppress="TRUE" align="TEXTTOP" border="0"> Home</span></td></tr></tbody></table></div></div><div id="isc_3V" style="position:absolute;width:1px;height:1px;overflow:hidden;left:89px;top:23px;">&nbsp;</div><div id="isc_3W" eventproxy="sofid_workspace_tabBar_baseLine" class="normal" style="position: absolute; left: 0px; top: 0px; width: 1600px; height: 1px; z-index: 800126; background-color: rgb(192, 195, 199); -moz-box-sizing: border-box; overflow: hidden; cursor: default;" onscroll="return sofid_workspace_tabBar_baseLine.$lh()"><div id="isc_3X" eventproxy="sofid_workspace_tabBar_baseLine" style="POSITION:relative;VISIBILITY:inherit;Z-INDEX:800126;CURSOR:default;">&nbsp;</div></div></div></div>

thanks.

[Isomorphic]

Hi hin3x,
Calling 'setTabIndex(-1)' on the TabSet should allow this

[hin3x]

Great, that did the trick! Is this approach something that can be used in a more global way as an alternative to setCanFocus(false) or should I only use it when setCanFocus is not available.

Thanks!

[Isomorphic]

Yes, it can be used as an alternative to setCanFocus(false), but remember that removing widgets from the tab order makes them not eligible to keyboard-only users, which means your app is not accessible and cannot be sold to various entities (some governments, for example).

[hin3x]

Thanks! We are aware of this and are implementing a UI which can be controlled by the keyboard fully. The cases where we remove the tab-ability are made accessible by means of shortcuts - we try to optimize the flow in this way.

thanks again!