Permalink
Browse files

improved keyboard accessibility and tabindex roving for custom select…

… menus. They were previously semi-keyboard accessible, but the visual feedback was poor, and tabindexes were set in the wrong places. This seems to do the trick, but requesting a a11y overview from @wilto if he has time :) Fixes #3658
  • Loading branch information...
1 parent 896678e commit 99e27a18f6767c3e39cab63fea3ec4b1cf1ac002 scottjehl committed Feb 28, 2012
Showing with 12 additions and 7 deletions.
  1. +12 −7 js/jquery.mobile.forms.select.custom.js
@@ -110,11 +110,16 @@ define( [
// Events for list items
self.list.attr( "role", "listbox" )
- .delegate( ".ui-li>a", "focusin", function() {
- $( this ).attr( "tabindex", "0" );
+ .bind( "focusin", function( e ){
+ $( e.target )
+ .attr( "tabindex", "0" )
+ .trigger( "vmouseover" );
+
})
- .delegate( ".ui-li>a", "focusout", function() {
- $( this ).attr( "tabindex", "-1" );
+ .bind( "focusout", function( e ){
+ $( e.target )
+ .attr( "tabindex", "-1" )
+ .trigger( "vmouseout" );
})
.delegate( "li:not(.ui-disabled, .ui-li-divider)", "click", function( event ) {
@@ -329,7 +334,7 @@ define( [
}, 300);
function focusMenuItem() {
- self.list.find( "." + $.mobile.activeBtnClass ).focus();
+ self.list.find( "." + $.mobile.activeBtnClass + " a" ).focus();
}
if ( menuHeight > screenHeight - 80 || !$.support.scrollTop ) {
@@ -481,11 +486,11 @@ define( [
item.setAttribute(dataIconAttr,dataIcon);
item.className = classes.join(" ");
item.setAttribute('role','option');
- item.setAttribute('tabindex','-1');
+ anchor.setAttribute('tabindex','-1');
item.appendChild(anchor);
fragment.appendChild(item);
}
- fragment.firstChild.setAttribute('tabindex',0);
+
self.list[0].appendChild(fragment);
// Hide header close link for single selects

0 comments on commit 99e27a1

Please sign in to comment.