No Keyhandlers for DataView or TabPanel

[jerrybrown5]

There are no key handlers for DataView or TabPanel. I think keyboard access on all stock controls is pretty important. In my personal observation I believe Extjs has the best chance of any to become the standard toolkit for web 2.0 applications so I imagine that this is going to become a bigger deal before you may realize.

Ajaxian has run an article on this recently.
http://ajaxian.com/archives/two-rulings-that-could-improve-web-accessibility

Refiled as feature request per mystix http://extjs.com/forum/showthread.php?p=75566#post75566

Best regards,
Jerry

[mystix]

that's a good point. thanks for bringing this up.

however, this would be better classified as a "feature request" as opposed to a "bug".

i'll move this to the Open Discussion forum for further discussion in the meantime.

p.s. since you're a premium member, it's probably good to also post this in the Feature Requests (http://extjs.com/forum/forumdisplay.php?f=4) forum with a link back to this thread ;)

[evant]

I implemented something similar in my app:

left/right, up(first tab), down (last tab), esc (quit current tab).

I ran into problems with having the keys running when I didn't want to (like when I had a dialog open or something).

[andrei.neculau]

http://extjs.com/forum/showthread.php?t=30528

This feature is now implemented through an extension and is pretty stable

Cheers

[Animal]

I think the roadmap specifies that accesibility will be adressed in the 3.0 development phase.

I agree that integrating keyboard navigation into Ext controls is important. Power users of apps abandon the mouse quite quickly, and navigate very quickly using keystrokes.

Having to switch between keyboard and mouse can be quite an irritation to users like that.

[jack.slocum]

All Ext Components that have a predictable flow and/or define their structure support key board navigation. However, you are correct in that TabPanel's keyboard access is weak at best (can be navigated via standard tab/shift tab) and could use some improvement. The question there is, what keyboard nav should TabPanel support? Most of the standard/useful tabbing shortcuts are used by the browser and we don't want to break that.

If an application has additional keyboarding needs, we have utility classes to help make it easy to implement. In particular, many keyboard actions in applications are defined at the application level, not the component level. I would imagine these are one of the most sorely missed features in most web applications.

As for keyboard navigation in built into DataView, there is one primary reason it doesn't have keyboard navigation by default. Mainly, it has no structure or flow until you define what it is. Therefore, trying to write a "catch all" for the correct keyboard action for all (or even most) implementations is not a good solution. Instead, it should be done via a plugin or similar mechanism which understands the structure and proper keyboard actions to take. It's not hard to do - Ext provides another class, KeyNav, that makes it very simple.

[brian.moeskau]

@andrei: Nice work on the DataView example! I just wanted to point out that it actually somewhat illustrates Jack's point. For example, I expected that as I continued to hit the 'right' key, the selected item would wrap to the next line from the end of the previous line. Would that be considered "standard" behavior? Depends on the app. There might be different keyboard use cases also (e.g., wrapping to the next "column" after keying down to the bottom). You'd also have to handle such wrapping differently for RTL users. Etc. So while your code is a great example, it's not something that could be a standard feature in Ext.

(BTW, your key handler does not appear to work in Safari)

[andrei.neculau]

@brian
Thanks for the enlightenment! Now I understand what your (ExtJS team) point was all about! Behavior! Indeed, you are right and there's nothing to "haggle" on, concerning that topic.

My key navigation wanted to simulate the regular Explorer events on a general basis. But as you point out - DataView can have other purposes too with different behaviors.

Regarding Safari - http://extjs.com/forum/showthread.php?t=30337 - it's because in the published version, KeyNav doesn't have forceKeyDown and probably you also have Safari 3.1 which I read that changed behavior on how to handle key events. My extension will have forceKeyDown anyway with the next update.

Once again: thanks for the clear wording!

[zquirm]

Any updates on the Safari error? It still is not working...

[anupkshah]

All Ext Components that have a predictable flow and/or define their structure support key board navigation. However, you are correct in that TabPanel's keyboard access is weak at best (can be navigated via standard tab/shift tab) and could use some improvement. The question there is, what keyboard nav should TabPanel support? Most of the standard/useful tabbing shortcuts are used by the browser and we don't want to break that.

(snip)


Hi,

I have tried to use Tab/Shift Tab for the Tab Panel on both Ext JS 2.2 and the recent Ext JS 3.0 RC 1 examples, and they don't work -- at least I don't visually see any indication of the tab I am tabbing to being highlighted as they do when moused over.

Using Firebug I can see that the various classes on various tab related HTML elements change with mouse interaction, but not with keyboard interaction.

In terms of what keyboard nav should TabPanel support? I think it is reasonable to expect Tab/Shift Tab to work. A lot of tab components are written using anchor elements so they get natural keyboard tabbing to work as per the default browser behavior.

It seems that a small CSS tweak similar to the following (using grey theme, so the text color may not be right) lets you visually see what you are tabbing through:

.x-tab-strip-top .x-tab-right:focus {background-position:0 -101px!important;}
.x-tab-strip-top .x-tab-right:focus .x-tab-left {background-position:right -401px!important;}
.x-tab-strip-top .x-tab-right:focus .x-tab-strip-inner{background-position:0 -251px;}
.x-tab-strip-top .x-tab-right:focus .x-tab-strip-text { color:#333; }

(I just did that in two minutes, so may have missed out other detail. Also, I got the above from the existing ext js CSS and just modified it to deal with the :focus on anchor elements as well. Real implementation may benefit from being all done in JavaScript, however you currently attach to the various hover events, you could also switch the classes on the focus event too).

But, something like the above alone is not enough, because even though you can tab to a tab, you cannot activate it with the keyboard, by pressing return, for example. I *think* this might be because the anchor element has this on the onclick:

a class="x-tab-right" onclick="return false;" href="#"

It may also be that TabPanel could benefit from a config option to say when to keyboard switch the tab: e.g. on enter key, or just simply tabbing to that tab.

I am a bit new to Ext JS, though reasonably comfortable with JavaScript and CSS, so if there is actually a mechanism to do this, please do let me know.

[anupkshah]

Well, I got one step further with handling tabbing and pressing "enter" to activate the tab, but it feels like a hack because I had to rely on undocumented internals of how the tabpanel works:


// opts.items is an array of elements I had that would become tabs.
var numTabs = opts.items.length;
for (var i = 0; i < numTabs; i++) {
var keyNav = new Ext.KeyNav(tabs.getTabEl(i), {
"enter": function(e) {
tabs.activate(this.id.split(tabs.idDelimiter)[1]);
},
scope: tabs.getTabEl(i)
});
}


The bit I find most uncomfortable is how I got the id for the tab to activate. There must be a better way than this???