Tabbing tabs to underlying html page

[hin3x]

Hello,

While debugging the tabbing in our application I found that when tabbing trough all fields the focus can end up on the underlying html (nody) content, the initial focus (when the page is displayed for the 1st time) also seems to be on the underlying html content.

The flow is quite consistent, it always goes like this (starting from the point after the page is loaded):

HTML - FIELD 1 - FIELD 2 - ... - FIELD N - HTML - FIELD 1 - ....

I inspect the current item having focus by executing this command in the console:
isc.Class.getActiveElement()

This behavior is noticed in at least FF, IE & Chrome (which leads me to conclude it isn't a browser quirck).

I can't see why that underlying HTML should get the focus, it serves no purpose as far as I can tell. I tried putting tabindex="-1" on several of the HTML elements and javascript tags but no success.

Any thoughts on how I can get by this would be great!

[Isomorphic]

We're not sure what you mean by "the underlying page". It's normal for focus to cycle through the URL bar and this cannot be prevented (and you should not attempt to prevent it as it would violate accessibility guidelines).

If you're seeing something else, take a look at any non-SmartGWT code you have - perhaps something that directly interacts with the DOM. You may find the culprit there.

Finally, if you can reproduce this in just SmartGWT, please show a test case so we can see the issue.

[hin3x]

Hello,

You can have a look with this simple sample:

public void onModuleLoad() {

IButton button = new IButton("Hello World");
button.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
SC.say("Hello World from SmartGWT");
}
});

IButton button2 = new IButton("Hello World 2");
button2.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
SC.say("Hello World from SmartGWT");
}
});

HLayout pane = new HLayout();
pane.addMember(button);
pane.addMember(button2);
Tab tab = new Tab();
tab.setTitle("Tab 1");
tab.setPane(pane);

TabSet tabs = new TabSet();
tabs.addTab(tab);

HLayout container = new HLayout();
container.setWidth100();
container.setHeight100();
container.addMember(tabs);
container.draw();
}

Once started (entering the URL), I inspect the active element (isc.Class.getActiveElement()) and it gives me the body tag of the html page which loads the app.

Tabbing trough puts the focus on the tabBar, tab, buttons and back to that body tag.

Looking more closely to this simple sample it seems indeed that the initial focus is on the url field - the focus is just not clearly visible. It becomes more obvious when tabbing trough the full tab cycle once. The second time it is clearly visible by the cursor in the url area that it is the browser who has the focus.

Thanks for pointing this out.

[hin3x]

I need to follow trough on your statement after talking to our functional team.

It's normal for focus to cycle through the URL bar and this cannot be prevented (and you should not attempt to prevent it as it would violate accessibility guidelines).

Preventing access to the browser controls is something we want to do to keep the user within our application when tabbing.
We might provide a shortcut or key combination to break this boundary but the default tab sequence should be maintained within our application only.

Given your previous statement, is there a way to get this done? At best there would be a way to intercept these tab inputs on a global level - since we have a lot of pages within our application it would be quite cumbersome to implement this page by page.

Thanks so much.

[Isomorphic]

There isn't a particularly clean way to achieve this, and we would usually recommend against it for interfering with user expectations.

If you're talking about a limited subset of tabbable elements, you could add a keypress handler to the first and last element and intercept a Tab or Shift+Tab keypress respectively to return false and stick focus into the other focusable element you care about, but it'd be harder to achieve in a general level for all pages, etc.

You probably could intercept tab keypresses globally, and suppress the native behavior of shifting focus, as well as forcing focus into whatever target component you care about -
we do something similar to this to modify the usable tab-order when clickMasks are showing. In fact, you could possibly show a click mask and unmask your top-level layout component to get this behavior, but it would be something of a hack.


Regards
Isomorphic Software

[hin3x]

Thanks for those insights. That global solution sounds appealing, but since we aren't experts in this area and really don't want to hack this deep down in the framework: could we obtain this functionality as part of a (paid) extension of the product?