library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Menu: Modified interactions to allow keyboard navigation to disabled items so that they are announced by screen readers but prevent selection of and navigation to sub-menus of disabled items

Browse Source
This commit is contained in:
kborchers 2012-04-16 23:30:33 -05:00
parent fac809f9e5
commit 1ce42f4328
2 changed files with 14 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
tests/visual/menu/menu.html
View File

@ -118,7 +118,7 @@
<li class="ui-state-disabled"><a href="#"><span class="ui-icon ui-icon-scissors"></span>Ada</a></li> <li class="ui-state-disabled"><a href="#"><span class="ui-icon ui-icon-scissors"></span>Ada</a></li>
<li><a href="#">Adamsville</a></li> <li><a href="#">Adamsville</a></li>
<li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Addyston</a></li> <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Addyston</a></li>
<li> <li class="ui-state-disabled">
<a href="#">Delphi</a> <a href="#">Delphi</a>
<ul> <ul>
<li><a href="#">Ada</a></li> <li><a href="#">Ada</a></li>

20
ui/jquery.ui.menu.js vendored
View File

@ -99,7 +99,7 @@ $.widget( "ui.menu", {
"mouseleave .ui-menu": "collapseAll", "mouseleave .ui-menu": "collapseAll",
"focus": function( event ) { "focus": function( event ) {
var menu = this.element, var menu = this.element,
firstItem = menu.children( ".ui-menu-item" ).not( ".ui-state-disabled" ).eq( 0 ); firstItem = menu.children( ".ui-menu-item" ).eq( 0 );
if ( this._hasScroll() && !this.active ) { if ( this._hasScroll() && !this.active ) {
menu.children().each(function() { menu.children().each(function() {
var currentItem = $( this ); var currentItem = $( this );
@ -196,16 +196,18 @@ $.widget( "ui.menu", {
event.preventDefault(); event.preventDefault();
break; break;
case $.ui.keyCode.RIGHT: case $.ui.keyCode.RIGHT:
this.expand( event ); !this.active.is(".ui-state-disabled") && this.expand( event );
event.preventDefault(); event.preventDefault();
break; break;
case $.ui.keyCode.ENTER: case $.ui.keyCode.ENTER:
if ( !this.active.is(".ui-state-disabled") ) {
if ( this.active.children( "a[aria-haspopup='true']" ).length ) { if ( this.active.children( "a[aria-haspopup='true']" ).length ) {
this.expand( event ); this.expand( event );
} }
else { else {
this.select( event ); this.select( event );
} }
}
event.preventDefault(); event.preventDefault();
break; break;
case $.ui.keyCode.ESCAPE: case $.ui.keyCode.ESCAPE:
@ -442,7 +444,6 @@ $.widget( "ui.menu", {
this.active this.active
.children( ".ui-menu " ) .children( ".ui-menu " )
.children( ".ui-menu-item" ) .children( ".ui-menu-item" )
.not( ".ui-state-disabled" )
.first(); .first();
if ( newItem && newItem.length ) { if ( newItem && newItem.length ) {
@ -478,12 +479,10 @@ $.widget( "ui.menu", {
if ( direction === "first" || direction === "last" ) { if ( direction === "first" || direction === "last" ) {
next = this.active next = this.active
[ direction === "first" ? "prevAll" : "nextAll" ]( ".ui-menu-item" ) [ direction === "first" ? "prevAll" : "nextAll" ]( ".ui-menu-item" )
.not( ".ui-state-disabled" )
.eq( -1 ); .eq( -1 );
} else { } else {
next = this.active next = this.active
[ direction + "All" ]( ".ui-menu-item" ) [ direction + "All" ]( ".ui-menu-item" )
.not( ".ui-state-disabled" )
.eq( 0 ); .eq( 0 );
} }
} }
@ -492,9 +491,6 @@ $.widget( "ui.menu", {
} }
this.focus( event, next ); this.focus( event, next );
if ( next.is( ".ui-state-disabled" ) ) {
this._move( direction, filter, event );
}
}, },
nextPage: function( event ) { nextPage: function( event ) {
@ -509,14 +505,14 @@ $.widget( "ui.menu", {
var base = this.active.offset().top, var base = this.active.offset().top,
height = this.element.height(), height = this.element.height(),
result; result;
this.active.nextAll( ".ui-menu-item" ).not( ".ui-state-disabled" ).each(function() { this.active.nextAll( ".ui-menu-item" ).each(function() {
result = $( this ); result = $( this );
return $( this ).offset().top - base - height < 0; return $( this ).offset().top - base - height < 0;
}); });
this.focus( event, result ); this.focus( event, result );
} else { } else {
this.focus( event, this.activeMenu.children( ".ui-menu-item" ).not( ".ui-state-disabled" ) this.focus( event, this.activeMenu.children( ".ui-menu-item" )
[ !this.active ? "first" : "last" ]() ); [ !this.active ? "first" : "last" ]() );
} }
}, },
@ -533,14 +529,14 @@ $.widget( "ui.menu", {
var base = this.active.offset().top, var base = this.active.offset().top,
height = this.element.height(), height = this.element.height(),
result; result;
this.active.prevAll( ".ui-menu-item" ).not( ".ui-state-disabled" ).each(function() { this.active.prevAll( ".ui-menu-item" ).each(function() {
result = $( this ); result = $( this );
return $(this).offset().top - base + height > 0; return $(this).offset().top - base + height > 0;
}); });
this.focus( event, result ); this.focus( event, result );
} else { } else {
this.focus( event, this.activeMenu.children( ".ui-menu-item" ).not( ".ui-state-disabled" ).first() ); this.focus( event, this.activeMenu.children( ".ui-menu-item" ).first() );
} }
}, },