slider switch keyboard access tests Fixes jquery-archive#632

Author: johnbender

js/jquery.mobile.forms.slider.js

@@ -131,16 +131,16 @@ $.widget( "mobile.slider", $.mobile.widget, {
 				var valuenow = $( this ).attr( "aria-valuenow" ),
 					  index;
 
+				if ( self.options.disabled ) {
+					return;
+				}
+
 				// convert switch values to slider
 				if(valuenow.match(/off|on/)){
-					index = switchValues[valuenow];
-				} else {
-					index = window.parseFloat(valuenow, 10);
+					valuenow = switchValues[valuenow];
 				}
 
-				if ( self.options.disabled ) {
-					return;
-				}
+				index = window.parseFloat(valuenow, 10);
 
 				// In all cases prevent the default and mark the handle as active
 				switch ( event.keyCode ) {

tests/unit/slider/index.html

@@ -63,23 +63,27 @@ <h2 id="qunit-userAgent"></h2>
 
 <div id="foo" data-role="page">
 	<div data-role="fieldcontain">
-		<label for="slider-1">Input slider:</label>
 		<input type="range" name="slider-1" id="range-slider-up" value="0" min="0" max="100" data-theme="b" data-track-theme="a" />
 	</div>
 
 	<div data-role="fieldcontain">
-		<label for="slider-1">Input slider:</label>
 		<input type="range" name="slider-1" id="range-slider-down" value="10" min="0" max="100" data-theme="b" data-track-theme="a" />
 	</div>
 
 	<div data-role="fieldcontain">
-		<label for="slider-1">Input slider:</label>
 		<input type="range" name="slider-1" id="range-slider-home" value="75" min="0" max="100" data-theme="b" data-track-theme="a" />
 	</div>
 
 	<div data-role="fieldcontain">
 		<label for="slider-1">Input slider:</label>
 		<input type="range" name="slider-1" id="range-slider-end" value="15" min="0" max="100" data-theme="b" data-track-theme="a" />
 	</div>
+
+	<div data-role="fieldcontain">
+		<select name="slider" id="slider-switch" data-role="slider">
+			<option value="off">Off</option>
+			<option value="on">On</option>
+		</select>
+	</div>
 </div>
 </html>

tests/unit/slider/slider_events.js

@@ -13,9 +13,12 @@
 		expect( opts.keyCodes.length );
 
 		$.each(opts.keyCodes, function(i, elem){
+
+			// stub the keycode value and trigger the keypress
 			$.Event.prototype.keyCode = $.mobile.keyCode[elem];
 			handle.trigger('keydown');
-			val = val + opts.increment;
+
+			val += opts.increment;
 			same(val, window.parseFloat(slider.val(), 10), "new value is one larger");
 		});
 	};
@@ -28,7 +31,7 @@
 		});
 	});
 
-	test( "slider should move right with down, left, and page down keypress", function(){
+	test( "slider should move left with down, left, and page down keypress", function(){
 		keypressTest({
 			selector: '#range-slider-down',
 			keyCodes: ['DOWN', 'LEFT', 'PAGE_DOWN'],
@@ -58,4 +61,47 @@
 			increment: 0 - initialVal
 		});
 	});
+
+
+	// generic switch test function
+	var sliderSwitchTest = function(opts){
+		var slider = $("#slider-switch"),
+			  handle = slider.siblings('.ui-slider').find('a'),
+		    switchValues = {
+					'off' : 0,
+					'on' : 1
+				};
+
+		// One for the select and one for the aria-valuenow
+		expect( opts.keyCodes.length * 2 );
+
+		$.each(opts.keyCodes, function(i, elem){
+			// reset the values
+			slider[0].selectedIndex = switchValues[opts.start];
+			handle.attr({'aria-valuenow' : opts.start });
+
+			// stub the keycode and trigger the event
+			$.Event.prototype.keyCode = $.mobile.keyCode[elem];
+			handle.trigger('keydown');
+
+			same(handle.attr('aria-valuenow'), opts.finish, "handle value is " + opts.finish);
+			same(slider[0].selectedIndex, switchValues[opts.finish], "select input has correct index");
+		});
+	};
+
+	test( "switch should select on with up, right, page up and end", function(){
+		sliderSwitchTest({
+			start: 'off',
+			finish: 'on',
+			keyCodes: ['UP', 'RIGHT', 'PAGE_UP', 'END']
+		});
+	});
+
+	test( "switch should select off with down, left, page down and home", function(){
+		sliderSwitchTest({
+			start: 'on',
+			finish: 'off',
+		  keyCodes: ['DOWN', 'LEFT', 'PAGE_DOWN', 'HOME']
+		});
+	});
 })(jQuery);