Permalink
Browse files

Selectmenu: Copy tabindex from native element

Fixes gh-8078
Closes gh-8173
  • Loading branch information...
arschmitz committed Jun 30, 2015
1 parent dcb70ae commit abab8d59daf12ca132e3cad4b7e1d9e9591e7287
@@ -46,7 +46,7 @@
<div data-demo-html="true">
<div class="ui-field-contain">
<label for="select-custom-20">Long list:</label>
<select name="select-custom-20" id="select-custom-20" data-native-menu="false">
<select name="select-custom-20" id="select-custom-20" data-native-menu="false" tabindex="-1">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
@@ -55,6 +55,8 @@ return $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
_create: function() {
var o = this.options;
this._origTabIndex = ( this.element.attr( "tabindex" ) === undefined ) ? false : this.element.attr( "tabindex" );
// Custom selects cannot exist inside popups, so revert the "nativeMenu"
// option to true if a parent is a popup
o.nativeMenu = o.nativeMenu || ( this.element.parents( ":jqmData(role='popup'),:mobile-popup" ).length > 0 );
@@ -282,14 +284,6 @@ return $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
// Create list from select, update state
this.refresh();
if ( this._origTabIndex === undefined ) {
// Map undefined to false, because this._origTabIndex === undefined
// indicates that we have not yet checked whether the select has
// originally had a tabindex attribute, whereas false indicates that
// we have checked the select for such an attribute, and have found
// none present.
this._origTabIndex = ( this.select[ 0 ].getAttribute( "tabindex" ) === null ) ? false : this.select.attr( "tabindex" );
}
this.select.attr( "tabindex", "-1" );
this._on( this.select, { focus: "_handleSelectFocus" } );
@@ -582,9 +576,7 @@ return $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
},
_button: function() {
return this.options.nativeMenu ?
this._super() :
$( "<a>", {
var attributes = {
"href": "#",
"role": "button",
// TODO value is undefined at creation
@@ -593,7 +585,12 @@ return $.widget( "mobile.selectmenu", $.mobile.selectmenu, {
// TODO value is undefined at creation
"aria-owns": this.menuId
} );
};
if ( this._origTabIndex ) {
attributes.tabindex = this._origTabIndex;
}
return this.options.nativeMenu ? this._super() : $( "<a>", attributes );
},
_destroy: function() {
@@ -35,7 +35,7 @@
<div data-nstest-role="content">
<div data-role="fieldcontain">
<label for="enhance-test">Multiple:</label>
<select name="enhance-test" id="enhance-test" multiple="multiple" data-nstest-native-menu="false" data-nstest-overlay-theme="b" data-nstest-theme="x">
<select name="enhance-test" id="enhance-test" multiple="multiple" data-nstest-native-menu="false" data-nstest-overlay-theme="b" data-nstest-theme="x" tabindex="2">
<option>Choose options</option>
<option value="1">The 1st Option</option>
<option value="2" selected="selected">The 2nd Option</option>
@@ -22,9 +22,10 @@ module( "Custom select" );
test( "Custom select is enhanced correctly", function() {
var popup = $( "#enhance-test-listbox" );
deepEqual( $( "#enhance-test-listbox a:first" ).attr( "role" ), "button", "The close button for a multiple choice select popup has the " + '"' + "role='button'" + '"' + " set" );
deepEqual( popup.popup( "option", "overlayTheme" ), "b", "Popup has overlayTheme b" );
deepEqual( popup.popup( "option", "theme" ), "x", "Popup has theme x" );
strictEqual( $( "#enhance-test-listbox a:first" ).attr( "role" ), "button", "The close button for a multiple choice select popup has the " + '"' + "role='button'" + '"' + " set" );
strictEqual( $( "#enhance-test-button" ).attr( "tabindex" ), "2", "Tabindex is correctly copied from select" );
strictEqual( popup.popup( "option", "overlayTheme" ), "b", "Popup has overlayTheme b" );
strictEqual( popup.popup( "option", "theme" ), "x", "Popup has theme x" );
} );

0 comments on commit abab8d5

Please sign in to comment.