Hopiu/jquery-mobile
1
0
Fork 0
mirror of https://github.com/Hopiu/jquery-mobile.git synced 2026-05-05 05:04:46 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

improved keyboard handling for desktop use. Now uses ARIA listbox role with option sub roles.

Browse source
This commit is contained in:
scottjehl 2010-10-11 16:35:24 -04:00
parent 00567105c9
commit 4ff7738dbe
1 changed files with 55 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
js/jquery.mobile.listview.js
View file

@ -25,7 +25,13 @@ $.widget( "mobile.listview", $.mobile.widget, {
//create listview markup
this.element
.addClass( "ui-listview" )
.attr( "role", "listbox" )
.find( "li" )
.attr("role","option")
.attr("tabindex","-1")
.focus(function(){
$(this).attr("tabindex","0");
})
.each(function() {
var $li = $( this ),
role = $li.data( "role" ),
@ -58,8 +64,55 @@ $.widget( "mobile.listview", $.mobile.widget, {
else {
$li.addClass( "ui-li-static ui-btn-up-" + o.theme );
}
});
})
.eq(0)
.attr("tabindex","0");
//keyboard events for menu items
this.element.keydown(function(event){
//switch logic based on which key was pressed
switch(event.keyCode){
//up or left arrow keys
case 38:
//if there's a previous option, focus it
if( $(event.target).closest('li').prev().length ){
$(event.target).blur().attr("tabindex","-1").closest('li').prev().find('a').eq(0).focus();
}
//prevent native scroll
return false;
break;
//down or right arrow keys
case 40:
//if there's a next option, focus it
if( $(event.target).closest('li').next().length ){
$(event.target).blur().attr("tabindex","-1").closest('li').next().find('a').eq(0).focus();
}
//prevent native scroll
return false;
break;
case 39:
if( $(event.target).closest('li').find('a.ui-li-link-alt').length ){
$(event.target).blur().closest('li').find('a.ui-li-link-alt').eq(0).focus();
}
return false;
break;
case 37:
if( $(event.target).closest('li').find('a.ui-link-inherit').length ){
$(event.target).blur().closest('li').find('a.ui-link-inherit').eq(0).focus();
}
return false;
break;
//if enter or space is pressed, trigger click
case 13:
case 32:
$(event.target).trigger('click'); //should trigger select
return false;
break;
}
});
if ( o.inset ) {
this.element
.addClass( "ui-listview-inset" )