Checkboxradio: Add ui-state-highlight class to icon on create

This was already toggled in _toggleClasses, but that isn't called
on create.

2 files changed, 18 insertions, 8 deletions

diff --git a/tests/unit/checkboxradio/options.js b/tests/unit/checkboxradio/options.js
index 1614994c4..56daf7445 100644
--- a/tests/unit/checkboxradio/options.js
+++ b/tests/unit/checkboxradio/options.js
@@ -67,6 +67,9 @@ function assertIcon( checkbox, icon, assert ) {
 	assert.hasClasses( iconElement, "ui-checkboxradio-icon ui-corner-all ui-icon " +
 		"ui-icon-background ui-icon-" + icon,
 		"Icon has proper classes" );
+	if ( icon === "blank" ) {
+		assert.lacksClasses( iconElement, "ui-icon-check ui-state-highlight" );
+	}
 }
 test( "icon - false on init", function() {
 	var checkbox = $( "#checkbox-option-icon" );
@@ -76,36 +79,43 @@ test( "icon - false on init", function() {
 	checkbox.checkboxradio( { icon: false } );
 	assertNoIcon( checkbox );
 } );
-
 test( "icon - default unchecked", function( assert ) {
 	var checkbox = $( "#checkbox-option-icon" );
 
-	expect( 2 );
+	expect( 3 );
 
 	checkbox.checkboxradio();
 	assertIcon( checkbox, false, assert );
 } );
+test( "icon - default checked", function( assert ) {
+	var checkbox = $( "#checkbox-option-icon" ).attr( "checked", true );
+
+	expect( 2 );
+
+	checkbox.checkboxradio();
+	assertIcon( checkbox, "check ui-state-highlight", assert );
+} );
 test( "icon", function( assert ) {
 	var checkbox = $( "#checkbox-option-icon" );
 
-	expect( 8 );
+	expect( 9 );
 
 	checkbox.prop( "checked", true );
 
 	checkbox.checkboxradio();
-	assertIcon( checkbox, "check", assert );
+	assertIcon( checkbox, "check ui-state-highlight", assert );
 
 	checkbox.checkboxradio( "option", "icon", false );
 	assertNoIcon( checkbox );
 
 	checkbox.checkboxradio( "option", "icon", true );
-	assertIcon( checkbox, "check", assert );
+	assertIcon( checkbox, "check ui-state-highlight", assert );
 
 	checkbox.checkboxradio( "option", "icon", false );
 	assertNoIcon( checkbox );
 
-	checkbox.prop( "checked", false ).checkboxradio( "refresh" );
 	checkbox.checkboxradio( "option", "icon", true );
+	checkbox.prop( "checked", false ).checkboxradio( "refresh" );
 	assertIcon( checkbox, false, assert );
 
 } );
diff --git a/ui/widgets/checkboxradio.js b/ui/widgets/checkboxradio.js
index 6bdd858db..769ab146f 100644
--- a/ui/widgets/checkboxradio.js
+++ b/ui/widgets/checkboxradio.js
@@ -226,14 +226,14 @@ $.widget( "ui.checkboxradio", [ $.ui.formResetMixin, {
 			}
 
 			if ( this.type === "checkbox" ) {
-				toAdd += checked ? "ui-icon-check" : "ui-icon-blank";
+				toAdd += checked ? "ui-icon-check ui-state-highlight" : "ui-icon-blank";
 				this._removeClass( this.icon, null, checked ? "ui-icon-blank" : "ui-icon-check" );
 			} else {
 				toAdd += "ui-icon-blank";
 			}
 			this._addClass( this.icon, "ui-checkboxradio-icon", toAdd );
 			if ( !checked ) {
-				this._removeClass( this.icon, null, "ui-icon-check" );
+				this._removeClass( this.icon, null, "ui-icon-check ui-state-highlight" );
 			}
 			this.icon.prependTo( this.label ).after( this.iconSpace );
 		} else if ( this.icon !== undefined ) {