Flipswitch: Transfer tabindex to "on" button and make input unfocusable

The "on" button must be an anchor for it to be focusable just like an input even
when it does not have an explicitly set tabindex. Although the input becomes
unfocusable, a focus handler that transfers focus to the "on" button is
nevertheless attached to it in case third-party code focuses the input manually.

Fixes gh-6955

js/widgets/forms/flipswitch.js

@@ -40,6 +40,18 @@ $.widget( "mobile.flipswitch", $.extend({
 
 			this._handleFormReset();
 
+			// Transfer tabindex to "on" element and make input unfocusable
+			$.extend( this, {
+				_originalTabIndex: this.element.attr( "tabindex" )
+			});
+			if ( this._originalTabIndex != null ) {
+				this.on.attr( "tabindex", this._originalTabIndex );
+			}
+			this.element.attr( "tabindex", "-1" );
+			this._on({
+				"focus" : "_handleInputFocus"
+			});
+
 			if ( this.element.is( ":disabled" ) ) {
 				this._setOptions({
 					"disabled": true
@@ -61,6 +73,11 @@ $.widget( "mobile.flipswitch", $.extend({
 			});
 	},
 
+	_handleInputFocus: function( event ) {
+		$( event.target ).blur();
+		this.on.focus();
+	},
+
 	widget: function() {
 		return this.flipswitch;
 	},
@@ -90,7 +107,11 @@ $.widget( "mobile.flipswitch", $.extend({
 			options = this.options,
 			element = this.element,
 			theme = options.theme ? options.theme : "inherit",
-			on = $( "<span></span>", { tabindex: 1 } ),
+
+			// The "on" button is an anchor so it's focusable
+			on = $( "<a></a>", {
+				"href": "#"
+			}),
 			off = $( "<span></span>" ),
 			type = element.get( 0 ).tagName,
 			onText = ( type === "INPUT" ) ?
@@ -200,6 +221,11 @@ $.widget( "mobile.flipswitch", $.extend({
 		if ( this.options.enhanced ) {
 			return;
 		}
+		if ( this._originalTabIndex != null ) {
+			this.element.attr( "tabindex", this._originalTabIndex );
+		} else {
+			this.element.removeAttr( "tabindex" );
+		}
 		this.on.remove();
 		this.off.remove();
 		this.element.unwrap();